# 应用集成手册

云模式下各系统应需实现应用拆分，原本的业务框架一体化的项目需拆分为(主应用+子应用)的模式。
子应用既可以接入云平台，也可以实现私有化独立运行。😊
📌tips：
如果您的业务应用无需入驻 Glink 云平台，仅需要私有化运行，可直接在主应用中进行业务开发，无需拆离子应用。
但是后续若需集成，或者拆离业务可能会造成一定阻塞，建议直接使用主子应用模式进行开发。

# 主应用集成💨

主应用为系统承载框架，为各个子应用提供了运行依赖。

# 开始

主应用脚手架下载(demo 分支) 下载地址：glink-project-web (opens new window)
npm install 进行依赖安装
npm run dev:managementOauth 系统启动（注：修改完配置后需重新启动/修改完成后再启动项目）

# 配置文件修改

打开.env.managementOauth 文件,修改以下配置：

相关配置 id 获取详见：产品编码及 ID 获取

...

# 系统名称(当前系统名称)
VUE_APP_MICRO_TITLE = '测试系统'

# 认证地址(需前往平台进行应用注册,获取编码。eg:修改'/api/oauth2/authorization/glink-project-leave'为/api/oauth2/authorization/注册的编码')
VUE_APP_AUTH_URL = '/api/oauth2/authorization/glink-project-leave'

# 本地请求代理到网关的地址(后台网关配置,开发时修改为后台请求地址)
VUE_APP_GATE_API_URL='http://192.168.115.67:10000'

# 域名(修改为nacos配置代理域名)
VUE_APP_HOST = 'leave.glink.glkyun.com'

# 微应用配置(云平台微前端集成配置)

# 微应用注册列表(2个应用以上用,隔开。eg:'glink-demo,glink-demo1,...')
VUE_APP_MICRO_MICRO_LIST = 'glink-demo'

# Glink云平台子系统id(需要使用云平台功能时进行配置。2个系统及以上用,隔开。eg:'1541396584678834176,1541396584678834176,...')
VUE_APP_GLINK_ID = '1541396584678834176'

# 产品编码(当前产品编码)
VUE_APP_PROJECT_PRODUCT_CODE = 'demo'

# 产品id(当前产品id)
VUE_APP_PROJECT_PRODUCT_ID = '1544585040863182848'

# 子系统id(当前子系统id,若产品下配置了多个子系统，需指定使用哪个子系统)
VUE_APP_PROJECT_SYSTEM_ID = '1544585137747410944'

# 租户id(平台配置归属租户id)
VUE_APP_PROJECT_RENT_ID = '1527589324236275712'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 本地开发

本地开发模式时需要修改子应用入口为本地，打开 src/micro/index.js
(eg:修改 glink-demo 为微应用注册列表中的子系统编码，修改 enyry 入口为本地调试的 localhost 地址)

  // 开发环境,本地调试时修改entry为子应用本地调试入口,以下case的item为测试系统,对应业务中可自行调整
  if (process.env.NODE_ENV === 'development') {
    switch (item) {
      // 微应用demo系统
      case 'glink-demo':
        appItem.entry = '//localhost:81'
        break;
      default:
        break;
    }
  }

1
2
3
4
5
6
7
8
9
10
11

本地开发时要进行 host 配置

# 开发环境认证代理
192.168.115.67 oidc.glink.glkyun.com
# Demo主应用代理
127.0.0.1 leave.glink.glkyun.com

1
2
3
4

# 子应用集成💨

子应用为各个系统的实际业务开发系统

# 开始

子应用脚手架下载(demo 分支) 下载地址：glink-cloud-platform-micro-demo (opens new window)
npm install 进行依赖安装
npm run dev:managementOauth 系统启动（注：修改完配置后需重新启动/修改完成后再启动项目）

# 配置文件修改

修改你的工程编码(eg:修改 glink-demo 为 glink-management),以下 3 个配置需保持统一。

...
# 应用名称
VUE_APP_NAME = 'glink-demo'

# 路径配置
VUE_APP_PUBLIC_PATH = 'glink-demo'

# 路由前缀配置
VUE_APP_ROUTER_BASE = '/glink-demo'
...

1
2
3
4
5
6
7
8
9
10

# 开发备注💨

以上配置完成后就可以开始进行微应用之旅了~

# 内部 api 提供

应用内路由跳转 this.$router.push({path:'跳转路由地址'})
二级页面标题以及分割线
🍭path: 跳转地址
🍭backTitle: '二级页面标题'
🍭backType: 默认展示,需要禁用时传值为 false
this.$router.push({path:'跳转路由地址',query: { backTitle: '二级页面标题', backType: false }})

# 共享参数

子应用在对接主应用时会默认将一部分参数传递给子应用，并存储于 vuex 的模块 global 下。
共享参数说明:

   * @param {boolean} invalidToken // token是否失效了

使用示例，如子应用 token 过期需要通知主应用：
this.$store.dispatch('global/setGlobalState', {invalidToken:true}) 其他参数均可按 vuex 规范取出使用。

# 注意

注意 host 代理配置
子应用有报错时是无法挂载主应用的

旧应用改造手册 →