技术领域
[0001] 本申请涉及数据处理技术领域，具体涉及一种表单开发方法、装置、设备及程序产品。
相关背景技术
[0002] 表单是实现数据收集和用户操作的核心组件，如何开发和管理表单是一个重要课题。而动态化表单设计为开发人员提供了一种可行性方案。目前的动态表单设计方法主要分为可视化动态表单和组件式动态表单。可视化动态表单主要是通过搭建一个直观的设计工具，使开发者和用户能够轻松创建和修改表单。该工具通常包含拖放功能，开发人员可以直接通过添加、删除或调整表单元素，无需编写复杂的代码。组件式动态表单是一种基于组件化开发理念的表单设计方法，通过将表单的各个部分拆分为独立的组件，开发人员使用这些组件，让表单的开发变得更加灵活和高效。但是，拖拽式动态表单设计过程需要较高的计算资源，表单开发效率较低；组件式动态表单则灵活性不足，且开发过程重复性较高，导致开发效率也较低。尤其面对Ant Design等包括多种用户界面(User Interface，UI)组件的数据库，只能通过静态配置进行表单重复开发，灵活性和开发效率均有待提高。
具体实施方式
[0025] 下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0026] 申请概述
[0027] 本申请对现有的动态表单设计方法进一步分析。对于拖拽式动态表单设计方法，实现过程往往依赖于重量级的复杂代码，复杂的图形拖拽操作不仅需要较高的计算资源，而且对运行环境的要求较高，限制了其在低配设备或资源受限环境下的表单设计；同时无法保证在不同项目中的兼容性和稳定性，存在一定的应用限制。对于组件式动态表单设计方法，大都存在灵活性不足和用户交互不够友好的问题，例如，大部分方法只支持基本的属性配置，对于复杂表格、定制样式、交互逻辑、条件渲染、动态更新、自定义验证规则等高级需求的支持不足，无法实现由开发人员完全自定义的动态设计表单；又例如，目前方法大部分只是将开发者重复开发页面的工作转移为开发人员重复定义页面，缺乏对表单的统一配置和管理设计，从而导致开发人员在面对繁琐的人工配置与管理时，体验受到极大影响，尤其面对Ant Design等数据库，Ant Design是一种基于企业级UI设计语言和React实现的组件库，React是一个用于创建用户界面JavaScript库。Ant Design被广泛应用于企业级应用开发中，其丰富的用户界面组件和设计规范为开发者提供了良好的基础。然而，现有技术尚未形成针对Ant Design框架的完整动态表单设计及管理解决方案，限制了开发者在使用Ant Design时的灵活性和开发效率，使得在创建和管理复杂表单时面临诸多挑战。
[0028] 示例性方法
[0029] 针对现有技术中表单开发过程中存在的问题，本申请提供一种表达开发方法，该方法实现于任意一种具备数据处理功能的设备上，例如，本地计算机、云端服务器、智能移动设备等，本申请不以本方法实现的设备类型为限制。
[0030] 一个实施例中，如图1所示，表单开发方法实现的流程步骤包括：
[0031] 步骤101，获取对目标表单整体进行配置得到的表单配置数据。
[0032] 本实施例中，表单是实现数据收集和用户操作的核心组件，在数据收集、申请和审批、订单处理、注册和登录、文档管理等多种环境下有重要应用。目标表单指的是在某一个作业环境下满足特定需求的表单，针对该作业环境的特定要求，在开发目标表单时，可以进行针对性配置。对目标表单进行配置时，从整体和元素两个层面完成配置过程。从目标表单整体层面进行配置，主要指的是对目标表单的表单通用属性进行配置，例如，对表单名称、表单类型、表单整体布局等多种表单通用属性中一个或多个属性进行配置。表单配置数据则指的是对目标表单整体进行配置时产生的数据，即对表单名称、表单类型、表单整体布局等多种表单通用属性中一个或多个属性进行配置得到的数据。
[0033] 步骤102，获取基于多个用户界面组件为目标表单中各个表单元素进行配置得到的元素配置数据，其中，每一个表单元素对应一个用户界面组件，用户界面组件包括开放配置接口。
[0034] 本实施例中，从目标表单元素层面进行配置时，基于已有的用户界面组件完成。目标表单包括至少一个表单元素，表单元素是目标表单的基本组成部分，例如，表单元素包括文本输入框、单选按钮、复选框等。本申请中每一个表单元素对应一个用户界面(User Interface，UI)组件，各个用户界面组件无需实时开发，是预先开发完善的组件。预先为每一个用户界面组件配置开发配置接口，开发配置接口为每个用户界面组件可配置的属性接口，可以通过开发配置接口对用户界面组件进一步进行个性化配置。
[0035] 可选地，用户界面组件为组件库中的组件，例如，组件库为Ant Design，Ant Design包括多种用户界面组件，实例性的，如下：
[0036] 文本输入框(Input)；
[0037] 选择器(Select)；
[0038] 通过应用程序接口(Application Programming Interface，API)获取选项的选择器(ApiSelect)；
[0039] 树形选择器(TreeSelect)；
[0040] 单选按钮组之一(RadioButtonGroup)；
[0041] 单选按钮组之二(RadioGroup)；
[0042] 复选框(Checkbox)；
[0043] 复选框组(CheckboxGroup)；
[0044] 自动完成输入框(AutoComplete)；
[0045] 级联选择器(Cascader)；
[0046] 日期选择器(DatePicker)；
[0047] 月份选择器(MonthPicker)；
[0048] 日期范围选择器(RangePicker)；
[0049] 周选择器(WeekPicker)；
[0050] 时间选择器(TimePicker)；
[0051] 时间范围选择器(TimeRangePicker)；
[0052] 开关(Switch)；
[0053] 密码强度指示器(StrengthMeter)；
[0054] 文件上传之一(Upload)；
[0055] 图片上传(ImageUpload)；
[0056] 图标选择器(IconPicker)；
[0057] 渲染函数(Render)，用于自定义组件内容；
[0058] 滑块(Slider)；
[0059] 评分(Rate)；
[0060] 分割线(Divider)；
[0061] 富文本编辑器(Editor)；
[0062] 文件上之二(FileUpload)；
[0063] 定时任务表达式选择器(CronTab)。
[0064] 需要说明的是，上述Ant Design以及Ant Design中的各个用户界面组件仅为实例性实施方式，本申请中所用的用户界面组件还可以为Bootstrap、Material‑UI、Semantic UI以及其他任意一种组件库中的用户界面组件，组件库的选用根据实际情况和需要来确定。
[0065] 本实施例中，元素配置数据指的是对目标表单中各个表单元素进行配置得到的数据。基于用户界面组件对表单元素进行配置的过程中，不仅实现了目标表单细粒度定制化，提升表单开发的灵活性和个性化程度，还充分利用用户界面组件降低表达开发难度，提升表单开发的效率。
[0066] 步骤103，基于表单配置数据和元素配置数据，渲染目标表单的展示界面。
[0067] 本实施例中，从整体和元素两个层面对目标表单进行配置，实现了配置过程粗粒度和细粒度的结合，使表单开发过程更加灵活，满足开发过程中各种个性化配置需求，同时还利用了用户界面组件，提升表单开发效率。
[0068] 一个实施例中，获取对目标表单整体进行配置得到的表单配置数据，包括：获取在多个预设类型中确定的目标表单的表单类型；获取基于表单类型为目标表单各个表单通用属性进行配置得到的表单通用配置数据，其中，表单通用属性是基于目标表单全局性的属性。
[0069] 本实施例中，对目标表单整体进行配置时，主要对目标表单的表单类型和表单通用属性进行配置。表单类型包括基础表单、分步表单、可折叠表单和多标签表单，基础表单是最常见的表单类型，通常用于简单的数据收集，如用户注册、登录等。分部表单将一个复杂的表单分成多个步骤，每个步骤包含一部分表单字段，通过分步的方式减少用户的认知负担，提高表单填写的完成率。可折叠表单允许开发人员通过点击某个标题或按钮来展开或收起部分内容，节省空间，使界面更加整洁，开发人员可以选择性地查看和填写表单内容。多标签表单将表单内容分布在多个标签页中，每个标签页包含一部分表单字段，通过标签页的切换，使表单内容更清晰、更易于管理。对目标表单整体进行配置时，可以选择其中任意一种表单类型，目标表单选用不同表单类型时，对应不同的基础表单布局，基础表单布局中包括基础表单框架和可配置的推荐表单元素。
[0070] 本实施例中，确定任意一种表单类型时，可以自动提供基础表单布局，例如，基础表单在基础表单框架的基础上不需要配置表单标题，还包括可配置的重置按钮、提交按钮或取消按钮。又例如，分步表单需要配置每一步的标题，且没有取消、重置按钮的配置，如图2所示的实例性分步表单，在转账汇款的业务环境中，分为填写转账信息、确认转账信息、完成三个步骤，其中，每一个步骤可以分别配置表单元素，例如，填写转账信息包括付款账户、收款账户、收款人名称和转账金额等基于文本框的表单元素，以及下一步的按钮元素。又例如，可折叠表单可以选择配置标题，如图3所示的实例性可折叠表单，该可折叠表单中包括多个字段元素，以及重置按钮、查询按钮和展开与折叠按钮(图2中的收起)，该可折叠表单显示时，超过3行自动收起折叠，折叠时保留2行进行显示，通过展开和折叠按钮，可以灵活调整是否折叠或展开。又例如，多标签表单可以选择配置标题，如图4所示的多标签表单，该多标签表单中包括tabs1、tabs2、tabs3、tabs4和tabs5等多个标签页，每一个标签页下可以单独进行元素配置，如tabs2标签页下配置tabs2‑field1、tabs2‑field2、tabs2‑field3、tabs2‑field4、tabs2‑field5、tabs2‑field6、tabs2‑field7和tabs2‑field8等多个文本框元素。
[0071] 本实施例中，表单通用属性是基于目标表单全局性的属性，例如，全局表单标题布局、全局元素布局、表单提交地址、表单元素标题对齐方向以及其他多种全局性属性，表单通用配置数据为对表单通用属性进行配置得到的数据。通过对表单通用属性的全局性配置，实现了在整体层面对目标表单的配置，提升配置的灵活性。
[0072] 一个实施例中，获取基于多个用户界面组件对目标表单中各个表单元素进行配置的元素配置数据，包括：将在多个用户界面组件中确定的至少一个目标组件，分别确定为目标表单中的各个表单元素；获取分别为每一个表单元素的元素通用属性进行配置得到的元素通用配置数据，其中，元素通用属性是基于表单元素全局性的属性；获取分别为每一个表单元素的组件属性进行配置得到的元素组件配置数据，其中，组件属性是表单元素所对应目标组件的属性；获取为任意两个表单元素之间的交互属性进行配置得到的交互配置数据，其中，交互属性为实现任意两个表单元素之间数据交互的规则属性。
[0073] 本实施例中，当需要为目标表单配置任意一个表单元素时，在组件库中确定对应的目标组件，然后通过开放配置接口，对目标组件进行配置。每一个表单元素可选用的用户界面组件是相同的，同一个用户界面组件可以作为不同表单元素对应的目标组件。对于一个表单元素，确定对应的目标组件后，对表单元素在元素通用属性、组件属性以及与其他任意一个表单元素之间的交互属性进行配置。对于一个表单元素，元素通用属性包括但不限于必须配置的元素标题名、元素字段名，以及可选择性配置的元素组件类型、二级标签名、表单元素位置、标签名右侧温馨提示、元素后缀、单个表单标签布局、单个元素布局等。表单元素的配置需要与对应的目标组件的可配置属性一致，也就是说，所选用的目标组件影响表单元素的可配置项目。对于一个表单元素，元素通用属性包括但不限于验证规则(例如是否必填、提示文本以及校验格式等)、根据条件配置是否必填、默认值、是否显示、为函数时动态显示、根据条件配置该元素的值、根据条件配置动态禁用该元素、动态显示元素、动态更新元素值、动态禁用元素、动态更新元素等。
[0074] 本实施例中，通过任意两个表单元素之间的交互属性实现任意两个表单元素之间的数据交互，例如，若某一个表单元素中的值等于预设值时，则显示另一个关联的表单元素。通过交互属性，实现更复杂的表单定制。
[0075] 一个实施例中，交互属性包括以条件验证为基础的规则属性。
[0076] 本实施例中，通过条件验证来配置任意两个表单元素之间的交互属性。具体的，当需要配置交互属性时，添加对应的验证条件，若满足验证条件，则实现表单元素之间的数据交互。
[0077] 一个实施例中，基于表单配置数据和元素配置数据，渲染目标表单的展示界面，包括：基于表单配置数据和元素配置数据，渲染得到目标表单的实时预览界面；实时监听表单配置数据和元素配置数据，若表单配置数据或元素配置数据发生变化，基于变化后的表单配置数据或元素配置数据，重新渲染并更新实时预览界面。
[0078] 本实施例中，在配置目标表单的过程中，实时渲染得到目标表单的展示界面。在配置过程中，获得表单配置数据和元素配置数据后，基于文档对象模型(Document Object Model，DOM)技术，将表单配置数据和元素配置数据转换为实际的DOM元素，并渲染成为实时预览界面。DOM是一种与平台和语言无关的接口，DOM使程序和脚本能够动态访问和更新文档的内容、结构和样式。在配置过程中，采用监听技术，实时监听表单配置数据和元素配置数据的数据变化，当表单配置数据或元素配置数据发生变化时，通过Diff算法自动更新渲染目标表单的实时预览界面。Diff算法是一种用于比较两个数据集差异的技术。通过实时渲染更新的实时预览界面，提升表单开发过程的可视化程度，保证开发人员能够直观地观察到配置过程中目标表单的实际展示效果，从而便于开发人员对配置数据的调整，提升表单开发过程的效率。
[0079] 一个实施例中，基于表单配置数据和元素配置数据，渲染目标表单的展示界面，包括：将表单配置数据和元素配置数据打包为配置数据包，并将配置数据包存储至目标存储空间；从目标存储空间重新获取配置数据包；调用配置数据包中每一个表单元素对应的用户界面组件，并将元素配置数据映射至用户界面组件；基于表单配置数据和映射处理后的用户界面组件，渲染得到目标表单的展示界面。
[0080] 本实施例中，当开发人员配置完成后，将表单配置数据和元素配置数据打包为配置数据包存储至目标存储空间，即将目标表单作为一个模板存储至目标存储空间。在再次需要展示目标表单，或者需要在目标表单的基础上进一步开发新的表单时，只需重新将表单配置数据和元素配置数据的配置数据包从目标存储空间读取出来，调用配置数据包中每一个表单元素对应的用户界面组件，并将元素配置数据映射至用户界面组件，重新渲染目标表单的展示界面即可。保证通过一次开发过程，可以重复渲染得到目标表单，节约开发资源，提升表单开发的效率。
[0081] 一个实施例中，渲染得到目标表单的展示界面之后，还包括：获取目标表单的配置更改数据；将配置更改数据更新至目标存储空间。
[0082] 本实施例中，在配置数据包存储至目标存储空间后，可以将目标表单作为模板表单，在模板表单的基础上，进一步配置得到新的表单，或者更新目标表单的版本，实现了目标表单的重复性利用，为后续目标表单的拓展、维护提供基础，进一步提升表单开发的效率。
[0083] 一个实施例中，表单配置数据和元素配置数据采用基于JavaScript对象表示法(JavaScript Object Notation，JSON)的数据格式，它是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。打包后的配置数据包也是JSON数据格式，该数据结构具有良好的兼容性，支持快速的数据传输和解析，能够有效减少网络请求的开销，提高系统的整体性能；同时，JSON数据格式允许用户灵活定义表单字段的组合与嵌套，支持复杂的表单结构(如分组、动态添加字段等)，可以快速解析数据，保证用户体验的流畅性。
[0084] 实例性的，基于Ant Design提供的用户界面组件，并基于JSON的数据格式对目标表单整体进行配置时，得到的表单配置数据以及相关注释如下：
[0085] //表单类型:基础表单、分步表单、可折叠表单、多标签表单(必填)
[0086] formType:number；
[0087] //全局表单标题布局(非必填)
[0088] labelCol:{span:number；offset:number}；
[0089] //全局表单元素布局(非必填)
[0090] wrapperCol:{span:number；offset:number}；
[0091] //表单提交地址(非必填)
[0092] submitUrl:string；
[0093] //表单元素标题对齐方向(非必填)
[0094] labelAlign？:"left"|"right"；
[0095] //重置按钮配置(非必填)
[0096] resetButton？:{
[0097] show:boolean；
[0098] text:string；
[0099] //以下是ant‑design的按钮属性配置(可扩展配置，用于开发人员在开发中直接使用组件)
[0100] //buttonProps:ButtonProps
[0101] }；
[0102] //提交接钮配置(非必填)
[0103] submitButton？:{
[0104] show:boolean；
[0105] text:string；
[0106] //以下是ant‑design的按钮属性配置(可扩展配置，用于开发人员在开发中直接使用组件)
[0107] //buttonProps:ButtonProps
[0108] }；
[0109] //取消按钮配置(非必填)
[0110] cancelButton？:{
[0111] show:boolean；
[0112] text:string；
[0113] //以下是ant‑design的按钮属性配置(可扩展配置，用于开发人员在开发中直接使用组件)
[0114] //buttonProps:ButtonProps
[0115] }；
[0116] colon:boolean；//是否显示标题后的冒号(非必填)
[0117] 本实施例中，元素通用配置数据以及相关注释如下：
[0118] schema:[
[0119] {
[0120] //表单元素标题名(必填)
[0121] label:string；
[0122] //表单元素字段名(必填)
[0123] field:string；
[0124] //表单元素组件类型(非必填)
[0125] component:ComponentType；
[0126] //二级标签名(非必填)
[0127] subLabel？:string；
[0128] //表单元素位置(非必填)
[0129] sort:number；
[0130] //标签名右侧温馨提示(非必填)
[0131] helpMessage？:string；
[0132] //表单元素后缀
[0133] suffix？:string|number；
[0134] //单个表单标签布局(非必填)
[0135] labelCol:{span:number；offset:number}；
[0136] //单个表单元素布局(非必填)
[0137] wrapperCol:{span:number；offset:number}；
[0138] //该组件的配置项，可配置内容取决于所选定的通用界面组件，与ant‑design中的该UI组件的可配置属性一致(非必填)
[0139] 本实施例中，元素组件配置数据以及相关注释如下：
[0140] componentProps？:object；
[0141] //验证规则:required‑是否必填,message‑提示文本,pattern校验格式(包把数字、文本、邮箱等格式可选)
[0142] //根据条件配置是否必填(非必填)
[0143] rules？:{
[0144] required:boolean|{field:string；value:string|number}[]；//这里是页面中配置的条件
[0145] message:string；
[0146] pattern:string；
[0147] }；
[0148] //默认值(非必填)
[0149] defaultValue？:string；
[0150] //是否显示,为函数时动态显示(非必填)
[0151] ifShow？:boolean|{field:string；value:string|number}[]；
[0152] //根据条件配置该表单元素的值(非必填)
[0153] dynamicValue？:{
[0154] targetField:string；
[0155] targetValue:string|number；
[0156] value:string|number；
[0157] }[]；
[0158] //根据条件配置动态禁用该表单元素(非必填)
[0159] dynamicDisabled？:{field:string；value:string|number}[]；
[0160] },
[0161] ]；
[0162] }
[0163] 本实施例中，对上述实施例提供的基础表单进行配置得到的JSON数据及相关注释如下：
[0164] //基础表单
[0165] interface BaseFormProps{
[0166] //表单模板的唯一标识符(服务器生成)
[0167] //id:number；
[0168] //模板库标识
[0169] //templateLibId:number；
[0170] //模板名称(必填，目标表单作为模板保存至模板库)
[0171] templetName:string；
[0172] 本实施例中，对上述实施例提供的可折叠表单进行配置得到的JSON数据及相关注释如下：
[0173] //可折叠表单
[0174] interface foldForm{
[0175] //折叠面板标题(非必填)
[0176] foldBoardTitle:string；
[0177] //是否显示收起/展开按钮(非必填)
[0178] showAdvancedButton:boolean；
[0179] //如果showAdvancedButton为true，超过指定行数行默认折叠(非必填)[0180] autoAdvancedLine:number；
[0181] //折叠时始终保持显示的行数(非必填)
[0182] alwaysShowLines:number；
[0183] //其他和基础表单一样
[0184] }
[0185] 本实施例中，对上述实施例提供的分步表单进行配置得到的JSON数据及相关注释如下：
[0186] //分步表单
[0187] interface stepForm{
[0188] //没有重置、取消按钮button配置，其他和基础表单一样
[0189] //上一步按钮配置(非必填)
[0190] preButton？:{
[0191] show:boolean；
[0192] text:string；
[0193] //以下是Ant Design的按钮属性配置(可扩展配置，用于开发人员在开发中直接使用组件)
[0194] //buttonProps:ButtonProps
[0195] }；
[0196] //下一步接钮配置(非必填)
[0197] nextButton？:{
[0198] show:boolean；
[0199] text:string；
[0200] //以下是Ant Design的按钮属性配置(可扩展配置，用于开发人员在开发中直接使用组件)
[0201] //buttonProps:ButtonProps
[0202] }；
[0203] //指定步骤条方向,水平和垂直
[0204] direction:"horizontal"|"vertical"；
[0205] //每个步骤配置内容
[0206] items:{
[0207] title:string；//标题
[0208] subTitle:string；//子标题
[0209] description:string；//步骤的详情描述，可选
[0210] schema:[]；//和基础表单中的schema一样
[0211] }[]；
[0212] }
[0213] 本实施例中，对上述实施例提供的多标签表单进行配置得到的JSON数据及相关注释如下：
[0214] //多标签表单
[0215] interface MultipleTagsForm{
[0216] //页签的基本样式，可选line、card类型
[0217] type:'line'|'card'；
[0218] //标签大小，提供large middle和small三种大小
[0219] size:'lage'|'middle'|'small'
[0220] //每个标签页面的表单内容
[0221] items:BaseFormProps[]
[0222] }
[0223] 其中，非必填指的是开发人员可以选择性配置，必填指的是必须配置。模板库指的是预先设定的目标存储空间。开发人员对目标表单设计完成后，将目标表单作为模板表存储至预先设定的作为目标存储空间的模板库，点击保存，点击选择要保存的模板库，填写模板名称，点击确定，则会将目标表单基于JSON数据格式的配置数据包存储至模板库，并生成唯一的模板标识，以便于后续的加载和管理。
[0224] 一个实施例中，在表单开发阶段，可以开发多个表单，为了便于多个表单的管理，可以根据需要预先配置多个模板库，作为不同的存储空间，从而根据需求分类保存不同的表单，例如，一个业务项目对应一个模板库，将该业务项目中开发得到的多个表单作为模板表单存储至同一个模板库。可选地，表单开发阶段可以由具备人机交互功能的前端完成，模板库可以配置于后端的存储空间，从而降低对前端的资源压力。
[0225] 本实施例中，基于创建的模板库，可以实现表单模板的编辑、保存、删除和版本管理。
[0226] 具体的，根据需要，创建多个不同的模板库，用于存放不同的表单模板。开发人员在前端界面中点击创建模板库，输入模板库名称，点击确认，向后端发起创建模板库请求，后端接收请求以及请求所携带的模板库名称数据，请求成功。后端返回该新增模板库的唯一模板库标识(Identifier，ID)，以及模板库名称；前端接收到该数据保存，并根据该数据渲染出新增的模板库入口。开发人员点击该模板库入口，发起模板库查询请求，发送该模板库的id至后端，后端接受请求，在数据库中查询该模板库下的全部模板表单，并返回这些数据，前端接收该数据，并根据该数据渲染表单模板列表。
[0227] 本实施例中，可以选择任意模板表单进行编辑，编辑完成后，用户可以选择保存为新模板表单或覆盖原模板表单。
[0228] 具体的，开发人员点击编辑，前端向后端发起表单查询模板查询请求，并将该模板表单的ID传递给后端，后端接收该请求，并根据接收的ID，在模板库中查找该模板表单，并将查询到的模板表单对应的配置数据包返回给前端；前端收到模板表单对应的配置数据包后，进入表单编辑界面(与配置界面一样)，并根据编辑的数据渲染界面内容，开发人员编辑完成后，点击确认；前端向后端发起编辑表单模板请求，并将该模板表单ID以及新的配置数据包传递给后端，后端接收模板表单ID以及新的配置数据包，根据ID更新数据库中的表单模板数据。
[0229] 本实施例中，同时开发人员可以查看每个表单模板的历史版本，选择需要的版本进行加载或比较。这样，开发人员能够方便地回溯到之前的设计状态，确保设计过程的可控性。
[0230] 具体的，开发人员点击编辑，前端向后端发起表单查询模板查询请求，并将该模板的ID传递给后端，后端接收该请求，并根据接收的ID，在数据库中查找模板表单对应的配置数据包，并将查询到的模板表单对应的配置数据包返回给前端，前端收到表单数据后，进入表单查看界面，并根据接收的数据渲染界面内容，实现表单内容查看。
[0231] 一个具体的实施例中，通过具备人机交互功能的前端设备的可视化界面完成配置和界面展示，如图5所示的实例性界面，包括实时预览区域和属性配置区域。配置属性区域可以对目标表单整体进行配置得到表单配置数据，包括对表单类型和表单通用属性的配置，还可以对目标表单中各个表单元素进行配置得到元素配置数据。
[0232] 本实施例中，对目标表单中各个表单元素进行配置时，可以通过“添加组件”按钮按需添加用户界面组件，完成表单元素的配置。对每一个表单元素，可以选择需要的用户界面组件的组件类型，以及对动态显示方式等元素通用属性进行配置，得到元素通用配置数据，如图6所示，为用户界面组件配置组件标签名和组件字段名。还可以对组件属性进行配置，得到元素组件配置数据。进一步的，还可以通过添加条件，对任意两个表单元素之间的交互属性进行配置得到的交互配置数据。其中，姓名、性别和其他为配置的不同表单元素。在配置过程中，基于DOM技术和实时监听技术，实时渲染得到的实时预览界面，并在左侧的实时预览区域进行展示，便于开发人员及时直观地观察表单配置内容。
[0233] 本实施例中，如图7所示，在添加以条件验证为基础的规则属性时，可以通过添加组件的界面添加具体的验证规则，例如，通过添加目标元素的目标值，实现目标值的验证，从而实现正在配置的表单元素和目标元素之间的条件显示，例如，姓名元素输入值为liao时，性别元素显示为女。
[0234] 在本申请中，获取对目标表单整体进行配置得到的表单配置数据；获取基于多个用户界面组件为目标表单中各个表单元素进行配置得到的元素配置数据，其中，每一个表单元素对应一个用户界面组件，用户界面组件包括开放配置接口；基于表单配置数据和元素配置数据，渲染目标表单的展示界面。上述过程中，表单配置数据为目标表单整体角度进行配置得到的数据，元素配置数据则是表单元素角度进行配置得到的数据，不同配置角度提升了目标表单配置过程的灵活性。且用户界面组件的开放配置接口，为配置过程中灵活反复利用用户界面组件提供基础，不仅保证表单配置的灵活性，还能够提升对用户界面组件的利用率，实现表单的高效配置和开发。
[0235] 进一步的，实现从基础表单到高级表单的设计，从基础信息到条件渲染、动态更新等高级交互配置，可以满足不同场景和复杂业务需求。实现了表单模板管理功能，降低了重复设计表单的工作量，提高了表单使用效率。支持实时预览效果，使开发人员能够在配置过程中即时看到调整的结果，增强了开发人员体验。
[0236] 示例性装置
[0237] 相应的，本申请实施例还提供了一种表单开发装置，如图8所示，该装置可以包括：
[0238] 表单配置模块801，用于获取对目标表单整体进行配置得到的表单配置数据；
[0239] 元素配置模块802，用于获取基于多个用户界面组件为目标表单中各个表单元素进行配置得到的元素配置数据，其中，每一个表单元素对应一个用户界面组件，用户界面组件包括开放配置接口；
[0240] 渲染模块803，用于基于表单配置数据和元素配置数据，渲染目标表单的展示界面。
[0241] 一个实施例中，表单配置模块801，用于获取在多个预设类型中确定的目标表单的表单类型；获取基于表单类型为目标表单各个表单通用属性进行配置得到的表单通用配置数据，其中，表单通用属性是基于目标表单全局性的属性。
[0242] 一个实施例中，元素配置模块802，用于将在多个用户界面组件中确定的至少一个目标组件，分别确定为目标表单中的各个表单元素；获取分别为每一个表单元素的元素通用属性进行配置得到的元素通用配置数据，其中，元素通用属性是基于表单元素全局性的属性；获取分别为每一个表单元素的组件属性进行配置得到的元素组件配置数据，其中，组件属性是表单元素所对应目标组件的属性；获取为任意两个表单元素之间的交互属性进行配置得到的交互配置数据，其中，交互属性为实现任意两个表单元素之间数据交互的规则属性。
[0243] 一个实施例中，交互属性包括以条件验证为基础的规则属性。
[0244] 一个实施例中，渲染模块803，用于基于表单配置数据和元素配置数据，渲染得到目标表单的实时预览界面；实时监听表单配置数据和元素配置数据，若表单配置数据或元素配置数据发生变化，基于变化后的表单配置数据或元素配置数据，重新渲染并更新实时预览界面。
[0245] 一个实施例中，渲染模块803，用于将表单配置数据和元素配置数据打包为配置数据包，并将配置数据包存储至目标存储空间；从目标存储空间重新获取配置数据包；调用配置数据包中每一个表单元素对应的用户界面组件，并将元素配置数据映射至用户界面组件；基于表单配置数据和映射处理后的用户界面组件，渲染得到目标表单的展示界面。
[0246] 一个实施例中，表单开发装置还包括更新模块，用于渲染得到目标表单的展示界面之后，获取目标表单的配置更改数据；将配置更改数据更新至目标存储空间。
[0247] 本实施例提供的表单开发装置，与本申请上述实施例所提供的表单开发方法属于同一申请构思，可执行本申请上述任意实施例所提供的表单开发方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本申请上述实施例提供的表单开发方法的具体处理内容，此处不再加以赘述。
[0248] 示例性电子设备
[0249] 本申请实施例还提供了一种电子设备，如图9所示，该电子设备包括：存储器900和处理器901。
[0250] 所述存储器900与所述处理器901连接，用于存储程序。
[0251] 所述处理器901用于通过运行所述存储器900中存储的程序，实现上述实施例中的表单开发方法。
[0252] 具体的，上述电子设备还可以包括：通信接口902、输入设备903、输出设备904和总线905。
[0253] 处理器901、存储器900、通信接口902、输入设备903和输出设备904通过总线相互连接。其中：
[0254] 总线905可包括一通路，在计算机系统各个部件之间传送信息。
[0255] 处理器901可以是通用处理器，例如通用中央处理器(CPU)、微处理器等，也可以是特定应用集成电路(application‑specific integrated circuit，ASIC)，或一个或多个用于控制本发明方案程序执行的集成电路。还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
[0256] 处理器901可包括主处理器，还可包括基带芯片、调制解调器等。
[0257] 存储器900中保存有执行本发明技术方案的程序，还可以保存有操作系统和其他关键业务。具体地，程序可以包括程序代码，程序代码包括计算机操作指令。更具体的，存储器900可以包括只读存储器(read‑only memory，ROM)、可存储静态信息和指令的其他类型的静态存储设备、随机存取存储器(random access memory，RAM)、可存储信息和指令的其他类型的动态存储设备、磁盘存储器、flash等等。
[0258] 输入设备903可包括接收用户输入的数据和信息的装置，例如键盘、鼠标、摄像头、扫描仪、光笔、语音输入装置、触摸屏、计步器或重力感应器等。
[0259] 输出设备904可包括允许输出信息给用户的装置，例如显示屏、打印机、扬声器等。
[0260] 通信接口902可包括使用任何收发器一类的装置，以便与其他设备或通信网络通信，如以太网，无线接入网(RAN)，无线局域网(WLAN)等。
[0261] 处理器901执行存储器900中所存放的程序，以及调用其他设备，可用于实现本申请上述实施例所提供的表单开发方法的各个步骤。
[0262] 示例性计算机程序产品和存储介质
[0263] 除了上述方法和设备以外，本申请的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本申请实施例中描述的表单开发方法中的步骤。
[0264] 所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本申请实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。
[0265] 此外，本申请的实施例还可以是存储介质，其上存储有计算机程序，计算机程序被处理器执行本申实施例中描述的表单开发方法中的步骤。
[0266] 对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。
[0267] 需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
[0268] 本申请各实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减，各实施例中记载的技术特征可以进行替换或者组合。
[0269] 本申请各实施例所提供装置及终端中的模块和子模块可以根据实际需要进行合并、划分和删减。
[0270] 本申请所提供的几个实施例中，应该理解到，所揭露的终端，装置和方法，可以通过其它的方式实现。例如，以上所描述的终端实施例仅仅是示意性的，例如，模块或子模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个子模块或模块可以结合或者可以集成到另一个模块，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。
[0271] 作为分离部件说明的模块或子模块可以是或者也可以不是物理上分开的，作为模块或子模块的部件可以是或者也可以不是物理模块或子模块，即可以位于一个地方，或者也可以分布到多个网络模块或子模块上。可以根据实际的需要选择其中的部分或者全部模块或子模块来实现本实施例方案的目的。
[0272] 另外，在本申请各个实施例中的各功能模块或子模块可以集成在一个处理模块中，也可以是各个模块或子模块单独物理存在，也可以两个或两个以上模块或子模块集成在一个模块中。上述集成的模块或子模块既可以采用硬件的形式实现，也可以采用软件功能模块或子模块的形式实现。
[0273] 专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
[0274] 结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件单元，或者二者的结合来实施。软件单元可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD‑ROM、或技术领域内所公知的任意其它形式的存储介质中。
[0275] 最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
[0276] 对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
