一种表单动态渲染方法、装置及电子设备与流程

本技术涉及信息处理，尤其涉及一种表单动态渲染方法、装置及电子设备。

背景技术：

1、目前，在通过网页表单收集用户填入的信息时，通常是调用后端给予的固定的表单模板数据，然后前端通过解析该固定的表单模板数据，并将其渲染为表单，从而方便用户基于渲染后所得到的表单填入相应信息。

2、也即，现有的表单渲染，虽然能够实现以向用户直观的展示其所需填入的数据；但是，由于是依据固定的表单模板数据进行的渲染，导致了渲染后所得到的表单中各个表单项相互孤立，无法实现表单项的自动更新。

3、综上可知，由于现有的表单渲染方式依赖的是表单模板数据中的固定数据，不仅存在表单项内容调整不方便的情况，也无法实现表单项的关联更新和动态调整表单的层级的问题。

技术实现思路

1、有鉴于此，本技术提供了一种表单动态渲染方法、装置及电子设备，以解决或部分解决现有的表单渲染方式存在表单项内容调整不方便的情况及无法实现表单项的关联更新和动态调整表单的层级的问题。

2、为实现上述目的，本技术提供如下技术方案：

3、本技术第一方面公开了一种表单动态渲染方法，应用于前端设备，方法包括：

4、获取当前待渲染表单对应的表单模板信息，表单模板信息包括每一个表单项对应的配置项，每一个表单项的配置项包括：类型信息、取值信息和参数信息；

5、针对当前待渲染表单中的每一个表单项，依据类型信息确定表单项对应的渲染方式，并基于类型信息确定参数信息是否有效；若参数信息无效，则将取值信息中记录的列表信息作为渲染内容；若所述参数信息有效，则基于所述取值信息和所述参数信息生成数据获取请求并向后端发送，以获取所述表单项的渲染内容或下一级表单的表单模板信息；

6、基于各个表单项的渲染内容和渲染方式，对当前待渲染表单进行渲染。

7、可选的，上述的方法中，所述基于所述取值信息和所述参数信息生成数据获取请求并向后端发送，包括：

8、基于所述取值信息确定请求路径；

9、基于所述参数信息确定请求参数；其中，当所述参数信息记录所述表单项的依赖项信息时，所述请求参数为所述依赖项的表单项数据；

10、基于所述请求参数和所述请求路径生成所述数据获取请求并向后端发送所述数据获取请求。

11、可选的，上述的方法还包括：

12、将下一级表单作为当前待渲染表单，并返回执行针对当前待渲染表单中的每一个表单项，依据类型信息确定表单项对应的渲染方式，并基于所述类型信息确定参数信息是否有效这一步骤。

13、可选的，上述的方法还包括：

14、对于存在依赖项的每一个表单项，若检测到依赖项的表单项数据发生变更，则获取依赖项更新后的表单项数据重新确定请求参数，并返回执行基于请求参数和请求路径发出数据获取请求这一步骤。

15、可选的，上述的方法还包括：

16、基于各级表单的表单模板信息对各级表单的数据收集组件和数据验证组件进行初始化；其中，初始化后的数据验证组件中包括各个表单项的验证规则；

17、在用户基于渲染完成的表单填写或修改各个表单项的表单项数据时，基于数据收集组件收集用户输入的表单项数据；

18、在用户提交表单时，基于数据验证组件判断是否允许提交。

19、可选的，上述的方法中，当前级别表单的数据收集组件的初始化过程包括：

20、在数据收集组件中创建与当前级别表单的表单项数量相同个键值对；

21、将当前级别表单的各个表单项的属性名分别插入各个键值对的关键词字段；

22、对于每一个表单项，判断表单项的类型是否为生成下一级表单；

23、若是，则将表单项对应的键值对的取值设置为对应下一级表单的数据收集组件；

24、若否，则将表单项对应的键值对的取值设置为空值。

25、可选的，上述的方法中，当前级别表单的数据验证组件的初始化过程包括：

26、在数据验证组件中创建与当前级别表单的表单项数量相同个键值对；

27、将当前级别表单的各个表单项的属性名分别插入各个键值对的关键词字段；

28、对于每一个表单项，判断表单项的类型是否为生成下一级表单；

29、若是，则将表单项对应的键值对的取值设置为对应下一级表单的数据验证组件；

30、若否，则将表单项对应的键值对的取值设置为当前级别表单对应的表单模板信息中，表单项对应的配置项中的验证规则。

31、可选的，上述的方法还包括：

32、当表单项的渲染方式为创建下一级表单，且基于依赖项更新后的表单项数据重新渲染下一级表单后；将数据收集组件中表单项对应的键值对的取值设置为重新渲染后的下一级表单的数据收集组件；以及将数据验证组件中表单项对应的键值对的取值设置为下一级表单的数据验证组件。

33、本技术第二方面公开了一种表单动态渲染装置，应用于前端设备，装置包括：表单模板信息获取模块、类型确定模块、渲染内容获取模块、渲染模块；

34、表单模板信息获取模块，用于获取当前待渲染表单对应的表单模板信息，表单模板的数据结构和字段由前端设备和后端设备约定构成，表单模板信息包括对应每一个表单项对应的配置项，每一个表单项的配置项包括：类型信息、取值信息和参数信息；

