CN112015420A

CN112015420A - 表单渲染方法、装置、计算机设备及存储介质

Info

Publication number: CN112015420A
Application number: CN202010973641.0A
Authority: CN
Inventors: 文青; 植挺生; 罗淑冰
Original assignee: Guangdong Guangyu Technology Development Co Ltd
Current assignee: Guangdong Guangyu Technology Development Co Ltd
Priority date: 2020-09-16
Filing date: 2020-09-16
Publication date: 2020-12-01

Abstract

本发明公开了一种表单渲染方法、装置、计算机设备及存储介质，所述方法包括：在各个应用页面中引用预先创建的表单渲染通用组件，使表单渲染通用组件的表单弹窗模块渲染到各个应用页面上；针对每个应用页面，引用相应的表单配置模块，使该表单配置模块作为参数传入表单渲染通用组件；针对每个应用页面，引用相应的表单验证规则模块，使该表单验证规则模块作为参数传入表单渲染通用组件；根据传入表单渲染通用组件的各项参数，通过表单渲染通用组件对每个应用页面进行渲染，得到对应的表单模块。本发明通过表单渲染通用组件可以简洁快捷地重用表单，快速实现应用页面的表单功能，增强应用页面的可维护性，提高开发人员工作效率。

Description

表单渲染方法、装置、计算机设备及存储介质

技术领域

本发明涉及一种表单渲染方法、装置、计算机设备及存储介质，属于后台管理系统的开发领域。

背景技术

在后台管理系统中，表单是必不可少的。开发一个后台管理系统，表单的编写布满整个系统的各个应用页面。

Vue.js是一套用于构建用户界面的渐进式框架，它可以自底向上逐层应用，目前在国内被广泛使用。它是基于MVVM框架做开发的，MVVM是前端开发中一种很有影响力的模式，实现了响应式的双向数据绑定，它的底层提供了很多实用的API，减少了实现页面功能很多繁琐的操作，可以快速地构建系统网站。与Vue.js框架较常配套使用的是iView组件库，iView是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品，有丰富常见的组件供开发人员使用，基于iView组件库提供的表单组件，为开发人员提高了工作效率。

目前，基于Vue基础的iView组件库提供的表单组件虽然可以帮助开发人员快速建立表单，但由于多个界面的表单功能相仿，表单组件雷同，所以出现了部分代码冗余和编码重复的情况。相同功能在修改维护时，也需要逐个页面修改维护，在完成一些复制粘贴的功能时花费了大量时间，这大大增加了时间成本和代码维护难度。

发明内容

有鉴于此，本发明提供了一种表单渲染方法、装置、计算机设备及存储介质，其通过表单渲染通用组件可以简洁快捷地重用表单，快速实现应用页面的表单功能，增强应用页面的可维护性，提高开发人员工作效率。

本发明的第一个目的在于提供一种表单渲染方法。

本发明的第二个目的在于提供一种表单渲染装置。

本发明的第三个目的在于提供一种计算机设备。

本发明的第四个目的在于提供一种存储介质。

本发明的第一个目的可以通过采取如下技术方案达到：

一种表单渲染方法，所述方法包括：

在各个应用页面中引用预先创建的表单渲染通用组件，使表单渲染通用组件的表单弹窗模块渲染到各个应用页面上；

针对每个应用页面，引用相应的表单配置模块，使该表单配置模块作为参数传入表单渲染通用组件；

针对每个应用页面，引用相应的表单验证规则模块，使该表单验证规则模块作为参数传入表单渲染通用组件；

根据传入表单渲染通用组件的各项参数，通过表单渲染通用组件对每个应用页面进行渲染，得到对应的表单模块。

进一步的，所述针对每个应用页面，引用相应的表单配置模块，使该表单配置模块作为参数传入表单渲染通用组件，具体包括：

针对每个应用页面，引用相应的表单配置模块，将该表单配置模块中的表单项名称、表单项字段、表单项宽度、表单项类型和只读选项作为参数传入表单渲染通用组件；

判断该表单配置模块是否有下拉选框；

当该表单配置模块有下拉选择框时，请求数据接口，获取对应的下拉选框数据，作为参数传入表单渲染通用组件。

进一步的，所述根据传入表单渲染通用组件的各项参数，通过表单渲染通用组件对每个应用页面进行渲染，得到对应的表单模块，具体包括：

在各个应用页面中配置应用页面内的表单与应用页面数据的公共接口服务；

根据传入的接口配置参数实现表单弹窗模块中各子组件之间与应用页面数据的接口连接，配合表单配置模块的表单项和表单验证规则模块的验证规则，利用v-for属性循环，渲染得到每个应用页面对应的表单模块。

进一步的，所述表单弹窗模块包括弹窗子组件和多个表单基础子组件，多个表单基础子组件放在弹窗子组件内部。

