接口导入
# 官网接口文档地址
中台部分: https://unitedrhino-core.apifox.cn 物联网部分: https://unitedrhino-things.apifox.cn
# 接口文件管理
# 系统管理接口json文件更新：
1、 打开 apifox
2、 项目设置
3、 导出数据
4、 选择OpenAPI Spec
5、 选择OpenAPI3.0
6、 选择导出部分接口
7、 点击 接口范围
8、 全选 系统管理new
9、 将接口json文件导出至项目目录： src -> pkg -> json -> system 文件夹下
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 物联网接口json文件更新：
1、 打开 apifox
2、 项目设置
3、 导出数据
4、 选择OpenAPI Spec
5、 选择OpenAPI3.0
6、 选择导出部分接口
7、 点击 接口范围
8、 全选 物联网相关接口
9、 将接口json文件导出至项目目录： src -> pkg -> json -> things 文件夹下
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 系统管理接口文件打包命令： npm run system:openapi
# 物联网接口文件打包命令： npm run things:openapi
# 环境配置
# package.json配置及打包配置相关
配置服务器端前端文件访问路径 package.json -> pro -> --base=/app/system-manage/ ， 根据实际需求配置 base 路径
执行 npm run build:pro
启动项目： -> npm run dev
# env文件配置
- 根据实际需求自行配置环境文件： .env.development .env.production
# 根容器设置
*** index.html root dom的id设置，该id一定根据自己的项目自行命名，避免微前端加载时容器冲突： index.html ->
****** main.ts root dom设置： main.ts -> app.mount('#systemAppContainer') ***
*** 请全局搜索 systemAppContainer ，涉及到的根据自己当前设置的根容器 id 进行全局替换 ***
# 关于已封装好的 http 函数调用方式
# 常规调用
- 传入参数： let data = {}
postUserSelfLogin( data ).then( (res:any)=>{
// res 存在时，证明服务端已成功响应
if( res ){
}
})
1
2
3
4
5
6
2
3
4
5
6
# 发起http请求时，需要显示全局 loading 调用方式，响应是否成功
postUserSelfLogin( data ,{loading:true,title:"正在登录中..."} ).then( (res:any)=>{
// res 存在时，证明服务端已成功响应
if( res ){
}
})
1
2
3
4
5
6
7
2
3
4
5
6
7
# 发起http请求时，http请求结束后需要展示结果提示语配置方式
postUserSelfLogin( data ,{toast:true} ).then( (res:any)=>{
// res 存在时，证明服务端已成功响应
if( res ){
}
})
1
2
3
4
5
6
7
2
3
4
5
6
7
# 关于发起http请求配置
- 根据实际项目需求，可对已封装的函数自行修改： service -> handler.ts -> requestHandler函数 和 responseHandler函数
# 关于路由配置
默认不需要将路由新增至 router -> index.ts ， 具体可根据自己的需求处理
当前微前端开发环境下路由注册方式，自行在router -> modules文件夹下创建路由文件，并将开发环境的路由文件统一引入当前文件夹的index.ts文件进行导出： router -> modules -> index.ts
# 全局组件注册
- 组件注册目录： plugins -> index.ts
# 关于全局注册 @ant-design/icons-vue
- 默认已经将 ant-design/icons-vue 提供的icon图标组件全部注册，具体使用方法如下：
<component :is="'PlusOutlined'"></component>
1
2
3
4
2
3
4
上次更新: 2024/11/15, 14:30:41