You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
4.4 KiB
120 lines
4.4 KiB
6 months ago
|
# notice APP
|
||
|
|
通知通道
|
||
|
|
|
||
|
|
## 功能介绍
|
||
|
|
通知通道配置功能；
|
||
|
|
|
||
|
|
## 运行子应用
|
||
|
|
```bash
|
||
|
|
# 本地运行和联调
|
||
|
|
你需要运行 `npm run start`，然后打开浏览器，访问 `http://localhost:4203/` 即可。
|
||
|
|
如果你修改了源码的任意部分，app会自动编译和重新加载。
|
||
|
|
当然，你必须要在 `proxy.conf.js` 文件中填写正确的服务端IP才能进行前后端联调。
|
||
|
|
```
|
||
|
|
|
||
|
|
## 编译
|
||
|
|
运行 `npm run build` 编译项目。编译后的代码位于 `dist/` 文件夹。
|
||
|
|
|
||
|
|
## 本地测试接入子应用
|
||
|
|
```bash
|
||
|
|
# extra-webpack.config.js文件
|
||
|
|
"publicPath"属性，保证访问端口和本地起服务端口一致
|
||
|
|
# 启动主应用business_common_service
|
||
|
|
npm run start
|
||
|
|
# 修改主应用配置
|
||
|
|
"business_common_service/src/assets/config/config.json"对应子应用的"localEntry"属性，保持和子应用服务一致
|
||
|
|
# 打开浏览器
|
||
|
|
访问 http://localhost:8088/notice/route/config/manage
|
||
|
|
```
|
||
|
|
|
||
|
|
## 切换NPM仓库
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 切换到BSA的npm私服地址
|
||
|
|
npm set registry http://10.67.1.73:4873
|
||
|
|
|
||
|
|
# 切换公有仓库
|
||
|
|
npm set registry https://registry.npmjs.org/
|
||
|
|
```
|
||
|
|
|
||
|
|
私有模块发布到NPM仓库，便于重用和管理。
|
||
|
|
|
||
|
|
## 安装 NodeJS
|
||
|
|
|
||
|
|
前端工程环境基于Node运行的，Node会自带Npm包管理工具，安装NodeJS后，在控制台运行 `npm -v` ，如果打印出提示，则说明node安装成功。
|
||
|
|
|
||
|
|
## 然后安装前端工程环境的依赖
|
||
|
|
|
||
|
|
你需要运行 `npm install`，即可自动安装依赖。但是，由于网络连接不稳定，以及npm自身的缺陷，有可能安装报错。可以从其它成功安装的同学处将依赖包拷贝到本地即可。
|
||
|
|
安装依赖就用 `npm install XXX` 就可以了，比如 `npm install echarts`。
|
||
|
|
|
||
|
|
## 代码脚手架
|
||
|
|
|
||
|
|
你可以手动地创建一个组件、服务或者其它的部件，但是个人还是建议通过如下命令来快速创建部件，它可以自动生成符合规范的代码命名、添加测试代码模板和添加模块引用，尤其对于初学者又很有帮助。
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Component(组件):
|
||
|
|
npm run ng g component ./core/my-new-component
|
||
|
|
|
||
|
|
# Directive(指令):
|
||
|
|
npm run ng g directive ./core/my-new-directive
|
||
|
|
|
||
|
|
# Pipe(管道):
|
||
|
|
npm run ng g pipe ./core/my-new-pipe
|
||
|
|
|
||
|
|
# Service(服务):
|
||
|
|
npm run ng g service ./core/my-new-service
|
||
|
|
|
||
|
|
# Class(类):
|
||
|
|
npm run ng g class ./core/my-new-class
|
||
|
|
|
||
|
|
# Interface(接口):
|
||
|
|
npm run ng g interface ./core/my-new-interface
|
||
|
|
|
||
|
|
# Enum(枚举):
|
||
|
|
npm run ng g enum ./core/my-new-enum
|
||
|
|
|
||
|
|
# Module(模块):
|
||
|
|
npm run ng g module ./core/my-module
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
## 编译
|
||
|
|
|
||
|
|
运行 `npm run build` 编译项目。编译后的代码位于 `dist/` 文件夹。
|
||
|
|
可通过修改 angular.json 文件的"outputPath" 参数，更改前端打包路径
|
||
|
|
|
||
|
|
## @delon/mock 前端开发接口自测使用
|
||
|
|
|
||
|
|
在 `app.module.ts` 根模块中引入。
|
||
|
|
文档：https://ng-alain.com/mock/getting-started/zh
|
||
|
|
目的：拦截前端请求，通过生成模拟数据让前端开发人员独立于后端进行开发，让前端独立于后端进行开发。Mock代码与逻辑代码完全解耦，本地开发环境和生产环境无缝切换。
|
||
|
|
|
||
|
|
## 微应用开发注意点
|
||
|
|
|
||
|
|
1. 图片引用，需要对图片添加一个 assetUrl 管道用于修复图片地址
|
||
|
|
|
||
|
|
```
|
||
|
|
<img [src]="'assets/image/nodata/text-nodata.png' | assetUrl"/>
|
||
|
|
```
|
||
|
|
|
||
|
|
2. 判断沙箱环境
|
||
|
|
|
||
|
|
应用运行时，基座沙箱提供`window.__POWERED_BY_QIANKUN__`字段判断应用是否运行在沙箱环境下。该信息通常用于应用隐藏不需要再沙箱环境下展示的信息，如导航。
|
||
|
|
|
||
|
|
3. 路由跳转
|
||
|
|
|
||
|
|
路由跳转分为子应用内部的路由跳转和外部路由跳转两种。如果是应用内部的路由跳转，尽量采用相对地址跳转，比如`routerLink`指令或者`router.navigate()`函数，这种跳转是同时兼容独立部署和混合部署的。外部路由跳转一般会写绝对路径，针对子应用中存在的这种跳转，需要额外处理，判断其是否在是作为微应用运行还是独立运行，然后再决定跳转的地址。以下用智能搜索的 ip 跳转为例，如果运行在容器中，则跳转主应用的路径，如果不是则跳转独立部署的路径。
|
||
|
|
|
||
|
|
```
|
||
|
|
if ((window as any).__POWERED_BY_QIANKUN__) {
|
||
|
|
const url = `/WebApi/main/static/dist/#/isoc/route/maintain/destination?ip=${ip}`;
|
||
|
|
const openWin = window.open(url);
|
||
|
|
openWin.opener = null;
|
||
|
|
} else {
|
||
|
|
const url = `/WebApi/isoc/static/base/#/route/maintain/destination?ip=${ip}`;
|
||
|
|
const openWin = window.open(url);
|
||
|
|
openWin.opener = null;
|
||
|
|
}
|
||
|
|
```
|