>[info] 目前Vue3已经支持两种模式:Online在线模式 和 GUI模式代码生成。 > JeecgBoot版本要求: 3.2.0+ ( 提供了vue3、vue3Native模板目录 ) [TOC] # Online在线代码生成 ## 第一步:通过online表单在线建表 > jeecg提供了在线建表的功能,找到菜单: `在线开发 -> Online表单开发`配置完表单,点击同步数据库,会在数据库生成该表。 ![](https://img.kancloud.cn/39/9a/399a3ff2216b7a33fbb1a11699d0d5c4_1911x980.png) ## 第二步:Online表单字段控件配置 > online表单字段的控件类型,支持 下拉、radio、checkbox、选择人、选择部门、popup、下拉搜索、省市县、下拉多选等,已经满足在线低代码开发需求 , [Online表单专题视频](https://www.bilibili.com/video/BV1zJ411t7FG) ![](https://img.kancloud.cn/2b/4b/2b4bc1774768e44714923a6f0fc05a07_1911x980.png) ### 2.1Online表单一对多,外键配置注意 ~~~ // 子表外键参数配置 /* 说明: * a) 子表引用主表主键ID作为外键,外键字段必须以_ID结尾,例如 ORDER_ID * b) 主表和子表的外键字段名字,必须相同(除主键ID外); */ ~~~ ## 第三步. 生成代码界面 > 点击online表单上方的代码生成按钮,选中需要生成的表单,就可以调出代码生成的界面 ### 3.1 单表界面 ![](https://img.kancloud.cn/f3/de/f3de2c89c3f45061629a4c658b634eff_1009x647.png) ### 3.2 一对多界面 ![](https://img.kancloud.cn/7b/f7/7bf7997b00bd97ec5c1c62e9e5094c26_1516x716.png) 一对多的online表代码生成界面,标注的都是可以修改的,正常情况只需要修改包名,其它可以根据自己情况修改 ### 3.3 生成代码动图演示 ![](https://img.kancloud.cn/3a/2f/3a2fc14f30ca5f683c79c33c08bf007a_1911x980.png) ## 第四步. 生成代码结构 >[info] 如果选择生成代码目录,直可以接选择到生成到那个模块,这样java代码不需要再手工调整,只需要将前端代码复制到前端vue项目中。 前端如下: ### 4.1 vue3模板目录 > 需要哪个vue版本的页面,复制哪个目录下的代码到前端项目即可 ![](https://img.kancloud.cn/50/13/50136f51459957fbafa3e0db01c48d73_416x348.png) ### 4.2 vue3Native模板目录 > vue3目录表单采用的是vben json结构写法,这种写法简单表单比较方便也好维护,但是复杂表单就麻烦了。所以提供了原生写法表单模板,vue3Native目录下的表单,采用原生antd写法,非vben封装表单。 > 请用户安装自己的需求灵活选择。 ![](https://img.kancloud.cn/65/12/65124b8b1967cdf9b509c85d74d97b83_462x337.png) ### 4.3 前端代码存放位置 >[danger]需要放在view文件夹下面 ![](https://img.kancloud.cn/4f/3a/4f3a1792ac1ae1cbc4e9408a6c4a6c03_590x1221.png) ## 第五步:配置菜单SQL vue3目录下会生成插入菜单的sql,直接执行即可。 >[info] 页面对应的前台目录为`views/代码生成时写的包名` 文件夹下,如果你想更改到其他目录,需要修改sql中component字段对应的值 ### 5.1 动态效果图演示 ![](https://img.kancloud.cn/db/d8/dbd8037adcc685c8a1ab0d2d8ca7a371_1911x980.png) ## 第六步:角色授权 生成代码后通过角色授权菜单,授权成功后刷新页面即可看见新增的菜单 ![](https://img.kancloud.cn/a1/6e/a16ea3dfbbf560b83c989e6c2c894f7f_1881x877.png) # GUI代码生成器 ## 第一步:代码生成器的配置 ### 1. 配置数据库 配置文件:`jeecg-boot-module-system\src\main\resources\jeecg\jeecg_database.properties` ![](https://img.kancloud.cn/6c/14/6c1441d875422f9bec1151abac1edce3_1222x360.png) ### 2. 配置生成代码路径 配置文件:`jeecg-boot-module-system\src\main\resources\jeecg\jeecg_config.properties` ![](https://img.kancloud.cn/a1/f1/a1f154fa45cbe1a2c82f3d593aad0c52_969x349.png) ## 第二步:GUI代码生成使用 ### 1. 单表代码生成 找到类 `jeecg-boot-module-system\src\main\java\org\jeecg\JeecgOneGUI.java` 右键执行弹出GUI代码生成界面,按照提示输入参数。 >[warning] 注意:代码生成会同时生成vue2和vue3的页面,手工选择所需版本的代码 ![输入图片说明](https://static.oschina.net/uploads/img/201904/14222638_Svth.png "在这里输入图片标题") ### 2. 一对多代码生成 找到类 `jeecg-boot\jeecg-boot-module-system\src\main\java\org\jeecg\JeecgOneToMainUtil.java` 修改代码参数配置,右键执行生成代码 ### 3. vue3模板目录 > 需要哪个vue版本的页面,复制哪个目录下的代码到前端项目即可 ![](https://img.kancloud.cn/50/13/50136f51459957fbafa3e0db01c48d73_416x348.png)