1.关于前后端分离
1.1.为什么前后端分离
- 在这个看脸的时代，对页面的要求越来越高
- 前端技术栈更新速度太快，Angluar、React、Vue、Webpack、Gulp等等，这版本还没用溜又出新版本了，不少前端同学控诉学不过来
- 后端技术栈同样不甘示弱，分布式、微服务、容器化、大数据处理、AI等等，一个坑还没跳完又来一个，后端同学表示压力也很大
- 招一个优秀的全栈比招一个优秀的前端加一个优秀的后端难
- 前端到后端流水线，切分成两部分，两端同时开工，便于加快工程进度
1.2.什么是伪分离
- 前端同学出静态页面，后端拿过去填后台交互部分，前端同学交付的并不是成品
- 前端同学在后端工程（以Java为例）里面写页面，还得装JDK环境，还得会点Java,maven,Spring等后端知识
1.3.理想的前后端分离
- 前端工程是单独的工程，有自己的提交历史，不需要在后端工程里挣扎
- 前后端只有接口的交互，前端同学提供的是成品，这样前端能看到最终的界面
- 前端本地开发只需要前端相关的技术栈，比如本地用Node.js启动服务
- 如果用Spring Cloud技术栈的话，希望前端工程能自动发现后端服务，能根据url自动路由到对应的服务
1.4.备注
并不是所有系统都适合前后端分离，情况很多，讨论什么样的系统适合做分离不是本文的重点，本文只讨论需要前后端分离的项目，且基于Spring Cloud与Vue架构的系统，对其他前端JS框架应该也有借鉴意义，但时间有限，并没有做测试。
2.分离设计
以微服务平台为例（简称msp），基于Vue+Spring Boot+Spring Cloud
2.1.工程
- msp-vue
vue-cli初始化的工程，前端页面源码 - msp-portal
用zuul开发的一个定制化代理服务，将msp-vue打包后dist目录下的内容，通过Jenkins自动拷贝到msp-portal/src/main/resources/static/ - 其他后端服务
2.2.步骤
- 前端人员提交代码到GitLab里的msp-vue项目
- GitLab里的msp-vue项目收到push请求，自动触发Jenkins里的msp-vue任务
- Jenkins里msp-vue任务，npm build生成静态页面目录dist
- Jenkins里msp-vue任务，拉取GitLab里的msp-portal代码，清空其静态内容目录，并将上步产生的dist目录内容拷贝到msp-portal静态内容目录
- Jenkins里msp-vue任务，push组装后的msp-portal代码到GitLab
- Jenkins里的msp-vue任务完成后，自动触发Jenkins里的msp-portal任务，构建成jar并发布到对应的服务器
2.3.Jenkins配置
2.3.1.msp-vue
msp-vue-1.png
msp-vue-2.png
msp-vue-3.png
msp-vue-4.png
2.3.2.msp-portal
msp-portal-1.png
msp-portal-2.png
msp-portal-3.png
2.4 代码示例
2.4.1.msp-portal
gitlab-msp-portal-1.png
gitlab-msp-portal-2.png
2.4.2.msp-vue
gitlab-msp-vue-1.png
