CN111831282A - 基于vue技术的低代码开发表单方法和系统 - Google Patents

基于vue技术的低代码开发表单方法和系统 Download PDF

Info

Publication number
CN111831282A
CN111831282A CN202010620054.3A CN202010620054A CN111831282A CN 111831282 A CN111831282 A CN 111831282A CN 202010620054 A CN202010620054 A CN 202010620054A CN 111831282 A CN111831282 A CN 111831282A
Authority
CN
China
Prior art keywords
user
data
database
setting
module
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010620054.3A
Other languages
English (en)
Inventor
高国栋
李海波
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Suzhou Macroinf Information Technology Co ltd
Original Assignee
Suzhou Macroinf Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Suzhou Macroinf Information Technology Co ltd filed Critical Suzhou Macroinf Information Technology Co ltd
Priority to CN202010620054.3A priority Critical patent/CN111831282A/zh
Publication of CN111831282A publication Critical patent/CN111831282A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/26—Visual data mining; Browsing structured data

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Storage Device Security (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明提供一种基于VUE技术的低代码开发表单方法和系统，所述方法包括如下步骤：S1：可视化创建表单，基于网页可拖拽技术，提供表单创建的核心控件，以创建完整的表单；S2：持久化表单，将表单的数据保存到数据库中；S3：设置表单数据模型，从数据库中提取出可用的数据模型信息，在表单配置页面设置表单每个控件对应的数据库表列名称；S4：设置访问权限，设置能够访问表单的用户角色；S5：用户访问，用户通过登录系统登录页进行访问；S6：动态渲染，通过识别用户的角色，在菜单中显示用户可见的动态表单，渲染出查询页面，并渲染出用户选择的表单，加载表单关联的数据；S7：用户通过渲染的表单进行增删改查操作；S8：保存用户操作数据。

Description

基于VUE技术的低代码开发表单方法和系统
技术领域
本发明涉及表单开发领域，尤其涉及一种基于VUE技术的低代码开发表单方法和系统。
背景技术
在制造软件的开发中，如何快速的构建业务表单是软件的核心技术之一，会直接影响开发效率，开发质量。
在软件的交付与实施过程中，大量重复性的简单增删改查页面以及快速的需求变更会使软件开发企业在软件的开发、维护上花费大量的人力成本，需要进行重复开发和缺陷修复。
目前在软件开发过程中，常用的开发表单的方法为手动创建表单，流程为：
1.在数据库中创建表；
2.在后端开发中加入Controller，Service，Repository类用于增删改查业务；
3.在前端编写对应的HTML页面。
常用方案的缺点主要集中在：
1)配置性差，每种业务对象的属性均硬编码在软件代码中，后期如果有新增或调整等必须修改原代码，并停机进行维护；
2)速度慢，现有的通用方案均需要开发前后端程序，手动编码，交付时间较长；
3)开发成本高，需要对每一种需求进行重复编码。
发明内容
为了解决上述技术问题，本发明公开了一种基于VUE技术的低代码开发表单方法和系统，该方法和系统能够快速建立业务处理表单，在设置权限与数据模型后，能实现动态运行创建的表单并实现增删改查功能。
为达到上述目的，本发明的技术方案提供了一种基于VUE技术的低代码开发表单方法，所述方法包括如下步骤：
S1：可视化创建表单，基于网页可拖拽技术，提供表单创建的核心控件，以创建完整的表单；
S2：持久化表单，将表单的数据保存到数据库中；
S3：设置表单数据模型，从数据库中提取出可用的数据模型信息，在表单配置页面设置表单每个控件对应的数据库表列名称；
S4：设置访问权限，设置能够访问表单的用户角色；
S5：用户访问，用户通过登录系统登录页进行访问；
S6：动态渲染，通过识别用户的角色，在菜单中显示用户可见的动态表单，渲染出查询页面，并渲染出用户选择的表单，加载表单关联的数据；
S7：用户通过渲染的表单进行增删改查操作；
S8：保存用户操作数据。
根据上述技术方案的基于VUE技术的低代码开发表单方法，动态建立表单，并设定访问权限、存储表单模型，在使用者访问系统时，动态渲染表单，达到了灵活快速开发功能的目的，从而实现降低开发工作量、提高编码质量的目的。
作为优选的方案，在步骤S2中，将表单的数据用JSON的格式保存到关系型数据库中。
作为优选的方案，在保存表单的数据时采用JPA技术，以实现跨数据库类型的移植。
作为优选的方案，在步骤S4中，通过从数据库中提取出所有的角色信息，在表单配置页面设置表单可被哪些用户角色访问。
作为优选的方案，在步骤S8中，在保存用户操作数据后，进一步向用户提示操作的结果是否成功。
本发明的实施方式还提供了一种基于VUE技术的低代码开发表单系统，该系统包括如下模块：可视化创建表单模块，用于基于网页可拖拽技术，提供表单创建的核心控件，以创建完整的表单；持久化表单模块，用于将表单的数据保存到数据库中；表单数据模型设置模块，用于从数据库中提取出可用的数据模型信息，并在表单配置页面设置表单每个控件对应的数据库表列名称；访问权限设置模块，用于设置能够访问表单的用户角色；用户访问模块，用于使用户通过登录访问系统；动态渲染模块，用于通过识别用户的角色，在菜单中显示用户可见的动态表单，渲染出查询页面，并渲染出用户选择的表单，加载表单关联的数据；用户增删改查操作模块，用于使用户通过渲染的表单进行增删改查操作；数据保存模块，用于保存用户操作数据。
作为优选的方案，所述持久化表单模块将表单的数据用JSON的格式保存到关系型数据库中。
作为优选的方案，所述持久化表单模块在保存表单的数据时采用JPA技术，以实现跨数据库类型的移植。
作为优选的方案，所述访问权限设置模块通过从数据库中提取出所有的角色信息，在表单配置页面设置表单可被哪些用户角色访问。
作为优选的方案，所述数据保存模块在保存用户操作数据后进一步向用户提示操作的结果是否成功。
附图说明
图1是本发明的基于VUE技术的低代码开发表单方法的流程图；
图2是本发明的基于VUE技术的低代码开发表单系统的原理图。
具体实施方式
本发明的技术方案提供了一种基于VUE技术的低代码开发表单方法，所述方法包括如下步骤：
S1：可视化创建表单，基于网页可拖拽技术，提供表单创建的核心控件，以创建完整的表单；
S2：持久化表单，将表单的数据保存到数据库中；
S3：设置表单数据模型，从数据库中提取出可用的数据模型信息，在表单配置页面设置表单每个控件对应的数据库表列名称；
S4：设置访问权限，设置能够访问表单的用户角色；
S5：用户访问，用户通过登录系统登录页进行访问；
S6：动态渲染，通过识别用户的角色，在菜单中显示用户可见的动态表单，渲染出查询页面，并渲染出用户选择的表单，加载表单关联的数据；
S7：用户通过渲染的表单进行增删改查操作；
S8：保存用户操作数据。
根据上述技术方案的基于VUE技术的低代码开发表单方法，动态建立表单，并设定访问权限、存储表单模型，在使用者访问系统时，动态渲染表单，达到了灵活快速开发功能的目的，从而实现降低开发工作量、提高编码质量的目的。
作为优选的方案，在步骤S2中，将表单的数据用JSON的格式保存到关系型数据库中。
作为优选的方案，在保存表单的数据时采用JPA技术，以实现跨数据库类型的移植。
作为优选的方案，在步骤S4中，通过从数据库中提取出所有的角色信息，在表单配置页面设置表单可被哪些用户角色访问。
作为优选的方案，在步骤S8中，在保存用户操作数据后，进一步向用户提示操作的结果是否成功。
本发明的实施方式还提供了一种基于VUE技术的低代码开发表单系统，该系统包括如下模块：可视化创建表单模块，用于基于网页可拖拽技术，提供表单创建的核心控件，以创建完整的表单；持久化表单模块，用于将表单的数据保存到数据库中；表单数据模型设置模块，用于从数据库中提取出可用的数据模型信息，并在表单配置页面设置表单每个控件对应的数据库表列名称；访问权限设置模块，用于设置能够访问表单的用户角色；用户访问模块，用于使用户通过登录访问系统；动态渲染模块，用于通过识别用户的角色，在菜单中显示用户可见的动态表单，渲染出查询页面，并渲染出用户选择的表单，加载表单关联的数据；用户增删改查操作模块，用于使用户通过渲染的表单进行增删改查操作；数据保存模块，用于保存用户操作数据。
作为优选的方案，所述持久化表单模块将表单的数据用JSON的格式保存到关系型数据库中。
作为优选的方案，所述持久化表单模块在保存表单的数据时采用JPA技术，以实现跨数据库类型的移植。
作为优选的方案，所述访问权限设置模块通过从数据库中提取出所有的角色信息，在表单配置页面设置表单可被哪些用户角色访问。
作为优选的方案，所述数据保存模块在保存用户操作数据后进一步向用户提示操作的结果是否成功。
本发明的实施方式还提供了一种基于VUE技术的低代码开发表单系统，其用于如上所述的方法，该系统包括：可视化表单编辑器，用于提供可视化的工具以协助表单设计用户创建表单、关联数据模型、并设置表单访问权限；表单模型，用于提供系统的核心业务模型；数据库，用于持久化表单存储模型；基于VUE技术的表单渲染引擎，用于将表单模型装配并渲染成前端网页，并且加载管理数据并保存客户端提交数据。
下面结合具体实施例对本发明的技术方案作进一步的描述，但本发明并不限于这些实施例。
如图1所示，本发明的基于VUE技术的低代码开发表单的方法包括如下步骤：
S1：可视化创建表单，基于网页可拖拽技术，提供表单创建的核心控件，以创建完整的表单。在可视化创建表单时，表单设计者可通过现有的低代码开发平台，使用图形化用户界面进行表单的创建。表单的核心控件可以包括日期控件、下拉框控件、布局控件、标签控件、输入框控件、数字控件、按钮等。
S2：持久化表单，将表单的数据保存到数据库中。在具体实施例中，可以用JSON格式将表单数据保存到关系型数据库中，例如，SQLite、Oracle、MySQL。另外，在保存表单数据时，优选地可以采用JPA技术，以实现跨数据库类型的移植。
S3：设置表单数据模型，从数据库中提取出可用的数据模型(数据库表)信息，在表单配置页面设置表单每个控件对应的数据库表列名称。
S4：设置访问权限，设置能够访问表单的用户角色。在访问权限的设置中，系统可以从数据库中提取出所有的用户角色信息，并在表单配置页面设置能够访问表单的用户角色。
S5：用户访问，用户通过登录系统登录页进行访问。
S6：动态渲染，通过识别用户的角色，在菜单中显示用户可见的动态表单，渲染出查询页面，并渲染出用户选择的表单，加载表单关联的数据。
S7：用于进行增删改查操作，用户通过渲染的表单进行增删改查操作。
S8：系统保存用户操作，系统保存用户操作的数据。进一步地，在系统保存用户操作数据后可以向用户提示操作的结果是否成功。
本发明的另一实施方式还提供了一种基于VUE技术的低代码开发表单系统，其包括如下模块：
可视化创建表单模块，用于基于网页可拖拽技术，提供表单创建的核心控件，以创建完整的表单。可视化创建表单模块可采用现有的低代码开发平台，以使设计者能够使用图形化用户界面进行表单的创建。表单的核心控件可以包括日期控件、下拉框控件、布局控件、标签控件、输入框控件、数字控件、按钮等。
持久化表单模块，用于将表单的数据保存到数据库中。在具体实施例中，持久化表单模块可以将表单数据用JSON格式保存到关系型数据库中，例如，SQLite、Oracle、MySQL。另外，在保存表单数据时，优选地可以采用JPA技术，以实现跨数据库类型的移植。
表单数据模型设置模块，用于从数据库中提取出可用的数据模型信息，并在表单配置页面设置表单每个控件对应的数据库表列名称。
访问权限设置模块，用于设置能够访问表单的用户角色。在访问权限的设置中，可以从数据库中提取出所有的用户角色信息，并在表单配置页面设置能够访问表单的用户角色。
用户访问模块，用于使用户通过登录访问系统。
动态渲染模块，用于通过识别用户的角色，在菜单中显示用户可见的动态表单，渲染出查询页面，并渲染出用户选择的表单，加载表单关联的数据。
用户增删改查操作模块，用于使用户通过渲染的表单进行增删改查操作。
数据保存模块，用于保存用户操作数据。进一步地，所述数据保存模块在保存用户操作数据后进一步向用户提示操作的结果是否成功。
参见图2，其示出了本发明的基于VUE技术的低代码开发表单系统的原理图。该系统的主要组成部分包括：可视化表单编辑器、表单模型、数据库、基于VUE技术的表单渲染引擎。
可视化表单编辑器，主要用于提供可视化的工具协助用户创建表单，关联数据模型，设置访问权限。
表单模型，系统的核心业务模型。
数据库，用于持久化表单存储模型。
基于VUE技术的表单渲染引擎，用于将表单模型装配并渲染成前端网页，加载关联数据，保存客户端提交数据等功能。
根据本发明的基于VUE技术的低代码开发表单方法和系统，动态建立表单，并设定访问权限、存储表单模型，在使用者访问系统时，动态渲染表单，达到了灵活快速开发功能的目的，从而实现降低开发工作量、提高编码质量的目的。
以上所述的仅是本发明的优选实施方式，应当指出，对于本领域的普通技术人员来说，在不脱离本发明创造构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。

