一种可配置动态生成表单页面的方法技术

本发明专利技术公开了一种可配置动态生成表单页面的方法，包括使用SPring Boot、React工具定义样板化配置和构建UI界面；再引入React组件将UI界面拆分成独立且的代码片段，并对代码片段创建React表单组件；创建表单页面，选用组件进行编辑组件属性，并发布到内容管理微服务；再根据创建的表单页面结构描述信息，结合组件创建时的注册数据进行渲染表单页面，并完成页面动态保存；前端页面发出请求，微服务后台响应并返回表单页面内容。本发明专利技术通过建立一系列的前端组件，并将组件元素描述存储在内容管理系统中，通过内容管理系统后台编辑组合和页面渲染，形成自定义的表单页面，以实现各种丰富的表单页面。的表单页面。的表单页面。

【技术实现步骤摘要】
一种可配置动态生成表单页面的方法


[0001]本专利技术涉及内容管理系统
，具体来说，涉及一种可配置动态生成表单页面的方法。

技术介绍

[0002]从技术角度来说，内容管理系统的诞生能够极大提升了网站内容管理和发布效率，以及极大程度的降低了网站扩展的复杂度和成本。在内容管理系统的演化过程中，内容管理系统开始从简单的资讯类内容管理，逐渐拓展为多种形式内容的管理，内容管理解决方案重点解决各种非结构化或半结构化的数字资源的采集、管理、利用、传递和增值，并能有机集成到结构化数据的网站中。
[0003]目前，现有内容管理系统大多是定制型，而且针对于特定方面的业务，例如:博客系统、新闻发布系统。为解决业务服务化形成的表单页面多变性等问题，需要一系列解决方案。

技术实现思路

