[发明专利]基于动态数据的表单项渲染方法、系统、设备及存储介质

说明书

本发明公开了一种基于动态数据的表单项渲染方法、系统、设备及存储介质。上述方法包括：确定表单项的动态数据结构；通过前端页面根据业务需求将需要的表单项类型结合动态数据结构进行渲染拼接，得到数据渲染模板；通过前端页面将实际表单数据利用数据渲染模板进行渲染得到对应的动态表单项。本发明中所有的表单项渲染类型判断逻辑都在前端处理，能够提高开发接口的数据纯粹性，可以很好的满足动态数据的表单项渲染需求。

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于动态数据的表单项渲染方法、系统、设备及存储介质。

背景技术

目前在Web领域，网页的开发一般都是采用前后端分离模式，前端工程师负责页面结构及样式的书写，服务端负责提供数据，前端工程师通过Http请求，获取服务端数据，将其格式化后插入到页面结构中渲染出数据形成正式的网页。其中，Web代表网页，Http请求指从客户端到服务器端的请求消息。

在整个网页的开发过程中，前端渲染页面结构大致可以分为两种形式。一种是：数据结构固定，页面结构固定，前端只需要将从服务端获取的数据格式化以后直接插入到页面结构即可渲染出网页；另一种是：前端页面结构不确定，网页的结构依赖于服务端的数据结构和类型，这种形式相较于第一种固定网页结构插入数据的形式复杂了很多。

在网站开发过程中，针对于动态数据的渲染展示，前端开发人员如果按照一种数据结构开发一套前端展示结构，这样不仅很大的增加了工作量，也不一定能够全部满足动态数据的渲染展示。例如：某网站有50000个客户，每一个客户的基本信息状况都不会完全相同，假如有一个客户的基本信息中包括：电话，公司名称，邮编，地址，而另一个客户的基本信息中包括：公司名称，客户别名，行业类型，邮编等，这两个客户基本信息就有很多不同，如何在展示和编辑的时候完全满足每一个客户的基本信息数据结构，这就需要一种统一的基于动态数据的表单项渲染展示方法。

在现有技术中，通常是由服务端直接返回处理好的Html字符串结构，即在服务端根据数据结构和数据类型确定需要展示的表单项，组合成Html字符串，通过Http请求返回给前端，前端开发人员不需要处理数据逻辑，也不需要判断数据类型，直接将Http返回的Html字符串插入到页面结构中渲染出来即可。这种方式的缺点是服务端需要处理大量数据类型判断逻辑，拼接Html标签结构，而针对于Html标签拼接最好是前端开发人员来做，这些本不属于服务端的范畴，也违背了前后端开发分离的原则。

发明内容

本发明针对上述的在服务端使用动态数据拼接Html结构返回至前端造成服务端需处理的工作量过大且无法实现前后端开发分离的技术问题，提出一种基于动态数据的表单项渲染方法、系统、设备及存储介质。

第一方面，本申请实施例提供了一种基于动态数据的表单项渲染方法，包括：

数据结构确定步骤：确定表单项的动态数据结构；

模板获得步骤：通过前端页面根据业务需求将需要的表单项类型结合所述动态数据结构进行渲染拼接，得到数据渲染模板；

渲染步骤：通过所述前端页面将实际表单数据利用所述数据渲染模板进行渲染得到对应的动态表单项。

上述基于动态数据的表单项渲染方法，其中，所述数据结构确定步骤中，所述动态数据结构由所述前端页面与服务器端根据业务需求共同确定。

上述基于动态数据的表单项渲染方法，其中，所述动态数据结构中包含类型或限制条件的字段包括但不限于：en、cn、multi、dataType、required、value、readOnly。

上述基于动态数据的表单项渲染方法，其中，所述渲染步骤包括：

数据请求步骤：接收到所述前端页面发送的数据请求后，通过所述服务器端将需要展示的所述实际表单数据按照所述动态数据结构的格式进行封装并返回至所述前端页面；