阅读说明：本技术 一种前端表单描述生成和展示的方法、装置及设备 (Method, device and equipment for generating and displaying front-end form description ) 是由 瞿铭超 景晟 于 2021-08-30 设计创作，主要内容包括：本申请公开了一种前端表单描述生成和展示的方法,该方法利用对象来记录和描述题目,将题目用数组来保存,最终只需要循环遍历数组即可实现表单的展示,一方面,在表单题目发生变更时可以自动化将题目转换为目标数据结构的对象,避免人为编写代码,提升开发效率,另一方面,将题目信息和表单展示流程解耦,每次题目变更只需要替换对象即可,提升了代码的可拓展性和可维护性。此外,本申请还提供了一种前端表单描述生成和展示的装置、设备及计算机可读存储介质,其技术效果与上述方法的技术效果相对应。(The application discloses a method for generating and displaying front-end form description, the method utilizes an object to record and describe a question, the question is stored by an array, and finally, the display of the form can be realized only by circularly traversing the array. In addition, the application also provides a device, equipment and a computer readable storage medium for generating and displaying the front-end form description, and the technical effect of the device and the equipment corresponds to that of the method.)

1. A method for generating and displaying front-end form description is characterized by comprising the following steps:

converting each topic in the form into an object of a target data structure;

storing all the objects of the titles in the form to a target array;

and traversing the target array, and displaying each object in the target array by using a component to realize front-end display of the form.

2. The method of claim 1, wherein the form includes topics of multiple topic types, and wherein converting each topic in the form into an object of a target data structure comprises:

and converting each topic in the form into an object of a target data structure corresponding to the topic type of the topic.

3. The method of claim 2, wherein the object of the target data structure comprises the following fields: question number, question type, user answer.

4. The method of claim 3, wherein said exposing each of said objects in said target array with a component comprises:

for each of the objects in the target array, exposing the object with a component corresponding to the theme of the object.

5. The method of claim 4, wherein the form comprises any one or more of the following themes: simple answers, single choice questions, multiple choice questions, cascading choice questions.

6. The method of claim 5, wherein said exposing each of said objects in said target array with a component comprises:

displaying an object with a simple question type in the target array by using an input component;

and/or, displaying the object with the question type being the radio question in the target array by utilizing a radio component;

and/or, utilizing a checkbox component to display a component with the multiple choice question type in the target array;

and/or displaying the components provided for cascade selection in the target array by utilizing a third-party component.

7. The method of claim 1, wherein said traversing said target array, exposing each said object in said target array with a component, comprises:

traversing the target array by using a preset javascript script, and displaying each object in the target array by using a component.

8. An apparatus for generating and presenting front-end form descriptions, comprising:

the conversion module is used for converting each title in the form into an object of a target data structure;

the storage module is used for storing all the objects of the titles in the form to a target array;

and the display module is used for traversing the target array and displaying each object in the target array by using the components so as to realize the front-end display of the form.

9. An apparatus for front-end form description generation and presentation, comprising:

a memory: for storing a computer program;

a processor: a method for executing the computer program to implement the front end form description generation and presentation of any of claims 1 to 7.

10. A computer-readable storage medium, having stored thereon a computer program for implementing a method of front end form description generation and presentation as claimed in any one of claims 1 to 7 when executed by a processor.

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a computer-readable storage medium for generating and displaying a front-end form description.

Background

Forms are visible everywhere in our daily life and are used very frequently. For example, a certain bank app has a risk evaluation function which is deduced according to the risk bearing capacity of a user, the user is required to select occupation, monthly income, acceptable loss and the like, and the topics form a form; for example, a form to be filled by a new employee of a certain enterprise, and information such as name, age, household registration, family member status, etc. of the new employee are registered, and this form is also a form.

If the form is simply displayed by pure html code, the form code becomes too bulky to be maintained and understood by developers, and especially when the question or question type is replaced, a very simple change needs much time for programmers. Suppose that during development, a project needs to push a form to a user every week, the questions in each week are different, the question types are different, and the project has a single-choice question, a multiple-choice question, a blank filling question and the like. The interfaces displayed to the user by the front end are html fragments, and html codes become very long, maintenance is not facilitated, and readability is very low due to the fact that forms are compared with other components, if the forms need to be re-developed every time, and html hand-written titles and item types are adopted.

