Form item rendering method, system and device based on dynamic data and storage medium

Abstract

This invention discloses a method, system, device, and storage medium for rendering form items based on dynamic data. The method includes: determining the dynamic data structure of the form items; rendering and concatenating the required form item types with the dynamic data structure according to business needs through a front-end page to obtain a data rendering template; and rendering the actual form data using the data rendering template through the front-end page to obtain the corresponding dynamic form items. In this invention, all form item rendering type judgment logic is processed on the front-end, which improves the data purity of the development interface and effectively meets the form item rendering requirements of dynamic data.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, and in particular, to a form item rendering method and system based on dynamic data, a device and a storage medium. BACKGROUND

[0002] At present, in the field of Web, the development of web pages is generally in the mode of separation of front and back ends. Front-end engineers are responsible for writing page structures and styles, and the server is responsible for providing data. Front-end engineers obtain server data through an Http request, format the data, and insert it into the page structure to render the data into a formal web page. Among them, Web represents a web page, and an Http request refers to a request message from a client to a server.

[0003] In the entire development process of a web page, front-end rendering of a page structure can be roughly divided into two forms. One is that the data structure is fixed, the page structure is fixed, and the front end only needs to format the data obtained from the server and insert it into the page structure to render the web page. The other is that the front-end page structure is uncertain, and the structure of the web page depends on the data structure and type of the server. This form is much more complex than the first form of inserting data into a fixed web page structure.

[0004] In the development process of a website, for the rendering and display of dynamic data, front-end developers develop a set of front-end display structures according to a data structure, which not only greatly increases the workload, but also may not be able to fully meet the rendering and display of dynamic data. For example, a website has 50,000 customers, and the basic information of each customer is not completely the same. Suppose that the basic information of a customer includes a telephone number, a company name, a zip code, and an address, and the basic information of another customer includes a company name, a customer alias, an industry type, and a zip code. The basic information of these two customers is different. How to fully meet the data structure of the basic information of each customer in display and editing requires a unified form item rendering and display method based on dynamic data.

[0005] In the prior art, the server directly returns a processed Html string structure, that is, the server determines the form items to be displayed according to the data structure and data type, combines them into an Html string, and returns them to the front end through an Http request. Front-end developers do not need to process data logic or judge data types, and can directly insert the Html string returned by the Http into the page structure to render it. The disadvantage of this method is that the server needs to process a large amount of data type judgment logic and splice Html tag structures. It is best for front-end developers to splice Html tags, which are not in the scope of the server and violate the principle of separation of front and back end development. SUMMARY

[0006] The present application is directed to the above-mentioned technical problem that using dynamic data to splice Html structure on the server side and returning to the front end causes the server to handle too much workload and cannot realize the separation of front-end and back-end development, and proposes a form item rendering method, system, device and storage medium based on dynamic data.

[0007] In a first aspect, the embodiments of the present application provide a form item rendering method based on dynamic data, comprising:

[0008] A data structure determination step: determining a dynamic data structure of a form item;

[0009] A template obtaining step: rendering and splicing the required form item type according to the business requirements of the front-end page in combination with the dynamic data structure to obtain a data rendering template;

[0010] A rendering step: rendering the actual form data using the data rendering template through the front-end page to obtain the corresponding dynamic form item.

[0011] The above-mentioned form item rendering method based on dynamic data, wherein in the data structure determination step, the dynamic data structure is determined by the front-end page and the server side according to business requirements.

[0012] The above-mentioned form item rendering method based on dynamic data, wherein the fields in the dynamic data structure that contain types or restriction conditions include but are not limited to: en, cn, multi, dataType, required, value, and readOnly.

[0013] The above-mentioned form item rendering method based on dynamic data, wherein the rendering step comprises:

[0014] A data request step: after receiving the data request sent by the front-end page, the server side encapsulates and returns the actual form data to be displayed to the front-end page according to the format of the dynamic data structure;

[0015] A form item rendering step: the actual form data is transmitted into the data rendering template through the front-end page, and the dynamic form item corresponding to the actual form data is rendered.

[0016] In a second aspect, the embodiments of the present application provide a form item rendering system based on dynamic data, comprising:

[0017] A data structure determination module: determining a dynamic data structure of a form item;

[0018] The template obtaining module: obtaining a data rendering template by rendering and splicing a required form item type according to a business requirement and the dynamic data structure through a front-end page;

[0019] The rendering module: obtaining a corresponding dynamic form item by rendering actual form data using the data rendering template through the front-end page.

