一种构造表单界面方法、系统、电子设备及存储介质技术方案

本发明专利技术公开一种构造表单界面方法、系统、电子设备及存储介质，涉及Web前端开发技术领域。所述方法包括：构建JSON数据结构；JSON数据结构包括界面子组件名称和界面子组件属性；界面子组件属性包括样式、数据属性和回调方法；JSON数据结构的根部为JSON列表；JSON列表包括以Key:Value形式表述的多个特殊数据对象；将JSON数据结构加载到Vue组件模版中；利用封装的Element

【技术实现步骤摘要】
一种构造表单界面方法、系统、电子设备及存储介质


[0001]本专利技术涉及Web前端开发
，特别是涉及一种构造表单界面方法、系统、电子设备及存储介质。

技术介绍

[0002]近些年随着编程思想和开发框架的进步，使用声明式的编程思想进行UI界面的开发，已经被越来越多的开发者所接受，Vue、React等框架也采用此方式。Vue是一款用于构建用户界面的Javascript框架，基于标准HMTML、CSS和Javascript构建，提供了一套组件化、声明式的编程模型，帮助开发者高效地开发UI界面。
[0003]开发者使用Vue框架，通过类似HTML模版语法来书写Vue组件，将一个组件逻辑(JavaScript)、模板(HTML)和样式(CSS)封装到同一个单文件组件，声明式地将组件实例的数据绑定到呈现的DOM(DocumentObjectModel)上，引用第三方类库，如Element
‑
UI，可以快速构建项目所需要的表单、表格等页面UI组件。
[0004]对于项目中构造的表单类单文件组件而言，每个视图组件都需要写大量重复的界面子组件声明代码，代码重复率高，开发效率低。

技术实现思路

