前后端分离的结构性设计

一、前言

Node 的横空出世，使得前端独立开发成为可能；React / Vue 的迅速普及，使得前后端分离越来越流行。

本文以 Vue 框架为基础，从 Why-前后端分离的意义 与 How-如何进行前后端分离 两个维度进行介绍前后端分离。

二、Why - 前后端分离的意义

反向思考 - 前后端融合的痛点：

1. web 项目的样式与交互功能越来越复杂，对 Java 工程师的前端技术要求越来越高，渐渐地需要专门的前端工程师进行专业化开发。
2. 大部分项目，前端的变化频率常常远大于后台的变化频率，使得前端工程单独部署的需求度越来越高。
3. 很多项目场景同时存在 PC 与 Mobile 两套前端项目工程，而只需要一套后台项目工程。

而将前后端分离，能很好地解决以上几点痛点。

三、How - 如何进行前后端分离

前后端分离的基本逻辑：

1. 部署：前后端单独部署，即前端有一套完整的组件化、构建、发布、依赖管理，后端也有一套。

2.交互：前后端交互的唯一桥梁是 RESTful API ：

3. 路由：网页的路由切换由前端控制，即单页面应用。

整体开发流程：

前端开发流程：

1. 项目初始化：使用 Vue CLI 做前端项目的基本构建(本地需预安装 Node.js )。
2. 内容开发 -- 用到的相关技术:
   1. 核心技术栈：Vue + Vuex + Vue Router。
   2. UI 组件库：ElementUI / iView。
   3. 可视化库：G2 / Echarts (用于常规图表的快速开发) + D3(用于定制化的图表开发)。
   4. 其他常用库：函数库 - Lodash；日期处理库 - moment；ajax 库 - axios。
3. 数据联调：
   1. 前后端分离的开发，前端与后台的 API 接口交互采用 RESTful 架构（规范参考），即GET用来获取资源，POST 用来新建资源（也可以用于更新资源），PUT 用来更新资源，DELETE 用来删除资源。
   2. 在前端开发进度快于后台时，前端可自己 Mock 数据，以快速开发；待后端接口 OK 后，再将 Mock 数据改为后台提供的 API 接口 (如可使用 easy-mock 进行数据的 Mock)。
4. 静态资源的引入：图片等静态资源可统一放于 CDN。
5. 项目构建：使用 Webpack。
6. 项目发布：
   1. 手动发布： 将 webpack 打包好的项目手动部署到服务器的 web 容器或 nginx 服务器中。
   2. 自动发布：原理：在 git 仓库中设置钩子函数，通过命令行操作，远程操作将 git 仓库指定分支的最新代码在服务器打包，并自动发布、部署。

四、小结

前后端分离使得产品能更好地适应于复杂多变的业务场景，但 Vue/React 等框架的单页面应用的 SEO 成本更高。