0
0

Thingsboard开源物联网平台智慧农业实例快速部署教程（三）【源码部署及logo更换】

Thingsboard源码安装并更换logo

文章目录

1. 源码拉取

本教程按照3.4发行版本行进

git clone https://github.com/thingsboard/thingsboard.git
git checkout release-3.4

在这里插入图片描述

2. 导入项目

打开IEDA（Jetbrains系列产品），以打开pom文件的方式导入项目

在拉取的项目中有若干pom文件，选择项目源码根目录下的

pom.xml

进行导入

在这里插入图片描述

设置maven

在这里插入图片描述

根据读者本地环境设置maven环境，建议换用国内源，否则包下载较慢。

在这里插入图片描述

笔者主要配置如下：

配置文件路径

E:\maven-java\apache-maven-3.6.0-bin\apache-maven-3.6.0\conf

<localRepository>D:\maven-java\maven_repository</localRepository>

<mirrors><mirror><id>nexus-aliyun</id><mirrorOf>central</mirrorOf><name>Nexus aliyun</name><url>https://maven.aliyun.com/repository/public</url></mirror></mirrors>

3. 项目编译

前置条件，项目需要本机有node和postgresql的环境。

postgresql安装过程参考：

windows下postgreSQL安装与启动 - 三月老泉 - 博客园 (cnblogs.com)

node安装笔者使用的较新的v18.15.0，但是笔者建议使用v16.15，对于thingsboard的适配会更好。

在这里插入图片描述

thingsboard的包管理方式变成了yarn，需要安装yarn，笔者版本为1.22.4

在这里插入图片描述

npminstall -g yarn

安装后记得将pom文件中的插件版本对应修改，模块分别有

在这里插入图片描述

修改内容均为（请读者按自己的环境定参）

在这里插入图片描述

项目编译

为了节省时间，将licsen检查的插件注释，跳过

在这里插入图片描述

在IDEA中使用终端打开到根目录，使用如下两个命令

# node 最新版本的ssl是严格检查的，容易在下包的过程中出现超时问题setNODE_OPTIONS=--openssl-legacy-provider
# 使用maven编译安装
mvn clean install -DskipTests

报错集合

common.msg.gen.*

在这里插入图片描述

缺少common.msg.gen.*，意味着下载的包不完整

查看maven的报错是SSL验证超时

在这里插入图片描述

报错信息简抽

ui-ngx: Failed to run task: 'yarn install' failed. org.apache.commons.exec.ExecuteException: Process exited with a

使用

yarn config list

查看，发现的新版的yarn是严格检查ssl的

在这里插入图片描述

# 严格检查SSL关闭设置yarn config set strict-ssl false

设置完仍然会出现安装的超时报错，考虑外网问题，报错的包地址为https://github.com/MichaelZinsmaier/CurvedLines.git

全局搜索定位到了其package.json

使用代理的方式修改github地址，即项目地址前拼接https://ghproxy.com/

在这里插入图片描述

yarn.lock

也修改一下（路径在

thingsboard/ui-ngx/yarn.lock

）

在这里插入图片描述

在这里插入图片描述

digital envelop routines::unspported

在这里插入图片描述

原因

出现这个错误是因为 node.js V17版本+最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响.

参考 Vue 报错error:0308010C:digital envelope routines::unsupported_柠檬果子青的博客-CSDN博客

推荐使用方法三，否则会一直修改临时配置

setNODE_OPTIONS=--openssl-legacy-provider

Not found in remote cache

在这里插入图片描述

pkg打包原理性文章参考一处打包，到处运行，用pkg打包nodejs应用！ - 亚楠老猎人 - 博客园 (cnblogs.com)

原因：本地缺少fetched-v16.15.0-win-x64这个文件

下载链接

Releases · vercel/pkg-fetch (github.com)

找v3.4，v3.5没有16.15对应的文件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

将缺少文件复制到User目录下的.pkg-cache中

在这里插入图片描述

在这里插入图片描述

重命名为fetched-v16.15.0-win-x64

在这里插入图片描述

最终编译成功

在这里插入图片描述

4. 项目启动

修改必要配置文件

项目根目录下的

thingsboard/application/src/main/resources

下有个

thingsboard.yml

在这里插入图片描述

项目运行，启动

E:\gitCloneZone\thingsboard\application\src\main\java\org\thingsboard\server\ThingsboardServerApplication.java

的spring启动类

ThingsboardServerApplication

在这里插入图片描述

在这里插入图片描述

启动成功

在这里插入图片描述

访问本机localhost:8080登录默认系统账户sysadmin@thingsboard.org（密码为sysadmin）即可使用

