小白 thingsboard 拆分前后端分离-EW帮帮网

1、modules 里注释掉ui_ugx

 <modules>
        <module>netty-mqtt</module>
        <module>common</module>
        <module>rule-engine</module>
        <module>dao</module>
        <module>edqs</module>
        <module>transport</module>
<!--        <module>ui-ngx</module>-->
        <module>tools</module>
        <module>application</module>
        <module>msa</module>
        <module>rest-client</module>
        <module>monitoring</module>
    </modules>

2、程序位置

3、注释相关程序

在 IntelliJ IDEA 中，注释程序的快捷键如下4：

单行注释：Windows/Linux 系统下使用Ctrl + /，macOS 系统下使用Cmd + /。将光标移动到需要注释的行，按下快捷键可在行首添加注释符号//，再次按下则取消注释。
多行注释：Windows/Linux 系统下使用Ctrl + Shift + /，macOS 系统下使用Cmd + Shift + /。先选中要注释的多行代码，然后按下快捷键会在选中的代码前后添加注释符号/* */，若要取消注释，光标在注释内容上按该快捷键即可。
方法或类的注释：在方法或类的开头输入/**，然后按回车键，可自动根据参数和返回值生成注释模板。

4、配置前端服务器的代理规则

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;

5、程序解释

1. 定义代理配置对象 `PROXY_CONFIG`

javascript

const PROXY_CONFIG = {

使用 const 关键字声明了一个常量 PROXY_CONFIG，它是一个对象，用于存储多个代理规则。

2. 定义 `/api` 路径的代理规则

javascript

  "/api": {
    "target": forwardUrl,
    "secure": false,
  },

/api：这是一个路径匹配规则，表示当请求的路径以 /api 开头时，将应用此代理规则。
target：指定代理目标地址，这里使用之前定义的 forwardUrl 常量，即 "http://localhost:8080"。这意味着当请求以 /api 开头时，请求将被转发到 http://localhost:8080。
secure：设置为 false 表示在代理过程中不验证 SSL 证书，通常在开发环境中使用，以避免因自签名证书等问题导致的错误。

3. 定义 `/static/rulenode` 路径的代理规则

javascript

  "/static/rulenode": {
    "target": ruleNodeUiforwardUrl,
    "secure": false,
  },

/static/rulenode：路径匹配规则，当请求路径以 /static/rulenode 开头时应用此规则。
target：使用 ruleNodeUiforwardUrl 常量，其值与 forwardUrl 相同，即 "http://localhost:8080"。请求将被转发到该地址。
secure：同样设置为 false，不验证 SSL 证书。

4. 定义 `/static/widgets` 路径的代理规则

javascript

  "/static/widgets": {
    "target": forwardUrl,
    "secure": false,
  },

/static/widgets：路径匹配规则。
target：使用 forwardUrl，请求将被转发到 http://localhost:8080。
secure：设置为 false。

5. 定义 `/oauth2` 路径的代理规则

javascript

  "/oauth2": {
    "target": forwardUrl,
    "secure": false,
  },

/oauth2：路径匹配规则。
target：使用 forwardUrl，请求将被转发到 http://localhost:8080。
secure：设置为 false。

6. 定义 `/login/oauth2` 路径的代理规则

javascript

  "/login/oauth2": {
    "target": forwardUrl,
    "secure": false,
  },

/login/oauth2：路径匹配规则。
target：使用 forwardUrl，请求将被转发到 http://localhost:8080。
secure：设置为 false。

7. 定义 `/api/ws` 路径的代理规则

javascript

  "/api/ws": {
    "target": wsForwardUrl,
    "ws": true,
    "secure": false
  },

/api/ws：路径匹配规则。
target：使用 wsForwardUrl，即 "ws://localhost:8080"，表示这是一个 WebSocket 请求的代理目标。
ws：设置为 true 表示这是一个 WebSocket 代理，服务器将处理 WebSocket 连接。
secure：设置为 false，不验证 SSL 证书。

8. 导出代理配置对象

javascript

module.exports = PROXY_CONFIG;

使用 module.exports 将 PROXY_CONFIG 对象导出，以便其他模块可以引入并使用这个代理配置。在 Node.js 环境中，这是一种常见的模块导出方式。

6、复制UI_NGX,并用VS_CODE打开

7、安装并启动yarn

安装 Yarn
- 全局安装：如果你使用的是 npm，可以通过以下命令全局安装 Yarn：
  bash
```
npm install -g yarn
```
初始化项目
- 在项目根目录下运行以下命令，会引导你创建一个 package.json 文件，其中包含项目的基本信息和依赖配置。
  bash
```
yarn init
```
- 若要使用默认配置快速创建 package.json，可以添加 -y 选项：
  bash
```
yarn init -y
```

依赖管理

安装依赖
- 安装所有依赖：在项目根目录下有 package.json 文件时，运行此命令会安装其中指定的所有依赖。
  bash
```
yarn install
```
运行 start 脚本

bash

yarn start

7、安装和启动信息

PS E:\ThingsBoard\front_end\ui-ngx> npm install -g yarn

added 1 package in 5s
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.2.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.2.0
npm notice To update run: npm install -g npm@11.2.0
npm notice
yarn init v1.22.22
question name (thingsboard):
question version (4.0.0):
question description: ui_ngx
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private (true):
success Saved package.json
Done in 555.72s.
PS E:\ThingsBoard\front_end\ui-ngx> yarn install
yarn install v1.22.22
[1/4] Resolving packages...
warning Resolution field "esbuild@0.23.0" is incompatible with requested version "esbuild@^0.21.3"
$ patch-package
patch-package 8.0.0
Applying patches...
@angular/build@18.2.12 ✔
@angular/core@18.2.13 ✔
@mat-datetimepicker/core@14.0.0 ✔
angular-gridster2@18.0.1 ✔
canvas-gauges@2.1.7 ✔
jquery.terminal@2.44.1 ✔
tooltipster@4.2.8 ✔
Done in 1.47s.
PS E:\ThingsBoard\front_end\ui-ngx> yarn start
yarn run v1.22.22
$ node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve --configuration development --host 0.0.0.0 --open
Node.js version v23.8.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/.

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 "--disable-host-check" if that's the
case.

Initial chunk files               | Names                 |  Raw size   
chunk-73WDU2OV.js                 | -                     |   4.33 MB | 
main.js                           | main                  | 601.04 kB |
styles.css                        | styles                | 565.29 kB |
polyfills.js                      | polyfills             | 230.87 kB |
scripts.js                        | scripts               | 189.76 kB |
chunk-SI2BA7CY.js                 | -                     | 180.05 kB |
chunk-6CL7JAHA.js                 | -                     |  86.23 kB |
chunk-MENE3GOZ.js                 | -                     |  76.79 kB |
chunk-L2SQKL3C.js                 | -                     |  43.84 kB |
chunk-MZW5XMY2.js                 | -                     |  36.18 kB |
chunk-63M355E4.js                 | -                     |   3.23 kB |
chunk-CKYI7XNO.js                 | -                     |   2.89 kB |
chunk-PSOCTSB3.js                 | -                     |   2.62 kB |

                                  | Initial total         |   6.35 MB

Lazy chunk files                  | Names                 |  Raw size
chunk-NWRSS5AK.js                 | -                     |  15.51 MB |
home-pages.module-LFJCMKVM.js     | home-pages-module     |   2.79 MB |
rulechain-page.module-3Z5SQIAK.js | rulechain-page-module |   1.26 MB |
chunk-ZAW6F6ZR.js                 | -                     | 223.44 kB |
chunk-7YBANKQP.js                 | -                     | 100.16 kB |
map-widget2-SS37WMXJ.js           | map-widget2           |  95.97 kB |
chunk-2ZLQYL36.js                 | -                     |  93.33 kB |
chunk-HL53M2SS.js                 | -                     |  53.31 kB |
chunk-3LGHA4C4.js                 | -                     |  35.64 kB |
mode-tbel-6U5H272S.js             | mode-tbel             |  30.38 kB |
chunk-UEBUGEM2.js                 | -                     |  28.32 kB |
chunk-A5TIOYK5.js                 | -                     |  24.73 kB |
chunk-ND3CTVRE.js                 | -                     |  22.49 kB |
digital-gauge-DWQZBK3I.js         | digital-gauge         |   9.51 kB |
chunk-MQYQLQFT.js                 | -                     |   7.75 kB |
...and 10 more lazy chunks files. Use "--verbose" to show all the files.

Application bundle generation complete. [123.521 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  Network: http://192.168.247.1:4200/
  ➜  Network: http://192.168.43.1:4200/
  ➜  Network: http://192.168.3.11:4200/
  ➜  press h + enter to show help

14:37:59 [vite] http proxy error: /api/noauth/oauth2Clients?platform=WEB
AggregateError
    at internalConnectMultiple (node:net:1139:18)
    at afterConnectMultiple (node:net:1712:7)
Initial chunk files                | Names                  |  Raw size
main.js                            | main                   | 601.04 kB |

Lazy chunk files                   | Names                  |  Raw size
chunk-GF4LRYXW.js                  | -                      |  15.51 MB |
home-pages.module-QPDNUWMQ.js      | home-pages-module      |   2.79 MB |
rulechain-page.module-RFJLOQUU.js  | rulechain-page-module  |   1.26 MB |
chunk-C3C7OJHQ.js                  | -                      | 223.44 kB |
chunk-TLUZPPSJ.js                  | -                      |  93.33 kB |
dashboard-pages.module-CMEL32ZA.js | dashboard-pages-module |   6.09 kB |

Application bundle generation complete. [141.937 seconds]

Page reload sent to client(s).
14:39:31 [vite] http proxy error: /api/noauth/oauth2Clients?platform=WEB
AggregateError
    at internalConnectMultiple (node:net:1139:18)
    at afterConnectMultiple (node:net:1712:7) (x2)

小白 thingsboard 拆分前后端分离

1、modules 里注释掉ui_ugx

2、程序位置

3、注释相关程序

4、配置前端服务器的代理规则

5、程序解释

1. 定义代理配置对象 `PROXY_CONFIG`

2. 定义 `/api` 路径的代理规则

3. 定义 `/static/rulenode` 路径的代理规则

4. 定义 `/static/widgets` 路径的代理规则

5. 定义 `/oauth2` 路径的代理规则

6. 定义 `/login/oauth2` 路径的代理规则

7. 定义 `/api/ws` 路径的代理规则

8. 导出代理配置对象

6、复制UI_NGX,并用VS_CODE打开

依赖管理

7、安装和启动信息

8、以下信息，表示代表服务器错误，需运行thingsboard后台

9、前端通过4200端口访问后端成功

网站公告

今日签到

热门文章

最新发布

小白 thingsboard 拆分前后端分离

1、modules 里注释掉ui_ugx

2、程序位置

3、注释相关程序

4、配置前端服务器的代理规则

5、程序解释

1. 定义代理配置对象 PROXY_CONFIG

2. 定义 /api 路径的代理规则

3. 定义 /static/rulenode 路径的代理规则

4. 定义 /static/widgets 路径的代理规则

5. 定义 /oauth2 路径的代理规则

6. 定义 /login/oauth2 路径的代理规则

7. 定义 /api/ws 路径的代理规则

8. 导出代理配置对象

6、复制UI_NGX,并用VS_CODE打开

依赖管理

7、安装和启动信息

8、以下信息，表示代表服务器错误， 需运行thingsboard后台

9、前端通过4200端口访问后端成功

网站公告

今日签到

热门文章

最新发布

1. 定义代理配置对象 `PROXY_CONFIG`

2. 定义 `/api` 路径的代理规则

3. 定义 `/static/rulenode` 路径的代理规则

4. 定义 `/static/widgets` 路径的代理规则

5. 定义 `/oauth2` 路径的代理规则

6. 定义 `/login/oauth2` 路径的代理规则

7. 定义 `/api/ws` 路径的代理规则

8、以下信息，表示代表服务器错误，需运行thingsboard后台