CN111897529B - Front-end component conversion method, device, equipment and readable storage medium - Google Patents
Front-end component conversion method, device, equipment and readable storage medium Download PDFInfo
- Publication number
- CN111897529B CN111897529B CN202010511094.4A CN202010511094A CN111897529B CN 111897529 B CN111897529 B CN 111897529B CN 202010511094 A CN202010511094 A CN 202010511094A CN 111897529 B CN111897529 B CN 111897529B
- Authority
- CN
- China
- Prior art keywords
- end component
- component
- target type
- data
- conversion
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000006243 chemical reaction Methods 0.000 title claims abstract description 128
- 238000000034 method Methods 0.000 title claims abstract description 50
- 238000004590 computer program Methods 0.000 claims description 23
- 238000013507 mapping Methods 0.000 claims description 10
- 238000004458 analytical method Methods 0.000 claims description 6
- 238000011426 transformation method Methods 0.000 claims 1
- 238000011161 development Methods 0.000 abstract description 12
- 230000006872 improvement Effects 0.000 description 12
- 230000006870 function Effects 0.000 description 7
- 238000010276 construction Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000000712 assembly Effects 0.000 description 3
- 238000000429 assembly Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000005457 optimization Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a front-end component conversion method, a device, equipment and a readable storage medium, wherein the method comprises the following steps: receiving front-end component determining information sent by a user through a client; the front-end component determining information is used for indicating the front-end component required by a user; acquiring a front-end component determined by a user according to the front-end component determination information; judging whether a target type front-end component corresponding to the front-end component exists locally or not; if not, reading front-end component data of a front-end component which is locally pre-stored, and converting the front-end component data into a target type component file format based on a preset component data conversion rule so as to obtain target type front-end component data; and generating the target type front-end component according to the target type front-end component data. The invention can increase the frame type of the front end assembly suitable for the front end scaffold, and can accelerate the development efficiency of the front end scaffold and reduce the development cost.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a readable storage medium for front end component conversion.
Background
The front-end engineering scaffold on the market is various in variety, and is a solution provided by various large manufacturers for solving the problem of rapid construction of the front-end engineering by developers, for example, three front-end frameworks of Angular, react and Vue are currently used as the front-end engineering scaffold. The front-end components may be UI components or bottom-layer components, and the frame types of the front-end components applicable to different front-end scaffolds are also different (for example, some front-end scaffolds only aim at the UI components of the Angular frame type, and some only aim at the UI components of the Vue frame type). Thus, the current front end scaffolds have limited types of frames for the front end assemblies, resulting in limited types of frames for the front end assemblies that may be used with the front end scaffolds. If the front-end scaffold is to be suitable for front-end components of different frame types, manual work is required to perform corresponding configuration optimization on the front-end components and the front-end scaffold at present, so that a large number of developers are required to input into the configuration optimization process, which results in longer whole development period and higher development cost.
Disclosure of Invention
The embodiment of the invention provides a front-end assembly conversion method, a device, equipment and a readable storage medium, which can increase the frame types of the front-end assemblies applicable to a front-end scaffold, accelerate the development efficiency of the front-end scaffold and reduce the development cost.
An embodiment of the present invention provides a front-end module conversion method, which includes:
receiving front-end component determining information sent by a user through a client; the front-end component determining information is used for indicating the front-end component required by a user;
acquiring a front-end component determined by a user according to the front-end component determination information;
judging whether a target type front-end component corresponding to the front-end component exists locally or not; the front end frame type applicable to the front end assembly is different from the front end frame type applicable to the target type front end assembly;
if not, reading front-end component data of a front-end component which is locally pre-stored, and converting the front-end component data into a target type component file format based on a preset component data conversion rule so as to obtain target type front-end component data;
and generating the target type front-end component according to the target type front-end component data.
As an improvement of the foregoing solution, before the determining the front-end component selected by the user according to the front-end component type information input by the user, the method further includes:
receiving a front-end component query instruction sent by a user through a client;
inquiring all front-end components locally pre-stored according to the front-end component inquiring instruction;
and returning the query result of the front-end component to the client so that the client displays the query result of the front-end component on a display interface of the client in the form of front-end component options for selection by a user.
As an improvement of the scheme, the front-end component is a UI component.
As an improvement of the above solution, the target type front-end component is a Vue type UI component.
As an improvement of the above solution, the reading front end component data of a front end component stored locally and converting the front end component data into a target type component file format based on a preset component data conversion rule to obtain target type front end component data includes:
reading front-end component data of a front-end component pre-stored locally;
acquiring a preset component data conversion rule table corresponding to the front-end component; wherein the component data conversion rule table includes: a UI instruction conversion table and a UI component method conversion table; the UI instruction conversion table comprises mapping relations between each instruction of the front-end component and each instruction of the target type front-end component, which are determined by a user, on instruction conversion; the UI component method conversion table comprises mapping relations between all keywords of the front-end component and all keywords of the target type front-end component, which are determined by a user, on keyword conversion;
and converting the format of each keyword of the front-end component into the format of the keyword corresponding to the target type front-end component according to the UI component method conversion table, converting the format of each instruction of the front-end component into the format of the instruction corresponding to the target type front-end component according to the UI instruction conversion table, and converting the format of the rest data of the front-end component into the file format of the target type component so as to obtain the target type front-end component data.
As an improvement of the above solution, the determining whether there is a target type front end component corresponding to the front end component locally includes:
acquiring a preset UI object table corresponding to the front-end component; the UI object table comprises records of whether a front-end component has a target type front-end component corresponding to the front-end component or not;
and judging whether the target type front-end component corresponding to the front-end component exists locally according to the UI object table.
As an improvement of the foregoing solution, if there is no target type front-end component corresponding to the front-end component locally, after the generating the target type front-end component according to the target type front-end component data, the method further includes:
and adding records of the front-end component with the target type front-end component in the UI object table corresponding to the front-end component.
Another embodiment of the present invention correspondingly provides a front-end module conversion device, which includes:
the information receiving module is used for receiving front-end component determination information sent by a user through a client; the front-end component determining information is used for indicating the front-end component required by a user;
the information analysis module is used for acquiring the front-end assembly determined by the user according to the front-end assembly determination information;
the judging module is used for judging whether the target type front-end component corresponding to the front-end component exists locally or not; the front end frame type applicable to the front end assembly is different from the front end frame type applicable to the target type front end assembly;
the module data conversion module is used for reading the front-end module data of the front-end module which is locally pre-stored, and converting the front-end module data into a target type module file format based on a preset module data conversion rule so as to obtain target type front-end module data;
and the component frame generation module is used for generating the target type front-end component according to the target type front-end component data.
Another embodiment of the present invention provides a front end component conversion device, including a processor, a memory, and a computer program stored in the memory and configured to be executed by the processor, where the processor executes the computer program to implement the front end component conversion method according to the embodiment of the present invention.
Another embodiment of the present invention provides a storage medium, where the computer readable storage medium includes a stored computer program, where when the computer program runs, the device where the computer readable storage medium is controlled to execute the front end component conversion method described in the foregoing embodiment of the present invention.
Compared with the prior art, one of the technical schemes has the following advantages:
when a developer selects a corresponding front-end component to construct a front-end project through a front-end scaffold at a client, front-end component conversion equipment judges whether a target type front-end component corresponding to the front-end component exists locally or not; the front end frame type applicable to the front end assembly is different from the front end frame type applicable to the target type front end assembly; if not, reading front-end component data of a front-end component which is locally pre-stored, and converting the front-end component data into a target type component file format based on a preset component data conversion rule so as to obtain target type front-end component data; and finally, generating a target type front-end component according to the target type front-end component data, wherein the target type front-end component can be suitable for the front-end scaffold of the current type, so that the current front-end component can be finally suitable for the front-end scaffold of the current type. As can be seen from the above analysis, some embodiments of the present invention can increase the frame types of the front end components applicable to the front end scaffold, so that the frame types of the front end components that can be selected for the front end scaffold are also increased, and thus, the front end components and the front end scaffold do not need to be configured and optimized correspondingly by manual pairing, thereby also accelerating the development efficiency of the front end scaffold and reducing the development cost. Of course, it is not necessary for any one product to practice the invention to achieve all of the advantages set forth above at the same time.
Drawings
FIG. 1 is a flow chart of a front end module conversion method according to an embodiment of the present invention;
FIG. 2 illustrates a process for front end component conversion provided by an embodiment of the present invention;
FIG. 3a is a UI object table provided by an embodiment of the invention;
FIG. 3b is a UI instruction conversion table according to one embodiment of the present invention;
FIG. 3c is a UI component method conversion table according to one embodiment of the invention;
FIG. 4 illustrates an example UI component transformation provided by an embodiment of the invention;
FIG. 5 illustrates a code format for UI component transformation provided by an embodiment of the invention;
FIG. 6 is a schematic diagram of a front end module conversion device according to an embodiment of the present invention;
fig. 7 is a schematic structural diagram of a front-end module conversion device according to an embodiment of the present invention.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
Referring to fig. 1, a flow chart of a front-end module conversion method according to an embodiment of the invention is shown. The front-end component conversion method is executed by front-end component conversion equipment, and the front-end component conversion equipment can be a server, a personal computer and the like. The front-end component conversion method comprises the following steps:
s10, receiving front-end component determination information sent by a user through a client; the front-end component determining information is used for indicating the front-end component required by a user;
specifically, referring to fig. 2, the front-end component conversion device 2 establishes a communication connection with the client 1, and the user may perform a front-end component determination operation on the client, and the client may generate corresponding front-end component determination information according to the operation of the user. For example, the front-end component determining operation may be that the user inputs the name of the front-end component that the user wants to select to the client through a keyboard, or the client displays options of various front-end components, and then the user clicks to select the front-end component that the user wants to select through a mouse or a touch screen.
It is to be understood that the client may be a computer, a tablet computer, a smart phone, or the like, which is not particularly limited herein. Wherein a user can select a corresponding front-end component to construct a front-end project at a client through its running front-end scaffolding.
S11, acquiring a front-end component determined by a user according to the front-end component determination information;
after receiving the front-end component determining information, the front-end component conversion equipment can acquire the front-end component required by the user according to the front-end component determining information;
s12, judging whether a target type front-end component corresponding to the front-end component exists locally; the front end frame type applicable to the front end assembly is different from the front end frame type applicable to the target type front end assembly;
wherein the target type front-end component may be a front-end scaffold adapted to be currently being built in a participating front-end project. Referring to fig. 2, when the front end component conversion device knows the front end component desired by the user, it may first determine whether the front end frame type of the front end component matches the front end frame type of the target, and if so, may directly call the front end component. If not, judging whether the front-end component conversion equipment is locally configured with a target type front-end component corresponding to the front-end component; if yes, the method indicates that the target type front-end component corresponding to the front-end component can be directly called to participate in the construction of the front-end project; if not, the front-end component is indicated as not being directly called to participate in the construction of the front-end project.
Referring to fig. 2, taking the front end component as an example of a UI component, wherein the current front end scaffold is a front end scaffold of a Vue frame, and the scaffold is only applicable to a Vue type UI component, and then the target type front end component is a Vue type UI component; if the UI component selected by the user is an Angular type UI component, the UI component selected by the user is not suitable for the current front-end scaffold, and whether a Vue type UI component corresponding to the Angular type UI component exists locally or not is judged; if yes, indicating that the local is a UI component of the Vue type converted by the UI component of the Angular type, and directly using the UI component of the Vue type to participate in the construction of the front-end project at the moment; if not, the UI component of the Angular type cannot directly participate in the construction of the front-end project, and the UI component needs to be converted into the UI component of the Vue type. It can be appreciated that if the UI component determined by the user is a Vue type UI component, the UI component can be directly invoked to participate in the construction of the front-end project.
It can be appreciated that the target type front-end component may be preset locally, or may be saved after the related front-end component is converted last time.
It should be noted that the front-end component may also be a front-end bottom component. The underlying components refer to some components other than the UI components of the front end, for example, may be some components related to the functional implementation of the UI components (e.g., a request-function implementation component related to a request-to-send button component of the UI interface for interacting with the back end to implement the request function of the request-to-send button component).
S13, if not, reading front-end component data of a front-end component which is locally pre-stored, and converting the front-end component data into a target type component file format based on a preset component data conversion rule so as to obtain target type front-end component data;
wherein the front-end component conversion device may be front-end component data in which various front-end components are stored. When the front-end component conversion device reads the front-end component data of the front-end component, the file format of the front-end component data is converted into the file format of the front-end component of the target type, so that the front-end component data of the front-end component of the target type after conversion is finally obtained. For example, the JAVA code format of the front-end component may be converted to the object code format.
Specifically, the reading of the local front-end component data may be by adopting the following data reading manner: 1. converting the file into a file object stored in a memory through JAVA language; 2. converting the object into a file input stream; the file input stream is converted into an array of string bytes.
S14, generating the target type front-end component according to the target type front-end component data.
After the target type front end component data is obtained, a target type front end component may be generated from the data.
In the embodiment of the invention, when a developer selects a corresponding front-end component to construct a front-end project through a front-end scaffold at a client, front-end component conversion equipment judges whether a target type front-end component corresponding to the front-end component exists locally or not; the front end frame type applicable to the front end assembly is different from the front end frame type applicable to the target type front end assembly; if not, reading front-end component data of a front-end component which is locally pre-stored, and converting the front-end component data into a target type component file format based on a preset component data conversion rule so as to obtain target type front-end component data; and finally, generating a target type front-end component according to the target type front-end component data, wherein the target type front-end component can be suitable for the front-end scaffold of the current type, so that the current front-end component can be finally suitable for the front-end scaffold of the current type. As can be seen from the above analysis, some embodiments of the present invention can increase the frame types of the front end components applicable to the front end scaffold, so that the frame types of the front end components that can be selected for the front end scaffold are also increased, and thus, the front end components and the front end scaffold do not need to be configured and optimized correspondingly by manual pairing, thereby also accelerating the development efficiency of the front end scaffold and reducing the development cost.
In this embodiment, the front-end component is, for example, an HTML5 front-end component.
Illustratively, prior to said step S10, the method further comprises:
s7, receiving a front-end component query instruction sent by a user through a client;
s8, according to the front-end component query instruction, querying all the front-end components locally pre-stored;
and S9, returning the query result of the front-end component to the client so that the client displays the query result of the front-end component on a display interface of the client in the form of front-end component options for selection by a user.
In this embodiment, referring to fig. 2, a user may send a related front-end component query instruction through a client to query various types of front-end components stored in the front-end component conversion device, and finally display the front-end components in the form of options on a display interface of the client for the user to select.
When a user selects a front-end component, the client sends the front-end component determining information to the front-end component conversion device, where the information includes the address of the front-end component selected by the user stored in the device and some other data (for example, the front-end component name can be used to obtain the front-end component selected by the user), and then the device can obtain the front-end component data of the corresponding front-end component through the address in the information.
In some of the above embodiments, the step S13 specifically includes:
s130, if not, reading front end component data of a front end component which is locally pre-stored;
s131, acquiring a preset component data conversion rule table corresponding to the front-end component; wherein the component data conversion rule table includes: a UI instruction conversion table and a UI component method conversion table; the UI instruction conversion table comprises mapping relations between each instruction of the front-end component and each instruction of the target type front-end component, which are determined by a user, on instruction conversion; the UI component method conversion table comprises mapping relations between all keywords of the front-end component and all keywords of the target type front-end component, which are determined by a user, on keyword conversion;
specifically, the method for obtaining the preset component data conversion rule table corresponding to the UI component may be: and determining the unique identification of the UI component, and reading the related component data conversion rule table of the UI component from a local database through the unique identification and the data storage address.
Further, for example, referring to fig. 3b, the relevant instruction of the corresponding front-end component represented by the instruction in the UI instruction conversion table, for example, the instruction of the UI component of the angular type is an instruction of a UI component of the v-if type. Wherein, the UI instruction conversion table records the corresponding values of each instruction on conversion in Vue, angular, react frames; referring to fig. 3c, the component method conversion table records values corresponding in conversion between keywords of respective UI components in Vue, angular, react frames.
S132, converting the format of each keyword of the front-end component into the format of the keyword corresponding to the target type front-end component according to the UI component method conversion table, converting the format of each instruction of the front-end component into the format of the instruction corresponding to the target type front-end component according to the UI instruction conversion table, and converting the format of the rest data of the front-end component into the file format of the target type component (for example, performing some conventional code format conversion between the data) so as to obtain the data of the target type front-end component.
For example, referring to fig. 3c, the component method conversion table has several fields Vue and angullar and act, in which the meaning of the fields is that the key of angullar is ngOnInit, and the key of Vue is that of created, and the corresponding relationship of the keys of multiple UI components in each frame can be read through the unique identifier of the UI component. Thus, it is possible to know how the keyword of the current type is converted into the keyword of Vue if it is angular, and how it is converted into the keyword of Vue if it is exact. Thus, the file finally output in the Vue format represents the completion of the key conversion in the code.
By way of example, the manner in which an Angular UI component is converted to a Vue UI component is shown in fig. 4. Wherein, the code format of the Angular UI component is converted into the code format of the Vue UI component as shown in fig. 5.
In some of the above embodiments, further, the step S12 includes:
s120, acquiring a preset UI object table corresponding to the front-end component; the UI object table comprises records of whether a front-end component has a target type front-end component corresponding to the front-end component or not;
s121, judging whether the target type front-end component corresponding to the front-end component exists locally according to the UI object table.
If the UI object table contains records of front-end components with target types corresponding to the front-end components, judging that the front-end components with the target types corresponding to the front-end components are locally available; otherwise, determining that the target type front-end component corresponding to the front-end component does not exist locally.
In addition, as shown in fig. 3a, the UI object table may also record unique identifications of corresponding UI components, through which the unique identifications of the respective UI components can be known, and through which the related component data conversion rule table can be acquired.
By way of example, it is determined whether there is a record of a target type front-end component in the UI object table that the front-end component corresponds to by:
acquiring a field of a frame belonging to a UI object table of the front-end component which is locally pre-stored;
judging whether the field of the frame to which the target type front-end component belongs has a frame keyword.
For example, as shown in FIG. 3a, there are Vue frame keys in the UI object table that relate to target type front end components (i.e., vue components).
In some embodiments of the foregoing, further, if the field of the belonging frame does not have a key of the target type front-end component, after the step S15, the method further includes:
s16, adding records of the front-end component with the target type front-end component in the UI object table corresponding to the front-end component.
In this embodiment, after the target type front-end component is generated, by making the record, when the record is known later, the corresponding target type front-end component can be directly called.
By way of example, the record may be added by:
as shown in fig. 3a, a frame key for the target type front end component is added to the UI object table of the front end component.
Referring to fig. 6, a schematic structural diagram of a front end module conversion device according to an embodiment of the invention is shown.
The device comprises:
the information receiving module 10 is configured to receive front-end component determination information sent by a user through a client; the front-end component determining information is used for indicating the front-end component required by a user;
the information analysis module 11 is configured to learn, according to the front-end component determination information, a front-end component determined by a user;
a judging module 12, configured to judge whether a target type front end component corresponding to the front end component exists locally; the front end frame type applicable to the front end assembly is different from the front end frame type applicable to the target type front end assembly;
the component data conversion module 13 is configured to read front-end component data of a front-end component that is locally pre-stored, and convert the front-end component data into a target type component file format based on a preset component data conversion rule, so as to obtain target type front-end component data;
the component framework generating module 14 is configured to generate a target type front-end component according to the target type front-end component data.
In the embodiment of the invention, when a developer selects a corresponding front-end component to construct a front-end project through a front-end scaffold at a client, front-end component conversion equipment judges whether a target type front-end component corresponding to the front-end component exists locally or not; the front end frame type applicable to the front end assembly is different from the front end frame type applicable to the target type front end assembly; if not, reading front-end component data of a front-end component which is locally pre-stored, and converting the front-end component data into a target type component file format based on a preset component data conversion rule so as to obtain target type front-end component data; and finally, generating a target type front-end component according to the target type front-end component data, wherein the target type front-end component can be suitable for the front-end scaffold of the current type, so that the current front-end component can be finally suitable for the front-end scaffold of the current type. As can be seen from the above analysis, some embodiments of the present invention can increase the frame types of the front end components applicable to the front end scaffold, so that the frame types of the front end components that can be selected for the front end scaffold are also increased, and thus, the front end components and the front end scaffold do not need to be configured and optimized correspondingly by manual pairing, thereby also accelerating the development efficiency of the front end scaffold and reducing the development cost.
As an improvement of the above solution, the apparatus further comprises:
the inquiry instruction receiving module is used for receiving a front-end component inquiry instruction sent by a user through a client;
the query module is used for querying all the front-end components which are locally pre-stored according to the front-end component query instruction;
and the sending module is used for returning the query result of the front-end component to the client so that the client displays the query result of the front-end component on a display interface of the client in the form of front-end component options for selection by a user.
As an improvement of the scheme, the front-end component is a UI component.
As an improvement of the above solution, the target type front-end component is a Vue type UI component.
As an improvement of the above solution, the component data conversion module is specifically configured to:
if not, reading front-end component data of a front-end component which is locally pre-stored;
acquiring a preset component data conversion rule table corresponding to the front-end component; wherein the component data conversion rule table includes: a UI instruction conversion table and a UI component method conversion table; the UI instruction conversion table comprises mapping relations between each instruction of the front-end component and each instruction of the target type front-end component, which are determined by a user, on instruction conversion; the UI component method conversion table comprises mapping relations between all keywords of the front-end component and all keywords of the target type front-end component, which are determined by a user, on keyword conversion;
and converting the format of each keyword of the front-end component into the format of the keyword corresponding to the target type front-end component according to the UI component method conversion table, converting the format of each instruction of the front-end component into the format of the instruction corresponding to the target type front-end component according to the UI instruction conversion table, and converting the format of the rest data of the front-end component into the file format of the target type component so as to obtain the target type front-end component data.
As an improvement of the above solution, the judging module is specifically configured to:
acquiring a preset UI object table corresponding to the front-end component; the UI object table comprises records of whether a front-end component has a target type front-end component corresponding to the front-end component or not;
and judging whether the target type front-end component corresponding to the front-end component exists locally according to the UI object table.
As an improvement of the foregoing solution, if there is no target type front-end component corresponding to the front-end component locally, the apparatus further includes:
and the record adding module is used for adding the record of the front-end component with the target type front-end component in the UI object table corresponding to the front-end component.
Referring to fig. 7, a schematic diagram of a front end module conversion device according to an embodiment of the present invention is provided. The front end component converting apparatus of this embodiment includes: a processor 100, a memory 101, and a computer program stored in the memory and executable on the processor, such as a front end component conversion program. The steps of the above-described embodiments of the front-end component conversion method are implemented by the processor when executing the computer program. Alternatively, the processor may implement the functions of the modules/units in the above-described device embodiments when executing the computer program.
The computer program may be divided into one or more modules/units, which are stored in the memory and executed by the processor to accomplish the present invention, for example. The one or more modules/units may be a series of computer program instruction segments capable of performing specific functions for describing the execution of the computer program in the front-end component conversion device.
The front-end component conversion device can be a computing device such as a desktop computer, a notebook computer, a cloud server and the like. The front end component conversion device may include, but is not limited to, a processor, a memory. It will be appreciated by those skilled in the art that the schematic diagram is merely an example of a front-end component conversion device and is not limiting of the front-end component conversion device, and may include more or fewer components than shown, or may combine certain components, or different components, e.g., the front-end component conversion device may also include input-output devices, network access devices, buses, etc.
The processor may be a central processing unit (Central Processing Unit, CPU), other general purpose processors, digital signal processors (Digital Signal Processor, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), off-the-shelf programmable gate arrays (Field-Programmable Gate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or the like. The general purpose processor may be a microprocessor or the processor may be any conventional processor or the like, which is a control center of the front end component converting apparatus, and which connects the various parts of the overall front end component converting apparatus using various interfaces and lines.
The memory may be used to store the computer program and/or module, and the processor may implement various functions of the front-end component conversion device by running or executing the computer program and/or module stored in the memory and invoking data stored in the memory. The memory may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program (such as a sound playing function, an image playing function, etc.) required for at least one function, and the like; the storage data area may store data (such as audio data, phonebook, etc.) created according to the use of the handset, etc. In addition, the memory may include high-speed random access memory, and may also include non-volatile memory, such as a hard disk, memory, plug-in hard disk, smart Media Card (SMC), secure Digital (SD) Card, flash Card (Flash Card), at least one disk storage device, flash memory device, or other volatile solid-state storage device.
Wherein the front-end component conversion device integrated modules/units, if implemented in the form of software functional units and sold or used as stand-alone products, may be stored in a computer readable storage medium. Based on such understanding, the present invention may implement all or part of the flow of the method of the above embodiment, or may be implemented by a computer program to instruct related hardware, where the computer program may be stored in a computer readable storage medium, and when the computer program is executed by a processor, the computer program may implement the steps of each of the method embodiments described above. Wherein the computer program comprises computer program code which may be in source code form, object code form, executable file or some intermediate form etc. The computer readable medium may include: any entity or device capable of carrying the computer program code, a recording medium, a U disk, a removable hard disk, a magnetic disk, an optical disk, a computer Memory, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), an electrical carrier signal, a telecommunications signal, a software distribution medium, and so forth. It should be noted that the computer readable medium contains content that can be appropriately scaled according to the requirements of jurisdictions in which such content is subject to legislation and patent practice, such as in certain jurisdictions in which such content is subject to legislation and patent practice, the computer readable medium does not include electrical carrier signals and telecommunication signals.
It should be noted that the above-described apparatus embodiments are merely illustrative, and the units described as separate units may or may not be physically separate, and units shown as units may or may not be physical units, may be located in one place, or may be distributed over a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. In addition, in the drawings of the embodiment of the device provided by the invention, the connection relation between the modules represents that the modules have communication connection, and can be specifically implemented as one or more communication buses or signal lines. Those of ordinary skill in the art will understand and implement the present invention without undue burden.
While the foregoing is directed to the preferred embodiments of the present invention, it will be appreciated by those skilled in the art that changes and modifications may be made without departing from the principles of the invention, such changes and modifications are also intended to be within the scope of the invention.
Claims (8)
1. A front end component conversion method, comprising:
receiving front-end component determining information sent by a user through a client; the front-end component determining information is used for indicating the front-end component required by a user;
acquiring a front-end component determined by a user according to the front-end component determination information;
judging whether a target type front-end component corresponding to the front-end component exists locally or not; the front end frame type applicable to the front end assembly is different from the front end frame type applicable to the target type front end assembly;
if not, reading front-end component data of a front-end component which is locally pre-stored, and converting the front-end component data into a target type component file format based on a preset component data conversion rule so as to obtain target type front-end component data;
generating a target type front-end component according to the target type front-end component data;
wherein the front-end component is a UI component;
the reading the front end component data of the front end component pre-stored locally, and converting the front end component data into a target type component file format based on a preset component data conversion rule, so as to obtain target type front end component data, including:
reading front-end component data of a front-end component pre-stored locally;
acquiring a preset component data conversion rule table corresponding to the front-end component; wherein the component data conversion rule table includes: a UI instruction conversion table and a UI component method conversion table; the UI instruction conversion table comprises mapping relations between each instruction of the front-end component and each instruction of the target type front-end component, which are determined by a user, on instruction conversion; the UI component method conversion table comprises mapping relations between all keywords of the front-end component and all keywords of the target type front-end component, which are determined by a user, on keyword conversion;
and converting the format of each keyword of the front-end component into the format of the keyword corresponding to the target type front-end component according to the UI component method conversion table, converting the format of each instruction of the front-end component into the format of the instruction corresponding to the target type front-end component according to the UI instruction conversion table, and converting the format of the rest data of the front-end component into the file format of the target type component so as to obtain the target type front-end component data.
2. The front-end component converting method according to claim 1, wherein before determining the front-end component selected by the user based on the front-end component determination information input by the user, the method further comprises:
receiving a front-end component query instruction sent by a user through a client;
inquiring all front-end components locally pre-stored according to the front-end component inquiring instruction;
and returning the query result of the front-end component to the client so that the client displays the query result of the front-end component on a display interface of the client in the form of front-end component options for selection by a user.
3. The front-end component transformation method of claim 1, wherein the target type front-end component is a Vue type UI component.
4. The method for converting a front-end component according to claim 1, wherein said determining whether there is a target type front-end component corresponding to the front-end component locally comprises:
acquiring a preset UI object table corresponding to the front-end component; the UI object table comprises records of whether a front-end component has a target type front-end component corresponding to the front-end component or not;
and judging whether the target type front-end component corresponding to the front-end component exists locally according to the UI object table.
5. The front-end component conversion method of claim 4, wherein if there is no target type front-end component corresponding to the front-end component locally, after the generating a target type front-end component from the target type front-end component data, the method further comprises:
and adding records of the front-end component with the target type front-end component in the UI object table corresponding to the front-end component.
6. A front end module conversion apparatus, comprising:
the information receiving module is used for receiving front-end component determination information sent by a user through a client; the front-end component determining information is used for indicating the front-end component required by a user;
the information analysis module is used for acquiring the front-end assembly determined by the user according to the front-end assembly determination information;
the judging module is used for judging whether the target type front-end component corresponding to the front-end component exists locally or not; the front end frame type applicable to the front end assembly is different from the front end frame type applicable to the target type front end assembly;
the module data conversion module is used for reading the front-end module data of the front-end module which is locally pre-stored, and converting the front-end module data into a target type module file format based on a preset module data conversion rule so as to obtain target type front-end module data;
the component frame generation module is used for generating a target type front-end component according to the target type front-end component data;
wherein the front-end component is a UI component;
the component data conversion module is specifically used for:
if not, reading front-end component data of a front-end component which is locally pre-stored;
acquiring a preset component data conversion rule table corresponding to the front-end component; wherein the component data conversion rule table includes: a UI instruction conversion table and a UI component method conversion table; the UI instruction conversion table comprises mapping relations between each instruction of the front-end component and each instruction of the target type front-end component, which are determined by a user, on instruction conversion; the UI component method conversion table comprises mapping relations between all keywords of the front-end component and all keywords of the target type front-end component, which are determined by a user, on keyword conversion;
and converting the format of each keyword of the front-end component into the format of the keyword corresponding to the target type front-end component according to the UI component method conversion table, converting the format of each instruction of the front-end component into the format of the instruction corresponding to the target type front-end component according to the UI instruction conversion table, and converting the format of the rest data of the front-end component into the file format of the target type component so as to obtain the target type front-end component data.
7. A front-end component conversion apparatus comprising a processor, a memory, and a computer program stored in the memory and configured to be executed by the processor, the processor implementing the front-end component conversion method according to any one of claims 1 to 5 when executing the computer program.
8. A computer readable storage medium, characterized in that the computer readable storage medium comprises a stored computer program, wherein the computer program when run controls a device in which the computer readable storage medium is located to perform the front-end component conversion method according to any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010511094.4A CN111897529B (en) | 2020-06-08 | 2020-06-08 | Front-end component conversion method, device, equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010511094.4A CN111897529B (en) | 2020-06-08 | 2020-06-08 | Front-end component conversion method, device, equipment and readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111897529A CN111897529A (en) | 2020-11-06 |
| CN111897529B true CN111897529B (en) | 2023-11-14 |
Family
ID=73207334
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010511094.4A Active CN111897529B (en) | 2020-06-08 | 2020-06-08 | Front-end component conversion method, device, equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111897529B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113407255A (en) * | 2021-06-16 | 2021-09-17 | 上海微盟企业发展有限公司 | Component calling method and device and computer readable storage medium |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101512503A (en) * | 2005-04-29 | 2009-08-19 | 微软公司 | XML application framework |
| WO2018149373A1 (en) * | 2017-02-16 | 2018-08-23 | 平安科技（深圳）有限公司 | File interaction method and system, and terminal device and medium |
| CN109376166A (en) * | 2018-08-20 | 2019-02-22 | 中国平安财产保险股份有限公司 | Script conversion method, device, computer equipment and storage medium |
| CN110069248A (en) * | 2019-03-16 | 2019-07-30 | 平安城市建设科技(深圳)有限公司 | Call method, device, equipment and the computer readable storage medium of interface data |
| CN110069312A (en) * | 2019-04-26 | 2019-07-30 | 北京三快在线科技有限公司 | A kind of method and device of UI component Configuration and generation UI Component Gallery |
| US10423396B1 (en) * | 2018-05-04 | 2019-09-24 | Salesforce.Com, Inc. | Transforming non-apex code to apex code |
| CN110535740A (en) * | 2019-08-29 | 2019-12-03 | 华人运通(江苏)技术有限公司 | Signal processing method, device, storage medium and terminal |
| CN110968319A (en) * | 2019-12-24 | 2020-04-07 | 平安普惠企业管理有限公司 | Method, device and computer equipment for converting H5 project into Vue framework |
| CN111241454A (en) * | 2020-01-21 | 2020-06-05 | 优信拍（北京）信息科技有限公司 | Method, system and device for generating webpage code |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20150069917A (en) * | 2013-12-16 | 2015-06-24 | 삼성전자주식회사 | Image forming system, method for controlling image forming apparatus using messenger application of mobile device, and mobile device for performing thereof |
| US10031766B2 (en) * | 2016-03-08 | 2018-07-24 | Mastercard International Incorporated | Systems and methods for processing extensible markup language data during runtime |
-
2020
- 2020-06-08 CN CN202010511094.4A patent/CN111897529B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101512503A (en) * | 2005-04-29 | 2009-08-19 | 微软公司 | XML application framework |
| WO2018149373A1 (en) * | 2017-02-16 | 2018-08-23 | 平安科技（深圳）有限公司 | File interaction method and system, and terminal device and medium |
| US10423396B1 (en) * | 2018-05-04 | 2019-09-24 | Salesforce.Com, Inc. | Transforming non-apex code to apex code |
| CN109376166A (en) * | 2018-08-20 | 2019-02-22 | 中国平安财产保险股份有限公司 | Script conversion method, device, computer equipment and storage medium |
| CN110069248A (en) * | 2019-03-16 | 2019-07-30 | 平安城市建设科技(深圳)有限公司 | Call method, device, equipment and the computer readable storage medium of interface data |
| CN110069312A (en) * | 2019-04-26 | 2019-07-30 | 北京三快在线科技有限公司 | A kind of method and device of UI component Configuration and generation UI Component Gallery |
| CN110535740A (en) * | 2019-08-29 | 2019-12-03 | 华人运通(江苏)技术有限公司 | Signal processing method, device, storage medium and terminal |
| CN110968319A (en) * | 2019-12-24 | 2020-04-07 | 平安普惠企业管理有限公司 | Method, device and computer equipment for converting H5 project into Vue framework |
| CN111241454A (en) * | 2020-01-21 | 2020-06-05 | 优信拍（北京）信息科技有限公司 | Method, system and device for generating webpage code |
Non-Patent Citations (1)
| Title |
|---|
| 基于规则获取与制导的iOS到Android应用UI转换研究;裴俊宇;《中国优秀硕士学位论文全文数据库信息科技辑》(第7期);I138-655 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111897529A (en) | 2020-11-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7581047B2 (en) | Usage of keyboard driver in extensible firmware interface for adding new hot keys at firmware level | |
| CN110489440B (en) | Data query method and device | |
| CN113268336B (en) | Service acquisition method, device, equipment and readable medium | |
| CN111562953A (en) | Interface calling method and device, computer device and readable storage medium | |
| CN111897529B (en) | Front-end component conversion method, device, equipment and readable storage medium | |
| CN112667631B (en) | Automatic editing method, device, equipment and storage medium for business field | |
| CN110619204A (en) | Invitation code generation method and device, terminal equipment and storage medium | |
| CN114443905A (en) | Interface document updating method and device, electronic equipment and readable storage medium | |
| CN112199404A (en) | Report creating method and device, electronic equipment and computer readable storage medium | |
| WO2023131263A1 (en) | Group member adding method and apparatus, device, and medium | |
| CN116049215A (en) | Method, device, electronic equipment and medium for inquiring options | |
| CN112380828A (en) | PDF document generation method and device, storage medium and electronic equipment | |
| CN113704281A (en) | Data format conversion method and device, storage medium and electronic equipment | |
| CN114371866A (en) | Version reconfiguration test method, device and equipment of service system | |
| CN108334394B (en) | Multi-language processing method and device for basic data of multi-language software system | |
| CN112650763A (en) | Configuration method of product quota, related equipment and storage medium | |
| CN107509195B (en) | Data transmission method and device, terminal and readable storage medium | |
| CN112199428B (en) | Application management system, method and terminal equipment of functional data block | |
| CN111737372A (en) | Map data generation method and device | |
| US12050883B2 (en) | Interaction information processing method and apparatus, device, and medium | |
| CN114070659B (en) | Equipment locking method and device and terminal equipment | |
| CN112416401B (en) | Data updating method, device and equipment | |
| CN113704320B (en) | Data processing method, device, electronic equipment and storage medium | |
| CN111081253B (en) | Voice processing method, device and system | |
| CN111026650B (en) | Method and device for testing software, storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| PP01 | Preservation of patent right |
Effective date of registration: 20240222 Granted publication date: 20231114 |
|
| PP01 | Preservation of patent right |