基于Vue的前端微服务

作者 : admin 本文共1729个字,预计阅读时间需要5分钟 发布时间: 共32人阅读

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项目调用

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

  1. externalRoutes: [
  2. //外部引入的路由
  3. {
  4. path: ‘/external’,
  5. redirect: ‘/permission/page’,
  6. alwaysShow: true, // will always show the root menu
  7. name: ‘external’,
  8. url: ‘http://localhost:8080/dist/column/static/js/app.bundle.js’,
  9. description: ‘字段检测’,
  10. meta: {
  11. title: ‘外部引入’,
  12. icon: ‘lock’,
  13. roles: [‘admin’, ‘editor’] // you can set roles in root nav
  14. },
  15. children: [
  16. {
  17. path: ‘column’,
  18. name: ‘column’,//name唯一,对应外部的路由
  19. meta: {
  20. title: ‘column Demo’,
  21. roles: [‘admin’]
  22. }
  23. },
  24. {
  25. path: ‘stomp’,
  26. name: ‘StompDemo’,//name唯一,对应外部的路由
  27. meta: {
  28. title: ‘stomp Demo’,
  29. roles: [‘admin’]
  30. }
  31. }
  32. ]
  33. }
  34. ]

 

  1. window.addExternalRouters = function(routers){
  2. if(userExternalRoutes && userExternalRoutes.length>0){
  3. userExternalRoutes.forEach(item =>{
  4. item.component = Layout
  5. })
  6. routers.forEach(item => {
  7. insertComponent(item, userExternalRoutes)
  8. })
  9. for(const er of userExternalRoutes) {
  10. asyncRoutes.push(er)
  11. }
  12. resetRouter()
  13. router.addRoutes(asyncRoutes)
  14. store.dispatch(‘permission/generateRoutes’, store.getters.roles)
  15. }
  16. }

 

 

子模块注册

  1. if(window.addExternalRouters){
  2. const exportRoutes = [
  3. {
  4. name: ‘column’,
  5. component: HelloWorld,
  6. description: ‘字段描述’
  7. },
  8. {
  9. name: ‘StompDemo’,
  10. component: StompDemo,
  11. description: ‘socket长连接’
  12. }
  13. ]
  14. window.addExternalRouters(exportRoutes);
  15. }

 

 

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

 

 

 

 

 

 

 

 


滴石it网-Java学习中高级和架构师教程_Java企业级开发项目实战下载 » 基于Vue的前端微服务

常见问题FAQ

发表回复

开通VIP 享更多特权,建议使用QQ登录