5. 修改logo

首先要定位logo在源码中的位置

与logo有关的源码位置

在这里插入图片描述

路径分别为

thingsboard/ui-ngx/src/environments
thingsboard/ui-ngx/src/app/modules/home
thingsboard/ui-ngx/src/app/shared/compoents

文件已经在上图中列出

environment.prod.ts

记得编码格式也对应修改，appTitle为标题

在这里插入图片描述

environments.ts

在这里插入图片描述

logo操作的图片是svg矢量图，我们需要将自定义的logo转换成矢量图，这种教程很多，请读者自行调查。

需要操作的logo图在ui-ngx模块下。其中，在浏览器页签上显示的为thingsboard.ico，其为ico图标，网上也有很多转换为ico图标的工具。在登录页面和thingsboard后台的左上角的logo即为svg矢量图，存放在ui-ngx的src下的assets下，命名为logo_title_white.svg，打开该图像

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-neHsZeVW-在这里插入图片描述

在这里插入图片描述

可以看到，其为分辨率1543$\times$320，那么我们制作的svg矢量图也应该是这个分辨率的图片。

实测分辨率替换为相同分辨率图片的时候，然后会出现logo显示不规整的情况。所以，我们替换图片之后仍然需要去控制台手动调样式以适应我们自己的感官。

在这里插入图片描述

后台亦是如此

在这里插入图片描述

可以看到，logo的样式均为

tb-logo-title

，当我们调好合适的参数之后可以修改样式

登录页的logo样式：logo.component.scss（将参数修改为自己矢量图合适的样式参数）

:host-context(.login-logo){img.tb-logo-title{width: 280px;height: 60px;text-decoration: none;cursor: pointer;border: none;transform: none;&:focus{outline: 0;}}}

后台导航栏的logo样式：home.component.scss

& > div{height: 64px;.tb-logo-title{width: auto;max-width: 100%;height: 36px;max-height: 100%;margin: auto;}}

其中我们的logo点击会跳转官网首页，这一部分在ts文件中修改

logo.compoent.ts（修改https://thingsboard.io为自己指定的地址）

exportclassLogoComponent{

  logo ='assets/logo_title_white.svg';gotoThingsboard():void{
    window.open('https://thingsboard.io','_blank');}}

ico图标文件替换之后即生效

在这里插入图片描述

改动文件汇总：

在这里插入图片描述

6. 部署（rpm deb方式）

本章的前提是数据库等已存在并非一个空白服务器，空白服务器请参照笔者的前两篇博客进行基础环境的部署。

请参考《ThingsBoard开源物联网平台智慧农业实例快速部署教程（Ubuntu、CentOS适用）》

《Thingsboard开源物联网平台智慧农业实例快速部署教程（二）【手把手部署UI与动态数据】

编译成功之后在application模块下会产生target目录，该目录下会留存生成的包。

在这里插入图片描述

我们将rpm包或者deb包送入对应的服务中，按照如下操作流程进行。

redhat及分支如redhat，centos，Fedora等

# 停掉原本的thingsboard服务
systemctl stop thingsboard.service
# 卸载原有thingsboardrpm -e thingsboard
# 安装新导入的包sudorpm -Uvh thingsboard.rpm
# 修改配置文件sudovim /etc/thingsboard/conf/thingsboard.conf
# 重启服务
systemctl daemon-reload
systemctl restart thingsboard.service

debian及分支如debian，ubuntu等

# 停掉原本的thingsboard服务sudo systemctl stop thingsboard.service
# 卸载原有thingsboardsudo dpkg -r thingsboard
# 安装新导入的包sudo dpkg -i thingsboard.deb
# 修改配置文件sudovim /etc/thingsboard/conf/thingsboard.conf
# 重启服务sudo systemctl daemon-reload
sudo systemctl restart thingsboard.service
标签： 开源 thingsboard spring boot
本文转载自: https://blog.csdn.net/qq_38853759/article/details/129935751
版权归原作者 Moresweet猫甜 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Thingsboard开源物联网平台智慧农业实例快速部署教程（三）【源码部署及logo更换】”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

初识风控安全，你永远绕不开的话题

[Ubuntu] 文件/目录权限更改

CCF ChinaOSC |「开源科学计算与系统建模openSCS专题分论坛」11月9日与您相约深圳

常见 HTTP 状态码分类和解释及服务端向前端返回响应时的最完整格式

怎么用phpstudy制作网站

新版IDEA使用Spring Initializr创建工程(两种方法，官方工具和IDEA)

万字博文教你爬虫代理工具mitmproxy【详解篇】

文章导航