[0020] The above-mentioned form item rendering system based on dynamic data, wherein in the data structure determining module, the dynamic data structure is determined by the front-end page and a server side according to a business requirement.

[0021] The above-mentioned form item rendering system based on dynamic data, wherein the fields in the dynamic data structure that contain types or restriction conditions include but are not limited to: en, cn, multi, dataType, required, value, and readOnly.

[0022] The above-mentioned form item rendering system based on dynamic data, wherein the rendering module includes:

[0023] The data request unit: after receiving a data request sent by the front-end page, encapsulating and returning actual form data that needs to be displayed to the front-end page according to the format of the dynamic data structure through the server side;

[0024] The form item rendering unit: passing the actual form data into the data rendering template through the front-end page, and rendering the dynamic form item corresponding to the actual form data.

[0025] In a third aspect, an electronic device is provided, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and the processor implements the form item rendering method based on dynamic data according to the first aspect when executing the computer program.

[0026] In a fourth aspect, a computer readable storage medium is provided, which stores a computer program, and the program is executable on a processor to implement the form item rendering method based on dynamic data according to the first aspect.

[0027] Compared with the prior art, the present application has the following advantages and positive effects:

[0028] The application provides a processing method for uncertain front-end page structures and server-side dynamic data and type rendering page structures, which can reduce the trouble of splicing html structures by using dynamic data on the server side, all form item rendering type judgment logic is processed on the front end, the data purity of the developed interface can be improved, the principle of separating front-end development from back-end development is realized, data capabilities are better applied, and the form item rendering requirement of dynamic data can be well met. BRIEF DESCRIPTION OF DRAWINGS

[0029] Figure 1 A step schematic diagram of a form item rendering method based on dynamic data is provided for the application;

[0030] Figure 2 A dynamic data structure schematic diagram is provided for the application; Figure 1 A flowchart of step S3 in the method;

[0031] Figure 3 A dynamic data structure schematic diagram is provided for the application;

[0032] Figure 4 A structure diagram corresponding to the actual rendering of each field form item is provided for the application;

[0033] Figure 5 An actual structure schematic diagram rendered by example 1 is provided for the application;

[0034] Figure 6 An actual structure schematic diagram rendered by example 2 is provided for the application;

[0035] Figure 7 An actual structure schematic diagram rendered by example 3 is provided for the application;

[0036] Figure 8 An encapsulated data structure schematic diagram is provided for the application;

[0037] Figure 9 A framework diagram of a form item rendering system based on dynamic data is provided for the application;

[0038] Figure 10 A framework diagram of a computer device according to an embodiment of the application.

[0039] In the drawings, reference numerals are:

[0040] 11, data structure determination module; 12, template obtaining module; 13, rendering module; 131, data request unit; 132, form item rendering unit; 81, processor; 82, memory; 83, communication interface; 80, bus. DETAILED DESCRIPTION

[0041] In order to make the objects, technical solutions and advantages of the present application clearer, the present application will be described and illustrated below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and should not be used to limit the present application. Based on the embodiments provided by the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort belong to the scope of the present application.

[0042] Obviously, the accompanying drawings in the following description are only some examples or embodiments of the present application, and for those of ordinary skill in the art, the present application can also be applied to other similar scenarios without creative effort based on the accompanying drawings. In addition, it can be understood that although the efforts made in the development process can be complex and lengthy, for those of ordinary skill in the art related to the content disclosed in the present application, some design, manufacture or production changes based on the technical content disclosed in the present application are only routine technical means, and should not be understood as insufficient disclosure of the content disclosed in the present application.

[0043] In the present application, "embodiments" means that the specific features, structures or characteristics described in conjunction with the embodiments can be included in at least one embodiment of the present application. The phrase appears at various places in the specification does not necessarily refer to the same embodiment, nor is it mutually exclusive or alternative embodiments. It is explicitly and implicitly understood by those of ordinary skill in the art that the embodiments described in the present application can be combined with other embodiments without conflict.

[0044] Unless otherwise defined, technical terms and scientific terms used in the present application shall have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains. Unless otherwise defined, the terms "one" and "a" or "an" used in this specification do not denote a singular entity or quantity but rather denote either a singular or a plural component or quantity. The terms "including," "comprising," "having," and variations thereof herein are intended to be broad and encompass the terms "consisting of" and "consisting essentially of." For example, a process, method, system, article, or apparatus that comprises a list of steps or components as a process, method, system, article, or apparatus used in the practice thereof has no limitation as to a combination of the steps or components in the list. The term "coupled" or "connected" or "coupling" or "connecting" or variations thereof herein are intended to be broad and encompass a direct coupling or connection or an indirect coupling or connection. The term "multiple" means two or more. The term "and / or" describes associated objects in association with the associated objects. For example, "A and / or B" can mean three cases, such as A alone, A and B, and B alone. The character " / " generally means that the associated objects are "or" relationship. The terms "first", "second", "third", and the like are merely used to distinguish similar objects, and do not represent a specific order of the objects.

