0.前言
上一篇博客已經介紹了，階段性小結。目前第一版的物聯網平台已經趨於完成。框架基本不變了，剩下就是調整一些UI，還有配合硬件和市場那邊，看看怎么推廣這個平台。能不能掙點外快。第一版系統雖然簡陋，但是對於整個物聯網業務的了解還是有很大的幫助的。就像一個道理，吃10個包子，吃到最后一個飽了，但不能說前面9個沒有用。不過硬件、市場、項目等等，這些是我不能控制的。但是平台的迭代和第二版規划不能停。第二版物聯網平台，將采用現有的企業開發框架，並且是前后端分離，開始用上前端的Vue框架。
前段時間，經人推薦一個企業級開發平台前后端腳手架。Bladex。官網【https://bladex.vip/#/】經測試，真的不錯，該有的功能都有。比我自己寫的好太多了。下面博客僅記錄整個環境搭建和簡單配置開發的流程。
1.授權
這里還是推薦購買授權，也就3999，永久使用。對於一個公司來說，這個費用真的特別划算。下面介紹將以商業授權版本的Bladex-Boot作為介紹入門。獲得授權后，對方會給一個私有git倉庫的帳號密碼，登陸后，下載源代碼，前后端代碼下載后，導入到IDE。
2.配置后端
這里我是用2.1.0版本，IDE，我用的是Eclipse，需要安裝lombok插件。至於數據庫Postgresql、Redis，還有前端的NodeJS、VSCode這些自行安裝。
首先創建數據庫，導入SQL腳本。這里我以postgresql為例。
配置application-dev.yaml
配置application.yml，注意修改端口，我這邊改成8080
以上配置后，就啟動項目，啟動后，由於前后端分離，我們還沒有配置Saber，可以先訪問http://127.0.0.1:8080/doc.html，確認BladeX是否正常啟動。
3.配置前端
我這里前后端是部署在不同的機器上。首先，下載代碼，導入到VSCode上。
修改vue.config.js的幾個配置，target改為BladeX的訪問地址和端口。devServer.port是BladeX的訪問地址。
配置后，運行命令啟動服務
1 yarn install 2 yarn run serve
訪問：http://172.16.23.241:8080/
點擊登錄后，到此，我們已經完成BladeX的環境安裝和搭建了。
4.寫個簡單的Demo
創建數據庫表
1 --測試表 2 create table tb_wunaozai( 3 id bigserial primary key, --主鍵id，一般表格必須帶上 4 title varchar(255), --自定義，標題 5 content varchar(255), --自定義，內容 6 time timestamp, --自定義，時間 7 info varchar(256), --自定義，備注 8 tenant_id varchar(12), --如果啟用多租戶，需要帶上 9 create_user bigint, --必選，創建用戶ID 10 create_dept bigint, --必選，創建部門ID 11 create_time timestamp, --必選，創建時間 12 update_user bigint, --必選，更新 用戶ID 13 update_time timestamp, --必選，更新時間 14 status int, --必選，狀態 15 is_deleted int --必選，軟刪除 16 );
系統后台，配置數據源，然后自動生成代碼
數據源：在數據源管理中的配置，用於選擇從對應的庫獲取數據
模塊名：用於指定配置的名稱，對代碼生成不產生實際效果
服務名：生成后，controller對應的前綴，以及分割 - 符號后面的字符串作為前端的分包名
表名：用於代碼生成所對應的表名稱
表前綴：生成實體類的時候，忽略掉的前綴，若不配置，則 tb_wunaozai 表生成的實體為 TbWunaozai ，若配置了 tb_ 為前綴，則生成的實體為Wunaozai
主鍵名：表的主鍵名稱
包名：生成后端代碼所在的包
基礎業務：如果選擇是，則實體會繼承 BaseEntity ，帶有上一章紅框的基礎業務字段
包裝器：在某些復雜的模塊，會用到 VO 和 Wrapper ，如果選擇是則會自行生成
后端生成路徑：后端工程的根目錄
前端生成路徑：前端工程的根目錄
那個生成路徑，可以直接寫項目根目錄，但是我覺得有點風險，還是保存到其他目錄，然后根據實際拷貝過去。
將對應的生成的前端代碼放到Saber目錄下。
5. 配置菜單、權限
在生成的后端代碼里面有生成菜單的SQL，直接執行數據庫SQL即可。
1 INSERT INTO blade_menu(id, parent_id, code, name, alias, path, source, sort, category, action, is_open, remark, is_deleted) 2 VALUES (‘1187567985634902017‘, 0, ‘wunaozai‘, ‘‘, ‘menu‘, ‘/wunaozai/wunaozai‘, NULL, 1, 1, 0, 1, NULL, 0); 3 INSERT INTO blade_menu(id, parent_id, code, name, alias, path, source, sort, category, action, is_open, remark, is_deleted) 4 VALUES (‘1187567985634902018‘, ‘1187567985634902017‘, ‘wunaozai_add‘, ‘新增‘, ‘add‘, ‘/wunaozai/wunaozai/add‘, ‘plus‘, 1, 2, 1, 1, NULL, 0); 5 INSERT INTO blade_menu(id, parent_id, code, name, alias, path, source, sort, category, action, is_open, remark, is_deleted) 6 VALUES (‘1187567985634902019‘, ‘1187567985634902017‘, ‘wunaozai_edit‘, ‘修改‘, ‘edit‘, ‘/wunaozai/wunaozai/edit‘, ‘form‘, 2, 2, 2, 1, NULL, 0); 7 INSERT INTO blade_menu(id, parent_id, code, name, alias, path, source, sort, category, action, is_open, remark, is_deleted) 8 VALUES (‘1187567985634902020‘, ‘1187567985634902017‘, ‘wunaozai_delete‘, ‘刪除‘, ‘delete‘, ‘/api/blade-wunaozai/wunaozai/remove‘, ‘delete‘, 3, 2, 3, 1, NULL, 0); 9 INSERT INTO blade_menu(id, parent_id, code, name, alias, path, source, sort, category, action, is_open, remark, is_deleted) 10 VALUES (‘1187567985634902021‘, ‘1187567985634902017‘, ‘wunaozai_view‘, ‘查看‘, ‘view‘, ‘/wunaozai/wunaozai/view‘, ‘file-text‘, 4, 2, 2, 1, NULL, 0);
執行后，刷新前端頁面，然后需要簡單編輯調整一下。這里我放到工作台的下級菜單
重啟BladeX和Saber，然后打開新增加的功能頁。
6.修改、調整前端代碼
修改wunaozai.vue主鍵里面的data數據的option屬性。
1 option: {
2 height:‘auto‘,
3 calcHeight: 350,
4 tip: false,
5 border: true,
6 index: true,
7 viewBtn: true,
8 selection: true,
9 column: [
10 {
11 label: "標題",
12 prop: "title",
13 span: 12,
14 search: true,
15 rules: [{
16 required: true,
17 message: "請輸入",
18 trigger: "blur"
19 }]
20 },
21 {
22 label: "時間",
23 prop: "time",
24 span: 12,
25 type: ‘date‘,
26 format: ‘yyyy-MM-dd‘,
27 valueFormat: ‘yyyy-MM-dd 00:00:00‘,
28 rules: [{
29 required: true,
30 message: "請輸入",
31 trigger: "blur"
32 }]
33 },
34 {
35 label: "內容",
36 prop: "content",
37 span: 24,
38 type: "textarea",
39 minRows: 6,
40 rules: [{
41 required: true,
42 message: "請輸入",
43 trigger: "blur"
44 }]
45 },
46 {
47 label: "備注",
48 prop: "info",
49 span: 24,
50 rules: [{
51 message: "請輸入",
52 trigger: "blur"
53 }]
54 },
55 ]
56 }
調整后，顯示的效果。
更多配置，請參考這個文檔 https://avuejs.com/doc/crud/crud-doc
那個刷新按鈕沒有響應事件需要增加
@refresh-change="refreshChange"
1 refreshChange(page){
2 this.onLoad(this.page);
3 }
至於模糊查詢，就需要寫代碼了。本次不詳細說明。
到此，簡單的搭建環境和CURD功能已經完成，還是比較簡單的，需要寫代碼的地方不多，簡單配置一下，就是一個頁面。