大家好，如果您还对怎么从源码分享中看到网站ico不太了解，没有关系，今天就由本站为大家分享怎么从源码分享中看到网站ico的知识，包括怎么找网站的源代码的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
前言
各位读者好，截止目前，ThingsBoard系列文章已经做了七篇，分别是
ThingsBoard教程（一）：ThingBoard介绍及安装ThingsBoard教程（二）：租户，租户配置，部件组模块的使用ThingsBoard教程（三）：系统设置模块的使用ThingsBoard教程（四）：规则链简介与操作ThingsBoard教程（五）：客户，资产管理ThingsBoard教程（六）：设备管理ThingsBoard教程（七）：模拟设备遥测ThingsBoard教程（八）：自定义UI
上一篇文章我们讲解了如何简单地定制物联网平台ThingsBoard的logo以及title,还有主题色，本篇文档我将带领大家继续深究一下ThingsBoard的前端源码，读这些源码，分享系统的机构，不仅能够帮助我们快速地自定义定制tb，也能够让我们从中获取灵感，学到很多设计上的技巧。
话不多说，让我们开始吧。
目录介绍
先来说一下项目的目录，这个是最为直观的。一些常见的文件我们就不说了，像yarn.lock,tslint.json,LICENSE,package.json，tsconfig.json,几乎每个前端项目都会有。这里不多做解释。
e2e测试目录angular.jsonangular框架的工作目录配置文件详细配置说明src所有源码所在地
src下又有以下几个目录
app核心代码-存放页面，路由，业务逻辑，数据流转的代码assets静态资源-图片，国际化配置，environments环境变量-开发环境，生成环境环境变量scssscss-提取出的公共样式，scss，方法，变量typingsts类型-定义的用于辅助编写ts代码的装饰器，类型，theme.scss主题配置-主色，配色，辅助色，字体大小style.scss样式重置-样式主入口，样式重置main.ts程序入口thingsboard.ico网站图标index.html网站入口karna.conf.js测试配置
架构技术栈
打开前端目录ui-ngx，找到package.json。我们就能看到里面有很多以@angular开头的依赖包，此外很多脚本指令都是以ng开头，根据以上判断，Thingsboard是一个使用Angular框架搭建的web架构。使用的是&34;:&34;,脚手架来搭建的。使用了TypeScript。有部分的React代码，主要集中公共组件部分。
ui组件使用的是material-ui。可以看到引入了一下几个包
&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,\n&34;:&34;,
使用jwt来进行授权认证管理。
数据流转
数据流转就是，一个项目中，数据是如何流转的，
数据通过那个几个方法渲染到页面上？如何将页面的表单数据通过api接口发送给后端数据如何存储的？全局数据，组件数据，组件如何通信，如何传递数据？。。。。所有有关数据的流转，都是比较重要的，因为如果要去改造tb，必须要知道这部分的知识才能改的动。我们来看一下，登录页面的数据流转。打开login.component.ts
我们看到
loginFormGroup=this.fb.group({\nusername:&39;,\npassword:&39;\n});
这里对页面的表单数据进行了初始化，一个用户名，一个密码。你可以尝试给这两个属性赋值，看是否会显示到页面上。
在方法login()中我们看到
login():void{\nif(this.loginFormGroup.valid){\nthis.authService.login(this.loginFormGroup.value).subscribe(\n()=>{},\n(error:HttpErrorResponse)=>{\nif(error&&error.error&&error.error.errorCode){\nif(error.error.errorCode===Constants.serverErrorCode.credentialsExpired){\nthis.router.navigateByUrl(`login/resetExpiredPassword?resetToken=${error.error.resetToken}`);\n}\n}\n}\n);\n}else{\nObject.keys(this.loginFormGroup.controls).forEach(field=>{\nconstcontrol=this.loginFormGroup.get(field);\ncontrol.markAsTouched({onlySelf:true});\n});\n}\n}
首先是对表单进行了验证，使用valid。验证成功后，调用authService这个服务中的login方法，参数就是表单的数据，在subscribe传入了二个函数，用于处理正确，和错误的结果。这个数据我们就知道了，表单数据由页面传递到了authService中的login方法中。接着我们去这个服务中寻找具体的实现逻辑
这里便是login的逻辑代码
publiclogin(loginRequest:LoginRequest):Observable<LoginResponse>{\nreturnthis.http.post<LoginResponse>(&39;,loginRequest,defaultHttpOptions()).pipe(\ntap((loginResponse:LoginResponse)=>{\nthis.setUserFromJwtToken(loginResponse.token,loginResponse.refreshToken,true);\n}\n));\n}
我们看到底层是调用this.http.post方法，接口地址是/api/auth/login,接口返回后又使用了setUserFromJwtToken函数来处理。
要理解ng中的数据流转，要多看看rxjs。
路由
路由使用的是@angular/router。所有的路由都分别在app内中的*-routing.module.ts中，随便找一个,以下是login-routing.module.ts中的代码，引入了@angular/core和@angular/router
NgModule是ng中的包管理，用于模块的导出和引入。
import{NgModule}from&39;;\nimport{RouterModule,Routes}from&39;;\n\n\nimport{LoginComponent}from&39;;\nimport{AuthGuard}from&39;;\nimport{ResetPasswordRequestComponent}from&39;;\nimport{ResetPasswordComponent}from&39;;\nimport{CreatePasswordComponent}from&39;;\n\n\nconstroutes:Routes=[\n{\npath:&39;,\ncomponent:LoginComponent,\ndata:{\ntitle:&39;,\nmodule:&39;\n},\ncanActivate:[AuthGuard]\n},\n{\npath:&39;,\ncomponent:ResetPasswordRequestComponent,\ndata:{\ntitle:&39;,\nmodule:&39;\n},\ncanActivate:[AuthGuard]\n},\n{\npath:&39;,\ncomponent:ResetPasswordComponent,\ndata:{\ntitle:&39;,\nmodule:&39;\n},\ncanActivate:[AuthGuard]\n},\n{\npath:&39;,\ncomponent:ResetPasswordComponent,\ndata:{\ntitle:&39;,\nmodule:&39;,\nexpiredPassword:true\n},\ncanActivate:[AuthGuard]\n},\n{\npath:&39;,\ncomponent:CreatePasswordComponent,\ndata:{\ntitle:&39;,\nmodule:&39;\n},\ncanActivate:[AuthGuard]\n}\n];\n\n\n@NgModule({\nimports:[RouterModule.forChild(routes)],\nexports:[RouterModule]\n})\nexportclassLoginRoutingModule{}
具体的用法就是这样
{\npath:&39;,\ncomponent:LoginComponent,\ndata:{\ntitle:&39;,\nmodule:&39;\n},\ncanActivate:[AuthGuard]\n},
path是router的路径，component指向路径到达的组件，data是进入该组件的额外信息，很像mate信息，AuthGuard是用于授权使用的。
文章到此结束，如果本次分享的怎么从源码分享中看到网站ico和怎么找网站的源代码的问题解决了您的问题，那么我们由衷的感到高兴！