【jeecg boot】【PowerDesigner】使用PD创建数据库，并使用jeecg生成代码来创建一个干部任命表单

首先看一下需要完成的功能

不难发现，我们需要在数据库中设计两张表，分别是干部表和干部家属表，干部表和干部家属是一对多的关系

Power Designer部分

1. 打开Power Designer，点击新建模型

2. 在New Model中选择

记得在DBMS选项（4）中更改自己匹配的数据库类型

3. 通过右侧的工具栏对当前使用的工具进行选择，在本次项目中，我们只需要一个建表工具和一个主外键工具

左键选择工具，右键取消工具

4. 双击新建的表，Name是外界所看到的表的名字，而code则是数据库中的表名

5. 选择columns栏，在下列的表格中配置数据库，name是栏位的名称，code是栏位在数据库中的编号，Comment是数据库在前端显示的名称，data Type是数据类型。 注意：数据库中没有String类型，所以所有的文本类型都需要替换成text或varchar类型

笔者在这个部分遇到了comment栏消失的情况，导致在后来的前端中出现的全部都是code栏的内容。后来是用下图方式解决的

关于varchar大小的问题，如果在前端输入的是中文的花，varchar（?）至少是字数的两倍

6. 在完成干部表的编写后，我们需要给表单来指定主键，同时，需要然干部表的ID按照顺序递增（因为可能不止一个干部需要进行任免）

P，F，M分别是主键，外键，非空

勾选identity，使id按顺序生成

7. 接下来创建家属（family）表，和创建people表的流程基本相同，记得将ID的外键勾选上。
8. 然后使用表连接工具

指向谁，谁就是爹

9. 构建完成，结果如下

10. 生成sql文件。在数据库栏中选择生成数据库，指定好生成位置和名称

11. 在服务中启动数据库，在navicat中找到jeecg的数据库，在表中新建查询（必须在jeecg-boot的数据库的表中才行），将刚才生成的sql代码复制到查询中（注意检查代码，代码不一定完全正确），运行，在数据库中自动生成了people表和family表

笔者在生成数据库时发现表单无法生成，后经检查发现，使Power Designer自动给我写了一条下图这玩意儿导致报错，注释掉就欧了。

至此，后端数据库方面的工作基本完成。

jeecg boot部分

1. 启动后端代码

1. 傻逼一般的笔者代码之前忘记先启动redis,导致后端代码接口报错，前端无法登录，一定要切记redis登录命令
   

2. 在JeecgSystemApplication页面中启动后端代码
   
   2. 启动前端代码

打开webstorm，进入ant-design-vue-jeecg项目，启动代码就完事了

成功启动

3. 将数据库新导入的people表导入 代码生成器

• 在在线开发中选择online表单开发
  
• 选择导入数据库表，选择需要导入的表单，点击生成表单
  
• 最后选择代码生成，指定好生成地址，代码就生成完事了
  
• 笔者根据jeecg的代码生成器文档，将代码生成在E:\ideaworkspace\jeecg-boot-master\jeecg-boot\jeecg-boot-module-demo中。
• 
• 将包名定义为renmianbiao，为以后在包底下导入其他的表做准备。
• 
• 完成后的代码位置
  

4. 在将代码生成器产生的代码导入jeecg框架所在的demo文件夹后，我们接下来的操作就是得让后端代码的内容在前端的jeecg的表单框架中显示出来，如图所示

5. 首先在菜单管理里面新增一个一级菜单
   
   6. 再在任免表下面填好菜单路径和前端组件注意：菜单路径是相对路径，且开头有‘/’，而前端组件都是相同的，填layouts/RouteView，为了和谐，记得选择一个图标
   
   7. 完成之后再在干部任免表底下添加下级菜单（子菜单），在子菜单中配置路径和前端组件。
   
   8. 这个时候我们发现还是不能在左边的菜单列表中找到这个干部任免菜单，是因为我们还没有配置权限。我们需要在角色管理中点击当前使用的用户名（admin），在更多选项中选择授权，勾选上干部任免表及其子表，保存关闭
   
   最后刷新一下，即可在左边的表单中找到干部任免表菜单

汪汪队犯大错

在生成左侧菜单后笔者发现，点击干部表表单没反应

经过查阅资料发现，原来是因为笔者只将生成代码导入了后端的maven模块，而没有将前端的vue代码导入前端的view包中。

• 我们首先将代码生成器生成的vue包底下的modules和两个LIst.vue（也就是我们的前端代码）复制
  
• 我们再在前端代码的view包中建立一个自建包（renmianbiao），将复制的内容黏贴至其中。
  
• 再回头修改我们在表单上填写的菜单和组件路径
  
• 最后在刷新一下页面，即可完成。
  

小改进

我们发现，生成的表单全部都是我在数据库中设置的表单名称，但是我们想在表单中显示中文，怎么办呢？
这个问题产生的原因是因为笔者之前在使用Power Designer配置数据库的时候忘记加上注解（comment）了

1. 首先，我们需要转到PD，在PD中将所有欠缺的comment补上
2. 其次，我们需要通过PD再生成一次sql文件，将sql文件中的代码复制到navicat中执行，重新生成一次数据库
3. 然后，我们需要在jeecg的online在线开发中重新将两个配置正确的family和people表再导入一次，再使用代码生成器生成正确的后端代码，并将之前错误的代码替换掉
4. 再次，我们需要重新将前端页面代码导入WebStorm（记得先终止前端程序）

汪汪队二进宫

这个时候，由于笔者手一滑，不知道将前端项目中的哪个文件又不小心删除掉了，然后运行前端代码时，发现前端代码报错…笔者想出的解决方案时将前端框架的压缩包重新解压，再导入webstorm，但是运行时发现报错这是笔者的解决流程。

1. 在用cmd在项目目录中安装yarn

2. 在前端框架里面找到package.json文件，单击右键选择显示npm脚本
3. 单击serve，项目开始运行

让我们看看情况如何

成功！

4. 这时，我们再终止项目，将生成的前端文件再次导入。

完成！！！