前后端分离架构，超全⾯详解～
此⽂通俗易懂，全⾯讲解前后端分离架构核⼼思想与作⽤，对学习微服务、开发企业项⽬⼤有裨益，建议收藏细品，好好领悟！~
⼀、简介
前后端分离已成为互联⽹项⽬开发的业界标准使⽤⽅式，通过nginx+tomcat的⽅式（也可以中间加⼀个nodejs）有效的进⾏解耦，并且前后端分离会为以后的⼤型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成⼈的必经之路。
核⼼思想是前端html页⾯通过ajax调⽤后端的restuful api接⼝并使⽤json数据进⾏交互。
⼆、术业有专攻（开发⼈员分离）
以前的JavaWeb项⽬⼤多数都是java程序员⼜当爹⼜当妈，⼜搞前端，⼜搞后端。
随着时代的发展，渐渐的许多⼤中⼩公司开始把前后端的界限分的越来越明确，前端⼯程师只管前端的事情，后端⼯程师只管后端的事情。正所谓术业有专攻，⼀个⼈如果什么都会，那么他毕竟什么都不精。
⼤中型公司需要专业⼈才，⼩公司需要全才，但是对于个⼈职业发展来说，我建议是分开。
1、对于后端java⼯程师：
把精⼒放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机
制，mongodb，http/tcp，多线程，分布式架构，弹性计算架构，微服务架构，java性能优化，以及相关的项⽬管理等等。
三⾼（⾼并发，⾼可⽤，⾼性能），安全，存储，业务等等。
后端追求的是：三⾼（⾼并发，⾼可⽤，⾼性能），安全，存储，业务等等
后端追求的是：
jquery是什么有什么作用2、对于前端⼯程师：
把精⼒放在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后端都是分了三层，控制层，业务层，持久层。控制层负责接收参数，调⽤相关业务层，封装数据，以及路由&渲染到jsp页⾯。然后jsp页⾯上使⽤各种标签或者⼿写java表达式将后台的数据展现出来，玩的是MVC那套思路。
我们先看这种情况：需求定完了，代码写完了，测试测完了，然后呢？要发布了吧？你需要⽤maven或者eclipse等⼯具把你我们先看这种情况：
的代码打成⼀个war包，然后把这个war包发布到你的⽣产环境下的web容器⾥，对吧？
发布完了之后，你要启动你的web容器，开始提供服务，这时候你通过配置域名，dns等等相关，你的⽹站就可以访问了（假设你是个⽹站）。那我们来看，你的前后端代码是不是全都在那个war包⾥？包括你的js，css，图⽚，各种第三⽅的库，对吧？
浏览器在通过域名通过dns服务器到你的服务器外⽹ip，将http请求发送到你的服务器，在tcp3次握⼿之后（http下⾯是
tcp/ip），通过tcp协议开始传输数据，你的服务器得到请求后，开始提供服务，接收参数，之后返回你的应答给浏览器，浏览器再通过content-type来解析你返回的内容，呈现给⽤户。
那么我们来看，我们先假设你的⾸页中有100张图⽚，此时，⽤户的看似⼀次http请求，其实并不是⼀次，⽤户在第⼀次访问的时候，浏览器中不会有缓存，你的100张图⽚，浏览器要连着请求100次http请求（有⼈会跟我说http长连短连的问题，不在这⾥讨论），你的服务器接收这些请求，都需要耗费内存去创建socket来玩tcp传输（消耗你服务器上的计四、JSP的痛点四、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。
⼤量并发浏览器请求--->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、前端需要有机制应对后端请求超时以及后端服务宕机的情况，友好的展⽰给⽤户。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。