Claims (10)

1.一种基于VUE技术的低代码开发表单方法，其特征在于，所述方法包括如下步骤：
S1：可视化创建表单，基于网页可拖拽技术，提供表单创建的核心控件，以创建完整的表单；
S2：持久化表单，将表单的数据保存到数据库中；
S3：设置表单数据模型，从数据库中提取出可用的数据模型信息，在表单配置页面设置表单每个控件对应的数据库表列名称；
S4：设置访问权限，设置能够访问表单的用户角色；
S5：用户访问，用户通过登录系统登录页进行访问；
S6：动态渲染，通过识别用户的角色，在菜单中显示用户可见的动态表单，渲染出查询页面，并渲染出用户选择的表单，加载表单关联的数据；
S7：用户通过渲染的表单进行增删改查操作；
S8：保存用户操作数据。
2.根据权利要求1所述的方法，其特征在于，在步骤S2中，将表单的数据用JSON的格式保存到关系型数据库中。
3.根据权利要求2所述的方法，其特征在于，在保存表单的数据时采用JPA技术，以实现跨数据库类型的移植。
4.根据权利要求1所述的方法，其特征在于，在步骤S4中，通过从数据库中提取出所有的角色信息，在表单配置页面设置表单可被哪些用户角色访问。
5.根据权利要求1所述的方法，其特征在于，在步骤S8中，在保存用户操作数据后，进一步向用户提示操作的结果是否成功。
6.一种基于VUE技术的低代码开发表单系统，所述系统包括如下模块：
可视化创建表单模块，用于基于网页可拖拽技术，提供表单创建的核心控件，以创建完整的表单；
持久化表单模块，用于将表单的数据保存到数据库中；
表单数据模型设置模块，用于从数据库中提取出可用的数据模型信息，并在表单配置页面设置表单每个控件对应的数据库表列名称；
访问权限设置模块，用于设置能够访问表单的用户角色；
用户访问模块，用于使用户通过登录访问系统；
动态渲染模块，用于通过识别用户的角色，在菜单中显示用户可见的动态表单，渲染出查询页面，并渲染出用户选择的表单，加载表单关联的数据；
用户增删改查操作模块，用于使用户通过渲染的表单进行增删改查操作；
数据保存模块，用于保存用户操作数据。
7.根据权利要求6所述的系统，其特征在于，所述持久化表单模块将表单的数据用JSON的格式保存到关系型数据库中。
8.根据权利要求7所述的系统，其特征在于，所述持久化表单模块在保存表单的数据时采用JPA技术，以实现跨数据库类型的移植。
9.根据权利要求6所述的系统，其特征在于，所述访问权限设置模块通过从数据库中提取出所有的角色信息，在表单配置页面设置表单可被哪些用户角色访问。
10.根据权利要求6所述的系统，其特征在于，所述数据保存模块在保存用户操作数据后进一步向用户提示操作的结果是否成功。
CN202010620054.3A 2020-06-30 2020-06-30 基于vue技术的低代码开发表单方法和系统 Pending CN111831282A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010620054.3A CN111831282A (zh) 2020-06-30 2020-06-30 基于vue技术的低代码开发表单方法和系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010620054.3A CN111831282A (zh) 2020-06-30 2020-06-30 基于vue技术的低代码开发表单方法和系统

