CN115237395A - 一种web程序代码自动生成算法系统 - Google Patents

Abstract

本发明公开了一种WEB程序代码自动生成算法系统，其技术方案要点是包括有表单配置模块、类库模块、页面生成模块；表单配置模块用于构建表格和表单，并且对表格和表单中的参数进行设置，自动生成HTML代码块、JS代码块以及API代码块；类库模块用于供逻辑支持；页面生成模块根据HTML代码块、JS代码块、API代码块以及逻辑服务生成操作页面，开发人员在代码自动生成页面进行配置，系统自动生成可以直接运行的前端代码。

Description

一种WEB程序代码自动生成算法系统

技术领域

本发明涉及一种算法系统，更具体地说，它涉及一种WEB程序代码自动生成算法系统。

背景技术

目前多数信息化系统都是基于Web应用实现.Web应用程序是一种可以通过Web访问的应用程序，程序的最大好处是用户很容易访问应用程序，用户只需要有浏览器即可，不需要再安装其他软件。

一个Web应用程序是由完成特定任务的各种Web组件(webcomponents)构成的并通过Web将服务展示给外界。在实际应用中，Web应用程序是由多个Servlet、JSP页面、HTML文件以及图像文件等组成。所有这些组件相互协调为用户提供一组完整的服务。

若按照传统的开发模式，前端开发人员需要投入大量的时间开发功能相似的页面，效率低下，非常容易产生bug，且对开发人员来说没有太多的技术提升。目前市面上会通过代码生成器自动生成代码，从而解决重复劳动问题。但市面上的代码生成器所生成的代码存在几个问题：

1、一般是一些代码片段(比如html代码片段)，较难做到不写任何代码，便可完成上述功能。

2、扩展性有限，因为实际项目中，每个页面都会有各自的业务需求，现有的代码生成器较难遵循开闭原则，即把共性的内容进行封装，各页面差异部分可以进行扩展。

发明内容

针对现有技术存在的不足，本发明的目的在于提供一种WEB程序代码自动生成算法系统，该程序代码自动生成算法系统能够前端开发人员只需在配置页面进行配置，便可生成维护页面的样式、HTML元素、表格表单处理逻辑、表单校验、流程控制，提高开发效率。

为实现上述目的，本发明提供了如下技术方案：一种WEB程序代码自动生成算法系统，包括有表单配置模块、类库模块、页面生成模块；

所述表单配置模块用于构建表格和表单，并且对表格和表单中的参数进行设置，自动生成HTML代码块、JS代码块以及API代码块；

所述类库模块用于供逻辑支持；

所述页面生成模块根据HTML代码块、JS代码块、API代码块以及逻辑服务生成操作页面。

综上所述，本发明具有以下有益效果：1)基于低代码开发理念，前端开发人员只需在配置页面进行配置，便可生成维护页面的样式、HTML元素、表格表单处理逻辑、表单校验、流程控制；

2)所生成的代码包含了界面样式布局、表格分页显示、按条件搜索、选择表格显示列并缓存用户最近一次显示列选择结果、表格列宽调整、表格排序、新增数据、修改数据、删除数据、表单字段校验、表单抽屉开关控制等；

3)丰富的表单字段类型设置，如单选、多选、下拉框、输入框、密码组件、30多种选择器等；

4)所生成的代码放入项目工程中可直接运行，在没有特殊需求的情况下，可以做到不写一行代码，便可运行，极大提高了开发效率；

5)遵循开闭原则，基于模板方法设计模式，将各页面共性部分封装起来，并为各页面提供各种钩子函数，开发人员不需要接触底层代码，便可完成各页面差异化需求。

附图说明

图1为WEB程序代码自动生成算法系统的原理示意图；

图2为WEB程序代码自动生成算法系统的流程示意图。

附图标记：1、表单配置模块；11、类库模块；12、页面生成模块。

具体实施方式

下面结合附图和实施例，对本发明进一步详细说明。其中相同的零部件用相同的附图标记表示。需要说明的是，下面描述中使用的词语“前”、“后”、“左”、“右”、“上”和“下”指的是附图中的方向，词语“底面”和“顶面”、“内”和“外”分别指的是朝向或远离特定部件几何中心的方向。

参照图1和图2所示，为实现上述目的，本发明提供了如下技术方案：一种WEB程序代码自动生成算法系统，包括有表单配置模块、类库模块、页面生成模块；

