CN107943455A

CN107943455A - A kind of list rendering system based on JSON data formats

Info

Publication number: CN107943455A
Application number: CN201710686349.9A
Authority: CN
Inventors: 苟靖迪; 王承明
Original assignee: Chengdu Sprout Technology LLC
Current assignee: Chengdu Sprout Technology LLC
Priority date: 2017-08-11
Filing date: 2017-08-11
Publication date: 2018-04-20

Abstract

The present invention relates to Computer Applied Technology field, concretely it is related to a kind of list rendering system based on JSON data formats, including management end module, database module and user side module, further include form editing device module and list renderer modules, the form editing device module is connected between the management end module and the database module, and the list renderer modules are connected between the database module and the user side module；The present invention allows list being capable of batch modification by mass data render；Utilize abstract data model, allow the maintenance of list to focus on to focus in a list rendering engine, so that safeguard simpler, the editor of list is lifted to application from code aspect, solve the problems, such as that project development process is cumbersome, solve monopoly and non-popularity that enterprises only have technical staff to develop list, by the way that by JSON data representations, HTML form being solved the problems, such as, project volume is excessive when formfile is excessive.

Description

A kind of list rendering system based on JSON data formats

Technical field

The present invention relates to Computer Applied Technology field, is concretely related to a kind of list wash with watercolours based on JSON data formats Dye system.

Background technology

Existing questionnaire list storage mode is mostly the common storage mode of HTML+CSS+JS, is realizing a WEB table In single process, the content of designing form is first had to, its secondary content according to list increases field for it, then writes HTML Code, will be one by one in HTML code all Form Elements are expressed with suitable mode；Write in next step CSS codes have pattern by list；Finally also JS is used to do the verification and judgement of list content, these are fully completed could be into The issue and displaying of row list.

In this process, most of list that same enterprise uses is essentially all similar identical, but is opened every time Send out but a set of new HTML code will be rewritten.Among these there are the shortcomings that it is apparent：

1st, list occurs needing to change each list HTML (or other resource files) one by one during global revision；

2nd, the development process of list is repeatedly cumbersome.After the exploitation of single type list reaches qualification, it can still deposit In unlimited labout process, it is necessary to repeat the task Infinite Cyclic of low work difficulty high workload cost；

3rd, HTML takes meaningless project volume, increase project development and the difficulty safeguarded；

4th, list belongs to trifling scattered task, when the operation team of various enterprises needs to develop list, it has to arrange Good list demand information applies for that developing department carries out waiting, influences the whole progress of work again to technological development department.

The content of the invention

Therefore the present invention proposes a kind of list rendering system based on JSON data formats, can not for solving solution list Batch modification, difficult in maintenance, project development process is trifling, solves the problems, such as that project volume is excessive when HTML form file is excessive.

The technical proposal of the invention is realized in this way：A kind of list rendering system based on JSON data formats, including End module, database module and user side module are managed, further includes form editing device module, the form editing device module connection Between the management end module and the database module, by handling the editing machine page editing list occurred, with JSON The form of data is stored to database module；List renderer modules are further included, the list renderer modules are connected to described Between database module and the user side module, the list renderer modules will be stored in the corresponding list of database module JSON data are rendered, and the list renderer modules remove the information of HTML itself, and structure JSON data forms substitute HTML。

Further, the form editing device module includes form editing device client and form editing device server-side, leads to The editor page Orly for crossing the appearance of form editing device client drags menu element, sets the operation such as form attributes, form identifier Form editing is completed, then passes through form editing device server-side storage to database module.

Further, the list renderer modules include list renderer client and list renderer server-side, lead to Cross and enter list renderer client with specific form identifier, while list renderer server-side can be by this in tables of data The corresponding list JSON data transfers of one identifier are rendered to client by client.

Further, user fills in each single item of list in the list rendered, clicks on and preserves, the data filled in Information will pass back to database module by list renderer server-side with the form of JSON data and store.

Further, the list renderer modules remove the information of renderer HTML itself in renderer, be in wash with watercolours Whole array is traveled through during dye, the pattern of final rendering is determined according to the TYPE parameters of each array unit and renders As a result, by traveling through the combination rendered, reach the result that HTML is substituted using JSON data structure list.

By above disclosure, beneficial effects of the present invention are：

1st, the present invention allows list being capable of batch modification by mass data render；

2nd, using abstract data model, allow the maintenance of list to focus on and focus in a list rendering engine so that safeguard It is simpler；

3rd, by the way that the editor of list from the lifting of code aspect to application, is solved, project development process is cumbersome to ask Topic；

4th, by doing operation optimization in application layer, solves the monopolization that enterprises only have technical staff to develop list Property and non-popularity；

5th, by HTML form by JSON data representations, is solved formfile it is excessive when project volume is excessive asks Topic, and database is stored data in, it is more convenient to safeguard.

Brief description of the drawings

Fig. 1 is a kind of structure diagram of the list rendering system embodiment based on JSON data formats of the present invention.

Reference numeral is as follows：