35、类型确定模块，用于针对当前待渲染表单中的每一个表单项，依据类型信息确定表单项对应的渲染方式，并基于类型信息确定参数信息是否有效；其中，当类型信息包括特定字符串或类型信息表示创建下一级表单时参数信息有效；

36、渲染内容获取模块，用于在参数信息无效时，将取值信息中记录的列表信息作为渲染内容；以及用于在参数信息有效时，若所述参数信息有效，则基于所述取值信息和所述参数信息生成数据获取请求并向后端发送，以获取所述表单项的渲染内容或下一级表单的表单模板信息；

37、渲染模块，用于基于各个表单项的渲染内容和渲染方式，对当前待渲染表单进行渲染。

38、可选的，渲染内容获取模块，包括：

39、路径确定子模块，用于基于所述取值信息确定请求路径；

40、参数确定子模块，用于基于所述参数信息确定请求参数；其中，当所述参数信息记录所述表单项的依赖项信息时，所述请求参数为所述依赖项的表单项数据；

41、请求生成子模块，用于基于所述请求参数和所述请求路径生成所述数据获取请求；

42、请求发送子模块，用于向后端发送所述数据获取请求。

43、可选的，上述的装置还包括：

44、当前级别表单切换模块，用于将下一级表单作为当前待渲染表单，并返回触发类型确定模块执行针对当前待渲染表单中的每一个表单项，依据类型信息确定表单项对应的渲染方式，并基于类型信息确定参数信息是否有效。

45、可选的，上述的装置还包括：

46、更新模块，用于对于存在依赖项的每一个表单项，若检测到依赖项的表单项数据发生变更，则获取依赖项更新后的表单项数据重新确定请求参数，并返回触发渲染内容获取模块重新执行基于请求参数和请求路径发出数据获取请求。

47、可选的，上述的装置还包括：

48、初始化模块，用于基于各级表单的表单模板信息对各级表单的数据收集组件和数据验证组件进行初始化；其中，初始化后的数据验证组件中包括各个表单项的验证规则；

49、数据收集模块，用于在用户基于渲染完成的表单填写或修改各个表单项的表单项数据时，基于数据收集组件收集用户输入的表单项数据；

50、数据验证模块，在用户提交表单时，基于数据验证组件判断是否允许提交。

51、可选的，上述的装置中，初始化模块包括：

52、第一创建单元，用于在数据收集组件中创建与当前级别表单的表单项数量相同个键值对；

53、第一属性名确定单元，用于将当前级别表单的各个表单项的属性名分别插入各个键值对的关键词字段；

54、第一判断单元，对于每一个表单项，判断表单项的类型是否为生成下一级表单；

55、第一属性值确定单元，用于在表单项的类型为生成下一级表单时，将表单项对应的键值对的取值设置为对应下一级表单的数据收集组件；以及用于在表单项的类型不是生成下一级表单时，将表单项对应的键值对的取值设置为空值。

56、可选的，上述的装置中，初始化模块包括：

57、第二创建单元，用于在数据验证组件中创建与当前级别表单的表单项数量相同个键值对；

58、第二属性名确定单元，用于将当前级别表单的各个表单项的属性名分别插入各个键值对的关键词字段；

59、第二判断单元，用于对于每一个表单项，判断表单项的类型是否为生成下一级表单；

60、第二属性值确定单元，用于在表单项的类型为生成下一级表单时，将表单项对应的键值对的取值设置为对应下一级表单的数据验证组件；以及用于在表单项的类型不是生成下一级表单时，将表单项对应的键值对的取值设置为当前级别表单对应的表单模板信息中，表单项对应的配置项中的验证规则。

61、可选的，上述的装置中，初始化模块还包括：

62、初始化更新单元，用于当表单项的渲染方式为创建下一级表单，且基于依赖项更新后的表单项数据重新渲染下一级表单后；触发第一属性值确定模块将数据收集组件中表单项对应的键值对的取值设置为重新渲染后的下一级表单的数据收集组件；以及触发第二属性值确定模块将数据验证组件中表单项对应的键值对的取值设置为下一级表单的数据验证组件。

63、本技术第三方面公开了一种电子设备，包括：

64、存储器和处理器；其中，存储器用于存储程序；

65、处理器用于执行程序，程序被执行时，具体用于实现如本技术第一方面中任意一项所述的方法。

66、本技术提供的一种表单动态渲染方法中，首先获取当前待渲染表单对应的表单模板信息；然后针对当前待渲染表单中的每一个表单项，依据所述类型信息确定所述表单项对应的渲染方式，并基于所述类型信息确定参数信息是否有效；若所述参数信息无效，则将所述取值信息中记录的列表信息作为渲染内容；若所述参数信息有效，则基于所述取值信息确定请求路径；基于所述参数信息确定请求参数；并基于所述请求参数和所述请求路径向后端发出数据获取请求，以获取所述表单项的渲染内容或下一级表单的表单模板信息；最后，基于各个所述表单项的渲染内容和渲染方式，对所述当前待渲染表单进行渲染。由此可知，利用本技术中的动态渲染方法，不仅可以通过读取表单模板中的固定数据来确定表单的渲染内容，还可以基于依赖项的表单项数据项向后端设备的接口发送数据获取请求以获取渲染内容，实现了多个表单项相互依赖功能，并且表单项对应的渲染内容的调整方式也更加方便。