表单配置模块用于构建表格和表单，并且对表格和表单中的参数进行设置，自动生成HTML代码块、JS代码块以及API代码块；

类库模块用于供逻辑支持；

页面生成模块根据HTML代码块、JS代码块、API代码块以及逻辑服务生成操作页面。

本发明的设计，开发人员在代码自动生成页面进行配置，系统自动生成可以直接运行的前端代码。

如图2所示：

1、开发人员选择目标数据库的用户和库表，填写开发者信息；

2、系统根据库表的相关信息，如库表名、字段名、字段中文名、字段数据类型、字段长度、字段是否必填约束等信息，显示每个字段的表格、表单配置内容；

3、开发人员根据产品需求配置每一个字段的表格、表单的内容；

4、系统根据配置，自动生成基于Vue的Template层(HTML部分)、Script层(JS部分)和API接口层代码；

5、开发人员将生成的代码拷贝到项目工程中，并引入baseFormTableService服务，便可完成维护页面基础功能的开发工作；

6、开发人员根据产品需求重写钩子函数，完成页面定制需求。

表格参数配置：1、可设置每一列在表格中的宽度；2、可设置每个字段在表格中是否默认隐藏；3、可设置每个字段在表格中是否可搜索、可排序。

表单参数配置：1可设置每个字段在表单中的类型，类型包括：单选框、多选框、下拉框、输入框、文本框、密码组件、选择器、公共业务组件等多种显示类型；

2如果该库表中有拼音五笔字段，可以选择依据哪一个字段自动生成拼音五笔，可以根据拼音类型来判断多音字；

3设置元素可见、可改、只读、禁用状态；

4如果是下拉框、单选框类型，可以设置前端Map或者后端Map。前端Map意为映射值前端写死，比如状态：0-停用，1-在用；后端Map意为映射来自后端接口，比如所属院区下拉框中的院区列表，来自后端的接口；

5设置表单中参数长度，分为半宽和全宽。

HTML代码块包括有Template层，Template层包括有界面样式布局、表格分页显示、按指定条件搜索、选择表格显示列并缓存用户最近一次显示列选择结果、表格列宽调整、表格排序、新增数据、修改数据、删除数据、表单字段校验、表单抽屉开关控制。

JS代码块包括有Script层，继承BaseFormTableService，Script层用于封装维护页面的共性业务逻辑，并开放大量钩子函数。方便开发人员完成页面定制需求。

生成的API接口部分，继承BaseApi，统一实现了新增数据、修改数据、删除数据、分页查询、排序、搜索等基本功能。其中，修改数据基于版本号的乐观锁算法，即只会往后端发送被修改的字段，并且按照末次修改时间作为版本号；搜索支持页面自定义搜索规则。

类库模块采用vue的mixin技术，基于模板方法设计模式封装维护页面共性业务代码，提高代码服用能力，大幅度提升开发效率，向维护页面提供钩子函数。使生成的代码具备良好的扩展性。1.所生成的代码，基于vue和ViewUI框架。

2.采用模板方法设计模式，将共性代码提炼成基类，并采用vue的mixin技术，混入所生成的代码中。

3.所生成的代码可以直接运行，可以完成常规的新增、删除、修改、分页查询、检索等功能，若页面有个性化业务需求，可以重写钩子函数进行个性化业务扩展。

4.针对表单下拉框类型选项，提供前端映射和后端接口映射，满足不同业务需求。

5.支持业务选择器，提供了业务选择器的标准接口，选择器按照标准接口开发，就可以无缝集成到页面。

类库模块包括有BaseFormTableService类，并且包括有表格分页查询处理、表格排序处理、表格搜索处理、表格列宽调整处理、表格显示列设置处理、表格联动表单处理、页面整体宽高自适应处理、表单抽屉容器显隐处理、新增数据处理、修改数据处理。

钩子函数由BaseFormTableService提供。，用于维护页面实现定制化需求，所提供的钩子函数列表如下：一beforeList，初始化数据之前，1、自定义数据请求的条件，可根据业务做多种数据筛选展示的处理；

2、可控制展示数据先决条件，设置满足和不满足时的操作；

3、可在数据展示前插入其他事件和逻辑；

4、可在此设置表格列是否显。

二afterList，初始化数据之后，1、对获取到的数据进行处理，如：转换成树的数据、添加前端处理后的数据并做展示；

2、可自定义表格对应行；

3、可对表格数据进行筛选处理。

