CN111897529A - 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
- CN111897529A CN111897529A CN202010511094.4A CN202010511094A CN111897529A CN 111897529 A CN111897529 A CN 111897529A CN 202010511094 A CN202010511094 A CN 202010511094A CN 111897529 A CN111897529 A CN 111897529A
- 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.)
- Granted
Links
- 238000006243 chemical reaction Methods 0.000 title claims abstract description 105
- 238000000034 method Methods 0.000 title claims abstract description 44
- 238000004590 computer program Methods 0.000 claims description 21
- 238000013507 mapping Methods 0.000 claims description 8
- 238000011426 transformation method Methods 0.000 claims description 6
- 238000013501 data transformation Methods 0.000 claims 1
- 230000001131 transforming effect Effects 0.000 claims 1
- 238000011161 development Methods 0.000 abstract description 12
- 230000006872 improvement Effects 0.000 description 12
- 230000009466 transformation Effects 0.000 description 12
- 230000006870 function Effects 0.000 description 10
- 238000010586 diagram Methods 0.000 description 5
- 238000010276 construction Methods 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000000712 assembly Effects 0.000 description 2
- 238000000429 assembly Methods 0.000 description 2
- 238000013519 translation Methods 0.000 description 2
- 230000003190 augmentative effect Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
Images
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)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a front-end component conversion method, a front-end component conversion device, equipment and a readable storage medium, wherein the method comprises the following steps: receiving front-end component determination information sent by a user through a client; the front-end component determination information is used to indicate a front-end component desired by a user; acquiring the 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; if not, reading front end component data of a locally pre-stored front end component, 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; and generating a target type front-end component according to the target type front-end component data. The invention can increase the frame types of the front end components suitable for the front end scaffold, and can accelerate the development efficiency and reduce the development cost of the front end scaffold.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a front-end component conversion method, apparatus, device, and readable storage medium.
Background
The front-end engineering scaffold on the market is various, and is a solution provided by various manufacturers for solving the problem that developers quickly build the front-end engineering scaffold, and for example, there are three front-end frames, such as Angular, React and Vue, as the front-end engineering scaffold. The front-end components may be UI components or underlying components, and the framework types of the front-end components for different front-end scaffolds are different (e.g., some front-end scaffolds are only for UI components of Angular framework type, and some are only for UI components of Vue framework type). Thus, the limited types of front end assemblies available for use with current front end scaffolds have resulted in limited types of front end assemblies that can be selected for use with front end scaffolds. If the front-end scaffold is to be suitable for front-end components of different frame types, the front-end components and the front-end scaffold need to be manually configured and optimized correspondingly at present, so that a large number of developers need to be invested in the configuration optimization process, and the whole development period is long and the development cost is high.
Disclosure of Invention
Embodiments of the present invention provide a front end component conversion method, apparatus, device, and readable storage medium, which can increase the frame types of front end components suitable for a front end scaffold, and can accelerate the development efficiency and reduce the development cost of the front end scaffold.
An embodiment of the present invention provides a front-end component conversion method, which includes:
receiving front-end component determination information sent by a user through a client; the front-end component determination information is used to indicate a front-end component desired by a user;
acquiring the 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; the front end component is applicable to a front end frame type different from the front end frame type applicable to the target type front end component;
if not, reading front end component data of a locally pre-stored front end component, 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;
and generating a target type front-end component according to the target type front-end component data.
As an improvement of the above solution, before the determining, according to the front-end component type information input by the user, the front-end component selected by the user, the method further includes:
receiving a front-end component query instruction sent by a user through a client;
inquiring all the locally pre-stored front-end components according to the front-end component inquiry instruction;
and returning the query result of the front-end component to the client so that the query result of the front-end component is displayed on a display interface of the client in the form of front-end component options by the client for the user to select.
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 an Vue type UI component.
As an improvement of the above scheme, the reading front end component data of a locally pre-stored front end component, 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 the front-end component data of the locally pre-stored front-end component;
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 a mapping relation between each instruction of the front-end component and each instruction of the target type front-end component determined by a user on instruction conversion; the UI component method conversion table comprises a mapping relation between each keyword of the front-end component and each keyword of the target type front-end component determined by a user on keyword conversion;
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 target type component file format to obtain the target type front end component data.
As an improvement of the above scheme, 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 contains a record of whether a front-end component has a target type front-end component corresponding to the front-end component;
and judging whether a target type front-end component corresponding to the front-end component exists locally or not according to the UI object table.
As an improvement of the above solution, if there is no target type front end component corresponding to the front end component locally, after generating the target type front end component according to the target type front end component data, the method further includes:
and adding a record that the front-end component has 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 component conversion apparatus, 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 determination information is used to indicate a front-end component desired by a user;
the information analysis module is used for acquiring the front-end component determined by the user according to the front-end component determination information;
the judging module is used for judging whether a target type front-end component corresponding to the front-end component exists locally; the front end component is applicable to a front end frame type different from the front end frame type applicable to the target type front end component;
the component data conversion module is used for reading the front end component data of the front end component prestored locally if the front end component data does not exist, 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 the target type front end component data;
and the component framework 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 transformation device, which includes a processor, a memory, and a computer program stored in the memory and configured to be executed by the processor, and when the processor executes the computer program, the front-end component transformation device implements the front-end component transformation 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 apparatus where the computer-readable storage medium is located 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 solutions has the following advantages:
when a developer selects a corresponding front-end component through a front-end scaffold at a client to construct a front-end project, a front-end component conversion device judges whether a target type front-end component corresponding to the front-end component exists locally; the front end component is applicable to a front end frame type different from the front end frame type applicable to the target type front end component; if not, reading front end component data of a locally pre-stored front end component, 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; 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 current type of front end scaffold, so that the current front end component can be finally suitable for the current type of front end scaffold. From the above analysis, it can be seen that some embodiments of the present invention can increase the number of frame types of the front-end components suitable for the front-end scaffold, so as to increase the number of frame types of the front-end components that can be selected by the front-end scaffold, and thus, it is not necessary to manually optimize the configurations of the front-end components and the front-end scaffold, thereby increasing the development efficiency and reducing the development cost of the front-end scaffold. Of course, it is not necessary for any product in which the invention is practiced to achieve all of the above-described advantages at the same time.
Drawings
Fig. 1 is a schematic flow chart illustrating a conversion method of a front-end component according to an embodiment of the present invention;
FIG. 2 illustrates a process for conversion by a front-end component according to 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 command conversion table according to an embodiment of the invention;
FIG. 3c is a UI component method translation table according to an embodiment of the invention;
FIG. 4 illustrates an example of a UI component transition provided by an embodiment of the invention;
FIG. 5 illustrates a code format converted by a UI component provided by an embodiment of the invention;
FIG. 6 is a schematic structural diagram of a front-end module conversion apparatus according to an embodiment of the present invention;
fig. 7 is a schematic structural diagram of a front-end component transformation apparatus according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Fig. 1 is a schematic flow chart illustrating a front-end component conversion method according to an embodiment of the present invention. The front-end component conversion method is executed by a front-end component conversion device, and the front-end component conversion device can be a server or a personal computer. The front-end component conversion method comprises the following steps:
s10, receiving the front-end component determination information sent by the user through the client; the front-end component determination information is used to indicate a front-end component desired by a user;
specifically, referring to fig. 2, the front-end component transformation device 2 establishes a communication connection with the client 1, a user can perform a front-end component determination operation on the client, and the client can 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 that the client displays options of various front-end components, and then the user clicks the selected front-end component that the user wants to select through a mouse or a touch screen.
It is understood that the client may be a computer, a tablet computer, a smart phone, or the like, and is not limited in particular. Wherein, the user can select the corresponding front-end component to construct the front-end project at the client through the front-end scaffold on which the user runs.
S11, acquiring the front-end component determined by the user according to the front-end component determination information;
after the front-end component conversion equipment receives the front-end component determination information, the front-end component required by a user can be obtained according to the front-end component determination information;
s12, judging whether a target type front end component corresponding to the front end component exists locally; the front end component is applicable to a front end frame type different from the front end frame type applicable to the target type front end component;
wherein the target type front end component may be a front end scaffold adapted to currently participate in a front end project build. Referring to fig. 2, when the front-end component transformation device knows the front-end component desired by the user, it may first determine whether the front-end framework type of the front-end component matches the front-end framework type of the target, and if so, the front-end component may be directly invoked. If not, judging whether the front-end component conversion equipment is locally provided with a target type front-end component corresponding to the front-end component; if yes, indicating 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, it indicates that the front-end component cannot be directly invoked to participate in the construction of the front-end project.
Referring to fig. 2, taking the front end component as a UI component as an example, wherein the current front end scaffold is a front end scaffold of Vue framework, the scaffold is only suitable for a UI component of Vue type, and then the target 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 Vue type UI components corresponding to the Angular type UI component exist locally is judged; if yes, the fact that Vue-type UI components converted by Angular-type UI components are stored locally in advance is indicated, and at the moment, the Vue-type UI components can be directly used for participating in construction of front-end projects; if not, it indicates that the Angular type UI component cannot directly participate in the construction of the front-end project, and needs to be converted into an Vue type UI component. It is to be understood that if the UI component determined by the user is an Vue type UI component, the UI component can be directly invoked to participate in the building of the front-end project.
It is to be appreciated that the target type front-end component can be pre-located locally or can be saved after a last transformation of the relevant front-end component.
It should be noted that the front-end component may also be a bottom-layer component of the front-end. The underlying components refer to components other than the UI components of the front end, and may be, for example, components related to the function implementation of the UI components (e.g., a request function implementation component related to a request sending button component of the UI interface, the request function implementation component for interacting with the back end to implement a request function of the request sending button component).
S13, if not, 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 to obtain the target type front end component data;
the front-end component transformation device may store front-end component data of various front-end components. And when the front-end component conversion equipment reads the front-end component data of the front-end component, converting the file format of the front-end component data into the file format of the front-end component of the target type, thereby finally obtaining the converted front-end component data of the front-end component of the target type. For example, the JAVA code format of the front-end component may be converted to the target code format.
Specifically, reading the local front-end component data may be performed by the following data reading method: 1. converting the file into a file object stored in the memory through JAVA language; 2. converting the object into a file input stream; the file input stream is converted into a string byte array.
And S14, generating the target type front-end component according to the target type front-end component data.
When the target-type front-end component data is obtained, the target-type front-end component can 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 at a client through a front-end scaffold, a front-end component conversion device judges whether a target type front-end component corresponding to the front-end component exists locally; the front end component is applicable to a front end frame type different from the front end frame type applicable to the target type front end component; if not, reading front end component data of a locally pre-stored front end component, 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; 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 current type of front end scaffold, so that the current front end component can be finally suitable for the current type of front end scaffold. From the above analysis, it can be seen that some embodiments of the present invention can increase the number of frame types of the front-end components suitable for the front-end scaffold, so as to increase the number of frame types of the front-end components that can be selected by the front-end scaffold, and thus, it is not necessary to manually optimize the configurations of the front-end components and the front-end scaffold, thereby increasing the development efficiency and reducing the development cost of the front-end scaffold.
In the present embodiment, the front-end component is, by way of example, a front-end component of HTML 5.
Illustratively, before the step S10, the method further includes:
s7, receiving a front-end component query instruction sent by a user through a client;
s8, inquiring all the local pre-stored front-end components according to the front-end component inquiry instruction;
and S9, returning the query result of the front-end component to the client, so that the query result of the front-end component is displayed on the display interface of the client in the form of a front-end component option by the client for the user to select.
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, the query instruction is displayed on a display interface of the client in an option form for the user to select.
When a user selects a front-end component, the client sends the front-end component determination information to the front-end component conversion device, where the information includes an address stored in the device by the front-end component selected by the user and some other data (e.g., a name of the front-end component, and the front-end component selected by the user can be known by the name of the front-end component), and then the device can obtain the front-end component data of the corresponding front-end component by the address in the information.
In some of the foregoing embodiments, exemplarily, the step S13 specifically includes:
s130, if not, reading the front end component data of the locally pre-stored front end component;
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 a mapping relation between each instruction of the front-end component and each instruction of the target type front-end component determined by a user on instruction conversion; the UI component method conversion table comprises a mapping relation between each keyword of the front-end component and each keyword of the target type front-end component determined by a user on keyword conversion;
specifically, the manner of 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 in a local database through the unique identification and the data storage address.
Further, for example, referring to fig. 3b, the instruction in the UI instruction conversion table represents the relevant instruction of the corresponding front-end component, for example, the instruction of the regular type UI component is ngIf, and the instruction of the Vue type UI component is v-if. The UI instruction conversion table records values corresponding to the conversion of each instruction in Vue, Angular and React3 frames; referring to fig. 3c, the component method conversion table records 3 frames of Vue, Angular and fact, and the keywords of the UI components are converted from each other to corresponding values.
S132, according to the UI component method conversion table, 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 instruction 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, and converting the format of the rest data of the front end component into the file format of the target type component (for example, some conventional code format conversion is performed between the data) 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, Angular and fact, the meaning of these fields means that the keyword of Angular is ngOnInit, and for the keyword of Vue, it is creased meaning, and the corresponding relationship of the keywords of multiple UI components in each frame can be read through the unique identifier of the UI component. It is thus possible to know how the keywords of the current genre are converted into Vue keywords in the case of regular, and Vue keywords in the case of react. The final output into a Vue format file thus represents the completion of the keyword conversion in the code.
As an example, the manner in which the Angular UI component is converted to a Vue UI component is shown in FIG. 4. Wherein, the code format of the AngularUI 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 contains a record of whether a front-end component has a target type front-end component corresponding to the front-end component;
and S121, judging whether a target type front-end component corresponding to the front-end component exists locally or not according to the UI object table.
If the UI object table contains a record that the front-end component has a target type front-end component corresponding to the front-end component, judging that the target type front-end component corresponding to the front-end component exists locally; otherwise, judging 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 further record unique identifiers of corresponding UI components, the unique identifiers of the respective UI components may be known through the UI object table, and the related component data conversion rule table may be obtained through the unique identifiers of the UI components.
For example, whether a front-end component records a target type front-end component corresponding to the front-end component in the UI object table is determined by:
acquiring a field of a frame in a UI object table of the front-end component, which is pre-stored locally;
and judging whether the field of the frame has a frame keyword of the target type front-end component.
For example, as shown in FIG. 3a, the UI object table has Vue framework keys that relate to the target type front end component (i.e., Vue component).
In some of the foregoing embodiments, further, if the field of the frame does not have a key of the target-type front-end component, after the step S15, the method further includes:
s16, adding a record that the front-end component has 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 above-mentioned record, the corresponding target type front-end component can be directly called subsequently when the record is known.
By way of example, the recording may be augmented by:
as shown in fig. 3a, a framework key for the target type front-end component is added in the UI object table of the front-end component.
Fig. 6 is a schematic structural diagram of a front-end module conversion apparatus according to an embodiment of the present invention.
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 determination information is used to indicate a front-end component desired by a user;
the information analysis module 11 is configured to obtain the front-end component determined by the user according to the front-end component determination information;
the judging module 12 is configured to judge whether there is a target type front-end component corresponding to the front-end component locally; the front end component is applicable to a front end frame type different from the front end frame type applicable to the target type front end component;
the component data conversion module 13 is configured to, if the current component data does not exist, read locally pre-stored front-end component data of the front-end component, and convert 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;
and the component framework generation 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 at a client through a front-end scaffold, a front-end component conversion device judges whether a target type front-end component corresponding to the front-end component exists locally; the front end component is applicable to a front end frame type different from the front end frame type applicable to the target type front end component; if not, reading front end component data of a locally pre-stored front end component, 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; 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 current type of front end scaffold, so that the current front end component can be finally suitable for the current type of front end scaffold. From the above analysis, it can be seen that some embodiments of the present invention can increase the number of frame types of the front-end components suitable for the front-end scaffold, so as to increase the number of frame types of the front-end components that can be selected by the front-end scaffold, and thus, it is not necessary to manually optimize the configurations of the front-end components and the front-end scaffold, thereby increasing the development efficiency and reducing the development cost of the front-end scaffold.
As an improvement of the above, the apparatus further comprises:
the query instruction receiving module is used for receiving a front-end component query instruction sent by a user through a client;
the query module is used for querying all the locally pre-stored front-end components 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 query result of the front-end component is displayed on the display interface of the client in the form of front-end component options by the client for the user to select.
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 an Vue type UI component.
As an improvement of the above scheme, the component data conversion module is specifically configured to:
if not, reading the front-end component data of the locally pre-stored front-end component;
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 a mapping relation between each instruction of the front-end component and each instruction of the target type front-end component determined by a user on instruction conversion; the UI component method conversion table comprises a mapping relation between each keyword of the front-end component and each keyword of the target type front-end component determined by a user on keyword conversion;
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 target type component file format to obtain the target type front end component data.
As an improvement of the foregoing solution, the determining module is specifically configured to:
acquiring a preset UI object table corresponding to the front-end component; the UI object table contains a record of whether a front-end component has a target type front-end component corresponding to the front-end component;
and judging whether a target type front-end component corresponding to the front-end component exists locally or not according to the UI object table.
As an improvement of the above 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 a record of the front-end component having the target type in the UI object table corresponding to the front-end component.
Fig. 7 is a schematic diagram of a front-end component transformation apparatus according to an embodiment of the present invention. The front-end component conversion apparatus of this embodiment includes: a processor 100, a memory 101, and computer programs, such as a front-end component translation program, stored in the memory and executable on the processor. The processor, when executing the computer program, implements the steps in each of the front-end component conversion method embodiments described above. Alternatively, the processor implements the functions of the modules/units in the above device embodiments when executing the computer program.
Illustratively, the computer program may be partitioned into one or more modules/units that are stored in the memory and executed by the processor to implement the invention. The one or more modules/units may be a series of computer program instruction segments capable of performing specific functions, the instruction segments describing the execution process of the computer program in the front-end component conversion apparatus.
The front-end component conversion device can be a desktop computer, a notebook, a cloud server and other computing devices. The front-end component translation device may include, but is not limited to, a processor, a memory. It will be understood by those skilled in the art that the schematic diagram is merely an example of the front-end component transformation apparatus, and does not constitute a limitation of the front-end component transformation apparatus, and may include more or fewer components than those shown, or some components may be combined, or different components, for example, the front-end component transformation apparatus may also include input-output devices, network access devices, buses, etc.
The Processor may be a Central Processing Unit (CPU), other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic, discrete hardware components, etc. The general purpose processor may be a microprocessor or the processor may be any conventional processor or the like, which is the control center of the front end component conversion apparatus, and various interfaces and lines are used to connect the various parts of the whole front end component conversion apparatus.
The memory can be used for storing the computer programs and/or modules, and the processor can implement various functions of the front-end component transformation device by running or executing the computer programs and/or modules stored in the memory and calling 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 required by at least one function (such as a sound playing function, an image playing function, etc.), and the like; the storage data area may store data (such as audio data, a phonebook, etc.) created according to the use of the cellular phone, and the like. In addition, the memory may include high speed random access memory, and may also include non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), at least one magnetic disk storage device, a Flash memory device, or other volatile solid state storage device.
Wherein, the module/unit integrated by the front-end component conversion device can be stored in a computer readable storage medium if it is implemented in the form of software functional unit and sold or used as a stand-alone product. Based on such understanding, all or part of the flow of the method according to the embodiments of the present invention may also be implemented by a computer program, which may be stored in a computer-readable storage medium, and when the computer program is executed by a processor, the steps of the method embodiments may be implemented. Wherein the computer program comprises computer program code, which may be in the form of source code, object code, an executable file or some intermediate form, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, usb disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM), Random Access Memory (RAM), electrical carrier wave signals, telecommunications signals, software distribution medium, and the like. It should be noted that the computer readable medium may contain content that is subject to appropriate increase or decrease as required by legislation and patent practice in jurisdictions, for example, in some jurisdictions, computer readable media does not include electrical carrier signals and telecommunications signals as is required by legislation and patent practice.
It should be noted that the above-described device embodiments are merely illustrative, where the units described as separate parts may or may not be physically separate, and the parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. In addition, in the drawings of the embodiment of the apparatus provided by the present invention, the connection relationship between the modules indicates that there is a communication connection between them, and may be specifically implemented as one or more communication buses or signal lines. One of ordinary skill in the art can understand and implement it without inventive effort.
While the foregoing is directed to the preferred embodiment of the present invention, it will be understood by those skilled in the art that various changes and modifications may be made without departing from the spirit and scope of the invention.
Claims (10)
1. A front-end component conversion method, comprising:
receiving front-end component determination information sent by a user through a client; the front-end component determination information is used to indicate a front-end component desired by a user;
acquiring the 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; the front end component is applicable to a front end frame type different from the front end frame type applicable to the target type front end component;
if not, reading front end component data of a locally pre-stored front end component, 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;
and generating a target type front-end component according to the target type front-end component data.
2. The front-end component conversion method of claim 1, wherein before determining the front-end component selected by the user based on the user-entered front-end component type information, the method further comprises:
receiving a front-end component query instruction sent by a user through a client;
inquiring all the locally pre-stored front-end components according to the front-end component inquiry instruction;
and returning the query result of the front-end component to the client so that the query result of the front-end component is displayed on a display interface of the client in the form of front-end component options by the client for the user to select.
3. The front-end component transformation method of claim 1, wherein the front-end component is a UI component.
4. The front-end component transformation method of claim 3, wherein the target-type front-end component is an Vue-type UI component.
5. The front-end component transformation method according to claim 3, wherein the reading locally pre-stored front-end component data of the front-end component and transforming the front-end component data into a target-type component file format based on a preset component data transformation rule to obtain the target-type front-end component data comprises:
reading the front-end component data of the locally pre-stored front-end component;
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 a mapping relation between each instruction of the front-end component and each instruction of the target type front-end component determined by a user on instruction conversion; the UI component method conversion table comprises a mapping relation between each keyword of the front-end component and each keyword of the target type front-end component determined by a user on keyword conversion;
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 target type component file format to obtain the target type front end component data.
6. The front-end component transformation method of claim 5, wherein the determining whether there is a target type front-end component local to the front-end component comprises:
acquiring a preset UI object table corresponding to the front-end component; the UI object table contains a record of whether a front-end component has a target type front-end component corresponding to the front-end component;
and judging whether a target type front-end component corresponding to the front-end component exists locally or not according to the UI object table.
7. The front-end component transformation method of claim 6, wherein if there is no target-type front-end component locally corresponding to the front-end component, after the generating a target-type front-end component from the target-type front-end component data, the method further comprises:
and adding a record that the front-end component has the target type front-end component in the UI object table corresponding to the front-end component.
8. 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 determination information is used to indicate a front-end component desired by a user;
the information analysis module is used for acquiring the front-end component determined by the user according to the front-end component determination information;
the judging module is used for judging whether a target type front-end component corresponding to the front-end component exists locally; the front end component is applicable to a front end frame type different from the front end frame type applicable to the target type front end component;
the component data conversion module is used for reading the front end component data of the front end component prestored locally if the front end component data does not exist, 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 the target type front end component data;
and the component framework generation module is used for generating the target type front-end component according to the target type front-end component data.
9. 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 7 when executing the computer program.
10. A computer-readable storage medium, comprising a stored computer program, wherein the computer program, when executed, controls an apparatus 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 7.
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 true CN111897529A (en) | 2020-11-06 |
| CN111897529B 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) |
Cited By (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 (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101512503A (en) * | 2005-04-29 | 2009-08-19 | 微软公司 | XML application framework |
| US20150172505A1 (en) * | 2013-12-16 | 2015-06-18 | Samsung Electronics Co., Ltd. | Image forming system, method of controlling image forming apparatus by using messenger application of mobile device, and the mobile device for performing the method |
| US20170262261A1 (en) * | 2016-03-08 | 2017-09-14 | Mastercard International Incorporated | Systems and methods for processing extensible markup language data during runtime |
| 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 |
| CN110069312A (en) * | 2019-04-26 | 2019-07-30 | 北京三快在线科技有限公司 | A kind of method and device of UI component Configuration and generation UI Component Gallery |
| CN110069248A (en) * | 2019-03-16 | 2019-07-30 | 平安城市建设科技(深圳)有限公司 | Call method, device, equipment and the computer readable storage medium of interface data |
| 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 |
-
2020
- 2020-06-08 CN CN202010511094.4A patent/CN111897529B/en active Active
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101512503A (en) * | 2005-04-29 | 2009-08-19 | 微软公司 | XML application framework |
| US20150172505A1 (en) * | 2013-12-16 | 2015-06-18 | Samsung Electronics Co., Ltd. | Image forming system, method of controlling image forming apparatus by using messenger application of mobile device, and the mobile device for performing the method |
| US20170262261A1 (en) * | 2016-03-08 | 2017-09-14 | Mastercard International Incorporated | Systems and methods for processing extensible markup language data during runtime |
| 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 (2)
| Title |
|---|
| 王骆菲: ""前端神器：一行命令，React组件转化Vue组件"", pages 1 - 5 * |
| 裴俊宇: "基于规则获取与制导的iOS到Android应用UI转换研究", 《中国优秀硕士学位论文全文数据库信息科技辑》, no. 7, pages 138 - 655 * |
Cited By (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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111897529B (en) | 2023-11-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110955416A (en) | Interface document generation method, device, equipment and computer storage medium | |
| WO2021184725A1 (en) | User interface test method and apparatus, storage medium, and computer device | |
| CN110489440B (en) | Data query method and device | |
| CN111400387A (en) | Conversion method and device for import and export data, terminal equipment and storage medium | |
| CN110955409A (en) | Method and device for creating resources on cloud platform | |
| CN111562953A (en) | Interface calling method and device, computer device and readable storage medium | |
| WO2019161620A1 (en) | Application dependency update method, terminal and device, and storage medium | |
| CN111897529B (en) | Front-end component conversion method, device, equipment and readable storage medium | |
| CN110633258B (en) | Log insertion method, device, computer device and storage medium | |
| WO2022262448A1 (en) | Article screening method and apparatus, electronic device, and storage medium | |
| CN112732547A (en) | Service testing method and device, storage medium and electronic equipment | |
| CN116028356A (en) | Bluetooth-based terminal software testing method and device | |
| US20080294645A1 (en) | System, method and computer program product for EDI-to-EDI translations | |
| 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 | |
| CN112380828A (en) | PDF document generation method and device, storage medium and electronic equipment | |
| CN107509195B (en) | Data transmission method and device, terminal and readable storage medium | |
| CN113448960A (en) | Method and device for importing form file | |
| CN112199428B (en) | Application management system, method and terminal equipment of functional data block | |
| CN116861455B (en) | Event data processing method, system, electronic device and storage medium | |
| US20230230324A1 (en) | Method, System, Equipment and Medium for Modifying the Layering Layer Information of Finite Element Model Unit | |
| CN112181242B (en) | Page display method and device | |
| CN112445790B (en) | Report data storage method, device, equipment and medium | |
| CN111949716A (en) | Formatted data output field processing method, computer device and storage medium | |
| CN112733510A (en) | Financial certificate generation method, device, equipment and computer readable storage medium |
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 |