一、設計表
建一個設備類型表，表名和字段如下：
字段列表：
二、在數據庫創建表
爲了簡單上面的字段就都不使用字典或關聯表了，都使用文本來存儲，使用navcat在mysql庫裏建完後效果如下：
三、生成代碼
1、入口
點擊左側的代碼生成菜單，如下圖：
2、添加按鈕
點擊“添加”按鈕，如下圖所示：
3、錄入信息
填寫信息如下：
備註：下圖中的“模塊編碼”填寫錯了，應該填寫爲：FarmInternetDeviceTypeMstApp
其中：vue目錄爲pro項目前臺的文件夾路徑，我的本地目錄結構如下：
填完之後，點擊“確定”按鈕進行保存，如下圖：
確定後，上方列表即可出現剛纔錄入的表信息，如下圖：
4、調整字段
有一些字段不需要在前臺顯示，如：ID、創建人ID、最後更新時間等
選中需要調整的表後，點擊編輯按鈕，如下圖：
然後下面的界面即更改爲可編輯狀態，如下圖：
調整完後效果如下：
調整的時候有2點需要注意：
（1）、如果上面是文本框，修改完後，需要按一下回車，然後右上角提示保存成功，纔算完成。
（2）、最後面的那一列“排序”，規則是，數值越大，然後這一列也靠前顯示。
5、執行生成
選中表記錄，然後分別點擊右上角的生成按鈕
6、代碼調整
由於上面的“模塊編碼”填錯了，所以下面的代碼要簡單修改一下。
由於填寫“模塊編碼”錯誤，所以生成的代碼裏App命名空間下的類名與實體名稱重複了，需要手工修改下，如下圖：
修改完後如下：
同樣道理，還有下面的等都做下調整，直到項目能運行起來爲止。
還有Controller裏的名稱
調整完後，運行效果如下：
6、添加菜單模塊
打開“模塊管理”菜單，如下圖：
點擊右上角的“添加”按鈕
然後錄入信息後點擊確認按鈕：
備註：模塊標識填寫生成代碼時的“模塊編碼”、url前要加斜扛
重新執行 npm run dev後，打開界面如下：
備註：自動生成的界面可以實現新增和刪除功能，編輯功能需要在api後臺自己補齊字段，下一篇文章再介紹
預告，下一篇：編輯功能添加