2023年6月29日发(作者：)

前后端分离的概念前后端分离已成为互联⽹项⽬开发的业界标准使⽤⽅式，通过Nginx+Tomcat的⽅式（也可以中间加⼀个NodeJS）有效地对前端和后端的开发进⾏解耦。并且前后端分离会为以后的⼤型分布式架构、弹性计算架构、微服务架构、多端化服务（各种客户端，⽐如浏览器、车载终端、安卓、IOS等）打下坚实的基础。前后端分离的核⼼思想就是前端HTML页⾯通过AJAX调⽤后端的RESTFUL API接⼝，并通过JSON数据进⾏交互。前端的开发与后端的开发分离以前的JavaWeb项⽬，⼤多数都是Java程序员⼜搞前端，⼜搞后端。⽽随着时代的发展，渐渐的许多⼤中⼩公司开始把前后端的界限分得越来越明确，即前端⼯程师只管前端的开发，后端⼯程师只管后端的开发。⼤中型公司需要专业的⼈才，⼩公司需要全才（省钱）。但是对于个⼈职业发展来说，还是分开⽐较好，因为当⽣涯发展到后期的时候，企业往往要的是在某⼀⽅⾯上的专家，⽽不是熟练⼯。如果⼀个⼈前端后端都会⼀点，那也可以说什么都不会。前端追求的是页⾯的表现、速度的流畅、兼容性和⽤户的体验等。因此对于前端开发⼯程师来说，需要把精⼒放在HTML5、CSS3、JavaScript、jQuery、AngularJS、BootStrap、ReactJS、VueJS、Webpack、Less/Sass、Gulp、NodeJS、Google V8引擎、JS多线程、JS模块化、JS⾯向切⾯编程、设计模式、浏览器兼容性、性能优化等上。后端追求的是三⾼（⾼并发、⾼可⽤、⾼性能）、安全、存储、业务等。因此对于后端开发⼯程师来说，需要把精⼒放在Java基础、设计模式、JVM原理、Spring全家桶的原理及源码、Linux、关系型数据库事务隔离和锁机制、MongoDB、HTTP/TCP、多线程、分布式架构、弹性计算架构、微服务架构、Java性能优化、数据库性能优化以及相关的项⽬管理等等。往某个⽅向深深钻研，这样你的核⼼竞争⼒才会越来越⾼。正所谓你往⽣活中投⼊什么，⽣活就会反馈给你什么。千万别勉强⾃⼰去追求所谓的全栈，因为不管是前端和后端，到后期都有很多⾼深的东西让你花费所有精⼒，你想什么都会，最后可能什么都不会（太贪⼼的⼈最后什么都得不到，别信圣诞⽼⼈说的那句我全都要）。当然也不是说就不能去学，学也是可以的，但是要偏重点，分清主次，就像⼈⽣不要把时间浪费在不值得的⼈和物⾝上⼀样。前后端分离解决的耦合问题曾⼏何时，我们的JavaWeb项⽬都是使⽤了若⼲个后台框架，⽐如Spring MVC、Structs、Spring Boot、Spring JDBC、Hibernate、MyBatis等。⼤多数项⽬在Java后端都是分了三层，即控制层（Controller）、业务层（Service）和持久层（Dao）。控制层负责接收参数，调⽤相关业务层，封装数据，以及路由和渲染到JSP页⾯（或模板页⾯，如Freemarker）。然后JSP页⾯上使⽤各种标签或者⼿写Java表达式将后台的数据展现出来，玩的就是MVC那套思路。我们先看这种情况：我们开发⼀个⽹站，需求定完了，代码写完了，测试跑完了，⽤Maven或IDE等⼯具把代码打成⼀个war包完了，把war包发布到⽣产环境下的WEB容器完了，启动WEB容器完了，域名、DNS配置完了，⽹站就可以访问了。这时候，我们的前后端代码全都在那个war包⾥了，包括JS、CSS、图⽚等各种静态资源⽂件。接下来，我们在浏览器中输⼊⽹站域名（），浏览器在通过域名和DNS服务器找到我们的服务器外⽹IP，将HTTP请求发送到你的服务器，在TCP三次握⼿之后（HTTP下⾯是TCP/IP），通过TCP协议开始传输数据，我们的服务器得到请求后，开始提供服务，接收参数，之后返回我们的应答给浏览器，浏览器再通过Content-type来解析返回的内容，呈现给⽤户。这⾥我们假设我们的⾸页中有100张图⽚，那么当⽤户访问⾸页的时候，就需要建⽴100个HTTP请求，我们的服务器接收这些请求，都需要耗费内存去创建Socket来玩TCP传输（消耗服务器上的计算资源）。重点来了，这样的话，我们的服务器的压⼒就会⾮常⼤，因为页⾯中的所有请求都是只请求到我们的这台服务器上，如果⼀个⼈还好，如果是有10000个⼈并发访问呢（这⾥先不说服务器集群，就说单实例服务器），那么我们的服务器恐怕扛不住（TCP连接、带宽、内存、硬盘、IO、WEB服务器的内存等⽅⾯），恐怕会宕机。这就是为什么⼤中型的WEB应⽤要解耦的原因。理论上我们是可以把数据库、应⽤服务、消息队列、缓存、⽤户上传的⽂件、⽇志等都丢在⼀台服务器上，也不⽤玩什么服务治理，也不⽤做什么性能监测，什么报警机制等，爱宕机就宕机好了（佛系青年）。可是现实不允许我们宕机啊，当某个⼦应⽤因为内存不稳定⽽导致整个服务器内存溢出，再⽽导致我们的⽹站挂掉的时候，我们就糟糕了。⽐如我们公司的业务如果这时候正好处于井喷式发展的⾼峰期的时候，服务器挂掉了，业务就被技术卡住了，那么就可能会导致⼤量⽤户的流失，后果不堪设想。这⾥顺便提⼀句，技术⼀定要⾛在业务前⾯，否则可能会错过最佳的发展期。另外的，当你的应⽤全都耦合在⼀起，就相当于⼀块巨⽯，当服务器负载能⼒不⾜时，⼀般会使⽤负载均衡的⽅式，将服务器做成集群。这样其实你是在⽔平扩展⼀块块巨⽯，性能加速度会越来越低。要知道，本⾝负载就低的功能或模块是没有必要⽔平扩展的，⽔平扩展要针对性能瓶颈去扩展才对。在这⾥的例⼦中，性能瓶颈跟前端没有关系，没有必要去⽔平扩展前端。同时，发版部署的时候，如果只是改了后端的代码，却要前端代码也跟着重新发布，显然也降低了效率。正因为这样，正常的互联⽹架构都是把WEB服务器集群、应⽤服务器集群、⽂件服务器集群、数据库服务器集群、消息队列集群、缓存集群等集群拆分开的。前后端耦合的缺点（以JSP为例）以前的JavaWeb项⽬⼤多数使⽤JSP作为页⾯层展⽰数据给⽤户，因为流量不⾼，因此也没有那么苛刻的性能要求，但现在是⼤数据时代，对于互联⽹项⽬的性能要求是越来越⾼，因此原始的前后端耦合在⼀起的架构模式已经逐渐不能满⾜我们，因此我们需要找到⼀种解耦的⽅式，以⼤幅提升我们的负载能⼒。前后端耦合主要有以下的缺点（以JSP为例）：1.动态资源和静态资源全部耦合在⼀起，服务器压⼒⼤，因为服务器会收到各种HTTP请求，例如CSS的HTTP请求，JS的，图⽚的等等。⼀旦服务器出现状况，前后台⼀起完犊⼦，⽤户体验极差。如果前后端分离，你后端的服务器挂了，前端服务器没挂，⽤户仍然可以看到界⾯，虽然请求不到数据，嘿嘿。出好设计图之后，前端开发⼯程师只负责将设计图切成HTML，需要由Java开发⼯程师来将HTML套成JSP页⾯，出错率较⾼（因为页⾯中经常会出现⼤量的JS代码），修改问题的时候需要双⽅协同开发，效率低下。页⾯必须要在⽀持Java的WEB服务器上运⾏（如Tomcat、Jetty、Resin等），⽆法使⽤Nginx等（官⽅宣称单实例HTTP并发⾼达5W），性能提升不上来。4.第⼀次请求JSP，必须要在WEB服务器中编译成Servlet，第⼀次运⾏会较慢。然后之后的每次请求JSP都是访问Servlet再⽤输出流输出的HTML页⾯，效率没有直接使⽤HTML⾼（注意是每次噢）。内有较多内置的专属标签和表达式，前端开发⼯程师在修改页⾯时往往会挠头挠到秃头。6.如果JSP中的内容很多，页⾯响应会很慢，因为是同步加载，⼀次输出所有内容。7.修改JSP页⾯需要前端开发⼯程师使⽤Java的IDE以及配置各种后端的开发环境，对前端开发⼯程师极不友好。前后端分离的优点1.前后端分离可以真正地实现前后端解耦，前端服务器使⽤Nginx。前端/WEB服务器放的是CSS、JS和图⽚等⼀系列静态资源（甚⾄可以把这些静态资源放到特定的⽂件服务器，如阿⾥云的OSS，并使⽤CDN加速）。前端服务器负责控制页⾯引⽤、跳转和路由，前端页⾯通过AJAX异步调⽤后端的接⼝，后端/应⽤服务器使⽤Tomcat（把风花雪⽉交给前端，只提供数据），加快整体响应数据。（这⾥需要使⽤⼀些前端⼯程化的框架，如NodeJS、React、Router、Reudx、Webpack等）2.前后端分离的模式下，如果发现Bug，可以快速定位是谁的问题，不会出现互相踢⽪球的现象。如果是页⾯逻辑、跳转错误、浏览器兼容性问题、脚本错误、页⾯样式等问题，通通是前端开发⼯程师的锅。如果是接⼝数据出错、数据提交失败、应答超时等问题，则后端开发⼯程师应该挺⾝接锅。双⽅职责分明，就不会打架。3.前后端分离在⼤并发的情况下，我们可以同时⽔平扩展前后端服务器。要知道淘宝的⼀个⾸页就需要2000+台前端服务器做集群来抗住⽇均多少亿的⽇均PV。（阿⾥的技术峰会说到他们的WEB容器都是⾃⼰写的，就算单实例抗10万HTTP并发，2000台是2亿HTTP并发，并且他们还可以根据预知洪峰来⽆限扩展，好恐怖啊，就⼀个⾸页。。）4.前后端分离可以减少后端服务器的并发/负载压⼒。除了接⼝以外的其他所有HTTP请求全部转移到前端Nginx上，接⼝的请求则转发调⽤Tomcat。且除了第⼀次页⾯请求外，浏览器会⼤量调⽤本地缓存去缓存页⾯。5.前后端分离的模式下，即使后端服务器暂时超时或宕机了，前端页⾯也会正常访问，只不过数据刷不出来⽽已。6.前后端分离的模式下，后台的接⼝可以复⽤。⽐如需要做微信相关的轻应⽤，接⼝就完全可以共⽤，再⽐如说APP相关的服务，也可以只通过⼀些代码重构，就可以⼤量复⽤接⼝，提升开发效率。（多端应⽤）7.页⾯显⽰再多的内容也不怕了，因为从同步加载改成了异步加载。⽀持页⾯的热部署，不⽤重启服务器，前端升级更⽆缝。9.增加代码的维护性和易读性，提⾼开发效率（前后端代码耦合在⼀起很难读，⽐如JSP页⾯）。10.前后端可以并⾏开发，提⾼开发效率。11.在Nginx中部署证书，外⽹使⽤HTTPS访问，并且只开放443和80端⼝，其他端⼝⼀律关闭（防⽌⿊客端⼝扫描），内⽹使⽤HTTP，性能和安全都有保障。前后端分离的注意事项1.在开需求会议的时候，前后端⼯程师必须全部参加，并且需要制定好接⼝⽂档，后端⼯程师要写好测试⽤例（2个维度），不要让前端⼯程师充当你的专职测试。2.上述的接⼝并不是Java⾥的Interface，说⽩了调⽤接⼝就是调⽤你Controller⾥⾯的⽅法。3.我们需要⼀些前端的框架来解决类似于页⾯嵌套，分页，页⾯跳转控制等功能。4.⼩项⽬的话，⽐如单纯的内⽹项⽬，就没有必要前后端分离了，复杂架构反⽽会拖累性能。但是如果是⼤型外⽹项⽬，前后端分离就⾮常必要了。5.以前还有⼈⽤类似于Velocity/Freemarker等框架模板⽣成静态页⾯，个⼈觉得和使⽤JSP其实也相差不远，也就是性能好⼀点，没有实现真正的前后端分离。6.前后端分离会加重前端团队的⼯作量，减轻后端团队的⼯作量，提⾼了性能和可扩展性。7.如果页⾯上有⼀些权限等等相关的校验，这些相关的和数据也可以通过AJAX从接⼝⾥拿。8.对于既可以前端做⼜可以后端做的逻辑，建议放在前端，因为逻辑计算时需要计算资源的，如果放到后端去运⾏逻辑，则会消耗带宽、内存和CPU等等计算资源。你要记住⼀点就是服务端的计算资源是有限的，⽽如果放到前端，使⽤的是客户端的计算资源，这样你的服务端负载就会下降（⾼并发场景）。类似于数据校验这种，前后端都需要做。9.前端需要有机制应对后端请求超时以及后端服务宕机的情况，友好地展⽰给客户。前后端分离的扩展阅读1.对于JS、CSS、图⽚这类静态资源可以考虑放到类似于阿⾥云的OSS这类⽂件服务器上（如果是普通的服务器和操作系统，存储在到达PB级（1000TB）的⽂件后，或者单个⽂件夹内的⽂件数量达到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（JSON Web Token）。5.前端项⽬中可以加⼊mock测试（构造虚拟测试对象来模拟后端，可以独⽴开发和测试），后端则需要有详细的测试⽤例，保证服务的可⽤性和稳定性。总结前后端分离并⾮仅仅是⼀种开发模式，⽽是⼀种架构模式（前后端分离架构）。千万不要以为只有在写代码的时候把前端和后端分开就是前后端分离了，这样的理解太⽚⾯了。前后端分离是需要区分前后端项⽬的，即前端项⽬和后端项⽬是两个项⽬，放在两个不同的服务器，需要独⽴部署，两个不同的⼯程，两个不同的代码库，两组不同的开发⼈员。前后端开发⼯程师需要约定交互的接⼝，实现并⾏开发。⽽在开发结束之后，前端项⽬和后端项⽬都需要进⾏独⽴部署，前端通过AJAX来调⽤HTTP请求，调⽤后端的RESTFUL API。前端只需要关注页⾯的样式与动态数据的解析和渲染，不⽤关⼼数据是怎么产⽣的；后端则专注于具体的业务逻辑，返回前端展现所需要的业务数据即可。

"⽆论去哪⾥，都不要失去重新开始的勇⽓。"