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

⾯试官问：前后端分离项⽬，有什么优缺点？你知道的越多，不知道的就越多，业余的像⼀棵⼩草！你来，我们⼀起精进！你不来，我和你的竞争对⼿⼀起精进！编辑：业余草/p/c86cee16b418推荐：/?p=5158⼀、前戏前后端分离已成为互联⽹项⽬开发的业界标准使⽤⽅式，通过nginx+tomcat的⽅式（也可以中间加⼀个nodejs）有效的进⾏解耦，并且前后端分离会为以后的⼤型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成⼈的必经之路。核⼼思想是前端html页⾯通过ajax调⽤后端的restuful api接⼝并使⽤json数据进⾏交互。在互联⽹架构中，名词解释：Web服务器：⼀般指像nginx，apache这类的服务器，他们⼀般只能解析静态资源。应⽤服务器：⼀般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能⼒没有web服务器好。⼀般都是只有web服务器才能被外⽹访问，应⽤服务器只能内⽹访问。⼆、术业有专攻（开发⼈员分离）以前的JavaWeb项⽬⼤多数都是java程序员⼜当爹⼜当妈，⼜搞前端，⼜搞后端。随着时代的发展，渐渐的许多⼤中⼩公司开始把前后端的界限分的越来越明确，前端⼯程师只管前端的事情，后端⼯程师只管后端的事情。正所谓术业有专攻，⼀个⼈如果什么都会，那么他毕竟什么都不精。⼤中型公司需要专业⼈才，⼩公司需要全才，但是对于个⼈职业发展来说，我建议是分开。1、对于后端java⼯程师：把精⼒放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构，弹性计算架构，微服务架构，java性能优化，以及相关的项⽬管理等等。后端追求的是：三⾼（⾼并发，⾼可⽤，⾼性能），安全，存储，业务等等。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、返回jsp5、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、前端需要有机制应对后端请求超时以及后端服务宕机的情况，友好的展⽰给⽤户。九、扩展阅读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。前端只需要关注页⾯的样式与动态数据的解析&渲染，⽽后端专注于具体业务逻辑。如果想玩多端应⽤，注意要去掉tomcat原⽣的session机制，要使⽤token机制，使⽤缓存（因为是分布式系统），做单点，对于token机制的安全性问题，可以搜⼀下jwt。