[0045] The present application will be described in detail below with reference to the embodiments shown in the drawings, but it should be noted that these embodiments are not limiting to the present application, and equivalent transformations or substitutions of function, method, or structure made by those skilled in the art based on these embodiments are within the scope of the present application.

[0046] Before the various embodiments of the present application are described in detail, the core inventive idea of the present application is outlined, and is described in detail through the following several embodiments.

[0047] The present application proposes that in order to uniformly process and render the form items contained in the data according to different dynamic data, the front end and the server jointly specify the dynamic data format, the front end writes the rendering template of all possible displayed form items of the business according to the dynamic data format, and according to the type and restriction condition of each item of data in the actual dynamic data list transmitted by the server, all form items corresponding to the data in the dynamic data list are matched and rendered in the rendering template.

[0048] Embodiment one:

[0049] Figure 1 A step schematic diagram of a form item rendering method based on dynamic data provided by the present application. As shown in Figure 1As shown, this embodiment discloses a specific implementation of a form item rendering method based on dynamic data (hereinafter referred to as the "method").

[0050] Specifically, the method disclosed in this embodiment mainly includes the following steps:

[0051] Step S1: Determine the dynamic data structure of the form items;

[0052] Specifically, front-end developers and server-side developers jointly determine the dynamic data structure of form items based on business requirements, such as... Figure 3 As shown, where, Figure 3 The meanings of the corresponding fields are as follows:

[0053] `en` represents the English label of the form item; `cn` represents the Chinese label of the form item; `multi` indicates whether the form item has multiple values, where `true` represents multiple values ​​and `false` represents a single value; `dataType` represents the type of the form item; `required` indicates whether the form item is required, where `true` represents required and `false` represents not required; `value` represents the value of the form item; `readOnly` indicates whether the form item is read-only, where `true` represents read-only and `false` represents editable.

[0054] Step S2: The front-end page combines the required form item types with the dynamic data structure according to business needs to render and splice the data to obtain a data rendering template;

[0055] Specifically, front-end developers, based on the specific business requirements, combine all the possible form item types to be rendered with the `en`, `cn`, `multi`, `datatype`, `required`, `value`, and `readOnly` fields from the data types determined in the first step to create a data rendering template. This template is used to subsequently render the corresponding form items according to the data types based on the actual data obtained. The specific data and form item matching rules are as follows:

[0056] The specific structure corresponding to each field when rendering form items is as follows: Figure 4 As shown, specifically, string represents the form item input, enum represents the form item select, date represents the form item datePicker with time accurate to the date, textare represents the form item textarea, time represents the form item datePicker with time accurate to the second, url represents the form item input, numer represents the form item input...

[0057] The following is Figure 4 Specific rendering examples of form items:

[0058] Example 1: data structure of enterprise nickname form item

[0059]

[0060] According to the above data structure, the actual structure of rendering can be obtained as shown in Figure 5 .

[0061] Example 2: data structure of enterprise type form item

[0062]

[0063]

[0064] According to the above data structure, the actual structure of rendering can be obtained as shown in Figure 6 .

[0065] Example 3: data structure of creation date form item

[0066]

[0067] According to the above data structure, the actual structure of rendering can be obtained as shown in Figure 7 .

[0068] Step S3: rendering the actual form data by using the data rendering template to obtain the corresponding dynamic form item through the front-end page.

[0069] Referring to Figure 2 , wherein the step S3 specifically includes the following contents:

[0070] Step S31: after receiving the data request sent by the front-end page, the actual form data to be displayed is encapsulated according to the format of the dynamic data structure by the server side and returned to the front-end page;

[0071] Step S32: the actual form data is transmitted into the data rendering template by the front-end page, and the dynamic form item corresponding to the actual form data is rendered.

[0072] Specifically, according to the dynamic data type determined in step S1, the server personnel makes a data request in the front-end, encapsulates the information form item to be displayed into the data format determined in step S1 according to the business demand, and returns it to the front-end developer, and the data structure is as shown in Figure 8 . After the front-end developer obtains the data list returned by the server, the data is transmitted into the data rendering template according to the data list format, and the dynamic form item required by the business is rendered.