[0004]针对相关技术中的上述技术问题，本专利技术提出一种可配置动态生成表单页面的方法，能够克服现有技术方法的上述不足。
[0005]为实现上述技术目的，本专利技术的技术方案是这样实现的：一种可配置动态生成表单页面的方法，包括以下步骤：S1:首先，使用SPring Boot、React工具定义样板化配置和构建UI界面；S2:在构建好的UI界面引入自研的React组件将UI拆分成独立且具备复用性的代码片段，并对每个代码片段独立构思逻辑，创建React表单组件；S3:创建React表单组件首先创建表单页面，从组件描述库中选用组件，进行编辑选用的组件属性，并发布React表单页面到内容管理微服务；S4:内容管理系统微服务后台进行创建编辑表单页面，再根据创建的表单页面结构描述信息，结合组件创建时的注册数据信息进行渲染表单页面，并完成页面动态保存；S5:前端页面发出请求，请求展示表单页面内容，微服务后台响应并返回表单页面内容。
[0006]进一步地，步骤S3中，所述前端请求展示页面流程包括前端网站发出获取页面的请求，再从内容管理微服务获取页面内容，最后，前端页面完成页面展示。进一步地，进行自定义表单页面渲染时，是内容管理微服务根据表单页面结构，通过组件属性中的ID索引，获取组件在微服务中注册的数据，同时通过自定义模板引擎的自定义规则，将组件描述中的占位符依据key值匹配的原则，将创建的数据中对应的值填入组件描述中的占位符所在的位置。
[0007]进一步地，创建所述React组件是在内容管理微服务中注册，注册需要的参数包括组件唯一编码和组件属性。
[0008]进一步地，所述编辑表单页面，是选择不同的React组件并自由组合，并编辑组件可配置的信息，可配置信息包括账户名称和密码，完成动态表单页面的构件。
[0009]本专利技术的有益效果：通过建立一系列的前端组件，并将组件元素描述存储在内容管理系统中；通过内容管理系统后台编辑组合和页面渲染，形成自定义的表单页面，以实现各种丰富的表单页面；通过内容管理即可实现网站表单页面建设，降低代码开发量，同时提高效率。
附图说明
[0010]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0011]图1是根据本专利技术实施例所述的可配置动态生成表单页面的方法的表单页面创建过程示意图。
[0012]图2是根据本专利技术实施例所述的可配置动态生成表单页面的方法的动态生成表单页面实现方法整体流程框图。
[0013]图3是根据本专利技术实施例所述的可配置动态生成表单页面的方法的前台页面展示动态生成表单页面流程框图。
[0014]图4是根据本专利技术实施例所述的可配置动态生成表单页面的方法的生成表单页面数据结构示意图。
具体实施方式
[0015]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本专利技术保护的范围，为了方便理解本专利技术的上述技术方案，以下通过具体使用方式上对本专利技术的上述技术方案进行详细说明。
[0016]根据本专利技术实施例所述的可配置动态生成表单页面的方法，包括首先，使用SPring Boot、React工具定义样板化配置和构建UI界面，在构建好的UI界面引入自研的React组件将UI拆分成独立且具备复用性的代码片段，并对每个代码片段独立构思逻辑，创建React表单组件。
[0017]例如：创建一个表单组件YLFormItem：class YLFormItem extends React.Component {
ꢀꢀ
constructor (props) {
ꢀꢀꢀꢀ
super(props);
ꢀꢀ
}
ꢀꢀ
render () {
ꢀꢀꢀꢀ
return (
ꢀꢀꢀꢀꢀꢀ
<FormItemlabel="{this.props.label}" name="{this.props.key}" />
ꢀꢀꢀꢀ
)
ꢀꢀ
}}。
[0018]所述自研React组件需要前端页面事先引入自研框架，再引入自研React组件。
[0019]如图1
‑
2所示，创建React表单组件首先创建表单页面，从组件描述库中选用组件，进行编辑选用的组件属性，并发布React表单页面到内容管理微服务。
[0020]在创建完React组件后，需要在内容管理微服务中注册组件信息。微服务存储数据结构，例如：{
ꢀꢀꢀꢀ
"sn_id":"form.item.00000001",//组件唯一编码
ꢀꢀꢀꢀ
"content":"<YLFormItem label="[label]" name="[key]"/>",//组件类名 属性="属性占位符"
ꢀꢀꢀꢀ
"props":[
ꢀꢀꢀꢀꢀꢀꢀꢀ
{
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"key":"label",//组件提交表单时，对应json的key值
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"name":"标签"//组件该字段显示的名称
ꢀꢀꢀꢀꢀꢀꢀꢀ
}
ꢀꢀꢀꢀꢀꢀꢀꢀ
... //(之后递增)
ꢀꢀꢀꢀ
]}内容管理系统微服务后台进行创建编辑表单页面，选择不同的React组件，自由搭配组合，并编辑组件可配置信息，完成动态表单页面的构件。
[0021]如图4所示，在创建完表单页面后，根据创建的表单页面结构描述信息，通过组件属性中的ID获取组件在微服务中注册的数据信息，同时通过自定义模板引擎中的自定义的规则，将组件描述中的本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种可配置动态生成表单页面的方法，其特征在于，包括以下步骤：S1:首先，使用SPring Boot、React工具定义样板化配置和构建UI界面；S2:在构建好的UI界面引入自研的React组件将UI拆分成独立且具备复用性的代码片段，并对每个代码片段独立构思逻辑，创建React表单组件；S3:创建React表单组件首先创建表单页面，从组件描述库中选用组件，进行编辑选用的组件属性，并发布React表单页面到内容管理微服务；S4:内容管理系统微服务后台进行创建编辑表单页面，再根据创建的表单页面结构描述信息，结合组件创建时的注册数据信息进行渲染表单页面，并完成页面动态保存；S5:前端页面发出请求，请求展示表单页面内容，微服务后台响应并返回表单页面内容。2.根据权利要求1所述的可配置动态生成表单页面的方法，其特征在于，步骤S3中，所述前端请求展示页面流程包括前端网...

【专利技术属性】
技术研发人员：黄文锋，李明洋，刘明，刘强，谢水庚，
申请(专利权)人：北京航天云路有限公司，
类型：发明
国别省市：