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

不難發(fā)現(xiàn)，我們需要在數(shù)據(jù)庫中設(shè)計兩張表，分別是干部表和干部家屬表，干部表和干部家屬是一對多的關(guān)系

Power Designer部分

1. 打開Power Designer，點擊新建模型

2. 在New Model中選擇

記得在DBMS選項（4）中更改自己匹配的數(shù)據(jù)庫類型

3. 通過右側(cè)的工具欄對當(dāng)前使用的工具進(jìn)行選擇，在本次項目中，我們只需要一個建表工具和一個主外鍵工具

左鍵選擇工具，右鍵取消工具

4. 雙擊新建的表，Name是外界所看到的表的名字，而code則是數(shù)據(jù)庫中的表名

5. 選擇columns欄，在下列的表格中配置數(shù)據(jù)庫，name是欄位的名稱，code是欄位在數(shù)據(jù)庫中的編號，Comment是數(shù)據(jù)庫在前端顯示的名稱，data Type是數(shù)據(jù)類型。 注意：數(shù)據(jù)庫中沒有String類型，所以所有的文本類型都需要替換成text或varchar類型

筆者在這個部分遇到了comment欄消失的情況，導(dǎo)致在后來的前端中出現(xiàn)的全部都是code欄的內(nèi)容。后來是用下圖方式解決的

關(guān)于varchar大小的問題，如果在前端輸入的是中文的花，varchar（?）至少是字?jǐn)?shù)的兩倍

6. 在完成干部表的編寫后，我們需要給表單來指定主鍵，同時，需要然干部表的ID按照順序遞增（因為可能不止一個干部需要進(jìn)行任免）

P，F，M分別是主鍵，外鍵，非空

勾選identity，使id按順序生成

7. 接下來創(chuàng)建家屬（family）表，和創(chuàng)建people表的流程基本相同，記得將ID的外鍵勾選上。
8. 然后使用表連接工具

指向誰，誰就是爹

9. 構(gòu)建完成，結(jié)果如下

10. 生成sql文件。在數(shù)據(jù)庫欄中選擇生成數(shù)據(jù)庫，指定好生成位置和名稱

11. 在服務(wù)中啟動數(shù)據(jù)庫，在navicat中找到j(luò)eecg的數(shù)據(jù)庫，在表中新建查詢（必須在jeecg-boot的數(shù)據(jù)庫的表中才行），將剛才生成的sql代碼復(fù)制到查詢中（注意檢查代碼，代碼不一定完全正確），運行，在數(shù)據(jù)庫中自動生成了people表和family表

筆者在生成數(shù)據(jù)庫時發(fā)現(xiàn)表單無法生成，后經(jīng)檢查發(fā)現(xiàn)，使Power Designer自動給我寫了一條下圖這玩意兒導(dǎo)致報錯，注釋掉就歐了。

至此，后端數(shù)據(jù)庫方面的工作基本完成。

jeecg boot部分

1. 啟動后端代碼

傻逼一般的筆者代碼之前忘記先啟動redis,導(dǎo)致后端代碼接口報錯，前端無法登錄，一定要切記redis登錄命令

在JeecgSystemApplication頁面中啟動后端代碼

2. 啟動前端代碼

打開webstorm，進(jìn)入ant-design-vue-jeecg項目，啟動代碼就完事了

成功啟動

3. 將數(shù)據(jù)庫新導(dǎo)入的people表導(dǎo)入 代碼生成器

• 在在線開發(fā)中選擇online表單開發(fā)
  
• 選擇導(dǎo)入數(shù)據(jù)庫表，選擇需要導(dǎo)入的表單，點擊生成表單
  
• 最后選擇代碼生成，指定好生成地址，代碼就生成完事了
  
• 筆者根據(jù)jeecg的代碼生成器文檔，將代碼生成在E:\ideaworkspace\jeecg-boot-master\jeecg-boot\jeecg-boot-module-demo中。
• 將包名定義為renmianbiao，為以后在包底下導(dǎo)入其他的表做準(zhǔn)備。
• 完成后的代碼位置
  

