前端二次开发方案

• 方案1：我之前利用html iframe页面嵌套实现的自定义前端页面（react写的），好处是不用动Thingsboard源码，直接用自己熟悉的语言写单独的前端项目
  基于iframe页面嵌套的Thingsboard二次开发方案
• 方案2：官方dashboard支持写Angular的插件（好处也是不用动源码，缺点就是和方案1一样，页面会被局限在dashboard里面了）
  https://thingsboard.io/docs/user-guide/contribution/widgets-development/
• 方案3：本次教程则是修改Thingsboard源码，新增一个菜单页面

Angular版本说明

Thingsboard V3.9的 Angular 版本由 15 升级到了最新的 18

教程

1. 新增一个hello页面模块

命令行cd到 ui-ngx\src\app\modules\home\pages 文件夹下
执行下面两个命令（如果提示ng命令识别不到，先安装下Angular命令行工具npm install -g @angular/cli）
ng g module hello --routing
ng g c hello
然后你就能看到ui-ngx\src\app\modules\home\pages下多了一个hello的页面模块

2. 在hello模块里面配置路由

3. 将hello加入系统菜单

3.1. home-pages.module.ts 里加入新页面

3.2. menu.models.ts 里加入新页面

增加新页面MenuId的配置

  [
    MenuId.hello,
    {
      id: MenuId.hello,
      name: 'hello',
      type: 'link',
      path: '/hello',
      icon: 'home'
    }
  ],

给TENANT_ADMIN角色加入新页面的权限（我是用默认demo的[email protected]账号登录的，给这个账号的角色(Authority.TENANT_ADMIN)加权限）

额外说明：上面这一步其实也可以用下面截图的方式替代（大家不用做这部分，用上面一步的方法就行，我这边列出来只是为了让大家理解更多）: 在menu.service.ts的buildMenu直接push新的页面，所以这边是增加页面目录的代码，如果你点进去buildUserMenu，就会发现会引用到上面的Authority.TENANT_ADMIN配置

如下，新的hello菜单页面就加好了，然后你可以在hello模块实现二次开发的web界面

教程2-对接后端

首先看后端权限是用的spring security，基于role的权限控制（RBAC Role Based Access Control）

所以我这边利用Thingsboard的Java Controller做权限控制，但具体业务代码为了快速开发，解耦，和方便维护，我选择和Thingsboard源码分离。所以在Controller里面，我会用http调用其他的服务（你可以用你自己擅长的框架写，我用我们现有的springbooot + Mybatis框架）