进一步的，所述表单基础子组件包括文本输入框子组件、单选框子组件、多选框子组件、下拉选框子组件、树形下拉选框子组件和日期子组件；

对于文本输入框子组件，利用type属性传参数达到用最简洁的代码区分各种类型，并配置相应的属性，将表单渲染通用组件渲染到各个应用页面上；

对于单选框子组件、多选框子组件、下拉选框子组件和树形下拉选框子组件，利用传入的选框数据将表单渲染通用组件渲染到各个应用页面上。

进一步的，所述表单配置模块为根据相应的应用页面使用javascript语言编写的文件。

进一步的，所述表单验证规则模块为以验证属性rules为基础扩展，根据相应的应用页面将自定义的验证规则使用javascript编写的文件。

本发明的第二个目的可以通过采取如下技术方案达到：

一种表单渲染装置，所述装置包括：

第一引用单元，用于在各个应用页面中引用预先创建的表单渲染通用组件，使表单渲染通用组件的表单弹窗模块渲染到各个应用页面上；

第二引用单元，用于针对每个应用页面，引用相应的表单配置模块，使该表单配置模块作为参数传入表单渲染通用组件；

第三引用单元，用于针对每个应用页面，引用相应的表单验证规则模块，使该表单验证规则模块作为参数传入表单渲染通用组件；

渲染单元，用于根据传入表单渲染通用组件的各项参数，通过表单渲染通用组件对每个应用页面进行渲染，得到对应的表单模块。

本发明的第三个目的可以通过采取如下技术方案达到：

一种计算机设备，包括处理器以及用于存储处理器可执行程序的存储器，所述处理器执行存储器存储的程序时，实现上述的表单渲染方法。

本发明的第四个目的可以通过采取如下技术方案达到：

一种存储介质，存储有程序，所述程序被处理器执行时，实现上述的表单渲染方法。

本发明相对于现有技术具有如下的有益效果：

本发明在各个应用页面中引用预先创建的表单渲染通用组件，使表单渲染通用组件的表单弹窗模块渲染到各个应用页面上，即通过表单渲染通用组件可以简洁快捷地重用表单，然后针对每个应用页面，引用相应的表单配置模块和表单验证规则模块，作为参数传入表单渲染通用组件，根据传入表单渲染通用组件的各项参数，通过最终得到的表单渲染通用组件对每个应用页面进行渲染，可以快速实现应用页面的表单功能，增强应用页面的可维护性，提高开发人员工作效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图。

图1为本发明实施例1的表单渲染方法的流程图。

图2为本发明实施例1的表单渲染通用组件设计及使用流程图。

图3为本发明实施例1的引用表单配置模块的流程图。

图4为本发明实施例1的表单渲染通用组件的组成架构图。

图5为本发明实施例1的渲染每个应用页面得到的表单模块的流程图。

图6为本发明实施例1的渲染每个应用页面得到的表单模块的界面图。

图7为本发明实施例2的表单渲染装置的结构框图。

图8为本发明实施例2的第二引用单元的结构框图。

图9为本发明实施例2的渲染单元的结构框图。

图10为本发明实施例3的计算机设备的结构框图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1：

如图1和图2所示，本实施例提供了一种表单渲染方法，该方法包括以下步骤：

S101、在各个应用页面中引用预先创建的表单渲染通用组件，使表单渲染通用组件的表单弹窗模块渲染到各个应用页面上。

本实施例的表单渲染通用组件是基于Vue.js框架和iView Ui组件库实现的表单渲染通用组件，首先新建表单渲染通用组件文件，以弹窗子组件为框架，在弹窗子组件内部编写预设的多个表单基础子组件，完成初始表单渲染通用组件的创建，弹窗子组件和多个表单基础子组件构成了表单渲染通用组件的表单弹窗模块，表单弹窗模块是表单渲染通用组件的主体文件，后台管理系统一般具有多个应用页面，每个应用页面对应一个表单模块，任意应用页面使用表单渲染通用组件时需要引用表单弹窗模块，具体地，在各个应用页面中引用表单渲染通用组件，使表单渲染通用组件的表单弹窗模块渲染到各个应用页面上。

进一步地，表单基础子组件可以包括文本输入框子组件、单选框子组件、多选框子组件、下拉选框子组件、树形下拉选框子组件和日期子组件，弹窗子组件以及各个表单基础子组件的具体说明如下：

A、弹窗子组件：由于表单数量较多，为了更好地显示，通常是弹窗打开，作为表单渲染通用组件的主容器，内部放着各个表单基础组件。

B、文本输入框子组件：在iView UI的input文本输入框组件的基础上扩展，其中包含多种类型：纯文本框，文本域，密码框，带按钮搜索框等；利用type属性传参数达到用最简洁的代码区分各种类型，并配置相应的属性，将表单渲染通用组件渲染到各个应用页面上。

