前后端分离

传统的管理系统通常将前端页面显示与后端接口开发放在一起，后端开发需要花很大精力在页面调试上。术业有专攻，前后端分离可以让开发人员对前后端的优化达到最好的状态，现在大部分通过nginx+nodejs+tomcat进行分开部署，这为后续的分布式架构、弹性计算架构、多端化服务（PC浏览器、手机浏览器、车载终端、移动端）打下服务解耦的坚实基础，其核心思想就是前端通过ajax调用后端API进行交互，涉及一些跨域问题。但是对于小型内部业务，比如OA管理系统，前后端分离会极大的加大开发成本。

部署

应用服务器：后端一般部署在应用服务器中，一般有tomcat、jetty，resin这类服务器可以解析动态资源或静态资源。Springboot内部自带jetty服务容器。

Web服务器：前端分离后，服务一般部署在Nginx、Apache这类服务器，一般只能解析静态资源。

优点

后端可以把精力集中在业务改进，模式设计，方案优化，代码优化，熟悉底层后端编程语言的原理、数据库事务以及对应的锁机制、多线程与多进程与对应的锁机制、TCP/RPC/UDP通信、分布式架构、弹性计算架构、微服务架构、高并发、高可用、安全、存储架构、性能优化以及项目管理等。

 

前端则可以把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化、用户体验、流畅性等等

 

开发流程上，前后端分离实现了前后端并行开发的目的，能够实现大型项目的快速迭代。

 

请求方式上，大量并发请求 -> Web服务集群（Nginx）-> 后端服务集群（tomcat）-> 文件服务器（NFS、OOS、FastDFS、ftp、rsync+sersync+web文件服务器）/消息队列/数据库集群。

缺点

前后端分离的缺点也是显而易见的就是由于部门分新增需求的提测过程相对麻烦。迭代更新较慢。

 

前后分离的优势

 

1、可以实现真正的前后端解耦，前端服务器使用nginx。前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还可以css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快整体响应速度。（这里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack）

 

2、发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。双方互不干扰，前端与后端是相亲相爱的一家人。

 

3、在大并发情况下，我可以同时水平扩展前后端服务器，比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。（去参加阿里的技术峰会，听他们说他们的web容器都是自己写的，就算他单实例抗10万http并发，2000台是2亿http并发，并且他们还可以根据预知洪峰来无限拓展，很恐怖，就一个首页。。。）

 

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

 

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

 

6、也许你也需要有微信相关的轻应用，那样你的接口完全可以共用，如果也有app相关的服务，那么只要通过一些代码重构，也可以大量复用接口，提升效率。（多端应用）

 

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

 

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

 

9、增加代码的维护性&易读性（前后端耦在一起的代码读起来相当费劲）。

 

10、提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。

 

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

 

12、前端大量的组件代码得以复用，组件化，提升开发效率，抽出来！

 

注意事项

1、在开需求会议的时候，前后端工程师必须全部参加，并且需要制定好接口文档，后端工程师要写好测试用例（2个维度），不要让前端工程师充当你的专职测试，推荐使用chrome的插件postman或soapui或jmeter，service层的测试用例拿junit写。ps：前端也可以玩单元测试吗？

 

2、上述的接口并不是java里的interface，说白了调用接口就是调用你controler里的方法。

 

3、加重了前端团队的工作量，减轻了后端团队的工作量，提高了性能和可扩展性。

 

4、我们需要一些前端的框架来解决类似于页面嵌套，分页，页面跳转控制等功能。（上面提到的那些前端框架）。

 

5、如果你的项目很小，或者是一个单纯的内网项目，那你大可放心，不用任何架构而言，但是如果你的项目是外网项目，呵呵哒。

 

6、 以前还有人在使用类似于velocity/freemarker等模板框架来生成静态页面，仁者见仁智者见智。

 

7、这篇文章主要的目的是说jsp在大型外网java web项目中被淘汰掉，可没说jsp可以完全不学，对于一些学生朋友来说，jsp/servlet等相关的java web基础还是要掌握牢的，不然你以为springmvc这种框架是基于什么来写的？

 

8、如果页面上有一些权限等等相关的校验，那么这些相关的数据也可以通过ajax从接口里拿。

 

9、对于既可以前端做也可以后端做的逻辑，我建议是放到前端，为什么？因为你的逻辑需要计算资源进行计算，如果放到后端去run逻辑，则会消耗带宽&内存&cpu等等计算资源，你要记住一点就是服务端的计算资源是有限的，而如果放到前端，使用的是客户端的计算资源，这样你的服务端负载就会下降（高并发场景）。类似于数据校验这种，前后端都需要做！

 

10、前端需要有机制应对后端请求超时以及后端服务宕机的情况，友好的展示给用户。

 

九、扩展阅读

1、其实对于js，css，图片这类的静态资源可以考虑放到类似于阿里云的oss这类文件服务器上（如果是普通的服务器&操作系统，存储在到达pb级的文件后，或者单个文件夹内的文件数量达到3-5万，io会有很严重的性能问题），再在oss上配cdn（全国子节点加速），这样你页面打开的速度像飞一样， 无论你在全国的哪个地方，并且你的nginx的负载会进一步降低。

 

2、如果你要玩轻量级微服务架构，要使用nodejs做网关，用nodejs的好处还有利于seo优化，因为nginx只是向浏览器返回页面静态资源，而国内的搜索引擎爬虫只会抓取静态数据，不会解析页面中的js，这使得应用得不到良好的搜索引擎支持。同时因为nginx不会进行页面的组装渲染，需要把静态页面返回到浏览器，然后完成渲染工作，这加重了浏览器的渲染负担。浏览器发起的请求经过nginx进行分发，URL请求统一分发到nodejs，在nodejs中进行页面组装渲染；API请求则直接发送到后端服务器，完成响应。

 

3、如果遇到跨域问题，spring4的CORS可以完美解决，但一般使用nginx反向代理都不会有跨域问题，除非你把前端服务和后端服务分成两个域名。JSONP的方式也被淘汰掉了。

 

4、如果想玩多端应用，注意要去掉tomcat原生的session机制，要使用token机制，使用缓存（因为是分布式系统），做单点，对于token机制的安全性问题，可以搜一下jwt。

 

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

 

总结

前后端分离并非仅仅只是一种开发模式，而是一种架构模式（前后端分离架构）。千万不要以为只有在撸代码的时候把前端和后端分开就是前后端分离了，需要区分前后端项目。前端项目与后端项目是两个项目，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员。前后端工程师需要约定交互接口，实现并行开发，开发结束后需要进行独立部署，前端通过ajax来调用http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染，而后端专注于具体业务逻辑。