基于Vue的前端微服务

1.微服务

前端微服务的架构是什么样的？我们可以先来看看后端的微服务实现。一个大的系统被切分成一个个小的模块，而且还可以独立部署，独立对外提供接口服务。大部分返回的数据是json格式。

这样的架构的好处是：某个模块的改动，不会影响（或者影响很小）其他系统模块；另一方面返回统一的数据结构，不同的客户端（pc、android、ios、html5）可以共用同一个接口；第三，微服务划分使得分布式扩展，容器化扩展更加方便，如果系统的某个模块访问量特别大，那么我们只需要对那一个微服务镜像多部署几个，就能提升性能。

 

2.前端微服务架构

说到微服务，首先想到的都是像springcloud、springboot、docker、k8s等这样的后端技术栈，而前端微服务却很少提及。

问题：

1.后端微服务返回json格式数据，每个客户端依然需要自己编写前端模板来展示数据。

2.不同的第三方系统可能会调用某个微服务，并嵌入到自己的系统中，依然需要写前端模板展示微服务接口返回的数据

 

构思：

1.能不能直接返回html模板，将微服务接口的数据展示好，直接使用

2.兼容Vue前端框架的路由

 

实现：

一、非vue第三方项目调用

直接引用编译后的js文件，可以将依赖库不打包，注意的引入方，需要有一个id与vue项目的渲染id一致，js文件加载之后，会自动加载到这个id的元素下

 

二、vue项目调用

主要思路：父框架要提供方法暴露路由，子模块获取父框架路由并注册进去

externalRoutes: [
      //外部引入的路由
      {
        path: '/external',
        redirect: '/permission/page',
        alwaysShow: true, // will always show the root menu
        name: 'external',
        url: 'http://localhost:8080/dist/column/static/js/app.bundle.js',
        description: '字段检测',
        meta: {
          title: '外部引入',
          icon: 'lock',
          roles: ['admin', 'editor'] // you can set roles in root nav
        },
        children: [
          {
            path: 'column',
            name: 'column',//name唯一，对应外部的路由
            meta: {
              title: 'column Demo',
              roles: ['admin']
            }
          },
          {
            path: 'stomp',
            name: 'StompDemo',//name唯一，对应外部的路由
            meta: {
              title: 'stomp Demo',
              roles: ['admin']
            }
          }
        ]
      }
    ]

window.addExternalRouters = function(routers){
  if(userExternalRoutes && userExternalRoutes.length>0){
    userExternalRoutes.forEach(item =>{
      item.component = Layout
    })
    routers.forEach(item => {
      insertComponent(item, userExternalRoutes)
    })

    
    for(const er of userExternalRoutes) {
      asyncRoutes.push(er)
    }
    
    resetRouter()
    router.addRoutes(asyncRoutes)
    store.dispatch('permission/generateRoutes', store.getters.roles)
  }
}

 

子模块注册

if(window.addExternalRouters){
  const exportRoutes = [
    {
      name: 'column',
      component: HelloWorld,
      description: '字段描述'
    },
    {
      name: 'StompDemo',
      component: StompDemo,
      description: 'socket长连接'
    }
  ]
  window.addExternalRouters(exportRoutes);
}

 

系统打开之后，首先要加载需要引入的前端微服务的js文件