C、单选框子组件、多选框子组件、下拉选框子组件和树形下拉选框子组件：在iView UI的单选框组件的基础上扩展；利用传入的选框数据将表单渲染通用组件渲染到各个应用页面上。

D、日期子组件：在iView UI的日期组件基础上扩展，用于设置日期格式和日期类型。

本实施例的表单弹窗模块部分代码示例如下：

S102、针对每个应用页面，引用相应的表单配置模块，使该表单配置模块作为参数传入表单渲染通用组件。

表单配置模块是表单渲染通用组件的配置依赖文件，以需要引用表单渲染通用组件的应用页面的表单模块为依据建立单个表单配置模块，使用javascript语言编写，分别用对应的自定义属性来配置表单的各个信息，在每个应用页面单独引入，直接引用；本实施例新建表单配置模块文件，编写预设的表单值，包括表单项名称、表单项字段、表单项宽度、表单项类型、只读选项等，表单渲染通用组件中各子组件的配置信息从表单配置模块读取。

本实施例的表单配置模块部分代码示例如下：

进一步地，该步骤S102如图3所示，具体包括：

S1021、针对每个应用页面，引用相应的表单配置模块，将该表单配置模块中的表单项名称、表单项字段、表单项宽度、表单项类型和只读选项作为参数传入表单渲染通用组件。

S1022、判断该表单配置模块是否有下拉选框，若该表单配置模块有下拉选框，则进入步骤S1023。

S1023、请求数据接口，获取对应的下拉选框数据，作为参数传入表单渲染通用组件。

S103、针对每个应用页面，引用相应的表单验证规则模块，使该表单验证规则模块作为参数传入表单渲染通用组件。

其中，表单验证规则模块是以iView UI的验证属性rules为基础扩展，根据应用页面的表单模块将自定义的验证规则使用javascript语言编写的文件，并进行分类存放，使用时在相应的应用页面引入，做到引入井井有条，不易错乱。

本实施例的表单验证规则模块部分代码示例如下：

经过上述步骤S101～S103后，表单渲染通用组件设计完成，最终的表单渲染通用组件的组成架构如图4所示，其包括表单配置模块、表单弹窗模块和表单验证规则模块。

S104、根据传入表单渲染通用组件的各项参数，通过表单渲染通用组件对每个应用页面进行渲染，得到对应的表单模块。

进一步地，该步骤S104如图5所示，具体包括：

S1041、在各个应用页面中配置应用页面内的表单与应用页面数据的公共接口服务。

S1042、根据传入的接口配置参数实现表单弹窗模块中各子组件之间与应用页面数据的接口连接，配合表单配置模块的表单项和表单验证规则模块的验证规则，利用v-for属性循环，渲染得到每个应用页面对应的表单模块。

其中，利用Vue.js的v-for属性，可以高效渲染应用页面，渲染得到每个应用页面对应的表单模块的界面如图6所示。

本领域技术人员可以理解，实现上述实施例的方法中的全部或部分步骤可以通过程序来指令相关的硬件来完成，相应的程序可以存储于计算机可读存储介质中。

应当注意，尽管在附图中以特定顺序描述了上述实施例的方法操作，但是这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。相反，描绘的步骤可以改变执行顺序。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

实施例2：

如图7所示，本实施例提供了一种表单渲染装置，该装置包括第一引用单元701、第二引用单元702、第三引用单元703和渲染单元704，各个单元的具体功能如下：

第一引用单元701，用于在各个应用页面中引用预先创建的表单渲染通用组件，使表单渲染通用组件的表单弹窗模块渲染到各个应用页面上。

第二引用单元702，用于针对每个应用页面，引用相应的表单配置模块，使该表单配置模块作为参数传入表单渲染通用组件。

第三引用单元703，用于针对每个应用页面，引用相应的表单验证规则模块，使该表单验证规则模块作为参数传入表单渲染通用组件。

渲染单元704，用于根据传入表单渲染通用组件的各项参数，通过表单渲染通用组件对每个应用页面进行渲染，得到对应的表单模块。

进一步地，第二引用单元702如图8所示，具体包括：

引用子单元7021，用于针对每个应用页面，引用相应的表单配置模块，将该表单配置模块中的表单项名称、表单项字段、表单项宽度、表单项类型和只读选项作为参数传入表单渲染通用组件。

判断子单元7022，用于判断该表单配置模块是否有下拉选框。

获取子单元7023，当该表单配置模块有下拉选择框时，请求数据接口，获取对应的下拉选框数据，作为参数传入表单渲染通用组件。

进一步地，渲染单元704如图9所示，具体包括：