三beforeAdd，新增数据之前，1、可进行新增操作先决条件；

2、可以判断要新增的数据是否满足某种条件；

3、对需要新增的数据进行转化处理。

四afterAdd，新增数据之后，1、新增之后将获取到的值赋给表单的ID字段用于定位

2、自定义表单字段显隐；

3、对页面元素、模块进行处理。

五beforeUpdate，修改数据之前，1、可以对要提交更改的数据进行转换，如转换日期格式；

2、若传递后端数据非表单原始数据，可在此进行转换；

3、对页面元素、模块进行处理。

六afterUpdate，修改数据之后，1、自定义表单字段显隐；

2、加载树数据；

3、对页面元素、模块进行处理。

七beforeDelete，删除数据之前，1、可拦截删除操作；

2、可在删除前对用户及数据做记录；

3、对页面元素、模块进行处理。

八afterDelete，删除数据之后，1、成功删除数据后的提示；

2、删除数据后对数据的处理；

3、删除数据后对界面元素的处理。

九beforeInitFormData，初始化表单数据前，1、将前置选择器获取到的数据赋值给表单初始值；

2、将后端的返回值转换为需求规定的值的格式，比如百分比；

3、表单中某些字段后端不返回，需要去userinfo中获取，可使用该函数去获取。

十afterInitFormData，初始化表单数据后，1、设置表单初始值；

2、初始化表单后，根据不同操作模式，控制表单控件状态；

3、表单中可能有两个以上字段属于关联关系，可以在该钩子函数中判断。

十一beforeListAndPosition，定位前，1、增加是否可以进行定位的判断条件；

2、设置定位信息；

3、对页面元素、模块进行处理。

十二afterListAndPosition，定位后，1、对于定位之后，可以有提示；

2、可根据业务条件，自定义定位页数与行数；

3、对页面元素、模块进行处理。

十三afterInit，初始化后，1、对页面进行一些自定义的个性化设置；

2、设置页面各模块的初始状态；

3、根据用户习惯展示界面效果。

十四getBizWhereCondition，页面业务筛选数据，1、设置数据主键或者数据类型筛选，如：获取当前选择的医疗机构下的所有用户；

2、可并列条件进行数据筛选；

3、可根据条件是否存在进行输入筛选。

十五addPrimaryKeyAndGmtModify，修改前将主键插入，1、可自定义增加传入后端的主键、副主键在不通过表单做修改逻辑时，可以在此写入传入后端的数据。

十六getAddData，获取新增表单数据，1、增加自定义信息传给后台；

2、对表单数据进行处理；

3、操作过程中插入事件及效果。

页面生成模块生成有：表格页面、表格+表单页面、树+表格+表单页面。

代码自动生成算法目前支持3种常见维护页面：

1)表格页面

在代码生成页面进行自定义配置，可直接生成页面代码。生成代码含：template内容(HTML部分)、script逻辑内容(javaScript部分)、接口Api内容。

①成的表格集成多种快捷功能包括：刷新、过滤、排序、固定列、单击行编辑、单击单元格编辑、自定义单元格表单字段类型等功能。

②快速配置表格列数据。

③功能及效果丰富。表格支持列宽度调整、支持单元格元素自定义、支持单行删除、支持自定义搭配搜索项搜关键字段并高亮。

2)表格+表单页面

①操作简单、便捷

在代码生成页面进行自定义配置，可直接生成页面代码。生成代码含：template内容(HTML部分)、script逻辑内容(javaScript部分)、接口Api内容。

②配置人性化，生成代码兼容性高：

所有设置如若勾选则按照开发需求进行配置，如若不勾选则按照默认设置展示。

当生成页面不满足开发需求时，可根据需求写入对应逻辑，逻辑可以很好地与生成代码兼容。

③节省开发时间、提高开发效率

生成内容开发只需要复制粘贴即可进行基本增删改查操作，如不满足功能可自行编写代码逻辑和元素，大大减少了主要内容和逻辑编写时间。

④功能丰富且敏捷

表单设置了新增和修改两种模式，点击表格行自动进入修改模式，可在表单中对表格选中行进行数据修改；点击新增进入新增模式，表单置空且表格清空选中行状态；新增和修改状态可流畅切换。

表单根据开发需求设置了表单验证，根据不同地规则对异常状态进行提示，如："XXX字段不能为空"，"结束时间不能早于开始时间"，"手机号格式不正确"等。

