使用低代码工具，解决pc端表格-表单类CURD业务，生成前后

发表于

开篇介绍

pc端web开发中，“表格-表单类”通常是需求最多的，为了避免重复开发，特此推出这系列文章，来分享我关于快速开发“表格-表单类”项目的经验。希望大家能一起讨论，分享你遇到的各种奇葩需求，让我们一起干掉“表格-表单”！

复杂表格表单弹窗从此so easy系列–利用代码生成器生成简洁可读的代码(第1章)

注：为了方便演示，本章主要使用代码生成器直接生成前后端双端代码，需要自己搭建后端，会需要spring boot等简单的后端知识。如果是前端儿推荐直接使用NPM包filter-form-table-modal(点我查看)，后续几篇文章将会详细介绍这个NPM包的具体使用细节。

介绍代码生成器

准备阶段

下载源码

1
cmd复制代码git clone https://github.com/ailuhaosi/code-gen

代码生成器的源码分成两部分：

  • code-gen-fontend：代码生成器的前端界面;技术栈：vue-element
  • code-gen-backend：代码生成器的后端服务;技术栈：spring boot

修改code-gen-backend的配置文件

修改application.yml

修改MySQL的用户名、密码、连接的数据库名(默认code-gen)

修改generator.properties

这里主要说一下tablePrefix，业务主表的前缀，视你个人情况而修改，默认tb_开头。

创建业务主表

在你需要连接的数据库中创建业务主表

注意点：每张表必须有某一列是主键；表注释会自动成为生成代码的Label。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
sql复制代码CREATE TABLE tb_region( 
        regionId INT NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '小区id',
        regionTitle VARCHAR(40) NOT NULL COMMENT '小区title',
        regionContact VARCHAR(10) DEFAULT '' COMMENT '联系人',
        regionMobile CHAR(11) COMMENT '联系电话',
  	    regionLogo VARCHAR(300) COMMENT '区域图标',
	    regionRemark VARCHAR(100) DEFAULT '' COMMENT '备注',
    	regionProvince CHAR(10) DEFAULT '',
	    regionCity CHAR(10) DEFAULT '',
	    regionDistict CHAR(10) DEFAULT '',
	    regionAddress CHAR(50) DEFAULT '',
	    regionLongitude TINYINT UNSIGNED,
	    regionLatitude TINYINT UNSIGNED,
	    regionCreator CHAR(50),
	    regionCreatetime TIMESTAMP default CURRENT_TIMESTAMP,
	    regionUpdatetime TIMESTAMP default CURRENT_TIMESTAMP,
	    regionStatus TINYINT UNSIGNED default 0,
	    regionMiniprogram VARCHAR(100),
	    creatorName VARCHAR(50)
)ENGINE=InnoDB DEFAULT CHARSET=utf8;

启动项目

  1. 运行code-gen-backend
  2. 打开 http://localhost/web/index.html

代码生成器具体使用步骤

图示步骤

选择数据表

选择字段、下载源码

具体组件配置

视频演示

代码生成器使用视频-文章1(点我查看)

注意：视频14分钟~15分钟前后，后端代码合并的时候有错误，因为我之前建表的表字段没规范，具体细节规范要求请看勘误视频，小伙伴在自己操作过程中只要合理建表就不会有问题了。

视频勘误(点我查看)

将生成的代码合并到已有项目中

目前为了保证灵活性，方便整合到不同前后端架构的原有项目中，必须手动合并；后续会加入新功能：提供架构模板，代码生成器会扫描原工程目录，如果原工程和提供架构模板目录结构相同，代码可以自动合并。

前端代码合并

原工程代码：https://github.com/ailuhaosi/my-blog-demo/tree/master/code-gen-demo-org/code-gen-fontend-demo-org

合并后代码：https://github.com/ailuhaosi/my-blog-demo/tree/master/code-gen-demo-1/code-gen-fontend-demo-1

后端代码合并

原工程代码：https://github.com/ailuhaosi/my-blog-demo/tree/master/code-gen-demo-org/code-gen-backend-demo-org

合并后代码：https://github.com/ailuhaosi/my-blog-demo/tree/master/code-gen-demo-1/code-gen-backend-demo-1

总结

低代码最近几年被不断炒火，但往往被沦落到，“专业程序员看不上，非专业人员不会用”的尴尬境地。但随着前后端生态日益成熟，我们使用的框架(vue、Spring boot等)其实也是一种复杂的低代码而已，“这类低代码”也是屏蔽了底层细节，大部分时间我们要做的只是业务上的CURD即可。因此，我们程序员没必要抵制低代码，反而“那些好的低代码”可以让我们更快的交付任务。

低代码的发展方向，什么才是好的低代码？我个人经验概括以下几点：

  1. 源码开放 且 技术栈主流：意味着具备可扩展性，生成的低代码能被专业的程序员定制修改，能够方便的集成到原本的项目中，这样专业人士就不会排斥。赢生态者赢天下。
  2. 业务场景明确：每一类低代码产品应该针对特定业务场景。业务流程比较清晰，比如：“搜索表单-表格-弹窗表单”。而且通常低代码类产品，不追求个性化的“好看(复杂联动-动效)”，因为“好看(复杂联动-动效)”会需要大量定制，此类场景低代码的复用性优势就体现不出了。但“静态的好看”，可以通过定制皮肤来实现。
  3. 面向前后端的低代码：目前主推前后端分离，因此生成的源代码应该是包括前后端的，否则单纯一端，则工作量依然没减轻。

好啦！今天就分享到这里吧，看到这里的小伙伴，如果觉得文章对你有帮助，也别忘了点赞留言呦！

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%