前端微服务一站式解决方案-不是切页面就是微服务

• 需求背景多系统集成
• 常见解决方法，iframe,ng代理，single-spa（乾坤）
• 为啥不用iframe能规避好多问题，技术没有前瞻性，体验差
• 自以为的解决方案跑个demo以为这以为那，其实真实的业务场景远远比自己想想的要复杂（说的就是我自己）
• 除了前端的兼容性问题，服务端的监控管理更为重要

(前端)子项目的umi的工程注意事项

• 移除子项目的头部配置项 headerRender:false, logo去除,头部样式padding调整高度不能被主工程头部遮挡 
• 样式慎用position：fixed 会影响到父工程 
• 样式污染，注意使用css-scoped, 全局body样式之类谨慎操作 ，尤其是同时使用同一个ant这样的ui框架，慎重修改原有组件的全局样式
• 给 body 、 document 等绑定的事件，请在 unmount 周期清除  
• localStorage等全局数据储存修改谨慎操作，子工程内部建议添加命名空间不与其他工程冲突

(前端)qiankun微服务特性代码与本地独立服务代码区分

• 建议使用cross-env qiankun=xx 环境变量加以区分以保证兼容性（实际场景由子服务自行决定）
• 举例个别场景实际开发中，还是是否为qiankun为判断准则
• 配置项中 outputPath: process.env.qiankun?'./dist/crm':'./dist'
• 项目模板中（id为root的div渲染会有影响建议判断）<% if (!process.env.qiankun) { %> <% } %> 
• 部分样式
• 容器修改适配性
• 半个小时是肯定改不完的

（前端）工程通信(其他api暂时用不到，详见通信文档飞冰)

父工程

• import { store } from '@ice/stark-data'; store.set('yzf_cloud_market_user', userInfo); 
• 设置登录后当前用户信息 localstorage.setItem('yzf_cloud_market_user',userInfo) 

子工程 

• 子应用 import { store } from '@ice/stark-data'; // 获取当前用户（需要对数据进行格式化JSON.parse(userInfo)）
• 方式一：const userInfo = store.get('yzf_cloud_market_user'); 
• 方式二：const userInfo = localStorage.getItem('yzf_cloud_market_user')

（后端）系统监控与接口管理（从不甘愿只做眼前的事情）

• 由于子工程的请求会发送到主工程的后端，

     这件事有两个解决方案第一子应用请求全路径 第二前端对请求进行拦截主工程反向代理 还有一个突出的问题就去请求命名空间的问题，不能所有的请求都请求/api

• 虽然是前端微服务，所有子服务状态不可知，所有路径不可管控
• 解决方案使用自建的注册中心和网关
• 技术选型注册中心使用consul（无需依赖）实在受不了那些依赖java等等，后端微服务还好都是基于spring无所谓，前端微服务就更加需要独立性与兼容性，所以选择consul
• 网关使用nodejs通过跟注册中心交互获取，节点与代理状态，实时更新内部请求分发与接口管理
• 支持多种场景如果不想使用nodejs作为部署服务，也可以使用nodejs根据注册中心信息生成nginx配置文件
• 服务监控告警实时通知钉钉