表单设置了数据监听，当数据变动时自动打开蒙版，点击表单外区域自动提示"您的数据修改未保存，是否保存？",点击"保存"数据传入后台，点击"取消"表单恢复修改前状态。

⑤统一代码格式，便于阅读与维护。

3)树+表格+表单页面

①操作简单，容易上手，有效的提高开发效率。

开发自定义配置后可直接生成页面代码，点击枝干节点展示下级节点清单及对应数据，即可进行基础增删改查操作。

②高性能，方便管理。

③容性高。

可配置化的筛选条件，并且可以根据筛选条件的数据类型自动识别操作符。比如用户维护页面，可以配置按姓名、出生日期进行表格筛选。如果选择姓名作为筛选条件，因为姓名是字符串类型的，所以操作符就有等于、包含这两种；如果选择出生日期作为筛选条件，因为出生日期是日期型，所以操作符就有等于、大于、大于等于、小于、小于等于、介于。

可存储上一次选择显示列中勾选的字段，比如要维护一个年级的所有班级数据，这些班级的很多信息是一样的，比如入学年份、毕业年份等。这个时候就可以用该功能，把保存的上一次的入学年份和毕业年份自动带入。

树叶枝干节点可根据不同需求进入不同的加载模式。目前支持懒加载及一次性加载两种可配置模式。

综上所述本发明好处在于：1)基于低代码开发理念，前端开发人员只需在配置页面进行配置，便可生成维护页面的样式、HTML元素、表格表单处理逻辑、表单校验、流程控制；

2)所生成的代码包含了界面样式布局、表格分页显示、按条件搜索、选择表格显示列并缓存用户最近一次显示列选择结果、表格列宽调整、表格排序、新增数据、修改数据、删除数据、表单字段校验、表单抽屉开关控制等。

3)丰富的表单字段类型设置，如单选、多选、下拉框、输入框、密码组件、30多种选择器等；

4)所生成的代码放入项目工程中可直接运行，在没有特殊需求的情况下，可以做到不写一行代码，便可运行，极大提高了开发效率；

5)遵循开闭原则，基于模板方法设计模式，将各页面共性部分封装起来，并为各页面提供各种钩子函数，开发人员不需要接触底层代码，便可完成各页面差异化需求。

以上仅是本发明的优选实施方式，本发明的保护范围并不仅局限于上述实施例，凡属于本发明思路下的技术方案均属于本发明的保护范围。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理前提下的若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (7)

1.一种WEB程序代码自动生成算法系统，其特征是：包括有表单配置模块(1)、类库模块(11)、页面生成模块(12)；

所述表单配置模块(1)用于构建表格和表单，并且对表格和表单中的参数进行设置，自动生成HTML代码块、JS代码块以及API代码块；

所述类库模块(11)用于供逻辑支持；

所述页面生成模块(12)根据HTML代码块、JS代码块、API代码块以及逻辑服务生成操作页面。

2.根据权利要求1所述的一种WEB程序代码自动生成算法系统，其特征是：所述HTML代码块包括有Template层，所述Template层包括有界面样式布局、表格分页显示、按指定条件搜索、选择表格显示列并缓存用户最近一次显示列选择结果、表格列宽调整、表格排序、新增数据、修改数据、删除数据、表单字段校验、表单抽屉开关控制。

3.根据权利要求1所述的一种WEB程序代码自动生成算法系统，其特征是：所述JS代码块包括有Script层，所述Script层用于封装维护页面的共性业务逻辑，并开放大量钩子函数。

4.根据权利要求1所述的一种WEB程序代码自动生成算法系统，其特征是：所述类库模块(11)采用vue的mixin技术，基于模板方法设计模式封装维护页面共性业务代码，向维护页面提供钩子函数。

5.根据权利要求4所述的一种WEB程序代码自动生成算法系统，其特征是：所述类库模块(11)包括有BaseFormTableService类，并且包括有表格分页查询处理、表格排序处理、表格搜索处理、表格列宽调整处理、表格显示列设置处理、表格联动表单处理、页面整体宽高自适应处理、表单抽屉容器显隐处理、新增数据处理、修改数据处理。

6.根据权利要求5所述的一种WEB程序代码自动生成算法系统，其特征是：所述钩子函数由BaseFormTableService提供。

7.根据权利要求1所述的一种WEB程序代码自动生成算法系统，其特征是：所述页面生成模块(12)生成有：表格页面、表格+表单页面、树+表格+表单页面。

Images