CN114416056A - Page generation method, system, computer equipment and readable storage medium - Google Patents

Page generation method, system, computer equipment and readable storage medium Download PDF

Info

Publication number
CN114416056A
CN114416056A CN202210058198.3A CN202210058198A CN114416056A CN 114416056 A CN114416056 A CN 114416056A CN 202210058198 A CN202210058198 A CN 202210058198A CN 114416056 A CN114416056 A CN 114416056A
Authority
CN
China
Prior art keywords
page
component
generated
components
vue
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
Application number
CN202210058198.3A
Other languages
Chinese (zh)
Inventor
于思慧
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An International Financial Leasing Co Ltd
Original Assignee
Ping An International Financial Leasing Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Ping An International Financial Leasing Co Ltd filed Critical Ping An International Financial Leasing Co Ltd
Priority to CN202210058198.3A priority Critical patent/CN114416056A/en
Publication of CN114416056A publication Critical patent/CN114416056A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING OR CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • GPHYSICS
    • G06COMPUTING OR CALCULATING; COUNTING
    • G06QINFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00Commerce
    • G06Q30/02Marketing; Price estimation or determination; Fundraising
    • G06Q30/0241Advertisements
    • G06Q30/0277Online advertisement

Landscapes

  • Engineering & Computer Science (AREA)
  • Business, Economics & Management (AREA)
  • Theoretical Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Accounting & Taxation (AREA)
  • Development Economics (AREA)
  • Finance (AREA)
  • General Engineering & Computer Science (AREA)
  • Strategic Management (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • Entrepreneurship & Innovation (AREA)
  • General Business, Economics & Management (AREA)
  • Marketing (AREA)
  • Economics (AREA)
  • Game Theory and Decision Science (AREA)
  • Stored Programmes (AREA)

Abstract

The invention provides a page generation method, which comprises the following steps: determining the demand of a page to be generated according to the page generation request; splitting a page to be generated into a plurality of components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component comprises HTML elements, element layout, styles and service logic package; configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component; calling each configured component, rendering and generating a page; the page generation method provided by the embodiment of the invention; the page is divided into the components, and the components are combined to generate the page, so that the page generation efficiency is improved; and part of development codes can be recycled through the vue framework, secondary development is avoided, and development cost is remarkably reduced.

Description

Page generation method, system, computer equipment and readable storage medium
Technical Field
The present invention relates to the field of data processing, and in particular, to a page generation method, system, computer device, and readable storage medium.
Background
With the increasingly complex flow and the increasingly numerous media channels, the multi-channel differentiation display and popularization mode of the advertisements is particularly important, and the visual configuration of the device area page is an active advertisement configuration and channel differentiation platform which is developed according to the contents of device buying and selling, device maintenance, device merchant lodging and the like.
The multi-channel differentiation display mainly pushes the page according to the actual requirements of the user, the requirements of page development are higher and higher due to the diversification of the requirements of the user, in the existing front-end development, the whole development process is usually realized through JavaScript (JS for short) codes, the development process is complex, the development workload is large, and the development cost is higher. The developed service program page is also difficult to store developed page display data, which easily causes a large amount of repeated code writing work and influences the page development efficiency.
Disclosure of Invention
The invention aims to provide a page generation method, a page generation system, computer equipment and a readable storage medium, which are used for solving the following problems: the page development efficiency is low.
One aspect of the embodiments of the present invention provides a page generation method, where the method includes:
determining the demand of a page to be generated according to the page generation request;
splitting the page to be generated into a plurality of components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component comprises HTML elements, element layout, styles and service logic package;
configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component;
and calling each configured component, rendering and generating a page.
Further, the step of splitting the page to be generated into a plurality of components through an vue framework includes: generating a component relationship tree through an vue framework; the nodes in the component relation tree correspond to components, and the component relation tree is used for reflecting application relations among the components; and selecting a plurality of components from a preset component library according to the application relation among the components.
Further, after the step of selecting a plurality of components from the preset component library, the method includes: determining vue page parameter information corresponding to the frame according to the page requirement to be generated; the page parameter information includes one or more of a unique identifier in the vue framework, a registered component name, a component registration data function, a data transfer interface, and an event object.
Further, the step of calling each configured component, rendering and generating a page includes: combining and sequencing a plurality of components according to the page requirement to be generated; and according to the sequencing result, customizing a dragging component combination, inserting the dragging component combination into the page, rendering and generating the page.
Further, the step of rendering and generating the page includes: determining the generation position and color of each component according to the page parameter information; and generating components with corresponding colors at corresponding positions according to the generation positions and the colors of the components so as to finish page rendering.
Further, the step of configuring field information of the page to be generated in each component according to the service logic encapsulation and the attribute of each component includes: acquiring a plurality of forms in the service logic package; extracting form data in the forms according to the attribute of each component; and configuring the text information displayed in the page according to the form data to generate field information.
Further, after the step of splitting the page to be generated into a plurality of components through the vue framework, the method further includes: creating a json file corresponding to a page to be generated; each node of the json file carries a unique identifier of a corresponding vue framework.
An aspect of the embodiments of the present invention further provides a page generation system, where the page generation system includes:
the request module is used for generating a request according to a page and determining the demand of the page to be generated;
the splitting module is used for splitting the page to be generated into a plurality of components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component comprises HTML elements, element layout, styles and service logic package;
the configuration module is used for configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component;
and the rendering module is used for calling each configured assembly, rendering and generating the page.
An aspect of the embodiments of the present invention further provides a computer device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor, when executing the computer program, implements the steps of the page generation method as described above.
An aspect of the embodiments of the present invention further provides a computer-readable storage medium, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor implements the steps of the page generation method as described above when executing the computer program.
The page generation method, the system, the computer equipment and the readable storage medium provided by the embodiment of the invention are provided; the page is divided into the components, and the components are combined to generate the page, so that the page generation efficiency is improved; and part of development codes can be recycled through the vue framework, secondary development is avoided, and development cost is remarkably reduced.
Drawings
Fig. 1 schematically shows a flowchart of a page generation method according to a first embodiment of the present invention;
fig. 2 schematically shows a sub-step diagram of step S101 in fig. 1;
FIG. 3 schematically shows a block diagram of a page generation system according to an embodiment II of the present application; and
fig. 4 schematically shows a hardware architecture diagram of a computer device suitable for implementing the page generation method according to the third embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit 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 the descriptions relating to "first", "second", etc. in the embodiments of the present invention are only for descriptive purposes and are not to be construed as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In addition, technical solutions between various embodiments may be combined with each other, but must be realized by a person skilled in the art, and when the technical solutions are contradictory or cannot be realized, such a combination should not be considered to exist, and is not within the protection scope of the present invention.
In the description of the present invention, it should be understood that the numerical references before the steps do not identify the order of performing the steps, but merely serve to facilitate the description of the present invention and to distinguish each step, and thus should not be construed as limiting the present invention.
The noun explains:
json: (JavaScript Object Notification) is a lightweight data exchange format. Easy to read and write by people. And is easy to be analyzed and generated by a machine. It is based on a subset of JavaScript Programming Language, Standard ECMA-2623 rd Edition-Decumber 1999. JSON takes a text format that is completely language independent, but also uses conventions similar to the C language family (including C, C + +, C #, Java, JavaScript, Perl, Python, etc.). These properties make JSON an ideal data exchange language.
Vue framework: is a set of progressive JavaScript framework for constructing a user interface. Unlike other large frames, the Vue frame is designed to be applied layer by layer from bottom to top. Vue, the core library only focuses on the viewing layer, not only is it easy to get on hand, but also it is easy to integrate with third party libraries or existing projects. On the other hand, Vue is also fully capable of providing drive for complex Single Page Applications (SPAs) when used in conjunction with modern tool chains and various supporting class libraries. Different vue components can expose data content in different formats, implement different functions in a page, and are reusable vue instances.
Example one
Fig. 1 schematically shows a flowchart of a page generation method according to a first embodiment of the present invention.
As shown in fig. 1, the page generating method may include steps S100 to S103, where:
step S100: and determining the page requirement to be generated according to the page generation request.
Specifically, the page to be generated is a final page rendered in this embodiment, and the page to be generated includes contents of characters, pictures, table forms and other multiple format attributes. In practical applications, the page to be generated is, for example, an active page in a service program or a displayed hierarchical page.
The execution main body of the page generation method is a front-end development program of the computer equipment, the front-end development program comprises a page development interface, a design file of a page is imported into the front-end development program, the design file of the page is a page generation request, and the page design file can include but is not limited to a flow chart, a product prototype diagram, a page size design style diagram and the like; the front-end development program analyzes the page design file, so as to determine the information required by the page to be generated (such as the plate, the style, the layout mode and the like included in the page).
Step S101: splitting the page to be generated into a plurality of components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component includes HTML elements, element layouts, styles, and business logic packages.
For example, the page to be generated comprises four modules of a digital factory, a new device, an old device and a device maintenance module, and the four modules can be modularized through an vue framework, wherein each module comprises a complete business logic package, and the page can be generated quickly; the HTML elements include: text areas, list boxes, text entry boxes, password entry boxes, radio entry boxes, check entry boxes, reset buttons, submit buttons, hidden fields, and the like; the element layout modes comprise static layout, streaming layout, self-adaptive layout, elastic layout and response layout; in the embodiment, a self-adaptive layout strategy of a full width and a self-adaptive height is preferably adopted, different styles are set for equipment with different sizes and resolutions, which is equivalent to the creation of a plurality of static layouts, and each static layout corresponds to a screen with a size range; when the size or the resolution of the screen is changed, the page elements are changed; the developer can set the page style through an inline style, a tag selector, a class selector and an id selector.
Specifically, for one page, a component may be a certain part of page editing codes, the part of codes can be repeatedly used in a plurality of page development scenarios, and in order to simplify a page development process, the part of codes can be extracted from the page editing codes through an vue framework, and a corresponding component is constructed, so that difficulty and time of page development are greatly reduced. In order to use a component in the vue framework, the vue framework needs to be registered first, and the registration types comprise global registration and local registration; the global registration is one-time registration and can be used in each component; local registration is that the local registration can only be used on the file when the local registration is performed on the file, and all components are not universal; as shown in fig. 2, the step of splitting the page to be generated into a plurality of components through an vue framework includes:
step S101-1: generating a component relationship tree through an vue framework; the nodes in the component relation tree correspond to components, and the component relation tree is used for reflecting application relations among the components;
step S101-2: and selecting a plurality of components from a preset component library according to the application relation among the components.
Specifically, the page comprises components such as a header, a sidebar and a content area, wherein the header, the sidebar and the content area also comprise components such as navigation links, pictures, characters and forms, and a component relation tree of a nested relation is formed among the components; selecting components from a preset component library according to the nesting relation in the component relation tree, so that the whole framework of the page can be quickly acquired, and the page construction efficiency is improved; the preset component library comprises a development basic component library, a tool component library, a control level service component library and a page level component library; selecting a corresponding component library according to an actual application environment, wherein the preset component library can be managed through NPM or Github; after the step of selecting a plurality of components from the preset component library, the method further comprises the following steps:
s101-3, determining vue page parameter information corresponding to the frame according to the page requirement to be generated; the page parameter information includes one or more of a unique identifier in the vue framework, a registered component name, a component registration data function, a data transfer interface, and an event object.
Selecting a corresponding component from a component library and deriving a default service page, and then visually editing the default service page, wherein the default service page needs to configure page parameter information before being generated, and the component name, the data interface of the component and a transmission object can be determined through the page parameter information, so that preparation work is performed before the page is generated; the page adopts a layout strategy of width full and height rolling, the front-end frame assembly is set to be full width, the height is self-adaptive, the assemblies are only required to be sequentially arranged in the vertical direction of the page during page display, nesting is not required during combination, and brother nodes are arranged among the assemblies without hierarchical relationship.
After the step of splitting the page to be generated into a plurality of components through the vue framework, the method further comprises the following steps:
S101-4A, creating a json file corresponding to a page to be generated; each node of the json file carries a unique identifier of a corresponding vue frame;
and determining the unique identifier according to an id field of a Query parameter (namely a parameter carrying mode commonly used in GET request) of the page to be generated. And then, when the page is updated subsequently, the json file corresponding to the page can be quickly determined according to the id field of the page query parameter.
The general page comprises a character display area, a picture display area, a video display area and an audio display area; so that the vue framework includes an image vue component, an audio vue component, a text vue component, and a video vue component. In order to distinguish nodes in the json file to correspond to vue frames, id names a, b, c and d can be given to an image vue component, an audio vue component, a text vue component and a video vue component, the id is used as a unique identifier, and the corresponding component under vue frames can be found through the id.
Step S102: configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component;
the business logic package comprises a plurality of tables for displaying the literal information of the digital factory, the new purchasing equipment, the old removing equipment and the equipment maintenance component, and the attribute name of each component can be one of the digital factory, the new purchasing equipment, the old removing equipment and the equipment maintenance component; configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component, wherein the step comprises the following steps:
step S102-1: acquiring a plurality of forms in the service logic package;
step S102-2: extracting form data in the forms according to the attribute of each component;
step S102-3: and configuring the text information displayed in the page according to the form data to generate field information.
Specifically, the form name can be matched through the attribute name of the component, for example, a form corresponding to a digital factory is found in the business logic package according to the digital factory; then extracting form data corresponding to the form name, wherein the extraction mode can be a trigger mode, a timestamp mode, a full-table deletion insertion mode, a full-table comparison mode, a log table mode and the like; and after the extracted form data is subjected to data cleaning, generating corresponding field information on a page.
And S103, calling each configured assembly, rendering and generating a page.
In the embodiment, the corresponding page is generated by dragging and combining each component; the specific steps of calling each configured component, rendering and generating the page comprise:
step S103-1: according to the requirements of the page to be generated, a plurality of components are combined and sequenced,
step S103-2: and according to the sequencing result, customizing a dragging component combination, inserting the dragging component combination into the page, rendering and generating the page.
Specifically, operators perform page visualization configuration by clicking, dragging components and the like, and combine the pages into a target service page according to the delivered channels, the number and the sequence of the custom modules and the UI display condition.
The page of the embodiment can also configure the released channel, the channel identifier is formed by combining a channel platform platformSource + a channel source + a channel name, and the key and the channel identifier are spliced at the tail of the theme link to generate the device area theme link with the channel identifier. Each theme can be divided into a plurality of theme links, and the link data is synchronized under a uniform theme, so that a visual report can be generated, and the problem of data statistical analysis of multiple channels is solved; in addition, the generated page can support commonly used peripheral functions such as configuration banner and customer service. After configuration is completed, a user is supported to scan codes in real time to preview the page editing effect, and a background rendering technology is used for rendering quickly in real time, so that the built page can be obtained.
The step of rendering and generating a page includes:
S103-2A, determining the generation position and color of each component according to the page parameter information;
and S103-2B, generating components with corresponding colors at corresponding positions according to the generation positions and the colors of the components to finish page rendering.
And the position, size, color and other display style parameters of each display module in the page to be generated can be determined according to the page requirements, and then the page style parameters can be written into a specific node in a corresponding json file, so that the page can be rendered by using an vue frame according to the style parameters. Still in the above example, it is assumed that the page parameter information for determining the "image display area" of the page to be generated according to the page requirement is: "color: black; starting coordinates: (x1, y 1); size: 17 x 18mm ", which can be rendered by the" image vue component "in the vue frame; the page parameter information of the "video display area" is: "color: blue; starting coordinates: (x2, y 2); size: 20 x 20mm ", which can be rendered by the" video vue component "in the vue framework; the page parameter information of the 'text display area' is as follows: "color: gray; starting coordinates: (x3, y 3); size: 30 x 30mm ", which can be rendered by" text vue component "in vue frame; the page parameter information of the "audio display area" is: "color: red; starting coordinates: (x4, y 4); size: 10 x 10mm ", may be rendered by the" audio vue component ". Suppose that four nodes that can be contained in a json file created by a development platform are: a. b, c and d, and the node a comprises page parameter information as follows: "color: black; starting coordinates: (x1, y1) "; the node b comprises page parameter information as follows: "color: blue; starting coordinates: (x2, y 2); size: 20 x 20mm "; the node c comprises page parameter information as follows: "color: gray; starting coordinates: (x3, y 3); size: 30 x 30mm "; the node d comprises page parameter information: "color: red; starting coordinates: (x4, y 4); size: 10 x 10mm ".
The method adopts module componentization and page visualization to realize the improvement of the page generation efficiency; simplifying data flow and style layout by adopting a non-nested component hierarchy; stylized and accurate product pushing of different channels is realized; the vue framework enables part of development codes to be reused, secondary development is avoided, manpower is liberated, and development cost is remarkably reduced.
Example two
FIG. 3 schematically illustrates a block diagram of a page generation system that may be partitioned into program modules, one or more of which are stored in a storage medium and executed by a processor, in accordance with the present invention, to accomplish an embodiment of the present invention. The program modules referred to in the embodiments of the present invention refer to a series of computer program instruction segments that can perform specific functions, and the following description will specifically describe the functions of the program modules in the embodiments.
As shown in fig. 3, the page generation system 130 may include a request module 131, a splitting module 132, a configuration module 133, and a rendering module 134. Wherein:
the request module 131 is configured to determine a page requirement to be generated according to a page generation request;
the splitting module 132 is configured to split the page to be generated into multiple components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component comprises HTML elements, element layout, styles and service logic package;
a configuration module 133, configured to configure, according to the service logic package and the attribute of each component, field information of a page to be generated in each component;
and the rendering module 134 is configured to call the configured components, render and generate a page.
The split module 132 is further configured to generate a component relationship tree through an vue framework; the nodes in the component relation tree correspond to components, and the component relation tree is used for reflecting application relations among the components; and selecting a plurality of components from a preset component library according to the application relation among the components.
The splitting module 132 is further configured to determine vue page parameter information corresponding to the frame according to the page requirement to be generated; the page parameter information includes one or more of a unique identifier in the vue framework, a registered component name, a component registration data function, a data transfer interface, and an event object.
The rendering module 134 is further configured to combine and sort the multiple components according to the requirements of the page to be generated, custom drag and drop the component combination and insert into the page according to the sorting result, render and generate the page.
The rendering module 134 is further configured to determine a generation position and a color of each component according to the page parameter information; and generating components with corresponding colors at corresponding positions according to the generation positions and the colors of the components so as to finish page rendering.
The configuration module 133 is further configured to obtain a plurality of forms in the service logic package; extracting form data in the forms according to the attribute of each component; and configuring the text information displayed in the page according to the form data to generate field information.
The splitting module 132 is further configured to create a json file corresponding to the page to be generated; each node of the json file carries a unique identifier of a corresponding vue framework.
EXAMPLE III
Fig. 4 schematically shows a hardware architecture diagram of a computer device 6 suitable for implementing the page generation method according to the third embodiment of the present invention. In the present embodiment, the computer device 6 is a device capable of automatically performing numerical calculation and/or information processing in accordance with a command set or stored in advance. For example, the server may be a smart phone, a tablet computer, a notebook computer, a desktop computer, a rack server, a blade server, a tower server or a rack server (including an independent server or a server cluster composed of a plurality of servers), a gateway, and the like. As shown in fig. 4, the computer device 6 includes at least, but is not limited to: memory 141, processor 142, and network interface 143 may be communicatively linked to each other by a system bus. Wherein:
the memory 141 includes at least one type of computer-readable storage medium including a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the storage 141 may be an internal storage module of the computer device 6, such as a hard disk or a memory of the computer device 6. In other embodiments, the memory 141 may also be an external storage device of the computer device 6, such as a plug-in hard disk provided on the computer device 6, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like. Of course, memory 141 may also include both internal and external memory modules of computer device 6. In this embodiment, the memory 141 is generally used for storing an operating system installed in the computer device 6 and various types of application software, such as program codes of a page generation method. Further, the memory 141 may also be used to temporarily store various types of data that have been output or are to be output.
Processor 142 may be a Central Processing Unit (CPU), controller, microcontroller, microprocessor, or other data Processing chip in some embodiments. The processor 142 is generally configured to control the overall operation of the computer device 6, such as performing control and processing related to data interaction or communication with the computer device 6. In this embodiment, the processor 142 is used to execute program codes stored in the memory 141 or process data.
Network interface 143 may comprise a wireless network interface or a wired network interface, with network interface 143 typically being used to establish communication links between computer device 6 and other computer devices. For example, the network interface 143 is used to connect the computer device 6 with an external terminal via a network, establish a data transmission channel and a communication link between the computer device 6 and the external terminal, and the like. The network may be a wireless or wired network such as an Intranet (Intranet), the Internet (Internet), a Global System of Mobile communication (GSM), Wideband Code Division Multiple Access (WCDMA), a 4G network, a 5G network, Bluetooth (Bluetooth), or Wi-Fi.
It is noted that fig. 4 only shows a computer device with components 141 and 143, but it is understood that not all of the shown components are required to be implemented, and that more or fewer components may be implemented instead.
In this embodiment, the page generating method stored in the memory 141 may be further divided into one or more program modules and executed by a processor (in this embodiment, the processor 142) to complete the embodiment of the present invention.
Example four
The present invention also provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the page generating method in the embodiments.
In this embodiment, the computer-readable storage medium includes a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, and the like. In some embodiments, the computer readable storage medium may be an internal storage unit of the computer device, such as a hard disk or a memory of the computer device. In other embodiments, the computer readable storage medium may be an external storage device of the computer device, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like provided on the computer device. Of course, the computer-readable storage medium may also include both internal and external storage devices of the computer device. In this embodiment, the computer-readable storage medium is generally used to store an operating system and various types of application software installed in the computer device, for example, program codes of the identification method for the abnormal account in the embodiment, and the like. Further, the computer-readable storage medium may also be used to temporarily store various types of data that have been output or are to be output.
It will be apparent to those skilled in the art that the modules or steps of the embodiments of the invention described above may be implemented by a general purpose computing device, they may be centralized on a single computing device or distributed across a network of multiple computing devices, and alternatively, they may be implemented by program code executable by a computing device, such that they may be stored in a storage device and executed by a computing device, and in some cases, the steps shown or described may be performed in an order different than that described herein, or they may be separately fabricated into individual integrated circuit modules, or multiple ones of them may be fabricated into a single integrated circuit module. Thus, embodiments of the invention are not limited to any specific combination of hardware and software.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.

Claims (10)

1.一种页面生成方法,其特征在于,所述方法包括:1. a page generation method, is characterized in that, described method comprises: 根据页面生成请求,确定待生成页面需求;According to the page generation request, determine the page requirements to be generated; 根据所述待生成页面需求,通过vue框架将待生成页面拆分成多个组件;其中每个组件均与vue框架中的唯一标识绑定;每个组件均包括HTML元素、元素布局、样式以及业务逻辑封装;According to the requirements of the page to be generated, the page to be generated is divided into multiple components through the vue framework; each component is bound with a unique identifier in the vue framework; each component includes HTML elements, element layouts, styles and Business logic encapsulation; 根据所述业务逻辑封装以及所述各个组件的属性,在各个组件中配置待生成页面的字段信息;Configure the field information of the page to be generated in each component according to the business logic package and the attributes of each component; 调用配置后的各个组件,渲染并生成页面。Call the configured components, render and generate the page. 2.根据权利要求1所述的页面生成方法,其特征在于,通过vue框架将待生成页面拆分成多个组件的步骤,包括:2. The page generation method according to claim 1, wherein the step of splitting the page to be generated into multiple components by the vue framework comprises: 通过vue框架生成组件关系树;其中所述组件关系树中的节点均对应组件,所述组件关系树用于反映各个组件之间的应用关系;Generate a component relationship tree through the vue framework; wherein the nodes in the component relationship tree all correspond to components, and the component relationship tree is used to reflect the application relationship between the components; 根据所述各个组件之间的应用关系,在预设组件库中选取多个组件。According to the application relationship between the various components, multiple components are selected from the preset component library. 3.根据权利要求2所述的页面生成方法,其特征在于,在预设组件库中选取多个组件的步骤之后,还包括:3. page generation method according to claim 2, is characterized in that, after the step of selecting a plurality of components in the preset component library, also comprises: 根据待生成页面需求,确定vue框架对应的页面参数信息;所述页面参数信息包括vue框架中的唯一标识、注册组件名称、组件注册数据函数、数据传递接口及事件对象的一种或者多种。According to the requirements of the page to be generated, determine the page parameter information corresponding to the vue framework; the page parameter information includes one or more of a unique identifier in the vue framework, a registered component name, a component registration data function, a data transfer interface, and an event object. 4.根据权利要求1所述的页面生成方法,其特征在于,调用配置后的各个组件,渲染并生成页面的步骤,包括:4. page generation method according to claim 1, is characterized in that, the step of calling each component after configuration, rendering and generating page, comprises: 根据待生成页面需求,对多个组件进行组合排序;Combine and sort multiple components according to the requirements of the page to be generated; 根据排序结果自定义拖拽组件组合插入到页面中,渲染并生成页面。According to the sorting result, the custom drag and drop component combination is inserted into the page, and the page is rendered and generated. 5.根据权利要求4所述的页面生成方法,其特征在于,渲染并生成页面的步骤,包括:5. The method for generating a page according to claim 4, wherein the step of rendering and generating the page comprises: 根据页面参数信息,确定各个组件的生成位置以及颜色;Determine the generation position and color of each component according to the page parameter information; 根据各个组件的生成位置以及颜色,在对应位置生成相应颜色的组件,以完成页面渲染。According to the generation position and color of each component, components with corresponding colors are generated at corresponding positions to complete page rendering. 6.根据权利要求1所述的页面生成方法,其特征在于,根据所述业务逻辑封装以及所述各个组件的属性,在各个组件中配置待生成页面的字段信息的步骤,包括:6. The page generation method according to claim 1, wherein the step of configuring the field information of the page to be generated in each component according to the business logic encapsulation and the attributes of each component, comprises: 获取所述业务逻辑封装中的多个表单;Obtain multiple forms in the business logic package; 根据各个组件的属性抽取所述多个表单中的表单数据;Extract the form data in the multiple forms according to the attributes of each component; 根据所述表单数据,对页面中展示的文字信息进行配置,以生成字段信息。According to the form data, the text information displayed on the page is configured to generate field information. 7.根据权利要求1所述的页面生成方法,其特征在于,通过vue框架将待生成页面拆分成多个组件的步骤之后,还包括:7. The page generation method according to claim 1, characterized in that, after the step of splitting the page to be generated into multiple components by the vue framework, further comprising: 创建与待生成页面对应的json文件;其中所述json文件的各个节点分别携带有对应的vue框架的唯一标识。Create a json file corresponding to the page to be generated; wherein each node of the json file carries the unique identifier of the corresponding vue framework. 8.一种页面生成系统,其特征在于,所述页面生成系统包括:8. A page generation system, wherein the page generation system comprises: 请求模块,用于根据页面生成请求,确定待生成页面需求;The request module is used to generate a request according to the page and determine the requirements of the page to be generated; 拆分模块,用于根据所述待生成页面需求,通过vue框架将待生成页面拆分成多个组件;其中每个组件均与vue框架中的唯一标识绑定;每个组件均包括HTML元素、元素布局、样式以及业务逻辑封装;The splitting module is used to split the page to be generated into multiple components through the vue framework according to the requirements of the page to be generated; each component is bound with a unique identifier in the vue framework; each component includes HTML elements , element layout, style and business logic encapsulation; 配置模块,用于根据所述业务逻辑封装以及所述各个组件的属性,在各个组件中配置待生成页面的字段信息;a configuration module, configured to configure the field information of the page to be generated in each component according to the business logic package and the attributes of each component; 渲染模块,用于调用配置后的各个组件,渲染并生成页面。The rendering module is used to call the configured components, render and generate the page. 9.一种计算机设备,包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时用于实现权利要求1~7中任一项所述的页面生成方法的步骤。9. A computer device, comprising a memory, a processor, and a computer program stored in the memory and running on the processor, wherein the processor is used to implement claims 1 to 7 when the processor executes the computer program The steps of any one of the page generation methods. 10.一种计算机可读存储介质,其特征在于,其内存储有计算机程序,所述计算机程序可被至少一个处理器所执行,以使所述至少一个处理器执行权利要求1~7中任一项所述的页面生成方法的步骤。10. A computer-readable storage medium, characterized in that a computer program is stored therein, and the computer program can be executed by at least one processor, so that the at least one processor executes any one of claims 1-7. The steps of the page generation method described in one item.
CN202210058198.3A 2022-01-19 2022-01-19 Page generation method, system, computer equipment and readable storage medium Pending CN114416056A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210058198.3A CN114416056A (en) 2022-01-19 2022-01-19 Page generation method, system, computer equipment and readable storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210058198.3A CN114416056A (en) 2022-01-19 2022-01-19 Page generation method, system, computer equipment and readable storage medium

Publications (1)

Publication Number Publication Date
CN114416056A true CN114416056A (en) 2022-04-29

Family

ID=81273880

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210058198.3A Pending CN114416056A (en) 2022-01-19 2022-01-19 Page generation method, system, computer equipment and readable storage medium

Country Status (1)

Country Link
CN (1) CN114416056A (en)

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114912617A (en) * 2022-05-18 2022-08-16 杭州骏彩科技有限公司 Method for quantization design
CN115268884A (en) * 2022-06-09 2022-11-01 知学云(北京)科技股份有限公司 Mobile terminal visual page configuration and rendering method based on aPaaS platform
CN116009830A (en) * 2022-12-16 2023-04-25 国科础石(重庆)软件有限公司 A method, device, and electronic device for generating components of a target software module
CN116090414A (en) * 2023-02-17 2023-05-09 北京龙智数科科技服务有限公司 Service report generation method and device
CN116301832A (en) * 2023-03-23 2023-06-23 平安健康保险股份有限公司 Web page development method, device, equipment and storage medium
CN116578366A (en) * 2023-04-26 2023-08-11 南京维拓科技股份有限公司 A method for data transfer between multiple systems in an industrial system
CN117112913A (en) * 2023-10-23 2023-11-24 腾讯科技(深圳)有限公司 Data processing method, device, equipment and storage medium
CN117131303A (en) * 2022-05-20 2023-11-28 北京沃东天骏信息技术有限公司 Page data processing method, device, equipment and computer-readable storage medium
CN118034666A (en) * 2023-12-29 2024-05-14 北京领雁科技股份有限公司 Construction platform for marketing page and marketing page construction method
WO2025162406A1 (en) * 2024-01-31 2025-08-07 北京字跳网络技术有限公司 Page display method and apparatus, device and storage medium

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108536715A (en) * 2017-03-06 2018-09-14 百度在线网络技术(北京)有限公司 A kind of preview page generation method, device, equipment and storage medium
CN110825362A (en) * 2019-11-04 2020-02-21 广东道一信息技术股份有限公司 Low-code application software development system and method
CN111177621A (en) * 2019-12-23 2020-05-19 北京达佳互联信息技术有限公司 Web page development method, device and system
CN112015412A (en) * 2020-08-21 2020-12-01 北京金和网络股份有限公司 Device and method for generating business model based on form engine
CN112114805A (en) * 2020-08-27 2020-12-22 长沙市到家悠享网络科技有限公司 Page generation method, device and equipment
CN112433799A (en) * 2020-11-25 2021-03-02 平安普惠企业管理有限公司 Page generation method, device, equipment and medium

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108536715A (en) * 2017-03-06 2018-09-14 百度在线网络技术(北京)有限公司 A kind of preview page generation method, device, equipment and storage medium
CN110825362A (en) * 2019-11-04 2020-02-21 广东道一信息技术股份有限公司 Low-code application software development system and method
CN111177621A (en) * 2019-12-23 2020-05-19 北京达佳互联信息技术有限公司 Web page development method, device and system
CN112015412A (en) * 2020-08-21 2020-12-01 北京金和网络股份有限公司 Device and method for generating business model based on form engine
CN112114805A (en) * 2020-08-27 2020-12-22 长沙市到家悠享网络科技有限公司 Page generation method, device and equipment
CN112433799A (en) * 2020-11-25 2021-03-02 平安普惠企业管理有限公司 Page generation method, device, equipment and medium

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114912617A (en) * 2022-05-18 2022-08-16 杭州骏彩科技有限公司 Method for quantization design
CN117131303A (en) * 2022-05-20 2023-11-28 北京沃东天骏信息技术有限公司 Page data processing method, device, equipment and computer-readable storage medium
CN115268884A (en) * 2022-06-09 2022-11-01 知学云(北京)科技股份有限公司 Mobile terminal visual page configuration and rendering method based on aPaaS platform
CN115268884B (en) * 2022-06-09 2023-06-16 知学云(北京)科技股份有限公司 Mobile terminal visual page configuration and rendering method based on aPaaS platform
CN116009830A (en) * 2022-12-16 2023-04-25 国科础石(重庆)软件有限公司 A method, device, and electronic device for generating components of a target software module
CN116090414A (en) * 2023-02-17 2023-05-09 北京龙智数科科技服务有限公司 Service report generation method and device
CN116301832A (en) * 2023-03-23 2023-06-23 平安健康保险股份有限公司 Web page development method, device, equipment and storage medium
CN116578366A (en) * 2023-04-26 2023-08-11 南京维拓科技股份有限公司 A method for data transfer between multiple systems in an industrial system
CN117112913A (en) * 2023-10-23 2023-11-24 腾讯科技(深圳)有限公司 Data processing method, device, equipment and storage medium
CN117112913B (en) * 2023-10-23 2024-02-13 腾讯科技(深圳)有限公司 Data processing method, device, equipment and storage medium
CN118034666A (en) * 2023-12-29 2024-05-14 北京领雁科技股份有限公司 Construction platform for marketing page and marketing page construction method
CN118034666B (en) * 2023-12-29 2024-08-09 北京领雁科技股份有限公司 Construction platform for marketing page and marketing page construction method
WO2025162406A1 (en) * 2024-01-31 2025-08-07 北京字跳网络技术有限公司 Page display method and apparatus, device and storage medium

Similar Documents

Publication Publication Date Title
CN114416056A (en) Page generation method, system, computer equipment and readable storage medium
CN108958714B (en) Business component type development method and device, computer equipment and storage medium
CN112507273B (en) Web page generation method, device and electronic device
CN112925520A (en) Method and device for building visual page and computer equipment
US11281742B2 (en) Interactive and selective coloring of digital vector glyphs
CN110705237B (en) Automatic document generation method, data processing device and storage medium
CN111694565A (en) Data visualization application development method and system
CN101414301B (en) Device and method for processing object in reservoir in content management system
US10552107B2 (en) Creation of component templates
CN114565473A (en) Method and device for configuring insuring process, storage medium and computer equipment
CN112817591A (en) Front-end page construction method and device
CN115269090A (en) Marketing page generation method and device, terminal and storage medium
CN114443033A (en) Page framework display method and device, electronic equipment and storage medium
CN116009863B (en) Front-end page rendering method, device and storage medium
CN115617324B (en) Client webpage generation method
CN116933350A (en) Inventory compiling method, device, equipment and storage medium based on drawing sheet
CN115421717A (en) Control dynamic configuration method, device, equipment and storage medium
CN114419194A (en) Method for generating collocation image and electronic equipment
CN120335858A (en) Low-code toolbox dynamic registration method, system, device and storage medium
CN120447895A (en) A method, device, computer equipment and storage medium for automatic form generation
CN111026860A (en) A method and browser plug-in for displaying electronic documents
US9372844B2 (en) Automatically generating a business process flow GUI using a symbolic annotation language
US11662874B2 (en) Method and system for transforming wireframes to as-is screens with responsive behaviour
JP2010157165A (en) Information processor, information processing method, and program
CN116149653A (en) Method, device, storage medium and computer equipment for constructing list page

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20220429

RJ01 Rejection of invention patent application after publication