CN114564199A - Method, device and equipment for generating use page and readable storage medium - Google Patents
Method, device and equipment for generating use page and readable storage medium Download PDFInfo
- Publication number
- CN114564199A CN114564199A CN202210213235.3A CN202210213235A CN114564199A CN 114564199 A CN114564199 A CN 114564199A CN 202210213235 A CN202210213235 A CN 202210213235A CN 114564199 A CN114564199 A CN 114564199A
- Authority
- CN
- China
- Prior art keywords
- page
- component
- generating
- components
- unit
- 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.)
- Pending
Links
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- 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/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
- Stored Programmes (AREA)
Abstract
The invention provides a method, a device and equipment for generating a used page and a readable storage medium, which relate to the technical field of Internet and comprise the steps of receiving a page generation request, wherein the page generation request comprises a service requirement corresponding to a page to be generated; selecting a component corresponding to the service requirement from a plurality of preset components according to the service requirement corresponding to the page to be generated and the corresponding relation between the service requirement and the component; generating a use page according to the selected component; and saving the generated using page as a file for display and use. The method is completed in a tool and automatic mode, the required page and front-end codes can be configured in interactive modes such as dragging and clicking, the complementary page codes are added from abundant component resources in a self-defined mode and support the switching of different main stream U I component libraries, the generated page codes can support the switching of different front-end main stream frame grammars and can also be directly used, and secondary development is completely supported.
Description
Technical Field
The invention relates to the technical field of internet, in particular to a method, a device, equipment and a readable storage medium for generating a use page.
Background
The visual page generation scheme based on the native JavaScript language is realized, the optional component resources are fewer, the generated page grammar is the native JavaScript grammar, the use scenes are fewer, and the technical framework developed at the front end is difficult to match; the page obtained by the control type dynamic page generation method is a form page, which can only meet a small part of the field of front-end development, and the generated page is in a specific data format, and can be reversely displayed only by analyzing the page by a built-in analyzer, which is not beneficial to secondary development and expansion.
For the current front-end development field, a great part of time and energy of a front-end engineer in the development process are consumed in writing a great amount of repeated codes and business logic, and when the front-end engineer meets the requirement of a great amount of low technical content, the front-end engineer becomes an extremely easy-to-replace resource, and the front-end manpower further becomes the bottleneck of product requirement iteration.
Disclosure of Invention
The invention aims to provide a method, a device, equipment and a readable storage medium for generating a use page, so as to improve the problems. In order to achieve the purpose, the technical scheme adopted by the invention is as follows:
in a first aspect, the present application provides a method for generating a usage page, including:
receiving a page generation request, wherein the page generation request comprises a service requirement corresponding to a page to be generated;
selecting a component corresponding to the service requirement from a plurality of preset components according to the service requirement corresponding to the page to be generated and the corresponding relation between the service requirement and the component;
generating a use page according to the selected component;
and saving the generated use page as a file for display use.
Preferably, selecting a component corresponding to the service requirement from a plurality of preset components according to the service requirement corresponding to the page to be generated, includes:
building a front-end framework according to the business requirements;
selecting a component library corresponding to the front-end frame according to the front-end frame, wherein components displayed in the component library are default added component libraries under the selected frame, and the component libraries comprise layout components, basic components and custom components;
and selecting the components matched with the service requirements corresponding to the page to be generated from the preset component library.
Preferably, generating a usage page according to the selected component includes:
dragging at least one component to a preset canvas area for editing, and configuring attributes corresponding to the component, wherein the attributes comprise a global attribute and a single component attribute;
updating the page with the configured attributes;
and analyzing the page and generating a use page.
Preferably, dragging at least one of the components to a preset canvas area for editing comprises:
converting at least one component dragged into a preset drawing area into an interactive UI component through a page generator;
arranging and combining the UI components according to the service requirements to obtain a new UI component;
monitoring the moving information of the new UI component in the layout area, wherein the moving information comprises the position information and the configuration information of the UI component; and updating the real-time data of the canvas area.
Preferably, parsing the page and generating a usage page includes:
calling a code analyzer;
enabling the page with the configured updated attribute to pass through a JSON file of the code parser or generating a standard file of the grammar in the selected frame;
generating a use page from the JSON file or the standard file;
and outputting the use page.
Preferably, the saving as a file for display use according to the generated use page includes:
building a page generator based on the compilation components in the selected framework;
analyzing the JSON file through a page generator to generate a front-end page;
and outputting and storing the front-end page to obtain a file for display.
In a second aspect, the present application further provides an apparatus for generating a usage page, including:
the receiving module is used for receiving a page generation request, wherein the page generation request comprises a service requirement corresponding to a page to be generated;
and the selection module is used for selecting the component corresponding to the service requirement from a plurality of preset components according to the service requirement corresponding to the page to be generated and the corresponding relation between the service requirement and the components.
Preferably, the selection module further comprises:
the building unit is used for building a front-end framework according to the business requirements;
the first identification unit is used for selecting a component library corresponding to the front end frame according to the front end frame, wherein components displayed by the component library are default added component libraries under the selected frame, and the component library comprises layout components, basic components and custom components;
and the second identification unit is used for selecting the components matched with the service requirements corresponding to the pages to be generated from the preset component library.
And the generating module is used for generating a use page according to the selected component.
Preferably, the generating module further comprises:
an editing unit: the system comprises a storage module, a display module and a display module, wherein the storage module is used for dragging at least one component to a preset canvas area for editing and configuring attributes corresponding to the component, and the attributes comprise a global attribute and a single component attribute;
preferably, the editing unit further comprises:
the editing unit further includes:
a conversion unit: converting at least one of the components dragged into a preset drawing area into an interactive UI component through a page generator;
an arrangement unit: the UI components are arranged and combined according to the service requirements to obtain new UI components;
a monitoring unit: the system comprises a monitoring module, a display module and a display module, wherein the monitoring module is used for monitoring the moving information of the new UI component in the layout area, and the moving information comprises the position information and the configuration information of the UI component;
a second updating unit: for updating the real-time data of the canvas area.
A first update unit: the page is used for updating the attribute configuration;
an analysis unit: the page is used for analyzing the page and generating a use page.
Preferably, the parsing unit further comprises:
a calling unit: for calling a code parser;
a first generation unit: generating a JSON file or a standard file of the grammar which belongs to the selected frame by the code analyzer from the page with the configured updated attribute;
a second generation unit: the JSON file or the standard file is used for generating a use page;
an output unit: for outputting the usage page.
Preferably, the storage module is used for storing the file for display according to the generated use page.
Preferably, the saving module further comprises:
a construction unit: for building a page generator based on the compilation components in the selected framework;
a third generation unit: the JSON file is used for analyzing and generating a front-end page through a page generator;
an acquisition unit: and the front-end page output is stored to obtain a file for display.
In a third aspect, the present application further provides an apparatus for generating a usage page, including:
a memory for storing a computer program;
a processor for implementing the steps of the method of generating a usage page when executing the computer program.
In a fourth aspect, the present application further provides a readable storage medium, on which a computer program is stored, which, when executed by a processor, implements the steps of the above method for using a page based on generation.
The invention has the beneficial effects that: the method is completed in a tool and automatic mode, required pages and front-end codes can be configured in interactive modes such as dragging and clicking, supplement is added from abundant component resources in a user-defined mode, different mainstream UI component library switching is supported, the generated page codes can support different front-end mainstream frame grammar switching and can also be directly used, and secondary development is completely supported.
Additional features and advantages of the invention will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by the practice of the embodiments of the invention. The objectives and other advantages of the invention will be realized and attained by the structure particularly pointed out in the written description and claims hereof as well as the appended drawings.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.
FIG. 1 is a schematic flow chart illustrating a method for generating a user page according to an embodiment of the present invention;
FIG. 2 is a schematic structural diagram of an apparatus for generating a use page according to an embodiment of the present invention;
fig. 3 is a schematic structural diagram of a device for generating a usage page according to an embodiment of the present invention.
In the figure, 701, a receiving module; 702. a selection module; 7021. building a unit; 7022. a first recognition unit; 7023. a second recognition unit; 703. a generation module; 7031. an editing unit; 70311. a conversion unit; 70312. an arrangement unit; 70313. a monitoring unit; 70314. a second updating unit; 7032. a first update unit; 7033. an analysis unit; 70331. a calling unit; 70332. a first generation unit; 70333. a second generation unit; 70334. an output unit; 704. a storage module; 7041. a building unit; 7042. a third generation unit; 7043. an acquisition unit; 800. generating a device using the page; 801. a processor; 802. a memory; 803. a multimedia component; 804. an input/output (I/O) interface; 805. and a communication component.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, 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 some, but not all, embodiments of the present invention. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. 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.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures. Meanwhile, in the description of the present invention, the terms "first", "second", and the like are used only for distinguishing the description, and are not to be construed as indicating or implying relative importance.
Example 1:
the embodiment provides a method for generating a use page.
Referring to fig. 1, it is shown that the method includes step S100, step S200, step S300 and step S400.
S100, receiving a page generation request, wherein the page generation request comprises a service requirement corresponding to a page to be generated.
It can be understood that, in this step, according to the service requirement corresponding to the page according to the request, the front-end designer layout page may be set up first, where the left side in the designer layout interface in this embodiment is set as the component library area, the middle is set as the layout area, the right side is set as the attribute editing area, and the top is set as the global tool area. Wherein the components displayed in the component library area are the component libraries added by default under the selected frame.
S200, selecting a component corresponding to the business requirement from a plurality of preset components according to the business requirement corresponding to the page to be generated and the corresponding relation between the business requirement and the components.
Building a front-end framework according to business requirements; according to the user's own project, a certain front end frame is used, and a certain frame is built by the frame.
Selecting a component library corresponding to the front-end frame according to the front-end frame, wherein components displayed by the component library are default added component libraries under the selected frame, and the component library comprises layout components, basic components and custom components;
it should be noted that the components in the component library are built in an initialization data source of the page designer, the representation form is an array object, each object represents one component, the names of the components are displayed according to the name values of the objects during rendering, a vuedragble plug-in is required to be introduced, and each component is wrapped by a < vuedragble > tag to realize a dragging function and an animation transition effect. The object contains, but is not limited to, a type value, a style value, option data and the like of the component, and a user can drag or click the component in the component library to make a uniform and standard web front-end page. Wherein, the component library mainly comprises three types, which are respectively: a layout component, a base component, and a custom component.
And selecting the components matched with the service requirements corresponding to the page to be generated from a preset component library.
And S300, generating a use page according to the selected component.
It can be understood that, in this step, at least one component is dragged to a preset canvas area for editing, and attributes corresponding to the component are configured, where the attributes include a global attribute and a single component attribute;
the above-mentioned global property and single component property are operation entries for property editing. And the page generator converts the attribute array object into an interactive UI component, so that a user can perform interactive operation to configure the attributes of the components in the page and the canvas designed by the designer. The global attribute editing is to edit general attributes of the whole designed target page, such as page width, height, internal and external margins and the like, and the global attribute object in the canvas array in the step five needs to be changed through the setting of a user;
the single component attribute editing is to perform corresponding attribute editing on the components selected in the middle canvas area, and includes but is not limited to operations such as style attributes, position attributes, linkage configuration, event behaviors, data source configuration and the like, and the selected component objects in the canvas array are required to be set by a user; and event behavior configuration, data source configuration and the like of the attribute editing area can be realized by embedding popup windows into third-party code editing plug-ins, so that a user can input codes or configuration in the editing plug-ins, then the modified attribute objects are stored in corresponding positions in the canvas array, the canvas array is updated in real time, and accordingly the page subjected to attribute configuration is updated in the canvas in real time through the page generator.
It should be noted that the canvas area is actually a main area of the design page, the dragged component object is converted into an interactive UI component by the page generator, and the user can arrange and combine the dragged component object in the area, and can see the component style and function after the property is modified by matching with the property editing area on the right side. The drawing area is a container for dragging the components, certain configuration is needed, firstly, one piece of data is needed to be maintained, the data can be an array which can be called as a canvas array and is used for bearing the component data in all the drawing areas, and the canvas array is updated in real time when the components are changed, so that the latest page design data is obtained.
It should be noted that, at least one component dragged into the preset drawing area is converted into an interactive UI component by the page generator;
arranging and combining the UI components according to the service requirements to obtain a new UI component;
monitoring the moving information of a new UI component in the canvas area, wherein the moving information comprises the position information and the configuration information of the UI component;
and updating the real-time data of the canvas area.
It should be noted that, monitoring the dragged component can monitor the behavior of the mouse in the dragging and dropping process, and when the mouse releases the dragged component, record and update the positions and configuration information of all components in the current canvas area, update the canvas array, and keep updating in real time. The canvas area should add click monitoring events to the dragged components, and when a user clicks a selected component, a delete and copy button is displayed on the selected component. The delete button is used for clearing the currently selected component and deleting the component object from the canvas array; the copy button is used for copying the current component, automatically adding an identical component on the canvas, and simultaneously, disassembling a piece of component object data which is identical to the component except for different IDs in the canvas array.
And S400, saving the file to be used for display according to the generated use page.
It is understood that in this step, the page code will be output using the page to generate a JSON file through a code parser or to generate a standard front-end file of the selected framework grammar; the JSON file is analyzed into a front-end page through the page generator, and the generated standard front-end file can be used and recorded as a using page, namely, the using page is stored as a file for display.
Calling a code parser; the code parser is used for parsing the code produced by the designer to generate a front-end standard VUE syntax code file.
It should be noted that the build code parser is a tool inside the page designer, which can translate and compile JSON file of the design page into standard front-end code. The core technical points are as follows:
1. when the resolver is executed, a file template of a selected front-end framework is initialized, wherein the file template comprises < template > tags, < script > tags, < style > tags and the like, initialization data inside < script >, each life cycle hook function and the like.
2. Constructing a core analytic function, converting the JSON file into a JS object, transmitting the JS object into the core analytic function, traversing the transmitted JS object inside the core analytic function, dynamically creating a dom node according to component object data in the JS object, matching a corresponding attribute object in the JS object according to a unique representation ID of the component object data, and adding an attribute value into the dynamically created dom node; creating an event set, and taking out event functions in the attribute objects and adding the event functions into the event set; and creating a style set, and taking out style information in the attribute object and putting the style information into the style set.
3. And filling the processed various sets into a front-end template file of the technical point 1 in sequence.
4. And adding a code formatting plug-in, and formatting the filled template of the core technology point 3.
Generating a json file or a standard file of the grammar in the selected frame by the page with the updated attribute configuration through a code parser;
generating a use page for the json file or the standard file; and outputting the use page.
Constructing a page generator based on the compiling component in the selected frame; the page generator is used for directly parsing the code produced by the designer into a front-end page, and includes attribute configuration, event behavior definition and the like performed on components in the designer.
And the construction of a page generator is also important, the page generator is a compiling component constructed based on the selected framework, and the JSON configuration file generated by the designer can be compiled and analyzed, so that an interactive page can be rendered. The core technical points are as follows:
1. the page generator internally depends on and introduces a plurality of main stream front end UI component libraries, data analysis, matching, combination, component rendering and the like are internally packaged, and finally a generator component is exposed. Firstly, mounting a generator component into a front-end project, and then taking the obtained JSON configuration file generated by the designer as the props to be transmitted into a page generator compiling component.
2. Aiming at the transmitted JSON configuration file, matching the type value of each component object data in the JSON file to a UI component needing to be rendered by traversing the page generator;
3. and analyzing and recombining the matched UI component object, matching the matched UI component object to a corresponding attribute object through the unique identification ID of the component object, and then adding the component attribute information stored by the user in the attribute object to the corresponding UI component data according to rules, thereby obtaining the UI component object data with complete attribute and behavior information.
4. And packaging the obtained UI component into a high-order component with a custom behavior, so that the output component meets the function of dynamically acquiring the linkage between the component data source and the component configured in the page designer.
5. The page generator internally monitors data of rendered forms and other controls needing interaction with a user so as to ensure that data changes in the generated page can be acquired at any time, and exposes an API (application programming interface) for acquiring corresponding data, so that the user can acquire the data in the page at any time.
Analyzing the json file through a page generator to generate a front-end page;
and after the page is edited, clicking a preview button of the top global tool area, newly building a display layer floating on the upper layer of the webpage, and converting all codes in the canvas editing area into an interactive page through the page generator in the second step to be displayed to a user. The specific effect of the presentation layer is the effect that the user specifically applies the edited web front end webpage to other places. And moreover, a user can convert the specific code corresponding to the edited page into a JSON file and upload the JSON file to a server through an upload code button of the global tool area, and the JSON file is converted into a page and embedded into a position to be displayed through the page generator in the second step when the JSON file is used.
And outputting and storing the front page to obtain a file for display.
It should be added that the code parser is a tool inside the page designer that can translate the JSON file of the design page into the code under the selected front-end framework syntax. And converting the JSON file into a JS object, transmitting the JS object into a core analytic function, traversing the transmitted JS object inside the core analytic function, and filling the JS object into the template of the front-end frame grammar selected previously, so that a standard front-end file is obtained, and secondary development is facilitated.
And the page generator is a compiling component constructed based on the selected framework, and can compile and analyze the JSON configuration file generated by the designer so as to render the JSON configuration file into an interactive page. And taking the obtained JSON configuration file generated by the designer as a props incoming page generator compiling component, and displaying the behaviors of the page, the event and the like designed by the user in the page generator through operations such as traversal matching and the like aiming at the incoming JSON configuration file.
Example 2:
as shown in fig. 2, this embodiment provides an apparatus for generating a usage page, referring to fig. 2, the apparatus includes a receiving module 701, a selecting module 702, a generating module 703 and a saving module 704, where:
the receiving module 701 is used for receiving a page generation request, wherein the page generation request comprises a service requirement corresponding to a page to be generated;
the selection module 702 is used for selecting a component corresponding to the service requirement from a plurality of preset components according to the service requirement corresponding to the page to be generated and the corresponding relation between the service requirement and the component;
a generating module 703, configured to generate a use page according to the selected component;
and a saving module 704, which is used for saving the file for display according to the generated use page.
Specifically, the selecting module 702 further includes a building unit 7021, a first identifying unit 7022, and a second identifying unit 7023, where:
a building unit 7021, configured to build a front-end frame according to the service requirement;
the first identification unit 7022 is configured to select a component library corresponding to the front end framework according to the front end framework, where components displayed in the component library are default added component libraries under the selected framework, and the component library includes layout components, basic components, and custom components;
and the second identifying unit 7023 is configured to select a component matching the service requirement corresponding to the page to be generated from a preset component library.
Specifically, the generating module 703 further includes an editing unit 7031, a first updating unit 7032, and an analyzing unit 7033, where:
editing unit 7031: the system comprises a canvas area, a single component area and a plurality of groups of components, wherein the canvas area is used for dragging at least one component to the preset canvas area for editing and configuring attributes corresponding to the component, and the attributes comprise a global attribute and a single component attribute;
first updating section 7032: the page after the attribute configuration is updated;
analysis section 7033: the method is used for analyzing the page and generating the use page.
It should be noted that editing unit 7031 further includes a converting unit 70311, an arranging unit 70312, a monitoring unit 70313, and a second updating unit 70314, where:
conversion unit 70311: the system comprises a page generator, a display unit and a display unit, wherein the page generator is used for converting at least one component dragged into a preset drawing area into an interactive UI component;
ranking unit 70312: the UI components are arranged and combined according to the service requirements to obtain new UI components;
listening unit 70313: the system comprises a monitoring module, a display module and a display module, wherein the monitoring module is used for monitoring the movement information of a new UI component in a canvas area, and the movement information comprises the position information and the configuration information of the UI component;
second update unit 70314: for updating real-time data of the canvas area.
Specifically, the parsing unit 7033 further includes a calling unit 70331, a first generating unit 70332, a second generating unit 70333, and an output unit 70334, where:
calling unit 70331: for invoking a code parser;
first generation unit 70332: generating a json file or generating a standard file of the grammar which belongs to the selected frame by the page with the updated attribute configuration through a code parser;
the second generation unit 70333: the system comprises a processing unit, a processing unit and a display unit, wherein the processing unit is used for generating a use page for a json file or a standard file;
output unit 70334: for outputting the usage page.
Specifically, the saving module 704 further includes a constructing unit 7041, a third generating unit 7042, and an obtaining unit 7043, where:
construction unit 7041: for building a page generator based on the compilation components in the selected framework;
third generating unit 7042: the front-end page is generated by analyzing the json file through the page generator;
acquisition unit 7043: and the front page output is used for saving to obtain a file for display.
It should be noted that, regarding the apparatus in the above embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated herein.
Example 3:
corresponding to the above method embodiment, an apparatus for generating a use page is further provided in this embodiment, and an apparatus for generating a use page described below and an apparatus for generating a use page described above may be referred to in correspondence with each other.
Fig. 3 is a block diagram illustrating an apparatus 800 for generating a usage page in accordance with an exemplary embodiment. As shown in fig. 3, the apparatus 800 for generating a usage page may include: a processor 801, a memory 802. The device 800 generating the usage page may further include one or more of a multimedia component 803, an I/O interface 804, and a communication component 805.
The processor 801 is configured to control the overall operation of the apparatus 800 for generating a used page, so as to complete all or part of the steps in the method for generating a used page. The memory 802 is used to store various types of data to support the operation of the device for generating a use page 800, such data can include, for example, instructions for any application or method operating on the device for generating a use page 800, as well as application-related data, such as contact data, messages sent or received, pictures, audio, video, and so forth. The Memory 802 may be implemented by any type of volatile or non-volatile Memory device or combination thereof, such as Static Random Access Memory (SRAM), Electrically Erasable Programmable Read-Only Memory (EEPROM), Erasable Programmable Read-Only Memory (EPROM), Programmable Read-Only Memory (PROM), Read-Only Memory (ROM), magnetic Memory, flash Memory, magnetic disk or optical disk. The multimedia components 803 may include screen and audio components. Wherein the screen may be, for example, a touch screen and the audio component is used for outputting and/or inputting audio signals. For example, the audio component may include a microphone for receiving external audio signals. The received audio signal may further be stored in the memory 802 or transmitted through the communication component 805. The audio assembly also includes at least one speaker for outputting audio signals. The I/O interface 804 provides an interface between the processor 801 and other interface modules, such as a keyboard, mouse, buttons, etc. These buttons may be virtual buttons or physical buttons. The communication component 805 is used for wired or wireless communication between the device 800 that generates the usage page and other devices. Wireless communication, such as Wi-Fi, bluetooth, Near Field Communication (NFC), 2G, 3G, or 4G, or a combination of one or more of them, so that the corresponding communication component 805 may include: Wi-Fi module, bluetooth module, NFC module.
In an exemplary embodiment, the apparatus 800 for generating a usage page may be implemented by one or more Application Specific Integrated Circuits (ASICs), Digital Signal Processors (DSPs), Digital Signal Processing Devices (DSPDs), Programmable Logic Devices (PLDs), Field Programmable Gate Arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components for performing the above-described method for generating a usage page.
In another exemplary embodiment, a computer readable storage medium comprising program instructions which, when executed by a processor, implement the steps of the above-described method of generating a usage page is also provided. For example, the computer readable storage medium may be the memory 802 described above including program instructions executable by the processor 801 of the device 800 for generating a used page to perform the method for generating a used page described above.
Example 4:
corresponding to the above method embodiment, a readable storage medium is also provided in this embodiment, and a readable storage medium described below and a method for generating a usage page described above may be referred to in correspondence with each other.
A readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method of generating a usage page of the above method embodiment.
The readable storage medium may be a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and various other readable storage media capable of storing program codes.
In conclusion, the scheme provides a rich component resource library, and supports switching of the mainstream UI component library to adapt to more than ninety percent of web front-end development scenes; the invention supports two page output forms, firstly json format data can be directly output, and the output json data can be directly compiled into a page through a page generator when in use; secondly, standard code files of main stream frameworks such as vue and the like can be output, and secondary development is supported; the output codes (pages) can be switched into different front-end mainstream frame grammars, and front-end development scenes of most teams are met.
The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (14)
1. A method of generating a usage page, comprising:
receiving a page generation request, wherein the page generation request comprises a service requirement corresponding to a page to be generated;
selecting a component corresponding to the service requirement from a plurality of preset components according to the service requirement corresponding to the page to be generated and the corresponding relation between the service requirement and the component;
generating a use page according to the selected component;
and saving the generated use page as a file for display use.
2. The method for generating a user page according to claim 1, wherein the selecting, according to the service requirement corresponding to the page to be generated, a component corresponding to the service requirement from a plurality of preset components comprises:
building a front-end framework according to the business requirements;
selecting a component library corresponding to the front-end frame according to the front-end frame, wherein components displayed in the component library are default added component libraries under the selected frame, and the component libraries comprise layout components, basic components and custom components;
and selecting the components matched with the service requirements corresponding to the page to be generated from the preset component library.
3. The method for generating a usage page of claim 2, wherein said generating a usage page according to said selected component comprises:
dragging at least one component to a preset canvas area for editing, and configuring attributes corresponding to the component, wherein the attributes comprise a global attribute and a single component attribute;
updating the page after the attribute configuration;
and analyzing the page and generating a use page.
4. The method for generating a usage page of claim 3, wherein the dragging at least one of the components to a preset canvas area for editing comprises:
converting at least one component dragged into a preset drawing area into an interactive UI component through a page generator;
arranging and combining the UI components according to the service requirements to obtain a new UI component;
monitoring the moving information of the new UI component in the drawing area, wherein the moving information comprises the position information and the configuration information of the UI component;
and updating the real-time data of the canvas area.
5. The method for generating a usage page according to claim 3, wherein the parsing the page and generating the usage page includes:
calling a code analyzer;
generating a JSON file or a standard file of the grammar in the selected frame by the page with the configured updated attribute through the code analyzer;
generating a use page from the JSON file or the standard file;
and outputting the use page.
6. The method for generating the use page according to claim 5, wherein the saving as a file for presentation according to the generated use page comprises:
building a page generator based on the compilation component in the selected frame;
analyzing the JSON file through a page generator to generate a front-end page;
and outputting and storing the front-end page to obtain a file for display.
7. An apparatus for generating a usage page, comprising:
the receiving module is used for receiving a page generation request, wherein the page generation request comprises a service requirement corresponding to a page to be generated;
the selection module is used for selecting the components corresponding to the service requirements from a plurality of preset components according to the service requirements corresponding to the pages to be generated and the corresponding relation between the service requirements and the components;
the generating module is used for generating a use page according to the selected component;
and the storage module is used for storing the file for display according to the generated use page.
8. The apparatus for generating a usage page of claim 7, wherein the selection module further comprises:
the building unit is used for building a front-end framework according to the business requirements;
the first identification unit is used for selecting a component library corresponding to the front end frame according to the front end frame, wherein components displayed by the component library are default added component libraries under the selected frame, and the component library comprises layout components, basic components and custom components;
and the second identification unit is used for selecting the components matched with the service requirements corresponding to the pages to be generated from the preset component library.
9. The apparatus for generating a usage page of claim 7, wherein the generating module further comprises:
an editing unit: the system comprises a storage module, a processing module, a display module and a display module, wherein the storage module is used for storing at least one component, and the storage module is used for dragging the at least one component to a preset canvas area for editing and configuring attributes corresponding to the component, wherein the attributes comprise a global attribute and a single component attribute;
a first update unit: the page is used for updating the attribute configuration;
an analysis unit: the page is used for analyzing the page and generating a use page.
10. The apparatus for generating a usage page of claim 9, wherein the editing unit further includes:
a conversion unit: converting at least one of the components dragged into a preset drawing area into an interactive UI component through a page generator;
an arrangement unit: the UI components are arranged and combined according to the service requirements to obtain new UI components;
a monitoring unit: the system comprises a monitoring module, a display module and a display module, wherein the monitoring module is used for monitoring the moving information of the new UI component in the layout area, and the moving information comprises the position information and the configuration information of the UI component;
a second updating unit: for updating the real-time data of the canvas area.
11. The apparatus for generating a usage page of claim 9, wherein the parsing unit further comprises:
a calling unit: for calling a code parser;
a first generation unit: generating a JSON file or a standard file of the grammar in the selected frame by the code parser for the page with the configured updated attribute;
a second generation unit: the JSON file or the standard file is used for generating a use page;
an output unit: for outputting the usage page.
12. The apparatus for generating a usage page of claim 11, wherein the saving module further comprises:
a construction unit: for building a page generator based on the compilation components in the selected framework;
a third generation unit: the JSON file is used for analyzing and generating a front-end page through a page generator;
an acquisition unit: and the front-end page output is stored to obtain a file for display.
13. An apparatus for generating a usage page, comprising:
a memory for storing a computer program;
a processor for implementing the steps of the method of generating a usage page of any of claims 1 to 6 when executing the computer program.
14. A readable storage medium, characterized by: the readable storage medium has stored thereon a computer program which, when being executed by a processor, carries out the steps of the method of generating a usage page as claimed in any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210213235.3A CN114564199A (en) | 2022-03-04 | 2022-03-04 | Method, device and equipment for generating use page and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210213235.3A CN114564199A (en) | 2022-03-04 | 2022-03-04 | Method, device and equipment for generating use page and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114564199A true CN114564199A (en) | 2022-05-31 |
Family
ID=81717520
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210213235.3A Pending CN114564199A (en) | 2022-03-04 | 2022-03-04 | Method, device and equipment for generating use page and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114564199A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115309395A (en) * | 2022-07-29 | 2022-11-08 | 福州顶点信息管理有限公司 | Webpage low-code design method and device with separated design and analysis capabilities |
| CN115495081A (en) * | 2022-11-18 | 2022-12-20 | 深圳代码兄弟技术有限公司 | Method and system for generating and loading low-code page component based on JSON data |
| CN117931164A (en) * | 2023-12-27 | 2024-04-26 | 北京鸿鹄元数科技有限公司 | Form application design method and system based on low codes |
-
2022
- 2022-03-04 CN CN202210213235.3A patent/CN114564199A/en active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115309395A (en) * | 2022-07-29 | 2022-11-08 | 福州顶点信息管理有限公司 | Webpage low-code design method and device with separated design and analysis capabilities |
| CN115495081A (en) * | 2022-11-18 | 2022-12-20 | 深圳代码兄弟技术有限公司 | Method and system for generating and loading low-code page component based on JSON data |
| CN117931164A (en) * | 2023-12-27 | 2024-04-26 | 北京鸿鹄元数科技有限公司 | Form application design method and system based on low codes |
| CN117931164B (en) * | 2023-12-27 | 2024-07-09 | 北京鸿鹄元数科技有限公司 | Form application design method and system based on low codes |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110597506B (en) | Front-end application visualization development tool and use method | |
| CN107844299B (en) | Method for implementing Web application development tool | |
| CN109918607B (en) | Page construction method and device, medium and computing equipment | |
| CN111666526B (en) | Page generation method, device, equipment and storage medium | |
| CN114564199A (en) | Method, device and equipment for generating use page and readable storage medium | |
| CN111045655A (en) | Page rendering method and device, rendering server and storage medium | |
| CN113504908A (en) | Business code generation method and device, electronic equipment and computer readable medium | |
| CN112100550A (en) | Page construction method and device | |
| JP2003345717A (en) | Method and device for reediting and redistributing web document | |
| CN109710250B (en) | Visualization engine system and method for constructing user interface | |
| CN111625226B (en) | Prototype-based man-machine interaction design implementation method and system | |
| CN112631580B (en) | Data processing method and device and computing equipment | |
| JP6813634B2 (en) | WEB reporting design system for programming event behavior based on graphic interface | |
| CN111966336A (en) | Page generation method and device based on VUE and visual graphic operation | |
| CN109583591A (en) | Method and system for simplified knowledge engineering | |
| CN114138254B (en) | Automatic code generation method, medium, equipment and system | |
| CN112364496B (en) | Avionics simulation panel generation system based on HTML5 and VUE technologies | |
| CN112162751A (en) | Automatic generation method and system of interface document | |
| CN117093316A (en) | Cross-platform page rendering system, electronic equipment and storage medium | |
| CN111061478B (en) | Page form modification method, device and equipment and readable storage medium | |
| CN112882703A (en) | Online design method and device for user-defined chart plug-in | |
| CN109284488A (en) | Based on the method, apparatus and medium that modification front end table column data is locally stored | |
| US20070208995A1 (en) | Document Processing Device and Document Processing Method | |
| JP2015510181A (en) | Graphical representation of operator precedence | |
| US20020147963A1 (en) | Method and apparatus for generating machine control instructions |
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 |