How to optimize the generation and description of the form, and avoid the disadvantages of complicated code and inconvenient maintenance, is a problem to be solved by those skilled in the art.

Disclosure of Invention

The application aims to provide a method, a device, equipment and a computer readable storage medium for generating and displaying front-end form description, which are used for solving the problems that at present, forms are described through html fragments, so that codes are too long and maintenance is not facilitated. The specific scheme is as follows:

in a first aspect, the present application provides a method for generating and displaying front-end form descriptions, including:

converting each topic in the form into an object of a target data structure;

storing all the objects of the titles in the form to a target array;

and traversing the target array, and displaying each object in the target array by using a component to realize front-end display of the form.

Optionally, the form includes topics of multiple topic types, and the converting each topic in the form into an object of a target data structure includes:

and converting each topic in the form into an object of a target data structure corresponding to the topic type of the topic.

Optionally, the object of the target data structure includes the following fields: question number, question type, user answer.

Optionally, the displaying, by the utilization component, each object in the target array includes:

for each of the objects in the target array, exposing the object with a component corresponding to the theme of the object.

Optionally, the form includes any one or more of the following themes: simple answers, single choice questions, multiple choice questions, cascading choice questions.

Optionally, the displaying, by the utilization component, each object in the target array includes:

displaying an object with a simple question type in the target array by using an input component;

and/or, displaying the object with the question type being the radio question in the target array by utilizing a radio component;

and/or, utilizing a checkbox component to display a component with the multiple choice question type in the target array;

and/or displaying the components provided for cascade selection in the target array by utilizing a third-party component.

Optionally, traversing the target array, and displaying each object in the target array by using a component includes:

traversing the target array by using a preset javascript script, and displaying each object in the target array by using a component.

In a second aspect, the present application provides an apparatus for generating and displaying front-end form description, including:

the conversion module is used for converting each title in the form into an object of a target data structure;

the storage module is used for storing all the objects of the titles in the form to a target array;

and the display module is used for traversing the target array and displaying each object in the target array by using the components so as to realize the front-end display of the form.

In a third aspect, the present application provides a device for generating and presenting front-end form descriptions, including:

a memory: for storing a computer program;

a processor: for executing the computer program to implement the method for front end form description generation and presentation as described above.

In a fourth aspect, the present application provides a computer-readable storage medium having stored thereon a computer program for implementing the method for front-end form description generation and presentation as described above when executed by a processor.

The application provides a method for generating and displaying front-end form description, which comprises the following steps: converting each topic in the form into an object of a target data structure; storing objects of all the titles in the form to a target array; and traversing the target array, and displaying each object in the target array by using the components so as to realize front-end display of the form. According to the method, the objects are used for recording and describing the titles, the titles are stored in the arrays, finally, the display of the form can be realized only by circularly traversing the arrays, on one hand, the titles can be automatically converted into the objects of the target data structure when the titles of the form are changed, the manual code writing is avoided, the development efficiency is improved, on the other hand, the title information and the form display flow are decoupled, only the objects need to be replaced when the titles are changed every time, and the expansibility and the maintainability of the codes are improved.

In addition, the application also provides a device, equipment and a computer readable storage medium for generating and displaying the front-end form description, and the technical effect of the device and the equipment corresponds to that of the method, and the details are not repeated here.

Drawings

For a clearer explanation of the embodiments or technical solutions of the prior art of the present application, the drawings needed for the description of the embodiments or prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.

FIG. 1 is a flowchart of a first embodiment of a method for generating and presenting a front-end form description provided herein;

FIG. 2 is a flowchart of a second embodiment of a method for generating and presenting a front-end form description provided herein;

fig. 3 is a schematic diagram of an object structure in a second embodiment of a method for generating and displaying a front-end form description provided by the present application;

fig. 4 is a schematic structural diagram of a short-response question object in a second embodiment of a method for generating and displaying a front-end form description provided in the present application;

FIG. 5 is a schematic structural diagram of a second single-choice question object in the embodiment of the method for generating and displaying a front-end form description provided by the present application;

FIG. 6 is a schematic structural diagram of a cascading selection topic object in a second embodiment of a method for generating and presenting a front-end form description provided by the present application;

FIG. 7 is a diagram illustrating a problem array structure in a second embodiment of a method for generating and presenting a front-end form description provided by the present application;

FIG. 8 is a schematic diagram of an embodiment of an apparatus for generating and presenting front-end form descriptions provided herein.

