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.
 
 
 
 
 
Yang e8d932deaa 列表明细页面 10 months ago
_mock 'init' 10 months ago
e2e 'init' 10 months ago
src 列表明细页面 10 months ago
.editorconfig 'init' 10 months ago
.gitignore 'init' 10 months ago
README.md 'init' 10 months ago
angular.json 'init' 10 months ago
extra-webpack.config.js 'init' 10 months ago
package-lock.json 'init' 10 months ago
package.json 'init' 10 months ago
proxy.conf.js 'init' 10 months ago
proxy.conf.json 'init' 10 months ago
test 'init' 10 months ago
test.html 'init' 10 months ago
tsconfig.json 'init' 10 months ago
tslint.json 'init' 10 months ago

README.md

notice APP

通知通道

功能介绍

通知通道配置功能;

运行子应用

# 本地运行和联调
你需要运行 `npm run start`,然后打开浏览器,访问 `http://localhost:4203/` 即可。
如果你修改了源码的任意部分,app会自动编译和重新加载。
当然,你必须要在 `proxy.conf.js` 文件中填写正确的服务端IP才能进行前后端联调。

编译

运行 npm run build 编译项目。编译后的代码位于 dist/ 文件夹。

本地测试接入子应用

# 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仓库

# 切换到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

代码脚手架

你可以手动地创建一个组件、服务或者其它的部件,但是个人还是建议通过如下命令来快速创建部件,它可以自动生成符合规范的代码命名、添加测试代码模板和添加模块引用,尤其对于初学者又很有帮助。

# 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__字段判断应用是否运行在沙箱环境下。该信息通常用于应用隐藏不需要再沙箱环境下展示的信息,如导航。

  1. 路由跳转

路由跳转分为子应用内部的路由跳转和外部路由跳转两种。如果是应用内部的路由跳转,尽量采用相对地址跳转,比如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;
}