3

GfEasy:一款设计完数据库就开发完成的系统,摸鱼神器

 2 years ago
source link: https://studygolang.com/articles/35241?fr=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

低代码开发、急速CRUD

降低学习成本,只要会设计数据库就可玩转本系统

遇到功能修改,往往只需一两行代码即可实现

留出更多的时间去摸鱼神器

开源、基于MIT协议

喜欢的话,欢迎给个star

https://github.com/jasonLaw1015/GfEasy
或者
https://gitee.com/jasonlaw1015/GfEasy

e1f3a14008438133a1036bbcfd52d231.png

1632032506888-c67633bd-23b3-4937-be21-7a628981f492.png

一、开发环境准备


1.1、克隆仓库&配置开发环境

打开
https://github.com/jasonLaw1015/GfEasy
或者
https://gitee.com/jasonlaw1015/GfEasy

根据readme安装本地开发环境

6bb874002135336256f36549dc75a79a.png

ff1f653f6bd6cff3eda25d66ec9d20a5.png

二、开始开发


2.1、开始设计数据库

728629886f7cc47f549e9ae82e6e0ad3.png

1632032724244-c011e113-e1f0-4f3b-b00d-aea21d5f6dfc.png
2.2、打开后台系统,点击核心工具=》代码生成工具

71f88eb02b476e1df6bce63d004373f7.png

1632032797440-8486f2d5-e8d4-4380-9307-e62ff8fe6c37.png

2.3、点击1、配置所需要环境参数

60447c8c67367253181ceb4f2159720d.png

1632032832897-ab2831e4-60c8-4529-8083-f6e308f6c96e.png

2.4、配置以下参数

生成代码的目录,是绝对地址。MAC是斜杠的最后一位字符也是/。

windows系统的是反斜杠的\。仓库的readme也有写

6225b91fc14a3669ccac8693bce34c88.png

1632032861855-755509ca-4720-4e18-82ae-e80e6ec996ee.png

2.5、打开在GitHub上提供的代码生成核心部件

222bef60a4044d6d98644b629149a598.png

1632033082970-c5ebf39e-a73c-4844-aa81-4acaa75db9fe.png

1631449487353-85d87dc7-640b-47d8-b92c-40dfbbae0e76.png

21e7cb4e9da56db4d1df5ba8b23abfe7.png

mac的运行不了的话,就要加权限

chmod +x GenCode-GfEasy

f055ca9c5defac202901f5b1ad82e4b1.png

1632033302142-1b159fd5-e8cc-49be-976f-8e1a104caf2f.png

然后双击运行,出现下面截图即可成功

c469082ef23d8d14f0ef70e8b971331e.png

1631893619693-e5845681-2ddf-44ff-98aa-e4168a13564a.png

2.6、点击2、检测步骤1配置是否可用

81e03764e9792b39dd3b602fce10309b.png

1632033215054-ac6d13b3-38cc-4f91-86fd-5e3312d2d6d6.png

出现下图即成功

40dc985de3a165f1e2d545b9eca4f866.png

1632033338605-8bdba303-0ff0-4993-8858-3a43405b3019.png

2.7、点击开始生成代码

9128e175a7ebcf7db9f5395eaa33c10c.png

1632033468000-69b5ab9e-2e9c-432d-9581-bf3358dffb18.png

生成完毕后。

你会在之前配置1配置的目录下有一套这样的代码文件

前端:
src/cool/modules/genCode/views
src/cool/modules/genCode/service
src/cool/modules/genCode/dict

后端:
router
app/controller
app/model
app/service

自定义逻辑,你找到对应的文件加上逻辑即可。

这是生成的界面,有各种筛选功能、导出功能、CRUD功能

1b49bcd97575410d95e4c1e6c56b7a78.png

1632034085508-e6593e16-ee49-437b-92af-5958076a74eb.png

三、进阶使用

3.1、修改字段组件

根据生成的代码,个性化处理下系统CRUD

完成下图的要求

f82e67e2f95f8e3a942951c8e0725f38.png

1632058793442-c3d7cc5e-de1a-44c2-bc61-133bae7a4fb7.png

对应的前端代码是

src/cool/modules/genCode/views/demoGo.vue

7661732c06120b1ec05a3d7a1a3bc31f.png

1632068542279-f00884ce-a98e-4822-891b-51b5c41f4d9f.png

只要把上图的红色框框里代码,改成下图代码可实现自己的需求

首先副标题改成富文本形式,类型类型改成select形式

3e15647740b75536e9e454cd2c2342e1.png

1632068246019-a88382b9-8b89-4778-b62c-c43717f9f929.png

按照上面修改,就可达到下图效果。前端就那么简单,仅仅修改json数组就可完成

f9ad769b35d6b1e586f247401539806d.png

1632059628335-76865a28-60e9-4e66-b7d1-5ae6e78d1c54.png

3.2、新增字段方式

3.2.1、可以数据库增加字段,然后代码生成器重新生成

可以参考“二、开始开发”

3.2.2、可以数据库增加字段,再代码修改

代码修改也是改一两行的代码即可,简单快捷

数据库增加

testName 字段

382d5fddd79ae9b7815c341f3104b488.png

1632060408644-bcd7c45e-89b3-4c5a-ab7c-ebebbcd2f78c.png

然后在前端的src/cool/modules/genCode/views/demoGo.vue文件

修改upsert和table,其中upsert是增加修改时表单的选项,table是表格字段显示

upsert增加个testName

00032c73c46ea20ea4d42780ea0c7656.png

1632061098970-44439ff9-24fd-46aa-afdf-d8bdfef0e1ac.png

1632061075279-3258fd52-29e4-4e8b-8741-a124bcd60550.png

1a02d0995b3b152666db499767ed5532.png

表格数据,如下图

a209cd659a75921d8b72c60e1b593e95.png

2e1b4ebd7d06dfa248d4a56d7618915f.png

1632061120598-6508c304-f892-4ef4-8774-9208be8bdb0b.png

1632061046205-9a618b38-af3c-4673-b3e3-d7db8d5edefe.png

3.2.3、后端修改

仅仅需要修改下app/model/DemoGoModel/DemoGo.go的Entity、AddReqParams、UpdateReqParams即可

b994b2bf1d49e100a68b16b20758b9c4.png

327d64649183e2d78199d55b2dd492cc.png

后端修改完成

是不是很容易,实现功能增加,就改几行代码即可

注意:复杂的逻辑可能还要修改下service和controller

3.2.3、完成

这个已经减轻了大量的代码ctr+c|v。遇到复杂逻辑的实现,你就努力的敲代码吧


有疑问加站长微信联系(非本文作者)

280

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK