物联网架构成长之路(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功能已经完成，还是比较简单的，需要写代码的地方不多，简单配置一下，就是一个页面。

 

本文地址：https://www.cnblogs.com/wunaozai/p/11739874.html
个人主页：https://www.wunaozai.com/