一种前端表单描述生成和展示的方法、装置及设备与流程

1.本技术涉及计算机技术领域，特别涉及一种前端表单描述生成和展示的方法、装置、设备及计算机可读存储介质。


背景技术：

2.表单在我们的日常生活种随处可见，使用的非常频繁。例如某银行app，有针对用户的风险承受能力推出的风险评测功能，要求用户选择职业、月收入、可接受的亏损等，这些题目组成的就是一个表单；例如某企业新入职的员工需要填写的表格，需要登记新员工的姓名、年龄、户籍、家庭成员状况等信息，这个表格也是一种表单。
3.如果单纯的用纯html代码来展示表单，表单代码将变得十分的臃肿，不利于开发人员维护和理解，特别是更换题目或题型的时候，往往一个非常简单的变更也需要花费程序员很多的时间。假设在开发的时候，有一个项目需要每周向用户推送表单，每周的题目都不一样，题型也不一样，有单选题、多选题、填空题等。前端展示给用户的界面其实都是html片段，由于表单相较于其他组件如果每次都需要重新开发，再html手写题目以及题型，导致html代码变得非常的长，不利于维护、可读性非常低。
4.如何就优化表单的生成与描述，避免代码繁琐且不便于维护的缺点，是亟待本领域技术人员解决的问题。


技术实现要素：