Detailed Description

In order that those skilled in the art will better understand the disclosure, the following detailed description will be given with reference to the accompanying drawings. It is to be understood that the embodiments described are only a few embodiments of the present application and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

The core of the application is to provide a method, a device, equipment and a computer readable storage medium for generating and displaying front-end form description, objects are used for recording and describing titles, the titles are stored by using arrays, finally, the display of the forms can be realized only by circularly traversing the arrays, the titles are automatically converted into the objects, manual code writing is avoided, the development efficiency is improved, the title information and the form display flow are decoupled, only the objects need to be replaced when the titles are changed at each time, and the expansibility and the maintainability of the codes are improved.

Referring to fig. 1, a first embodiment of a method for generating and displaying a front-end form description provided in the present application is described below, where the first embodiment includes:

s11, converting each title in the form into an object of a target data structure;

the purpose of this embodiment is to study a method of generating or describing forms for all forms within a program, from the perspective of front-end development. The form is similar to various forms filled in daily life, such as a recent health code application form, and the advanced commodity searching function of the e-commerce website also belongs to a small form. Specifically, in this embodiment, the title in the form is encapsulated, stored in a predefined data structure, isolated from the html code, and the task of generating and describing the form is handed to javascript, so that only data needs to be replaced when the form is changed.

The difficulty is how to describe the form by data, and it is necessary to ensure that the logic inside the form is known by seeing this data. The embodiment selects the reference type Object in the javascript, namely, the Object to implement. The object is an automobile in daily life, and all automobiles have some common attributes, such as speed per hour, fuel consumption and color, but the values of the attributes are different from one automobile to another. The present embodiment uses objects to record and describe forms, converting each topic in a form into an object of a target data structure.

In practical applications, a form may include multiple types of titles, and different types of titles may be stored in different data structures. Therefore, in the present embodiment, a target data structure corresponding to each topic type is defined in advance, and when a topic is converted into an object of the target data structure, the topic is specifically converted into an object of the target data structure corresponding to the topic type of the topic.

As a specific embodiment, the object of the target data structure may specifically include the following fields: question number, question type, user answer.

S12, storing the objects of all the titles in the form to a target array;

the present embodiment represents title information by an object, and then a plurality of titles are saved by an array.

And S13, traversing the target array, and displaying each object in the target array by using the components to realize the front-end display of the form.

In this embodiment, a component refers to a constituent element or a module of a page, and a page may be regarded as a combination of a plurality of components. The target array is traversed, i.e., each entry of the target array is accessed or operated on in turn. Specifically, a preset javascript script is used for traversing the target array, and each object in the target array is displayed by using the component.

As mentioned above, a form may include multiple question types, and different question types may need to be presented by different components when the form is presented at the front end. Therefore, the process of displaying the object by using the component specifically includes: for each object in the target array, the object is exposed with a component corresponding to the topic type of the object.

As a specific embodiment, the form includes any one or more of the following themes: simple answers, single choice questions, multiple choice questions, cascading choice questions. Other types of themes may be included in the application and are described herein as being a few simple themes.

The embodiment provides a method for generating and displaying front-end form description, the method records and describes the titles by using objects, the titles are stored by using arrays, and finally, the display of the forms can be realized only by circularly traversing the arrays.

In practical application, the method can adapt to multi-topic forms, and the forms can be presented perfectly no matter the number of the topics of the forms is large or small. Moreover, for some forms that require frequent title replacement, the method provided by the present embodiment requires only a small amount of code change.

A second embodiment of the method for generating and displaying the front-end form description provided by the present application is described in detail below, and with reference to fig. 2, the second embodiment specifically includes:

s21, obtaining a form, wherein the form comprises the following question types: simple answers, single choice questions, multiple choice questions, cascade choice questions;

s22, converting each topic in the form into an object of a target data structure corresponding to the topic type of the topic, wherein the object of the target data structure comprises the following fields: question number, question type, user answer;

s23, storing the objects of all the titles in the form to a target array;

and S24, traversing the object in the target array by using a preset javascript script, and displaying the object by using the component corresponding to the theme of the object.

Specifically, the displaying each object in the target array by using a component includes: displaying an object with a simple question type in the target array by using an input component; displaying the object with the question type in the target array as a radio question by utilizing a radio assembly; displaying the components with the multiple choice question types in the target array by using a checkbox component; and displaying the components, which are provided for cascade selection, of the topic type in the target array by utilizing a third party component.

