前戏
前后端分离已成为互联网项目开拓的业界标准利用办法，通过nginx+tomcat的办法（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为往后的大型分布式架构、弹性打算架构、微做事架构、多端化做事（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的根本。这个步骤是系统架构从猿进化成人的必经之路。
核心思想是前端html页面通过ajax调用后真个restuful api接口并利用json数据进行交互。
名词阐明：
在互联网架构中，
web做事器：一样平常指像nginx，apache这类的做事器，他们一样平常只能解析静态资源。
运用做事器：一样平常指像tomcat，jetty，resin这类的做事器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web做事器好。
一样平常都是只有web做事器才能被外网访问，运用做事器只能内网访问。
术业有专攻（开拓职员分离）
以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/oracle等等）。
随着时期的发展，逐渐的许多大中小公司开始把前后真个界线分的越来越明确，前端工程师只管前真个事情，后端工程师只管后真个事情。
正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。
大中型公司须要专业人才，小公司须要全才，但是对付个人职业发展来说，我建议是分开。
对付后端java工程师：
把精力放在java根本，设计模式，jvm事理，spring+springmvc事理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构（dubbo，dubbox，spring cloud），弹性打算架构，微做事架构（springboot+zookeeper+docker+jenkins），java性能优化，以及干系的项目管理等等。
后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。
对付前端工程师：
把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化等等。
前端追求的是：页面表现，速率流畅，兼容性，用户体验等等。
术业有专攻，这样你的核心竞争力才会越来越高，正所谓你往生活中投入什么，生活就会反馈给你什么。
并且两端的发展都越来越博识，你想什么都会，那你毕竟什么都不精。
通过将team分成前后端team，让两边的工程师更加专注各自的领域，独立管理，然后构建出一个全栈式的精益求精的team。
原始人时期（各种耦合）
几曾何时，我们的JavaWeb项目都是利用了多少后台框架，springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。
大多数项目在java后端都是分了三层，掌握层（controller/action），业务层（service/manage），持久层（dao）。
掌握层卖力吸收参数，调用干系业务层，封装数据，以及路由&渲染到jsp页面。
然后jsp页面上利用各种标签（jstl/el/struts标签等）或者手写java表达式（<%=%>）将后台的数据展现出来，玩的是MVC那套思路。
我们先看这种情形：需求定完了，代码写完了，测试测完了，然后呢？要发布了吧？
你须要用maven或者eclipse等工具把你的代码打成一个war包，然后把这个war包发布到你的生产环境下的web容器（tomcat/jboss/weblogic/websphere/jetty/resin）里，对吧？
发布完了之后，你要启动你的web容器，开始供应做事，这时候你通过配置域名，dns等等干系，你的网站就可以访问了（假设你是个网站）。
那我们来看，你的前后端代码是不是全都在那个war包里？包括你的js，css，图片，各种第三方的库，对吧？
好，下面在浏览器中输入你的网站域名（www.xxx.com），之后发生了什么？（这个问题也是很多公司的口试题）
我捡干的说了啊，根本不好的童鞋请自己去搜。
浏览器在通过域名通过dns做事器找到你的做事器外网ip,将http要求发送到你的做事器，在tcp3次握手之后（http下面是tcp/ip），通过tcp协议开始传输数据，你的做事器得到要求后，开始供应做事，吸收参数，之后返回你的应答给浏览器，浏览器再通过content-type来解析你返回的内容，呈现给用户。
那么我们来看，我们先假设你的首页中有100张图片，此时，用户的看似一次http要求，实在并不是一次，用户在第一次访问的时候，浏览器中不会有缓存，你的100张图片，浏览器要连着要求100次http要求（有人会跟我说http长连短连的问题，不在这里谈论），你的做事器吸收这些要求，都须要耗费内存去创建socket来玩tcp传输（花费你做事器上的打算资源）。
重点来了，这样的话，你的做事器的压力会非常大，由于页面中的所有要求都是只要求到你这台做事器上，如果1个人还好，如果10000个人并发访问呢（先不聊做事器集群，这里就说是单实例做事器），那你的做事器能扛住多少个tcp连接？你的带宽有多大？你的做事器的内存有多大？你的硬盘是高性能的吗？你能抗住多少IO？你给web做事器分的内存有多大？会不会宕机？
这便是为什么，越是大中型的web运用，他们越是要解耦。
理论上你可以把你的数据库+运用做事+行列步队+缓存+用户上传的文件+日志+等等都扔在一台做事器上，你也不用玩什么做事管理，也不用做什么性能监控，什么报警机制等等，就乱成一锅粥好了。
但是这样就彷佛是你把鸡蛋都放在一个篮子里，隐患非常大。如果由于一个子运用的内存不稳定导致全体做事器内存溢出而hung住，那你的全体网站就挂掉了。
如果出意外挂掉，而恰好这时你们的业务又处于井喷式发展高峰期，那么恭喜你，业务成功被技能卡住，很可能会流失落大量用户，后果不堪设想。
把稳：技能一定是要走在业务前面的，否则你将错过最佳的发展期哟，亲~
此外，你的运用全部都耦合在一起，相称于一个巨石，当做事端负载能力不敷时，一样平常会利用负载均衡的办法，将做事器做成集群，这样实在你是在水平扩展一块块巨石，性能加速度会越来越低，
要知道，本身负载就低的功能or模块是没有必要水平扩展的，在本文中的例子便是你的性能瓶颈不在前端，那干嘛要水平扩展前端呢？？？
还有发版支配上线的时候，我明明只改了后真个代码，为什么要前端也随着发布呢？？？（引用：《架构探险-轻量级微做事架构》，黄勇）
正常的互联网架构，是都要拆开的，你的web做事器集群，你的运用做事器集群+文件做事器集群+数据库做事器集群+行列步队集群+缓存集群等等。
JSP的痛点
以前的javaWeb项目大多数利用jsp作为页面层展示数据给用户，由于流量不高，因此也没有那么苛刻的性能哀求，但现在是大数据时期，对付互联网项目的性能哀求是越来越高，
因此原始的前后端耦合在一起的架构模式已经逐渐不能知足我们，因此我们须要需找一种解耦的办法，来大幅度提升我们的负载能力。
1.动态资源和静态资源全部耦合在一起，做事器压力大，由于做事器会收到各种http要求，例如css的http要求，js的，图片的等等。
一旦做事器涌近况态，前后台一起玩完，用户体验极差。
2.UI出好设计图后，前端工程师只卖力将设计图切成html，须要由java工程师来将html套成jsp页面，出错率较高（由于页面中常常会涌现大量的js代码），
修正问题时须要双方协同开拓，效率低下。
3.jsp必须要在支持java的web做事器里运行（例如tomcat，jetty，resin等），无法利用nginx等（nginx听说单实例http并发高达5w，这个上风要用上），
性能提不上来。
4.第一次要求jsp，必须要在web做事器中编译成servlet，第一次运行会较慢。
5.每次要求jsp都是访问servlet再用输出流输出的html页面，效率没有直策应用html高（是每次哟，亲~）。
6.jsp内有较多标签和表达式，前端工程师在修正页面时会捉襟见肘，碰着很多痛点。
7.如果jsp中的内允许多，页面相应会很慢，由于是同步加载。
8.须要前端工程师利用java的ide（例如eclipse），以及须要配置各种后真个开拓环境，你们有考虑过前端工程师的感想熏染吗。
基于上述的一些痛点，我们该当把全体项目的开拓权重往前移，实现前后端真正的解耦！
开拓模式
以前老的办法是：
1.产品经历/领导/客户提出需求
2.UI做出设计图
3.前端工程师做html页面
4.后端工程师将html页面套成jsp页面（前后端强依赖，后端必须要等前真个html做好才能套jsp。如果html发生变更，就更痛了，开拓效率低）
5.集成涌现问题
6.前端返工
7.后端返工
8.二次集成
9.集成成功
10.交付
新的办法是：
1.产品经历/领导/客户提出需求
2.UI做出设计图
3.前后端约定接口&数据&参数
4.前后端并行开拓（无强依赖，可前后端并行开拓，如果需求变更，只要接口&参数不变，就不用两边都修正代码，开拓效率高）
5.前后端集成
6.前端页面调度
7.集成成功
8.交付
要求办法
以前老的办法是：
1.客户端要求
2.做事真个servlet或controller吸收要求（后端掌握路由与渲染页面，全体项目开拓的权重大部分在后端）
3.调用service,dao代码完成业务逻辑
4.返回jsp
5.jsp展现一些动态的代码
新的办法是：
1.浏览器发送要求
2.直接到达html页面（前端掌握路由与渲染页面，全体项目开拓的权重前移）
3.html页面卖力调用做事端接口产生数据（通过ajax等等，后台返回json格式数据，json数据格式由于简洁高效而取代xml）
4.添补html，展现动态效果，在页面上进行解析并操作DOM。
（有兴趣的童鞋可以访问一下阿里巴巴等大型网站，然后按一下F12，监控一下你刷新一次页面，他的http是怎么玩的，大多数都是单独要求后台数据，
利用json传输数据，而不是一个大而全的http要求把全体页面包括动+静全部返回过来）
总结一下新的办法的要求步骤：
大量并发浏览器要求--->web做事器集群(nginx)--->运用做事器集群(tomcat)--->文件/数据库/缓存/行列步队做事器集群
同时又可以玩分模块，还可以按业务拆成一个个的小集群，为后面的架构升级做准备。
前后分离的上风
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。前端只须要关注页面的样式与动态数据的解析&渲染，而后端专注于详细业务逻辑。
来源:http://suo.im/4wqRi7 作者:杨明翰