5.本技术的目的是提供一种前端表单描述生成和展示的方法、装置、设备及计算机可读存储介质，用以解决目前通过html片段描述表单，导致代码过长且不利于维护的问题。其具体方案如下：
6.第一方面，本技术提供了一种前端表单描述生成和展示的方法，包括：
7.将表单中每个题目转换为目标数据结构的对象；
8.将所述表单中全部所述题目的对象存储至目标数组；
9.遍历所述目标数组，利用组件展示所述目标数组中各个所述对象，以实现表单的前端展示。
10.可选的，所述表单包括多种题型的题述，所述将表单中每个题目转换为目标数据结构的对象，包括：
11.将表单中每个题目转换为与所述题目的题型对应的目标数据结构的对象。
12.可选的，所述目标数据结构的对象包括以下字段：题号、题目、题型、用户答案。
13.可选的，所述利用组件展示所述目标数组中各个所述对象，包括：
14.对于所述目标数组中的每个所述对象，利用与所述对象的题型对应的组件展示所述对象。
15.可选的，所述表单包括以下任意一种或多种题型：简答题、单选题、多选题、级联选择题。
16.可选的，所述利用组件展示所述目标数组中各个所述对象，包括：
17.利用input组件展示所述目标数组中题型为简单题的对象；
18.和/或，利用radio组件展示所述目标数组中题型为单选题的对象；
19.和/或，利用checkbox组件展示所述目标数组中题型为多选题的组件；
20.和/或，利用第三方组件展示所述目标数组中题型为级联选择提的组件。
21.可选的，所述遍历所述目标数组，利用组件展示所述目标数组中各个所述对象，包括：
22.利用预设javascript脚本遍历所述目标数组，利用组件展示所述目标数组中各个所述对象。
23.第二方面，本技术提供了一种前端表单描述生成和展示的装置，包括：
24.转换模块，用于将表单中每个题目转换为目标数据结构的对象；
25.存储模块，用于将所述表单中全部所述题目的对象存储至目标数组；
26.展示模块，用于遍历所述目标数组，利用组件展示所述目标数组中各个所述对象，以实现表单的前端展示。
27.第三方面，本技术提供了一种前端表单描述生成和展示的设备，包括：
28.存储器：用于存储计算机程序；
29.处理器：用于执行所述计算机程序，以实现如上所述的前端表单描述生成和展示的方法。
30.第四方面，本技术提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时用于实现如上所述的前端表单描述生成和展示的方法。
31.本技术所提供的一种前端表单描述生成和展示的方法，包括：将表单中每个题目转换为目标数据结构的对象；将表单中全部题目的对象存储至目标数组；遍历目标数组，利用组件展示目标数组中各个对象，以实现表单的前端展示。可见，该方法利用对象来记录和描述题目，将题目用数组来保存，最终只需要循环遍历数组即可实现表单的展示，一方面，在表单题目发生变更时可以自动化将题目转换为目标数据结构的对象，避免人为编写代码，提升开发效率，另一方面，将题目信息和表单展示流程解耦，每次题目变更只需要替换对象即可，提升了代码的可拓展性和可维护性。
32.此外，本技术还提供了一种前端表单描述生成和展示的装置、设备及计算机可读存储介质，其技术效果与上述方法的技术效果相对应，这里不再赘述。
附图说明
33.为了更清楚的说明本技术实施例或现有技术的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
34.图1为本技术所提供的前端表单描述生成和展示的方法实施例一的流程图；
35.图2为本技术所提供的前端表单描述生成和展示的方法实施例二的流程图；
36.图3为本技术所提供的前端表单描述生成和展示的方法实施例二中对象结构示意
图；
37.图4为本技术所提供的前端表单描述生成和展示的方法实施例二中简答题对象结构示意图；
38.图5为本技术所提供的前端表单描述生成和展示的方法实施例二中单选题对象结构示意图；
39.图6为本技术所提供的前端表单描述生成和展示的方法实施例二中级联选择题对象结构示意图；
40.图7为本技术所提供的前端表单描述生成和展示的方法实施例二中问题数组结构示意图；
41.图8为本技术所提供的前端表单描述生成和展示的装置实施例的示意图。
具体实施方式
42.为了使本技术领域的人员更好地理解本技术方案，下面结合附图和具体实施方式对本技术作进一步的详细说明。显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
43.本技术的核心是提供一种前端表单描述生成和展示的方法、装置、设备及计算机可读存储介质，利用对象来记录和描述题目，将题目用数组来保存，最终只需要循环遍历数组即可实现表单的展示，自动化将题目转换为对象，避免人为编写代码，提升开发效率，而且将题目信息和表单展示流程解耦，每次题目变更只需要替换对象即可，提升了代码的可拓展性和可维护性。
44.下面对本技术提供的前端表单描述生成和展示的方法实施例一进行介绍，参见图1，实施例一包括：
45.s11、将表单中每个题目转换为目标数据结构的对象；
46.本实施例的目的在于站在前端开发的角度上，针对所有程序内的表单，研究一种生成或者描述表单的方法。所谓表单，类似于日常生活中填写的各种表格，如最近的健康码申请表格，电商网站的高级搜索商品的功能也属于一种小型的表单。具体的，本实施例将表单中的题目封装，用预先定义的数据结构存储起来，和html代码隔离，将表单的生成、描述的任务交给javascript，这样，在表单发生变更时只需替换数据。
47.难点在于如何通过数据来描述表单，需要保证看见此数据就知道表单内部的逻辑。本实施例选择javascript中的引用类型object也就是对象来实现。所谓对象，在日常生活中，汽车就是一个对象，所有的汽车都有一些共有的属性，比如时速、油耗、颜色，只不过不同的汽车这些属性的数值不一样。本实施例使用对象来记录和描述表单，将表单中每个题目转换为目标数据结构的对象。
48.实际应用中，一个表单可能包括多种题型，不同题型适合通过不同的数据结构来进行存储。因此，本实施例预先定义每种题型对应的目标数据结构，在将题目转换为目标数据结构的对象时，具体将题目转换为该题目的题型对应的目标数据结构的对象。
49.作为一种具体的实施方式，目标数据结构的对象具体看可以包括以下字段：题号、题目、题型、用户答案。
50.s12、将表单中全部题目的对象存储至目标数组；
51.本实施例将题目信息用对象来表示，然后多个题目用数组来保存。
52.s13、遍历目标数组，利用组件展示目标数组中各个对象，以实现表单的前端展示。
53.本实施例中，组件是指页面的组成元素或模块，一个页面可以看作是多个组件组合起来的。遍历目标数组，也就是依次对目标数组的每一项进行访问或操作。具体的，利用预设javascript脚本遍历目标数组，利用组件展示目标数组中各个对象。
54.如前文所述，一个表单可能包括多种题型，在前端展示表单时，不同题型也需要用不同的组件来进行展示。因此，上述利用组件展示对象的过程具体为：对于目标数组中的每个对象，利用与对象的题型对应的组件展示对象。
55.作为一种具体的实施方式，表单包括以下任意一种或多种题型：简答题、单选题、多选题、级联选择题。实际应用中可以包括其他题型，这里只是以几种简单的题型做说明。
56.本实施例提供一种前端表单描述生成和展示的方法，该方法利用对象来记录和描述题目，将题目用数组来保存，最终只需要循环遍历数组即可实现表单的展示，一方面，在表单题目发生变更时可以自动化将题目转换为目标数据结构的对象，避免人为编写代码，提升开发效率，另一方面，将题目信息和表单展示流程解耦，每次题目变更只需要替换对象即可，提升了代码的可拓展性和可维护性。
57.实际应用中，本实施例能够适应多题表单，无论表单题目数量的多还是少，都可以完美呈现。而且，对于一些需要频繁替换题目的表单来说，本实施例提供的方法仅需要很少的代码改动量。
58.下面开始详细介绍本技术提供的前端表单描述生成和展示的方法实施例二，参见图2，实施例二具体包括：
59.s21、获取表单，表单包括以下题型：简答题、单选题、多选题、级联选择题；
60.s22、将表单中每个题目转换为与题目的题型对应的目标数据结构的对象，目标数据结构的对象包括以下字段：题号、题目、题型、用户答案；
61.s23、将表单中全部题目的对象存储至目标数组；
62.s24、利用预设javascript脚本遍历目标数组中的对象，利用与对象的题型对应的组件展示对象。
63.具体的，利用组件展示所述目标数组中各个所述对象，包括：利用input组件展示所述目标数组中题型为简单题的对象；利用radio组件展示所述目标数组中题型为单选题的对象；利用checkbox组件展示所述目标数组中题型为多选题的组件；利用第三方组件展示所述目标数组中题型为级联选择提的组件。
64.实际应用中，本实施例所介绍的方法，可适用于各类在线表单、调查问卷、考试问卷，题型涵盖了简答题、单选题、多选题、级联选择题等。实际应用中可以包括其他题型，这里只是以几种简单的题型做说明。
65.本实施例中，所有的题型都能用对象来表示，这个对象具有以下属性：题号(no)、题型(type)、题目(question)、用户答案(answer)，如图3所示。具体的，可以这样表示简答题，如图4所示：
66.{no:1,type:”short”,question:”请输入您的性别”,answer:
””
}
67.对于题型字段，单选题用single表示；多选题用multiple表示，简答题用short表
示，级联选择题用cascade表示。
68.单选题和多选题需要选项，选项是多个的，所以这里可以用数组来存储。而多选题的用户答案可能是多个也可能是单个，因此多选题的用户答案属性也是一个数组类型。那么，单选和多选题的结构如图5所示。至于级联选择题的选项，可以看做成多层级的多选/多选选项，常见的级联选择器，就是选择地区，例如：xx省
‑
xx市
‑
xx区
‑
xx街道，如图6所示。
69.由于描述的表单，用户答案是未知的，所以用户答案属性暂时是空值，后续待用户填入答案后，将用户答案的值写入用户答案字段。
70.此外，本实施例还需要一个javascript的数据类型，即数组。数组是用来连续存储多个数据的一种数据结构，比如表单有十道题，那这10个对象将存在一个数组中，在这里，数组起到了保存多个对象的作用，如图7所示。至此，本实施例已经用对象和数组成功的将表单描述出来了。
71.之后展示表单，考虑如何将上面的对象数组转化成用户能看到的表单。在html中，简答题可以用<input>组件来表示，它是一个输入框，可以接受用户输入的字符；单选题可以用<radio>组件来展示，代表一个单选组件；多选题采用<checkbox>组件，是多选组件。这些组件都是html代码定义好的，可以直接拿来用。级联选择题比较特殊，html并没有直接提供给原生组件使用，因此可以借助第三方组件库来实现他，例如element
‑
ui、vant、anti
‑
design等，这些都是非常优秀的开源组件库。
72.总之，本实施例将定义好的对象数组用javascript引入，遍历数组，然后根据每一个题目对象的题型属性，来判断采用哪一个组件，同时，通过问题属性能知道题目的详细信息，并显示出来。由于是遍历判断，而不是一题一题的去写代码，因此在代码量上会非常精简，就算是上百道题，用本实施例的方法也可以用很少的代码来实现。
73.下面对本技术实施例提供的前端表单描述生成和展示的装置进行介绍，下文描述的前端表单描述生成和展示的装置与上文描述的前端表单描述生成和展示的方法可相互对应参照。
74.如图8所示，本实施例的前端表单描述生成和展示的装置，包括：
75.转换模块81，用于将表单中每个题目转换为目标数据结构的对象；
76.存储模块82，用于将所述表单中全部所述题目的对象存储至目标数组；
77.展示模块83，用于遍历所述目标数组，利用组件展示所述目标数组中各个所述对象，以实现表单的前端展示。
78.本实施例的前端表单描述生成和展示的装置用于实现前述的前端表单描述生成和展示的方法，因此该装置的具体实施方式可见前文中的前端表单描述生成和展示的方法的实施例部分，这里不再赘述。
79.此外，本技术还提供了一种前端表单描述生成和展示的设备，包括：
80.存储器：用于存储计算机程序；
81.处理器：用于执行所述计算机程序，以实现如上文所述的前端表单描述生成和展示的方法。
82.最后，本技术提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时用于实现如上文所述的前端表单描述生成和展示的方法。
83.本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
84.结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd
‑
rom、或技术领域内所公知的任意其它形式的存储介质中。
85.以上对本技术所提供的方案进行了详细介绍，本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想；同时，对于本领域的一般技术人员，依据本技术的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本技术的限制。