Publications (1)

Publication Number Publication Date
CN111831282A true CN111831282A (zh) 2020-10-27

Family

ID=72899989

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010620054.3A Pending CN111831282A (zh) 2020-06-30 2020-06-30 基于vue技术的低代码开发表单方法和系统

Country Status (1)

Country Link
CN (1) CN111831282A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112613836A (zh) * 2020-12-18 2021-04-06 杭州米络星科技(集团)有限公司 一种crud表单的集成方法
CN112685015A (zh) * 2020-12-31 2021-04-20 魔元术(苏州)信息科技有限公司 一种低代码新零售敏捷数字化开发系统
CN113407877A (zh) * 2021-06-21 2021-09-17 杭州卓健信息科技股份有限公司 一种可配置化的web表单实现方法
CN113642920A (zh) * 2021-08-30 2021-11-12 南京数睿数据科技有限公司 一种面向工业制造领域数字化应用的快速构建方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040205529A1 (en) * 2002-06-03 2004-10-14 Ernest Cusick System and method for creating forms
CN104572131A (zh) * 2015-02-04 2015-04-29 浪潮软件股份有限公司 一种业务表单配置的方法和装置
CN110825362A (zh) * 2019-11-04 2020-02-21 广东道一信息技术股份有限公司 低代码应用软件开发系统及方法
CN110989983A (zh) * 2019-11-28 2020-04-10 深圳航天智慧城市系统技术研究院有限公司 一种零编码的应用软件快速构建系统
CN111124405A (zh) * 2019-12-04 2020-05-08 浪潮软件股份有限公司 一种支持前后端解耦的在线表单设计的实现方法及系统

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040205529A1 (en) * 2002-06-03 2004-10-14 Ernest Cusick System and method for creating forms
CN104572131A (zh) * 2015-02-04 2015-04-29 浪潮软件股份有限公司 一种业务表单配置的方法和装置
CN110825362A (zh) * 2019-11-04 2020-02-21 广东道一信息技术股份有限公司 低代码应用软件开发系统及方法
CN110989983A (zh) * 2019-11-28 2020-04-10 深圳航天智慧城市系统技术研究院有限公司 一种零编码的应用软件快速构建系统
CN111124405A (zh) * 2019-12-04 2020-05-08 浪潮软件股份有限公司 一种支持前后端解耦的在线表单设计的实现方法及系统

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112613836A (zh) * 2020-12-18 2021-04-06 杭州米络星科技(集团)有限公司 一种crud表单的集成方法
CN112685015A (zh) * 2020-12-31 2021-04-20 魔元术(苏州)信息科技有限公司 一种低代码新零售敏捷数字化开发系统
CN113407877A (zh) * 2021-06-21 2021-09-17 杭州卓健信息科技股份有限公司 一种可配置化的web表单实现方法
CN113407877B (zh) * 2021-06-21 2022-11-08 杭州卓健信息科技股份有限公司 一种可配置化的web表单实现方法
CN113642920A (zh) * 2021-08-30 2021-11-12 南京数睿数据科技有限公司 一种面向工业制造领域数字化应用的快速构建方法
CN113642920B (zh) * 2021-08-30 2023-10-31 南京数睿数据科技有限公司 一种面向工业制造领域数字化应用的快速构建方法