[0073] The application renders different form items by different dynamic data through writing form item templates of all possible displays in the front end, judging the type, value, whether to be filled in, and various limitation conditions of the form item to be displayed according to the type and limitation conditions of the dynamic data in the front end.

[0074] Embodiment two:

[0075] In combination with the form item rendering method based on dynamic data disclosed in embodiment one, the embodiment discloses a specific implementation example of a form item rendering system based on dynamic data (hereinafter referred to as “system”).

[0076] Referring to Figure 9 The system comprises:

[0077] The data structure determination module 11 determines the dynamic data structure of the form item.

[0078] The template obtaining module 12 obtains a data rendering template by rendering and splicing the required form item type in combination with the dynamic data structure according to the business requirement of the front end page.

[0079] The rendering module 13 renders the corresponding dynamic form item by rendering the actual form data by using the data rendering template through the front end page.

[0080] Specifically, in the data structure determination module 11, the dynamic data structure is determined by the front end page and the server side according to the business requirement, and the fields including the type or limitation condition in the dynamic data structure include but are not limited to en, cn, multi, dataType, required, value, and readOnly.

[0081] Specifically, the rendering module 13 comprises:

[0082] The data request unit 131 encapsulates and returns the actual form data to be displayed to the front end page according to the format of the dynamic data structure through the server side after receiving the data request sent by the front end page.

[0083] The form item rendering unit 132 renders the dynamic form item corresponding to the actual form data by inputting the actual form data into the data rendering template through the front end page.

[0084] The technical solution of the form item rendering system based on dynamic data disclosed in the embodiment is the same as the rest of the technical solution of the form item rendering method based on dynamic data disclosed in embodiment one, please refer to the description of embodiment one, which will not be repeated here.

[0085] Embodiment three:

[0086] In conjunction with Figure 10 As shown in FIG. 8, this embodiment discloses a specific implementation of a computer device. The computer device can include a processor 81 and a memory 82 storing computer program instructions.

[0087] Specifically, the processor 81 can include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement one or more embodiments of the present application.

[0088] The memory 82 can include a mass storage for data or instructions. By way of example, and without limitation, the memory 82 can include a hard disk drive (HDD), a floppy disk drive, a solid-state drive (SSD), a flash drive, a compact disc (CD) or DVD, a tape, a magnetic or optical or magneto-optical storage or a combination of two or more of these. The memory 82 can be removable and / or built-in (or fixed) where appropriate. The memory 82 can be internal or external at appropriate. In particular embodiments, the memory 82 is a nonvolatile memory. In particular embodiments, the memory 82 includes a Read-Only Memory (ROM) and a Random-Access Memory (RAM). Where appropriate, this ROM can be mask programmed ROM, Programmable ROM (PROM), Erasable Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), Electrically Alterable ROM (EAROM), or FLASH memory or a combination of two or more of these. Where appropriate, this RAM can be Static Random-Access Memory (SRAM) or Dynamic Random-Access Memory (DRAM), which can be Fast Page Mode Dynamic Random-Access Memory (FPMDRAM), Extended Data Output Dynamic Random-Access Memory (EDODRAM), Synchronous Dynamic Random-Access Memory (SDRAM), or the like.

[0089] The memory 82 can be used to store or buffer various data files needed for processing and / or communication, and possible computer program instructions executed by the processor 81.

[0090] The processor 81 reads and executes the computer program instructions stored in the memory 82 to implement any one of the above-mentioned embodiments of the form item rendering method based on dynamic data.

[0091] In some embodiments, the computer device can further include a communication interface 83 and a bus 80. In which, as shown in the figure, the processor 81, the memory 82, the communication interface 83 are connected through the bus 80 and complete the communication between each other. Figure 10

[0092] The communication interface 83 is used to realize the communication between the modules, devices, units and / or devices in the embodiments of the present application. The communication interface 83 can also realize the data communication between other components, such as: external devices, image / data acquisition devices, databases, external storage and image / data processing workstations, etc.

[0093] ​Bus 80 includes hardware, software, or both, to couple components of the computer device to each other and to couple components to other components in the environment. Bus 80 includes, but is not limited to, at least one of a data bus, an address bus, a control bus, an expansion bus, a local bus, and the like. By way of example, and not limitation, bus 80 can include an Accelerated Graphics Port (AGP) or other graphics bus, an Extended Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a Hyper Transport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an InfiniBand (IB) interconnect, a Low Pin Count (LPC) bus, a memory bus, a Micro Channel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local (VLB) bus, or the like, or a combination of two or more of these. Where appropriate, bus 80 can include one or more buses. Although the example describes and shows a particular bus, this application contemplates any suitable bus or interconnect.

