基于Spring Cloud与Vue架构的系统前后端分离方案

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.步骤

1. 前端人员提交代码到GitLab里的msp-vue项目
2. GitLab里的msp-vue项目收到push请求，自动触发Jenkins里的msp-vue任务
3. Jenkins里msp-vue任务，npm build生成静态页面目录dist
4. Jenkins里msp-vue任务，拉取GitLab里的msp-portal代码，清空其静态内容目录，并将上步产生的dist目录内容拷贝到msp-portal静态内容目录
5. Jenkins里msp-vue任务，push组装后的msp-portal代码到GitLab
6. 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