[0005]本专利技术的目的是提供一种构造表单界面方法、系统、电子设备及存储介质，能够降低代码重复率，提高开发效率。
[0006]为实现上述目的，本专利技术提供了如下方案：
[0007]一种构造表单界面方法，包括：
[0008]构建JSON数据结构；所述JSON数据结构包括界面子组件名称和界面子组件属性；所述界面子组件属性包括样式、数据属性和回调方法；所述JSON数据结构的根部为JSON列表；所述JSON列表包括以Key:Value形式表述的多个特殊数据对象；
[0009]将所述JSON数据结构加载到Vue组件模版中；
[0010]利用封装的Element
‑
UI组件在所述Vue组件模版中挂载所述界面子组件名称的对应子组件；
[0011]将所述界面子组件属性设置为所述对应子组件的属性；
[0012]根据所述对应子组件及对应属性生成表单界面。
[0013]可选地，所述构建JSON数据结构，具体包括：
[0014]采用Key:Value形式表述目标对象，得到特殊数据对象；所述目标对象包括类型对象和选项对象；所述类型对象用于描述所述界面子组件名称；所述选项对象用于描述所述界面子组件属性；
[0015]根据多个所述特殊数据对象构建JSON列表；
[0016]根据所述JSON列表确定所述JSON数据结构。
[0017]本专利技术还提供了一种构造表单界面系统，包括：
[0018]数据构建单元，用于构建JSON数据结构；所述JSON数据结构包括界面子组件名称和界面子组件属性；所述界面子组件属性包括样式、数据属性和回调方法；所述JSON数据结构的根部为JSON列表；所述JSON列表包括以Key:Value形式表述的多个特殊数据对象；
[0019]数据加载单元，用于将所述JSON数据结构加载到Vue组件模版中；
[0020]挂载单元，用于利用封装的Element
‑
UI组件在所述Vue组件模版中挂载所述界面子组件名称的对应子组件；
[0021]属性定义单元，用于将所述界面子组件属性设置为所述对应子组件的属性；
[0022]表单生成单元，用于根据所述对应子组件及对应属性生成表单界面。
[0023]可选地，所述数据构建单元，具体包括：
[0024]表述模块，用于采用Key:Value形式表述目标对象，得到特殊数据对象；所述目标对象包括类型对象和选项对象；所述类型对象用于描述所述界面子组件名称；所述选项对象用于描述所述界面子组件属性；
[0025]列表构建模块，用于根据多个所述特殊数据对象构建JSON列表；
[0026]JSON数据结构确定模块，用于根据所述JSON列表确定所述JSON数据结构。
[0027]本专利技术还提供了一种电子设备，包括存储器及处理器，所述存储器用于存储计算机程序，所述处理器运行所述计算机程序以使所述电子设备执行上述的构造表单界面方法。
[0028]本专利技术还提供了一种计算机可读存储介质，其存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的构造表单界面方法。
[0029]根据本专利技术提供的具体实施例，本专利技术公开了以下技术效果：
[0030]本专利技术公开了一种构造表单界面方法、系统、电子设备及存储介质，所述方法包括首先构建JSON数据结构；所述JSON数据结构包括界面子组件名称和界面组件属性；将所述JSON数据结构加载到Vue组件模版中；利用封装的Element
‑
UI组件在所述Vue组件模版中挂载所述界面子组件名称的对应子组件；将所述界面子组件属性设置为所述对应子组件的属性，并根据所述对应子组件及属性生成表单界面。本专利技术通过构建JSON数据结构统一声明表单所需的界面参数，并通过Vue组件模版和封装的Element
‑
UI组件为对应子组件设置属性，最终生成表单界面，该过程能够提高开发效率，减少冗余代码。
附图说明
[0031]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
[0032]图1为本专利技术构造表单界面方法的流程示意图；
[0033]图2为本专利技术构造表单界面系统的结构框图。
具体实施方式
[0034]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于
本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0035]本专利技术的目的是提供一种构造表单界面方法、系统、电子设备及存储介质，能够降低代码重复率，提高开发效率。
[0036]为使本专利技术的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本专利技术作进一步详细的说明。
[0037]如图1所示，本专利技术提供了一种构造表单界面方法，包括：
[0038]步骤100：构建JSON数据结构；所述JSON数据结构包括界面子组件名称和界面子组件属性；所述界面子组件属性包括样式、数据属性和回调方法；所述JSON数据结构的根部为JSON列表；所述JSON列表包括以Key:Value形式表述的多个特殊数据对象。
[0039]步骤200：将所述JSON数据结构加载到Vue组件模版中。
[0040]步骤300：利用封装的Element
‑
UI组件在所述Vue组本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种构造表单界面方法，其特征在于，包括：构建JSON数据结构；所述JSON数据结构包括界面子组件名称和界面子组件属性；所述界面子组件属性包括样式、数据属性和回调方法；所述JSON数据结构的根部为JSON列表；所述JSON列表包括以Key:Value形式表述的多个特殊数据对象；将所述JSON数据结构加载到Vue组件模版中；利用封装的Element
‑
UI组件在所述Vue组件模版中挂载所述界面子组件名称的对应子组件；将所述界面子组件属性设置为所述对应子组件的属性；根据所述对应子组件及对应属性生成表单界面。2.根据权利要求1所述的构造表单界面方法，其特征在于，所述构建JSON数据结构，具体包括：采用Key:Value形式表述目标对象，得到特殊数据对象；所述目标对象包括类型对象和选项对象；所述类型对象用于描述所述界面子组件名称；所述选项对象用于描述所述界面子组件属性；根据多个所述特殊数据对象构建JSON列表；根据所述JSON列表确定所述JSON数据结构。3.一种构造表单界面系统，其特征在于，包括：数据构建单元，用于构建JSON数据结构；所述JSON数据结构包括界面子组件名称和界面子组件属性；所述界面子组件属性包括样式、数据属性和回调方法；所述JSON数据结构的根部为JSON列表；所述J...

【专利技术属性】
技术研发人员：苏家巍，
申请(专利权)人：上海弘积信息科技有限公司，
类型：发明
国别省市：