物聯網架構成長之路(39)-Bladex開發框架環境搭建

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功能已經完成，仍是比較簡單的，須要寫代碼的地方很少，簡單配置一下，就是一個頁面。

 

本文地址：http://www.javashuo.com/article/p-bjvgwhqe-gb.html
我的主頁：https://www.wunaozai.com/