前言

各位读者好，截止目前，ThingsBoard系列文章已经做了七篇，分别是

ThingsBoard教程（一）：ThingBoard介绍及安装ThingsBoard教程（二）：租户，租户配置，部件组模块的使用ThingsBoard教程（三）：系统设置模块的使用ThingsBoard教程（四）：规则链简介与操作ThingsBoard教程（五）：客户，资产管理ThingsBoard教程（六）：设备管理ThingsBoard教程（七）：模拟设备遥测ThingsBoard教程（八）：自定义UIThingsBoard教程（九）：前端架构分析

本期文章我给大家带来的是如何对物联网平台ThingsBoard如何做一些的简单的定制化，也就是大部分同学是所有的tb的二开，二次开发。

目前我所在的一个tb群里有很多小白，每天都问一些二开的问题，如何修改网站图标，如何修改一些菜单显示，如何移除一下规则链中的节点。还有就是如何修改登录页。我觉得这个二开tb很有搞头，所以今天就来更新这篇文章。

先带大家来看一下本篇文章的目录

搭建开发环境修改登录页修改菜单显示移除一些节点删除一些表单项修改网站图标搭建开发环境

搭建一个前端的tb开发环境很简答，我在上上一篇的自定义UI里已经介绍过了。因为我们只是开发前端，所有将后端配置为生产环境，使用docker一键启动。

docker run -p 8080:9090 -p 1883:1883 thingsboard/tb

然后配置前端接口代理到后端的服务即可。需要注意的是， 每一个tb版本都有自己的开发要求， 比如tb:v2.4.3,它要求的就是node的版本要大于8，小于11，如果你的nodejs版本是目前最新的15.x，那就会报错。 tb的每一个版本都不一样，所以在开发的时候，可以先查询整个版本的readme文件.

修改登录页

修改登录页,将登录页修改为以下效果,

首先我们找到登录页的html模板

打开login.tpl.html文件， 在顶部加上一个类login-page

然后我们在login.scss中增加我们的自定义样式

.login-page {  background-image: url("../../png/jstree/bg1.jpg");  background-size: cover;  md-card.md-tb-dark-theme {    background-color: #30568080;  }}

z这里使用了一个背景图bg1.jpg，我们将其放到 src/png/jstree目录中

修改登录页的标题

将原有图片改为一个文字。看一下效果

是不是高大上很多了。

修改菜单显示

有人觉得tb有些臃肿了，想把一些菜单去掉，那么最简答的办法就是注释掉菜单

在哪里注释掉那 在一个叫做 menu.service.js 中

在 menu.service.js 中 有一个buildMenu函数， 这个函数用于判断当前用户的角色，并根据角色来返回对应的菜单权限。

需要注释那个角色下的那个菜单，直接在该函数里修改即可。 看一下菜单的配置

{  name: 'home.home',  type: 'link',  state: 'home.links',  icon: 'home'}

这些配置参数 是在改文件中使用的

移除一些节点

移除一些节点这个需求其实也很简单，我们打开一个规则链

这个页面调用了一个接口

仔细看一下这个接口的返回值，刚好对应节点列表. 那么一个具体的思路就出现了。找到调用这个接口的地方，然后在处理接口返回值的地方，将数据进行一次筛选。定义一个需要隐藏的节点数组，使用数组的filter方法进行筛选。 全局搜索components? 只有一个地方有，那就是它了。

具体的js代码

 var notNode = ['aws sns', 'aws sqs', 'gcp pubsub', 'send email', 'gps geofencing filter', 'gps geofencing events'] var components = response.data.filter(x => { return !notNode.includes(x.name) });

修改前

修改后

删除一些表单项

删除表单其实也很简单，主要是要找到对应的位置

比如说你要删除一些功能，操作

删除客户下的几个操作按钮

通过路径customers找到 customers.tpl.html

没有看到相关代码 打开customer.controller.js

注释customerActionsList中的配置数据即可。