简述
前后端分离已成为大中型项目开发的方式，通过HTML、AJAX、JSON有效地对前端和后端的开发进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（各种客户端，比如浏览器、车载终端、安卓、IOS等）打下坚实的基础。前后端分离的核心思想就是前端HTML页面通过AJAX调用后端的RESTFUL API接口，并通过JSON数据进行交互。
开发模式
简要项目开发流程
- 1、产品经理、前后端工程师、测试、ued进行需求评审
- 2、ued设计、前端技术选型、后端技术选型
- 3、前端开始开发样式、后端编写接口文档
- 4、前端根据接口文档开发数据处理逻辑、后端开始开发业务并自测
- 5、后端完成部署、提供较稳定开发环境供前端调试（可以提前搭建前后端部署环境）
- 6、前后端联调
- 7、提测、fix bug、发版
前端职责
- HTML页面的样式、数据展示、数据格式验证、前端操作逻辑
- 页面跳转路由
- 页面的兼容性和用户的体验
后端职责
- 暴露接口供前端获取数据
- 提供数据的存储、数据的安全验证、业务操作逻辑、输出数据
- 保证服务的高可用、可扩展、高响应等
注意
- 前后端分离并非仅仅是一种开发模式，而是一种架构模式（前后端分离架构）。前后端分离是需要区分前后端应用的，即前端和后端是两个应用，两个不同的工程，两个不同的代码库
- 前后端分离的部署方案见下一篇文章
前后端耦合的缺点（以JSP为例）
以前的JavaWeb项目大多数使用JSP作为页面层展示数据给用户，因为流量不高，因此也没有那么苛刻的性能要求，但现在对于互联网项目的性能要求是越来越高，因此原始的前后端耦合在一起的架构模式已经逐渐不能满足我们，因此我们需要找到一种解耦的方式，以大幅提升我们的负载能力。前后端耦合主要有以下的缺点：
- 1、动态资源和静态资源全部耦合在一起，服务器压力大，因为服务器会收到各种HTTP请求，例如CSS的HTTP请求，JS的，图片的等等。
- 2、UI出好设计图之后，前端开发工程师只负责将设计图切成HTML，需要由Java开发工程师来将HTML套成JSP页面，出错率较高（因为页面中经常会出现大量的JS代码），修改问题的时候需要双方协同开发，效率低下。
- 3、JSP页面必须要在支持Java的WEB服务器上运行（如Tomcat、Jetty、Resin等），无法使用Nginx等（官方宣称单实例HTTP并发高达5W），性能提升不上来。
- 4、第一次请求JSP，必须要在WEB服务器中编译成Servlet，第一次运行会较慢。然后之后的每次请求JSP都是访问Servlet再用输出流输出的HTML页面，效率没有直接使用HTML高（注意是每次）。
- 5.JSP内有较多内置的专属标签和表达式，前端开发工程师在修改页面时往往会挠头挠到秃头。
- 6、如果JSP中的内容很多，页面响应会很慢，因为是同步加载，一次输出所有内容。
- 7、修改JSP页面需要前端开发工程师使用Java的IDE以及配置各种后端的开发环境，对前端开发工程师极不友好。
前后端分离的优点：
- 1、前后端分离可以真正地实现前后端解耦。前端服务器放的是CSS、JS和图片等一系列静态资源（甚至可以把这些静态资源放到特定的文件服务器，如阿里云的OSS，并使用CDN加速）。前端服务器负责控制页面引用、跳转和路由，前端页面通过AJAX异步调用后端的接口，后端/应用服务（把风花雪月交给前端，只提供数据），加快整体响应数据。（这里需要使用一些前端工程化的框架，如NodeJS、React、Router、Webpack等）
- 2、前后端分离的模式下，如果发现Bug，可以快速定位问题。如果是页面逻辑、跳转错误、浏览器兼容性问题、脚本错误、页面样式等，通常是前端问题。如果是接口数据出错、数据提交失败、应答超时等问题，则是后端问题。
- 3、前后端分离在大并发的情况下，我们可以同时水平扩展前后端服务器。
- 4、前后端分离可以减少后端服务器的并发/负载压力。除了接口以外的其他所有HTTP请求全部转移到前端服务上。且除了第一次页面请求外，浏览器会大量调用本地缓存去缓存页面。
- 5、前后端分离的模式下，即使后端服务器暂时超时或宕机了，前端页面也会正常访问，只不过数据刷不出来而已。
- 6、前后端分离的模式下，后台的接口可以复用。比如需要做微信相关的轻应用，接口就完全可以共用，再比如说APP相关的服务，也可以只通过一些代码重构，就可以大量复用接口，提升开发效率。（多端应用）
- 7、页面显示再多的内容也不怕了，因为从同步加载改成了异步加载。
- 9、增加代码的维护性和易读性，提高开发效率（前后端代码耦合在一起很难读，比如JSP页面）。
- 10、前后端可以并行开发，提高开发效率。
前后端分离的注意事项
- 1、后端工程师需要制定好接口文档，写好测试用例（2个维度），不要让前端工程师充当你的专职测试。
- 2、前端需要一些框架来解决类似于页面嵌套，分页，页面跳转控制等功能。
- 3、以前还有人用类似于Freemarker等框架模板生成静态页面，个人觉得和使用JSP其实也相差不远，也就是性能好一点，没有实现真正的前后端分离。
- 4、如果页面上有一些权限等等相关的校验，这些相关的和数据也可以通过AJAX从接口里拿。
- 5、类似于数据校验这种，前后端都需要做。
- 6、前端需要有机制应对后端请求超时以及后端服务宕机的情况，友好地展示给客户。
前后端分离的扩展
- 1、对于JS、CSS、图片这类静态资源可以考虑放到类似于阿里云的OSS这类文件服务器上（如果是普通的服务器和操作系统，存储在到达PB级（1000TB）的文件后，或者单个文件夹内的文件数量达到3-5万，IO会有很严重的性能问题），再在OSS上配CDN（全国子节点加速），这样你页面打开的速度像飞一样，无论你在全国的哪个地方
- 2、如果遇到跨域问题，Spring4的CORS可以完美解决。
- 3、如果想玩多端应用，主要要去掉原生的session机制。要使用token机制，使用缓存（因为是分布式系统），做单点。
- 5、前端项目中可以加入mock测试（构造虚拟测试对象来模拟后端，可以独立开发和测试），后端则需要有详细的测试用例，保证服务的可用性和稳定性。
总结
- 前后端分离下，前后端开发工程师需要约定交互的接口，实现并行开发。而在开发结束之后，前端项目和后端项目都需要进行独立部署，前端通过AJAX来调用HTTP请求，调用后端的RESTFUL API。前端只需要关注页面的样式与动态数据的解析和渲染，不用关心数据是怎么产生的；后端则专注于具体的业务逻辑，返回前端展现所需要的业务数据即可。