[0094] In addition, in combination with the form item rendering method based on dynamic data in the above embodiments, an embodiment of the present application can provide a computer readable storage medium for implementation. The computer readable storage medium has computer program instructions stored thereon; the computer program instructions are executed by a processor to implement any one of the form item rendering methods based on dynamic data in the above embodiments.

[0095] Any combination of the technical features in the above-described embodiments can be made, and for the sake of brevity, not all possible combinations are described, however, as long as there is no contradiction, any combination of the technical features should be considered within the scope of the present disclosure.

[0096] In summary, the beneficial effects based on the present application are that the present application proposes a processing method for uncertain front-end page structure and server-side dynamic data and type rendering page structure, which can reduce the trouble of using dynamic data to splice html structure on the server side, all form item rendering type judgment logic is processed in the front end, which can improve the data purity of the developed interface, realizes the principle of separation of front-end and back-end development, and can well meet the form item rendering demand of dynamic data.

[0097] The above-described embodiments only express several implementation manners of the present application, and the description is relatively specific and detailed, but it should not be understood as a limitation on the scope of the patent. It should be pointed out that for ordinary skilled persons in the art, some modifications and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application should be subject to the appended claims.

Claims

1. A form item rendering method based on dynamic data, characterized in that, The method comprises the following steps: a data structure determining step: determining a dynamic data structure of a form item; a template obtaining step: combining a required form item type with the dynamic data structure according to a business requirement to obtain a data rendering template through a front-end page; a rendering step: rendering an actual form data by using the data rendering template to obtain a corresponding dynamic form item through the front-end page; In the data structure determining step, the dynamic data structure is determined by the front-end page and a server side according to a business requirement; The fields in the dynamic data structure that contain types or limitation conditions include but are not limited to: en, cn, multi, dataType, required, value, and readOnly; en is an English label of the form item; cn is a Chinese label of the form item; multi indicates whether the form item is multi-valued; dataType is a type of the form item; required indicates whether the form item is required; value is a value of the form item; and readOnly indicates whether the form item is read-only; The rendering step comprises the following steps: a data request step: after receiving a data request sent by the front-end page, the actual form data to be displayed is encapsulated according to a format of the dynamic data structure through the server side and returned to the front-end page; a form item rendering step: the actual form data is transmitted into the data rendering template through the front-end page, and the dynamic form item corresponding to the actual form data is rendered; The matching condition of the dynamic form item corresponding to the actual form data is as follows: string represents a form item input, enum represents a form item select, date represents a form item datePicker time accurate to date, textarea represents a form item textarea, time represents a form item datePicker time accurate to second, url represents a form item input, and number represents a form item input.

2. A dynamic data based form item rendering system, comprising: The method comprises the following steps: a data structure determining module: determining a dynamic data structure of a form item; a template obtaining module: combining a required form item type with the dynamic data structure according to a business requirement to obtain a data rendering template through a front-end page; a rendering module: rendering an actual form data by using the data rendering template to obtain a corresponding dynamic form item through the front-end page; In the data structure determining module, the dynamic data structure is determined by the front-end page and a server side according to a business requirement; The fields in the dynamic data structure that contain types or limitation conditions include but are not limited to: en, cn, multi, dataType, required, value, and readOnly; Wherein, en is the English label of the form item; cn is the Chinese label of the form item; multi is whether the form item is multi-value; dataType is the type of the form item; required is whether the form item is required; value is the value of the form item; and readOnly is whether the form item is read-only. The rendering module comprises: A data request unit, which, after receiving a data request sent by the front-end page, encapsulates actual form data to be displayed according to a format of the dynamic data structure and returns the actual form data to the front-end page through the server end; A form item rendering unit, which transmits the actual form data into the data rendering template through the front-end page, and renders the dynamic form item corresponding to the actual form data; Wherein, the matching condition for rendering the dynamic form item corresponding to the actual form data is: string represents a form item input, enum represents a form item select, date represents a form item datePicker accurate to date, textarea represents a form item textarea, time represents a form item datePicker accurate to seconds, url represents a form item input, and number represents a form item input.

3. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The processor executes the computer program to realize the dynamic data-based form item rendering method as claimed in claim 1.

4. A computer-readable storage medium having stored thereon a computer program, characterized in that, The program is executed by the processor to realize the dynamic data-based form item rendering method as claimed in claim 1.

Images