前后端分离概述

背景

前后端分离模式是对MVC开发模式的优化与延续，前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。

MVC科普：model-view-controller
REST风格API设计原则

为什么要前后端分离

• 用户访问页面越来越慢
• 系统性能下降，数据库扛不住，连接数经常打满，最终数据库挂掉，重启后又快速挂掉
• 改了一个小地方，另外一个看似不相干的地方却挂了，严重耦合
• 互联网日趋移动化

开发模式的探索

以前的方式	新的方式
产品经历/领导/客户提出需求	产品经历/领导/客户提出需求
UI做出设计图	UI做出设计图
前端工程师做html页面	前后端约定接口&数据&参数
后端工程师将html页面套成jsp页面	前后端并行开发
集成出现问题	前后端集成
前端返工	前端页面调整
后端返工	集成成功
二次集成	交付
集成成功
交付

请求方式的改变

以前的方式	新的方式
客户端请求	浏览器发送请求
服务端的servlet或controller接收请求	直接到达html页面
调用service,dao代码完成业务逻辑	html页面负责调用服务端接口产生数据
返回jsp	填充html，展现动态效果，在页面上进行解析并操作DOM。
jsp展现一些动态的代码

前后端分离褒贬的讨论

需要前后端分离场景

1. 前端变化远比后端变化频繁
2. 尚处于原始开发模式，数据逻辑与表现逻辑混杂不清
3. 前端效果绚丽/跨设备兼容要求高

前后分离的优势：

1. 可以实现真正的前后端解耦，前端服务器使用nginx。
2. 发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。
3. 在大并发情况下，可以同时水平扩展前后端服务器。
4. 减少后端服务器的并发/负载压力
5. 即使后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。
6. 多端应用
7. 页面显示的东西再多也不怕，因为是异步加载。
8. nginx支持页面热部署，不用重启服务器，前端升级更无缝。
9. 增加代码的维护性&易读性（前后端耦在一起的代码读起来相当费劲）。
10. 提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。
11. 在nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），
    内网使用http，性能和安全都有保障。
12. 前端大量的组件代码得以复用，组件化，提升开发效率，抽出来！

注意事项：

1. 在开需求会议的时候，前后端工程师必须全部参加，并且需要制定好接口文档，后端工程师要写好测试用例（2个维度）
2. 上述的接口并不是java里的interface，说白了调用接口就是调用你controler里的方法。
3. 加重了前端团队的工作量，减轻了后端团队的工作量，提高了性能和可扩展性。
4. 我们需要一些前端的框架来解决类似于页面嵌套，分页，页面跳转控制等功能。
5. 如果页面上有一些权限等等相关的校验，那么这些相关的数据也可以通过ajax从接口里拿。
6. 前端需要有机制应对后端请求超时以及后端服务宕机的情况，友好的展示给用户。