Manage end module 1, form editing device module 2, database module 3, list renderer modules 4, user side module 5.

Embodiment

Below in conjunction with the embodiment of the present invention, the technical solution in the embodiment of the present invention is clearly and completely described, Obviously, described embodiment is only part of the embodiment of the present invention, instead of all the embodiments.Based in the present invention Embodiment, those of ordinary skill in the art's all other embodiments obtained without creative efforts, all Belong to the scope of protection of the invention.

As shown in Figure 1, a kind of list rendering system based on JSON data formats, including management end module 1, database mould Block 3 and user side module 5, it is characterised in that：Form editing device module 2 is further included, the form editing device module 2 is connected to institute State between management end module 1 and the database module 3, by handling the editing machine page editing list occurred, with JSON numbers According to form storage to database module 3；List renderer modules 4 are further included, the list renderer modules 4 are connected to described Between database module 3 and the user side module 5, it is corresponding that the list renderer modules 4 will be stored in database module 3 List JSON data are rendered, and the list renderer modules 4 remove the information of HTML itself, build JSON data forms Substitute HTML.

Whole project is characterized by data format.The example of data format is as follows：

[{"type":"sub_title","text":"TEST"},{"type":"p","text":" test text " }, { " type":"text","tag":"INPUT","name":"test_input","placeholder":" single file input test ", " desc":" content of test single file input ", " length ":"100","is_must":1}]

This data format is mark annual data form example, and in the design of whole JSON forms, data format is with object Array form shows that each part represents an element of list using the object of JSON, wherein including element kind The fields such as class, component attributes.It is used for the element of pattern performance or text presentation in element comprising some at the same time.

The species of Type shares 12 kinds at present can also dynamically increase：

Subtitle SUB_TITLE

Text P

Single file inputs TEXT

Phone number MOBILE

Mailbox EMAIL

Date DATE

Textview field TEXTAREA

Single choice RADIO

Pulldown single choice SELECT

Multiselect CHECKBOX

File uploads FILE

Picture uploads IMAGE

Its exclusive expression attribute is all correspond under the TYPE of each menu element, as single file inputs text

{"type":"text","tag":"INPUT","name":"test_input","placeholder":" single file Input test ", " desc ":" content of test single file input ", " length ":"100","is_must":1}

Wherein tag represents key assignments, and name represents the title name shown, and placeholder is prompting text, and desc is to say In plain text originally, length is length limitation, and is_must is whether to fill out.These contents can customize in the present system, specific fixed Scheme processed will be depending on practical application scene.

The information of renderer HTML itself is removed in renderer, this array is traveled through in render process, according to every The TYPE parameters of one array unit are come the result that determines the pattern of final rendering He render.By traveling through the combination rendered, just The result that HTML is substituted using JSON data structure list can be reached.

Finally illustrate, the above embodiments are merely illustrative of the technical solutions of the present invention and it is unrestricted, although with reference to compared with The present invention is described in detail in good embodiment, it will be understood by those of ordinary skill in the art that, can be to the skill of the present invention Art scheme technical scheme is modified or replaced equivalently, without departing from the objective and scope of technical solution of the present invention, it should all cover at this Among the right of invention.

Claims

1. a kind of list rendering system based on JSON data formats, including management end module (1), database module (3) and use Family end module (5), it is characterised in that：Form editing device module (2) is further included, the form editing device module (2) is connected to institute State between management end module (1) and the database module (3), by handling the editing machine page editing list occurred, with The form of JSON data is stored to database module (3)；Further include list renderer modules (4), the list renderer modules (4) it is connected between the database module (3) and the user side module (5), the list renderer modules (4) will store Rendered in the corresponding list JSON data of database module (3), letter of the list renderer modules (4) to HTML itself Breath removes, and structure JSON data forms substitute HTML.

A kind of 2. list rendering system based on JSON data formats according to claim 1, it is characterised in that：The table Single editor module (2) includes form editing device client and form editing device server-side, and by form editing, device client brings out Existing editor page Orly drags menu element, sets the operation such as form attributes, form identifier to complete form editing, then passes through Form editing device server-side is stored to database module (3).

A kind of 3. list rendering system based on JSON data formats according to claim 2, it is characterised in that：The table Single renderer modules (4) include list renderer client and list renderer server-side, by being identified with specific list Symbol enters list renderer client, while list renderer server-side can be by the corresponding list of this identifier in tables of data JSON data transfers are rendered to client by client.

A kind of 4. list rendering system based on JSON data formats according to claim 3, it is characterised in that：User exists In the list rendered, each single item of list is filled in, clicks on and preserves, the data message filled in will be with the form of JSON data Pass back to database module (3) by list renderer server-side to store.

A kind of 5. list rendering system based on JSON data formats according to claim 3, it is characterised in that：The table Single renderer modules (4) remove the information of renderer HTML itself in renderer, and whole array is traveled through in render process, Determine the pattern of final rendering with rendering as a result, by traveling through the group rendered according to the TYPE parameters of each array unit Close, reach the result that HTML is substituted using JSON data structure list.