ThingsBoard教程（八）：自定义UI_专栏

前言

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

前面我们已经讲解了tb的基本模块以及用法，如何创建资源对象，如何对数据进行管理，此外还讲解了tb的设备遥测。从本篇开始我将带领大家如何对tb的ui进行定制，这也是很多网友关注的，如何换个logo，如何换一个主题，如何增加一个菜单，以及如何对其他系统进行对接，嵌入。

本篇文章是我在阅读了tb的前端源码后进行魔改了，创作过程十分不易。如果文章对你有帮助，请大家不要吝啬赞和分享。谢谢。

本篇先来给大家介绍一些基本的定制。前端开发环境的搭建，定制logo，修改默认语言，修改网站标题

前端开发环境的搭建

安装Nodejs，和git

要搭建开发环境需要先安装nodejs，网上有大把资源，这里就不再累述了，如果你是windows的用户，可以直接在官网下载，一键安
装。
git可以装，也可以不装，不装的话，直接在github下载代码压缩包，安装了的话，直接使用git命令下载代码到本地。

源码下载，npm包安装

使用git下载最新版本的tb源码

git clone https://github.com/thingsboard/thingsboard.git1

下载完成后，进入ui-ngx目录进行操作

cd thingsboard

yarn1
2
3

如果这一步报没有yarn命令的话，就先使用npm安装一下yarn

npm i yarn -g1

建议使用yarn来安装npm包，因为官方的仓库中是使用yarn.lock来锁定版本号的，
如果安装报错，八成是网络问题，因为很多包是在国外的。多试几次。

ui-ngx目录的结构是这样子的，如下图

安装完成npm包后，运行以下命令可以将项目启动

yarn start1

运行后，会对代码进行编译，构建。

日志如下：

$ yarn start
yarn run v1.22.4
$ node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --open
WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.

chunk {ace-builds-src-noconflict-ext-language_tools} ace-builds-src-noconflict-ext-language_tools.js, ace-builds-src-noconflict-ext-language_tools.js.map (ace-builds-src-noconflict-ext-language_tools) 70.5 kB  [rendered]
chunk {ace-builds-src-noconflict-ext-searchbox} ace-builds-src-noconflict-ext-searchbox.js, ace-builds-src-noconflict-ext-searchbox.js.map (ace-builds-src-noconflict-ext-searchbox) 16.7 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-css} ace-builds-src-noconflict-mode-css.js, ace-builds-src-noconflict-mode-css.js.map (ace-builds-src-noconflict-mode-css) 31.9 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-html} ace-builds-src-noconflict-mode-html.js, ace-builds-src-noconflict-mode-html.js.map (ace-builds-src-noconflict-mode-html) 97.1 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-java} ace-builds-src-noconflict-mode-java.js, ace-builds-src-noconflict-mode-java.js.map (ace-builds-src-noconflict-mode-java) 35.7 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-javascript} ace-builds-src-noconflict-mode-javascript.js, ace-builds-src-noconflict-mode-javascript.js.map (ace-builds-src-noconflict-mode-javascript) 27.9 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-json} ace-builds-src-noconflict-mode-json.js, ace-builds-src-noconflict-mode-json.js.map (ace-builds-src-noconflict-mode-json) 10 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-markdown} ace-builds-src-noconflict-mode-markdown.js, ace-builds-src-noconflict-mode-markdown.js.map (ace-builds-src-noconflict-mode-markdown) 118 kB  [rendered]
chunk {ace-builds-src-noconflict-mode-text} ace-builds-src-noconflict-mode-text.js, ace-builds-src-noconflict-mode-text.js.map (ace-builds-src-noconflict-mode-text) 831 bytes  [rendered]
chunk {ace-builds-src-noconflict-snippets-css} ace-builds-src-noconflict-snippets-css.js, ace-builds-src-noconflict-snippets-css.js.map (ace-builds-src-noconflict-snippets-css) 22 kB  [rendered]
chunk {ace-builds-src-noconflict-snippets-html} ace-builds-src-noconflict-snippets-html.js, ace-builds-src-noconflict-snippets-html.js.map (ace-builds-src-noconflict-snippets-html) 21 kB  [rendered]
chunk {ace-builds-src-noconflict-snippets-java} ace-builds-src-noconflict-snippets-java.js, ace-builds-src-noconflict-snippets-java.js.map (ace-builds-src-noconflict-snippets-java) 5.61 kB  [rendered]
chunk {ace-builds-src-noconflict-snippets-javascript} ace-builds-src-noconflict-snippets-javascript.js, ace-builds-src-noconflict-snippets-javascript.js.map (ace-builds-src-noconflict-snippets-javascript) 4.83 kB  [rendered]