In practical applications, the method described in this embodiment is applicable to various online forms, questionnaires, and examination questionnaires, and the question types include short answer questions, single choice questions, multiple choice questions, cascade choice questions, and the like. Other types of themes may be included in the application and are described herein as being a few simple themes.

In this embodiment, all the question types can be represented by an object, and the object has the following attributes: question number (no), question type (type), question (query), user answer (answer), as shown in fig. 3. Specifically, the simple answer may be represented as follows, as shown in fig. 4:

{ no:1, type: "short", query: "please enter your sex", answer: "}

For the question type field, the single-choice question is expressed by single; multiple choice questions are represented by multiple, short, and cascade choice questions are represented by cascade.

The single-choice question and the multiple-choice question need options, and the options are multiple, so the options can be stored by an array. The user answers to the multiple-choice questions may be multiple or single, so the user answer attributes of the multiple-choice questions are also of an array type. The structure of the single-choice and multiple-choice questions is then as shown in fig. 5. As for the options of the cascading selection questions, the options can be regarded as multi-choice/multi-choice options of multiple levels, and a common cascading selector is a selection area, for example: XX province-XX city-XX district-XX street, as shown in FIG. 6.

Because the user answer is unknown in the described form, the attribute of the user answer is temporarily null, and the value of the user answer is written into the field of the user answer after the user fills the answer.

In addition, this embodiment also requires a javascript data type, i.e., an array. An array is a data structure for continuously storing multiple data, for example, a form has ten subjects, and the 10 objects are stored in an array, where the array plays a role of storing multiple objects, as shown in fig. 7. Thus, the present embodiment has been described with objects and arrays successfully.

The form is then presented, considering how the above array of objects is converted into a form that the user can see. In html, a short answer can be represented by an < input > component, which is an input box that can accept characters input by a user; the radio topic can be presented with a < radio > element, representing one radio element; the multiple choice question adopts a < checkbox > component, which is a multiple choice component. The components are defined by html codes and can be directly used. The cascade selection problem is special, html is not directly provided for the native components, so that the method can be realized by a third-party component library, such as Element-ui, value, anti-design and the like, which are all excellent open source component libraries.

In short, the embodiment introduces the defined object array by javascript, traverses the array, determines which component is adopted according to the question type attribute of each question object, and meanwhile, knows the detailed information of the question through the question attribute and displays the detailed information. Because the code is determined by traversal, rather than the code writing method of one question, the code amount is very reduced, even hundreds of questions, and the method of the embodiment can be realized by using few codes.

The apparatus for generating and displaying front-end form description provided in the embodiments of the present application is introduced below, and the apparatus for generating and displaying front-end form description and the method for generating and displaying front-end form description described above may be referred to correspondingly.

As shown in fig. 8, the apparatus for generating and presenting front-end form description of the present embodiment includes:

a conversion module 81, configured to convert each topic in the form into an object of a target data structure;

the storage module 82 is configured to store all the objects of the titles in the form to a target array;

and the display module 83 is configured to traverse the target array, and display each object in the target array by using a component, so as to implement front-end display of the form.

The apparatus for generating and displaying a front-end form description in this embodiment is used to implement the method for generating and displaying a front-end form description, and therefore a specific implementation of the apparatus may be found in the foregoing embodiment of the method for generating and displaying a front-end form description, and details are not described here.

In addition, the present application also provides a device for generating and displaying front-end form description, including:

a memory: for storing a computer program;

a processor: for executing the computer program to implement the method of front end form description generation and presentation as described above.

Finally, the present application provides a computer readable storage medium having stored thereon a computer program for implementing the method of front end form description generation and presentation as described above when executed by a processor.

The embodiments are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same or similar parts among the embodiments are referred to each other. The device disclosed by the embodiment corresponds to the method disclosed by the embodiment, so that the description is simple, and the relevant points can be referred to the method part for description.

The steps of a method or algorithm described in connection with the embodiments disclosed herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. A software module may reside in Random Access Memory (RAM), memory, Read Only Memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

The above detailed descriptions of the solutions provided in the present application, and the specific examples applied herein are set forth to explain the principles and implementations of the present application, and the above descriptions of the examples are only used to help understand the method and its core ideas of the present application; meanwhile, for a person skilled in the art, according to the idea of the present application, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present application.