4. 在將代碼生成器產(chǎn)生的代碼導(dǎo)入jeecg框架所在的demo文件夾后，我們接下來的操作就是得讓后端代碼的內(nèi)容在前端的jeecg的表單框架中顯示出來，如圖所示

首先在菜單管理里面新增一個一級菜單

6. 再在任免表下面填好菜單路徑和前端組件注意：菜單路徑是相對路徑，且開頭有‘/’，而前端組件都是相同的，填layouts/RouteView，為了和諧，記得選擇一個圖標(biāo)

7. 完成之后再在干部任免表底下添加下級菜單（子菜單），在子菜單中配置路徑和前端組件。

8. 這個時候我們發(fā)現(xiàn)還是不能在左邊的菜單列表中找到這個干部任免菜單，是因為我們還沒有配置權(quán)限。我們需要在角色管理中點擊當(dāng)前使用的用戶名（admin），在更多選項中選擇授權(quán)，勾選上干部任免表及其子表，保存關(guān)閉

最后刷新一下，即可在左邊的表單中找到干部任免表菜單

汪汪隊犯大錯

在生成左側(cè)菜單后筆者發(fā)現(xiàn)，點擊干部表表單沒反應(yīng)

經(jīng)過查閱資料發(fā)現(xiàn)，原來是因為筆者只將生成代碼導(dǎo)入了后端的maven模塊，而沒有將前端的vue代碼導(dǎo)入前端的view包中。

• 我們首先將代碼生成器生成的vue包底下的modules和兩個LIst.vue（也就是我們的前端代碼）復(fù)制
  
• 我們再在前端代碼的view包中建立一個自建包（renmianbiao），將復(fù)制的內(nèi)容黏貼至其中。
  
• 再回頭修改我們在表單上填寫的菜單和組件路徑
  
• 最后在刷新一下頁面，即可完成。
  

小改進(jìn)

我們發(fā)現(xiàn)，生成的表單全部都是我在數(shù)據(jù)庫中設(shè)置的表單名稱，但是我們想在表單中顯示中文，怎么辦呢？
這個問題產(chǎn)生的原因是因為筆者之前在使用Power Designer配置數(shù)據(jù)庫的時候忘記加上注解（comment）了

首先，我們需要轉(zhuǎn)到PD，在PD中將所有欠缺的comment補上

其次，我們需要通過PD再生成一次sql文件，將sql文件中的代碼復(fù)制到navicat中執(zhí)行，重新生成一次數(shù)據(jù)庫

然后，我們需要在jeecg的online在線開發(fā)中重新將兩個配置正確的family和people表再導(dǎo)入一次，再使用代碼生成器生成正確的后端代碼，并將之前錯誤的代碼替換掉

再次，我們需要重新將前端頁面代碼導(dǎo)入WebStorm（記得先終止前端程序）

汪汪隊二進(jìn)宮

這個時候，由于筆者手一滑，不知道將前端項目中的哪個文件又不小心刪除掉了，然后運行前端代碼時，發(fā)現(xiàn)前端代碼報錯…筆者想出的解決方案時將前端框架的壓縮包重新解壓，再導(dǎo)入webstorm，但是運行時發(fā)現(xiàn)報錯這是筆者的解決流程。

1. 在用cmd在項目目錄中安裝yarn

2. 在前端框架里面找到package.json文件，單擊右鍵選擇顯示npm腳本
3. 單擊serve，項目開始運行

讓我們看看情況如何

成功！

4. 這時，我們再終止項目，將生成的前端文件再次導(dǎo)入。

完成！！！

總結(jié)

以上是生活随笔為你收集整理的【jeecg boot】【PowerDesigner】使用PD创建数据库，并使用jeecg生成代码来创建一个干部任命表单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。