chunk {jstree} jstree.js, jstree.js.map (jstree) 200 kB  [rendered]
chunk {jszip} jszip.js, jszip.js.map (jszip) 149 kB  [rendered]
chunk {main} main.js, main.js.map (main) 2.27 MB [initial] [rendered]
chunk {moment-timezone} moment-timezone.js, moment-timezone.js.map (moment-timezone) 204 kB  [rendered]
chunk {pages-home-pages-module} pages-home-pages-module.js, pages-home-pages-module.js.map (pages-home-pages-module) 1.83 MB  [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 270 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 688 kB [initial] [rendered]
chunk {raphael} raphael.js, raphael.js.map (raphael) 152 kB  [rendered]
chunk {react-ace} react-ace.js, react-ace.js.map (react-ace) 198 kB  [rendered]
chunk {react-json-form-react} react-json-form-react.js, react-json-form-react.js.map (react-json-form-react) 3.16 MB  [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 13.3 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 67.7 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.37 MB [initial] [rendered]
chunk {tooltipster} tooltipster.js, tooltipster.js.map (tooltipster) 54.9 kB  [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 10.2 MB [initial] [rendered]
Date: 2021-03-03T08:47:43.401Z - Hash: d0dd7a67bbbcf8b24677 - Time: 92364ms
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<

启动完成后，会自动打开浏览器，看到以下这个页面。

说明前端项目已经正常启动。

前端项目正常启动了，但后端项目还没有启动，所有会报一个错误。

那么如何启动后端服那？如果你是后端开发人员，那就要安装jdk，maven，以及数据库，来把一整套后端环境搭建起来。但如果你是前端人员，这么做就没有太大意义。可能折腾一天都不一定能折腾好。所有，最简单的办法是什么那？当然是使用docker起一个tb服务了。

使用docker运行以下命令

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

启动之后如何配置前端项目访问后端服务那？

答案就在前端的 proxy.conf.js 文件了。这里就是配置后端服务的路径
代码如下

const forwardUrl = "http://localhost:8080";
const wsForwardUrl = "ws://localhost:8080";
const ruleNodeUiforwardUrl = forwardUrl;

const PROXY_CONFIG = {
  "/api": {
    "target": forwardUrl,
    "secure": false,
  },
  "/static/rulenode": {
    "target": ruleNodeUiforwardUrl,
    "secure": false,
  },
  "/static/widgets": {
    "target": forwardUrl,
    "secure": false,
  },
  "/oauth2": {
    "target": forwardUrl,
    "secure": false,
  },
  "/login/oauth2": {
    "target": forwardUrl,
    "secure": false,
  },
  "/api/ws": {
    "target": wsForwardUrl,
    "ws": true,
    "secure": false
  },
};

module.exports = PROXY_CONFIG;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<

将

const forwardUrl = "http://localhost:8080";
const wsForwardUrl = "ws://localhost:8080";1
2

修改为docker启动的tb服务的地址。比如

const forwardUrl = "http://192.168.99.102:8080/";
const wsForwardUrl = "ws://192.168.99.102:8080";1
2

再重新运行

yarn start1

即可看到不再报错，使用默认账号登录试试看。
账号：sysadmin@thingsboard.org
密码：sysadmin

定制logo

很多公司想要定制tb的logo，然后自己再申请软著，各种认证。
在tb中修改logo很简单，可以直接替换原有文件，也可以直接修改源码来更改logo

替换文件的话，只需要替换src/assets/logo-title_white.svg,src/assets/logo-white.svg,此外还有src/thinsboard.ico

这三个文件替换一下。就能修改tb的logo

如果要修改源码来达到替换logo的目的。
需要修改以下几处

第一处

第二处

修改网站标题

修改主题色

修改默认语言

最终效果

配置完成后，需要重启前端项目。

ThingsBoard教程（八）：自定义UI

前言