前后端分离

1、定义：通过nginx+tomcat的方式（也可以中间加一个nodejs）将前后端进行有效的解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。

 

2、核心思想：前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。

 

3、服务器划分

（1）Web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。

（2）应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。

（3）一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。

 

4、前后端分工

（1）后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。

（2）前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。

 

5、开发模式

（1）产品经理/领导/客户提出需求

（2）UI做出设计图

（3）前后端约定接口&数据&参数

（4）前后端并行开发（无强依赖，可前后端并行开发，如果需求变更，只要接口&参数不变，就不用两边都修改代码，开发效率高）

（5）前后端集成

（6）前端页面调整

（7）集成成功

（8）交付

 

 6、请求方式

大量并发浏览器请求--->web服务器集群(nginx)--->应用服务器集群(tomcat)--->文件/数据库/缓存/消息队列服务器集群

 

7、前后端分离的优势

（1）前端服务器使用nginx，存放的是css，js，图片等等一系列静态资源，负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快整体响应速度（这里需要使用一些前端工程化的框架比如nodejs，react，router，redux，webpack）。

（2）减少后端服务器的并发/负载压力，除了接口以外的其他所有http请求全部转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。且除了第一次页面请求外，浏览器会大量调用本地缓存。

（3）即使后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。

（4）页面显示的东西再多也不怕，因为是异步加载。

（5）nginx支持页面热部署，不用重启服务器，前端升级更无缝。

（6）nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），内网使用http，性能和安全都有保障。

 

 8、总结

（1）如果遇到跨域问题，Spring4的CORS可以完美解决，但一般使用nginx反向代理都不会有跨域问题，除非你把前端服务和后端服务分成两个域名。

（2）前端项目中可以加入mock测试（构造虚拟测试对象来模拟后端，可以独立开发和测试），后端需要有详细的测试用例，保证服务的可用性与稳定性。

（3）前端只需要关注页面的样式与动态数据的解析&渲染，而后端专注于具体业务逻辑。