您现在的位置是:首页 > 前端会客厅 > 肘后应急肘后应急

ThingsBoard 项目代码解读

YU到边2023-06-25【肘后应急】人已围观

简介ThingsBoard项目代码阅读笔记(前端部分)

一 、项目地址 : https://github.com/thingsboard/thingsboard.git

二 、安装依赖 : cd ui-ngx 
                        yarn install
                        npm start

三、启动项目: 可以安装后台环境,如果你是前端人员比较麻烦的话也可以用docker起一个tb服务
                      参考文章 https://www.ebaina.com/articles/140000009908
                      作为前端来说由后端发布服务,你就只需在这里设置为后端发布的服务即可


               

四、项目目录: 
  •  e2e  测试目录
  •  angular.json angular框架的工作目录配置文件
  •  src 所有源码所在地
          src 下又有以下几个目录 :
  • app 核心代码-存放页面,路由,业务逻辑,数据流转的代码
  • assets 静态资源-图片,国际化配置
  • environments 环境变量-开发环境,生成环境 环境变量
  • scss scss-提取出的公共样式,scss,方法,变量
  • typings ts类型-定义的用于辅助编写ts代码的装饰器,类型,
  • theme.scss 主题配置-主色,配色,辅助色,字体大小
  • style.scss 样式重置-样式主入口,样式重置
  • main.ts 程序入口
  • thingsboard.ico 网站图标
  • index.html 网站入口
  • karna.conf.js 测试配置

五、架构技术栈: Thingsboard是一个使用Angular框架搭建的web架构。
                         使用的是"@angular/cli": "^10.1.5", 脚手架来搭建的。
                         使用了TypeScript。有部分的React代码,主要集中公共组件部分。
                         ui框架使用的是material-ui

                       
六、入口页: ui-ngx - src - app- app.component.html

七、项目首页:(左侧树,右侧路由区域)的位置在 ui-ngx - src - app - modules - home - home.component.html
                        这里用到的是 Angular Material Sidenav组件: (学习链接)
                        Sidenav 组件是全局的, 适用于整个应用屏幕. 建立Sidenav, 我们需要三个组件:
 
 
       <mat-sidenav-container>: 作为一个整体的容器包含内容和侧边栏 
       <mat-sidenav-content>: 主要(正文)内容
         <mat-sidenav>: 侧边栏的内容


               
八、路由: 路由使用的是@angular/router。所有的路由都分别在app内中的 *-routing.module.ts中,
               随便找一个,以下是login-routing.module.ts中的代码,引入了@angular/core和@angular/router
               NgModule 是ng中的包管理,用于模块的导出和引入。

九、修改网站title: ui-ngx - src -  environments - environment.ts
              

十、修改网站配色: ui-ngx - src - theme.scss

               
        
               修改页面布局代码在: ui-ngx - src - app - modules - home - home.component.scss
               
               

               十一、 修改左侧数据列表树 :  ui-ngx - src - app - core - services
               
               十二、首页自定义页面与导航页的权限
                
      十三、表格公共组件所在位置  src\app\modules\home\components\entity





Thingsboard创建新的菜单

1. 打开目录\thingsboard\ui-ngx\src\app\modules\home\pages的终端,创建路由文件,输入命令:ng g module 文件名 --routing

2. 创建组件文件,输入命令:ng g c hello

3. 打开routing.module.ts文件:路由配置



4. 打开src\app\modules\home\pages\home-pages.module.ts文件:引入组件



5. 打开src\app\core\servies\menu.servies.ts文件:菜单路由编写

icon:Material Design Icons

对应文件:(ui-ngx\src\app\core\services\material-icons-codepointsraw) 只有这里面写的才有用,上面链接只是参考



显示结果:


 

拓展:在菜单下创建组件

1. 打开此页面所在的文件夹终端

2. 输入命令:ng g c 组件名

3. 打开创建完的component.ts文件,复制selector的键值


 

4. 在父组件的html文件中当标签使用即可



显示结果:


 



未完待续,持续更新中

Tags:ThingsBoard

很赞哦! ()

上一篇:笔记一

下一篇:web面试题总结

文章评论