配置子单元7041，用于在各个应用页面中配置应用页面内的表单与应用页面数据的公共接口服务。

渲染子单元7042，用于根据传入的接口配置参数实现表单弹窗模块中各子组件之间与应用页面数据的接口连接，配合表单配置模块的表单项和表单验证规则模块的验证规则，利用v-for属性循环，渲染得到每个应用页面对应的表单模块。

本实施例中各个模块的具体实现可以参见上述实施例1，在此不再一一赘述；需要说明的是，本实施例提供的装置仅以上述各功能单元的划分进行举例说明，在实际应用中，可以根据需要而将上述功能分配由不同的功能单元完成，即将内部结构划分成不同的功能单元，以完成以上描述的全部或者部分功能。

可以理解，上述装置所使用的术语“第一”、“第二”等可用于描述各种单元，但这些单元不受这些术语限制。这些术语仅用于将第一个单元与另一个单元区分。举例来说，在不脱离本发明的范围的情况下，可以将第一引用单元称为第二引用单元，且类似地，可将第二引用单元称为第一引用单元，第一引用单元和第二引用单元两者都是引用单元，但其不是同一引用单元。

实施例3：

如图10所示，本实施例提供了一种计算机设备，该计算机设备可以是计算机，其包括通过系统总线1001连接的处理器1002、存储器、输入装置1003、显示器1004和网络接口1005，该处理器用于提供计算和控制能力，该存储器包括非易失性存储介质1006和内存储器1007，该非易失性存储介质1006存储有操作系统、计算机程序和数据库，该内存储器1007为非易失性存储介质中的操作系统和计算机程序的运行提供环境，处理器1002执行存储器存储的计算机程序时，实现上述实施例1的表单渲染方法，如下：

实施例4：

本实施例提供了一种存储介质，该存储介质为计算机可读存储介质，其存储有计算机程序，所述计算机程序被处理器执行时，实现上述实施例1的表单渲染方法，如下：

需要说明的是，本实施例的计算机可读存储介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本实施例中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读存储介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读存储介质上包含的计算机程序可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读存储介质可以以一种或多种程序设计语言或其组合来编写用于执行本实施例的计算机程序，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Python、C++，还包括常规的过程式程序设计语言—诸如C语言或类似的程序设计语言。程序可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

综上所述，本发明在各个应用页面中引用预先创建的表单渲染通用组件，使表单渲染通用组件的表单弹窗模块渲染到各个应用页面上，即通过表单渲染通用组件可以简洁快捷地重用表单，然后针对每个应用页面，引用相应的表单配置模块和表单验证规则模块，作为参数传入表单渲染通用组件，根据传入表单渲染通用组件的各项参数，通过最终得到的表单渲染通用组件对每个应用页面进行渲染，可以快速实现应用页面的表单功能，增强应用页面的可维护性，提高开发人员工作效率。

以上所述，仅为本发明专利较佳的实施例，但本发明专利的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明专利所公开的范围内，根据本发明专利的技术方案及其发明构思加以等同替换或改变，都属于本发明专利的保护范围。

Claims

1.一种表单渲染方法，其特征在于，所述方法包括：

2.根据权利要求1所述的表单渲染方法，其特征在于，所述针对每个应用页面，引用相应的表单配置模块，使该表单配置模块作为参数传入表单渲染通用组件，具体包括：

判断该表单配置模块是否有下拉选框；

3.根据权利要求1所述的表单渲染方法，其特征在于，所述根据传入表单渲染通用组件的各项参数，通过表单渲染通用组件对每个应用页面进行渲染，得到对应的表单模块，具体包括：

4.根据权利要求1-3任一项所述的表单渲染方法，其特征在于，所述表单弹窗模块包括弹窗子组件和多个表单基础子组件，多个表单基础子组件放在弹窗子组件内部。

5.根据权利要求4所述的表单渲染方法，其特征在于，所述表单基础子组件包括文本输入框子组件、单选框子组件、多选框子组件、下拉选框子组件、树形下拉选框子组件和日期子组件；

6.根据权利要求1-3任一项所述的表单渲染方法，其特征在于，所述表单配置模块为根据相应的应用页面使用javascript语言编写的文件。

7.根据权利要求1-3任一项所述的表单渲染方法，其特征在于，所述表单验证规则模块为以验证属性rules为基础扩展，根据相应的应用页面将自定义的验证规则使用javascript编写的文件。

8.一种表单渲染装置，其特征在于，所述装置包括：

9.一种计算机设备，包括处理器以及用于存储处理器可执行程序的存储器，其特征在于，所述处理器执行存储器存储的程序时，实现权利要求1-7任一项所述的表单渲染方法。

10.一种存储介质，存储有程序，其特征在于，所述程序被处理器执行时，实现权利要求1-7任一项所述的表单渲染方法。