Vue进阶(二)了解前后端分离演变史
前后端分离的演变史
1.后端为主的 MVC 时代
为了降低开发的复杂度，以后端为出发点，比如：Struts、SpringMVC 等框架的使用，就是后端的 MVC 时代;
SpringMVC 流程：
- 发起请求到前端控制器( DispatcherServlet )
- 前端控制器请求 HandlerMapping 查找 Handler ，可以根据 xml 配置、注解进行查找 处理器映射器 HandlerMapping 向前端控制器返回 Handler
- 前端控制器调用处理器适配器去执行 Handler
- 处理器适配器去执行 Handler
- Handler 执行完成给适配器返回 ModelAndView
- 处理器适配器向前端控制器返回 ModelAndView ， ModelAndView 是 SpringMVC 框架的一个底层对象，包括 Model 和 View
- 前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图( JSP )
- 视图解析器向前端控制器返回 View
- 前端控制器进行视图渲染，视图渲染将模型数据(在 ModelAndView 对象中)填充到 request域
- 前端控制器向用户响应结果
优点：
MVC 是一个非常好的协作模式，能够有效降低代码的耦合度，从架构上能够让开发者明白代码应该写在 哪里。为了让 View 更纯粹，还可以使用 Thymeleaf、Freemarker 等模板引擎，使模板里无法写入 Java 代码，让前后端分工更加清晰。单体应用！
缺点：
前端开发重度依赖开发环境，开发效率低，这种架构下，前后端协作有两种模式：
- 第一种是前端写 DEMO，写好后，让后端去套模板。好处是 DEMO 可以本地开发，很高效。不足是
还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大； - 另一种协作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发。好处是 UI 相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境，环境成为影响前端开 发效率的重要因素。
前后端职责纠缠不清：模板引擎功能强大，依旧可以通过拿到的上下文变量来实现各种业务逻辑。这 样，只要前端弱势一点，往往就会被后端要求在模板层写出不少业务代码。还有一个很大的灰色地带是Controller ，页面路由等功能本应该是前端最关注的，但却是由后端来实现。 Controller 本 身与 Model 往往也会纠缠不清，看了让人咬牙的业务代码经常会出现在 Controller 层。这些问题不能全归结于程序员的素养，否则 JSP 就够了。
注： 在这期间（2005 年以前），包括早期的 JSP、PHP 可以称之为 Web 1.0 时代。在这里想说一句， 如果你是一名 Java 初学者，请你不要再把一些陈旧的技术当回事了，比如 JSP，因为时代在变、技术在 变、什么都在变（引用扎克伯格的一句话：唯一不变的是变化本身）；
2.基于 AJAX 带来的 SPA 时代
时间回到 2005 年 AJAX （Asynchronous JavaScript And XML，异步 JavaScript 和 XML，老技术新 用法） 被正式提出并开始使用 CDN 作为静态资源存储，于是出现了 JavaScript 王者归来（在这之前 JS 都是用来在网页上贴狗皮膏药广告的）的 SPA（Single Page Application）单页面应用时代。
交互流程图
优点：
这种模式下，前后端的分工非常清晰，前后端的关键协作点是 AJAX 接口。看起来是如此美妙，但回过 头来看看的话，这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript，浏览器 端变得很复杂。类似 Spring MVC，这个时代开始出现浏览器端的分层架构：
缺点：
- 前后端接口的约定： 如果后端的接口一塌糊涂，如果后端的业务模型不够稳定，那么前端开发会很 痛苦；不少团队也有类似尝试，通过接口规则、接口平台等方式来做。有了和后端一起沉淀的 接口 规则，还可以用来模拟数据，使得前后端可以在约定接口后实现高效并行开发。
- 前端开发的复杂度控制： SPA 应用大多以功能交互型为主，JavaScript 代码过十万行很正常。大量 JS 代码的组织，与 View 层的绑定等，都不是容易的事情。
3.前端为主的 MV* 时代
此处的 MV* 模式如下：
- MVC（同步通信为主）：
Model、View、Controller - MVP（异步通信为主）：
Model、View、Presenter - MVVM（异步通信为主）：
Model、View、ViewModel
为了降低前端开发复杂度，涌现了大量的前端框架，比如： AngularJS 、 React 、Vue.js 、 EmberJS 等，这些框架总的原则是先按类型分层，比如 Templates、Controllers、Models，然后再在层内做切分，如下图：
优点： - 前后端职责很清晰： 前端工作在浏览器端，后端工作在服务端。清晰的分工，可以让开发并行，测试数据的模拟不难，前端可以本地开发。后端则可以专注于业务逻辑的处理，输出 RESTful等接 口。
- 前端开发的复杂度可控： 前端代码很重，但合理的分层，让前端代码能各司其职。这一块蛮有意思的，简单如模板特性的选择，就有很多很多讲究。并非越强大越好，限制什么，留下哪些自由，代码应该如何组织，所有这一切设计，得花一本书的厚度去说明。
- 部署相对独立： 可以快速改进产品体验
缺点：
- 代码不能复用。比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码。如果可 以复用，那么后端的数据校验可以相对简单化。
- 全异步，对 SEO 不利。往往还需要服务端做同步渲染的降级方案。
- 性能并非最佳，特别是移动互联网环境下。
- SPA 不能满足所有需求，依旧存在大量多页面应用。URL Design 需要后端配合，前端无法完全掌 控。