Similar Documents

Publication Publication Date Title
CN111831282A (zh) 基于vue技术的低代码开发表单方法和系统
CN111259303A (zh) 一种web信息系统前端页面自动生成的系统及其方法
WO2017016179A1 (zh) 一种组态软件国际化多语言的实现方法
CN104715052B (zh) 生成报表的方法及其系统
CN115617327A (zh) 低代码页面搭建系统、方法及计算机可读存储介质
CN111324609B (zh) 知识图谱构建方法、装置、电子设备及存储介质
CN104239073B (zh) 一种数据维护系统快速原型开发系统及方法
CN105528418B (zh) 一种设计文档生成方法及装置
CN106469140A (zh) 一种报表生成系统及其方法
CN111784108B (zh) 一种主数据管理平台的建模方法和装置
CN109299288A (zh) 字典数据的读取方法、装置、服务器和存储介质
CN108228762B (zh) 用于配置主数据库通用模板的方法和系统
CN111291025B (zh) 逻辑模型支持多物理模型转换的方法及存储设备
CN102629204A (zh) 网页源代码生成方法及装置
JP2022093293A (ja) エクセルツールを用いたオンラインレポート作成システム
WO2024012195A1 (zh) 统一校验方法、装置、设备和存储介质
CN112230900A (zh) 一种自定义设置表单模型的开发引擎系统及方法
CN108766513B (zh) 一种智慧健康医疗数据结构化处理系统
CN104133680A (zh) 一种erp窗体模块的快速构建方法
CN111435300A (zh) web系统开发方法、装置、设备及存储介质
CN115934716A (zh) 一种基于元数据定义和实现的Excel表格数据导入数据库的方法
CN114385144A (zh) 基于WebAssembly的可读写网页CAD平台
JP2018109898A (ja) データマイグレーションシステム
CN113722550A (zh) 一种关系图谱的实现方法、装置、电子设备及存储介质
CN111858670A (zh) 消费金融行业智能风险报表生成方法及报表系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination