实现前后端分离（转载）
对⽬前的web来说，前后端分离已经变得越来越流⾏了，越来越多的企业/⽹站都开始往这个⽅向靠拢。那么，为什么要选择前后端分离呢？前后端分离对实际开发有什么好处呢?
为什么选择前后端分离
在以前传统的⽹站开发中，前端⼀般扮演的只是切图的⼯作，只是简单地将UI设计师提供的原型图实现成静态的HTML页⾯，⽽具体的页⾯交互逻辑，⽐如与后台的数据交互⼯作等，可能都是由后台的开发⼈员来实现的，或者是前端是紧紧的耦合后台。⽐如，以前淘宝的Web基本上都是基于MVC框架webx，架构决定了前端只能依赖后端。所以他们的开发模式依然是，前端写好静态demo，后端翻译成VM模版，这种模式的问题就不说了，被吐槽了很久。
⽽且更有可能后台⼈员直接兼顾前端的⼯作，⼀边实现API接⼝，⼀边开发页⾯，两者互相切换着做，⽽且根据不同的url动态拼接页⾯，这也导致后台的开发压⼒⼤⼤增加。前后端⼯作分配不均。不仅仅开发效率慢，⽽且代码难以维护。⽽前后端分离的话，则可以很好的解决前后端分⼯不均的问题，将更多的交互逻辑分配给前端来处理，⽽后端则可以专注于其本职⼯作，⽐如提供API接⼝，进⾏权限控制以及进⾏运算⼯作。⽽前端开发⼈员则可以利⽤nodejs来搭建⾃⼰的本地服务器，直接在本地开发，然后通过⼀些插件来将api请求转发到后台，这样就可以完全模拟线上的场景，并且与后台解耦。前端可以独⽴完
成与⽤户交互的整⼀个过程，两者都可以同时开⼯，不互相依赖，开发效率更快，⽽且分⼯⽐较均衡。
如何做到前后端分离
(以下的内容都是基于我们的电影购票⽹站来讨论的)
前端的技术框架是: vue全家桶+nodejs+express(实现的是单页⾯(SPA)应⽤)
⾸先，先分清楚前后端的⼯作
前端的⼯作：实现整⼀个前端页⾯以及交互逻辑，以及利⽤ajax与nodejs服务器（中间层)交互
后端的⼯作：提供API接⼝，利⽤redis来管理session，与数据库交互
我们项⽬的整⼀个架构如下:
接下来进⼊正题，如何实现前后端分离
1. ⼀般来说，要实现前后端分离，前端就需要开启⼀个本地的服务器来运⾏⾃⼰的前端代码，以此来模拟真实的线上环境，并且，也是
为了更好的开发。因为你在实际开发中，你不可能要求每⼀个前端都去搭建⼀个java(php)环境，并且在java环境下开发，这对于前端来说，学习成本太⾼了。但如果本地没有开启服务器的话，不仅⽆法模拟线上的环境，⽽且还⾯临到了跨域的问题，因为你如果写静态的html页⾯，直接在⽂件⽬录下打开的话，你是⽆法发出ajax请求的(浏览器跨域的限制)，因此，你需要在本地运⾏⼀个服务器，可是⼜不想搭建陌⽣⽽庞⼤的java环境，怎么办法呢？nodejs正好解决了这个问题。在我们项⽬中，我们利⽤nodejs的express框架来开启⼀个本地的服务器，然后利⽤nodejs的⼀个http-proxy-middleware插件将客户端发往nodejs的请求转发给真正的服务器，让nodejs作为⼀个中间层。这样，前端就可以⽆忧⽆虑的开发了
2. 由于前后端分离后，前端和后台同时开发时，就可能遇到前端已经开发好⼀个页⾯了，可是却等待后台API接⼝的情况。⽐如说A是负
责前端，B是负责后台，A可能⽤了⼀周做好了基本的结构，并且需要API接⼝联调后，才能继续开发，⽽此时B却还没有实现好所需要的接⼝，这种情况，怎么办呢？在我们这个项⽬⾥，我们是通过了mock来提供⼀些假数据，我们先规定好了API接⼝，设计出了⼀套API⽂档，然后我们就可以通过API⽂档，利⽤mock(。
为什么要引⼊nodejs作为中间层
前⾯的我发的项⽬结构图中，已经表明，在这个项⽬⾥，我们将nodejs作为中间层，那么，为什么我们要特地引⼊nodejs呢？直接⽤java做不就⾏了吗？
我觉得引⼊nodejs主要是为了分层开发，职责划分，nodejs作为前端服务器，由前端开发⼈员负责，前端开发⼈员不需要知道java后台是如何实现的，也不需要知道API接⼝是如何实现的，我们只需要关⼼我们前端的开发⼯作，并且管理好nodejs前端服务器，⽽后台开发⼈员也不需要考虑如何前端是如何部署的，他只需要做好⾃⼰擅长的部分，提供好API接⼝就可以；
nodejs本⾝有着独特的异步、⾮阻塞I/O的特点，这也就意味着他特别适合I/O密集型操作，在处理并发量⽐较⼤的请求上能⼒⽐较强，因此，利⽤它来充当前端服务器，向客户端提供静态⽂件以及响应客户端的请求，我觉得这是⼀个很不错的选择。
前端服务器如何部署
nodejs前端服务器的职责
1. 作为静态⽂件服务器，当⽤户访问⽹站的时候，将index.html以及其引⼊的js、css、fonts以及图⽚返回给⽤户
2. 负责将客户端发来的ajax请求转发给后台服务器
其实前端服务器的部署⼯作是算⽐较简单的，具体有以下两个点:
1. 将开发完的前端代码，利⽤webpack打包成静态压缩⽂件
2. 在服务器上，利⽤pm2负载均衡器来执⾏以下的代码来开启服务器:
另⼀篇⽂章⼤家也可以分享阅读
前⾔
最近这⼀段时间由于Nodejs的逐渐成熟和⽇趋稳定，越来越多的公司中的前端团队开始尝试使⽤Nodejs来练⼀下⼿，尝⼀尝鲜。
⼀般的做法都是将原本属于后端的⼀部分相对于业务不是很重要的功能迁移到Nodejs上⾯来，也有⼀些公司将NodeJS作为前后端分离的⼀个解决⽅案去施⾏。⽽像淘宝⽹这类的⼤型⽹站也很早的完成了前后端的分离，给我们这样的后来者提供了宝贵的经验。
同样，我们的⼤⽹盘团队也早在去年早早就开始了紧锣密布的准备⼯作，这⽬前⼯作也做的差不多了，现在我就来总结⼀下在过程中遇到的坑点以及注意事项。
认识前后端分离
在传统的web应⽤开发中，⼤多数的程序员会将浏览器作为前后端的分界线。将浏览器中为⽤户进⾏页⾯展⽰的部分称之为前端，⽽将运⾏在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。
由于前后端分离这个概念相对来说刚出现不久，很多⼈都是只闻其声，不见其形，所以可能会对它产⽣⼀些误解，误以为前后端分离只是⼀种web应⽤开发模式，只要在web应⽤的开发期进⾏了前后端开发⼯作的分⼯就是前后端分离。
其实前后端分离并不只是开发模式，⽽是web应⽤的⼀种架构模式。在开发阶段，前后端⼯程师约定好数据交互接⼝，实现并⾏开发和测试；在运⾏阶段前后端分离模式需要对web应⽤进⾏分离部署，前后端之前使⽤HTTP或者其他协议进⾏交互请求。然⽽作为⼀种架构模式，我们在实施的过程中主要对以下四个⽅⾯来进⾏⽐较和重新认识。
前后端分离⼤概可以从四个⽅⾯来理解：
1. 交互形式
2. 代码组织⽅式
3. 开发模式
4. 数据接⼝规范流程
⼀、交互形式
在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调⽤的API服务即可。前后端之间通过HTTP请求进⾏交互，前端获取到数据后，进⾏页⾯的组装和渲染，最终返回给浏览器。
⼆、代码组织⽅式
在传统架构模式中，前后端代码存放于同⼀个代码库中，甚⾄是同⼀⼯程⽬录下。页⾯中还夹杂着后端代码。前后端⼯程师进⾏开发时，都必须把整个项⽬导⼊到开发⼯具中。
⽽前后端分离模式在代码组织形式上有以下两种:
目前行的php开发工具有
半分离
前后端共⽤⼀个代码库，但是代码分别存放在两个⼯程中。后端不关⼼或很少关⼼前端元素的输出情况，前端不能独⽴进⾏开发和测试，项⽬中缺乏前后端交互的测试⽤例。
分离
前后端代码库分离，前端代码中有可以进⾏Mock测试(通过构造虚拟测试对象以简化测试环境的⽅法)的伪后端，能⽀持前端的独⽴开发和测试。⽽后端代码中除了功能实现外，还有着详细的测试⽤例，以保证API的可⽤性，降低集成风险。
三、开发模式
我们之前的架构属于传统的MVC架构，整体没有进⾏前后端分离，在项⽬的开发阶段，前端⼯程师负责编写HTML，完成前端的页⾯设计并套页⾯，然后再使⽤模板技术将写好的前端代码转换为Smarty脚本，同时内嵌⼀些后端提供的模板变量和⼀些逻辑操作。应⽤运⾏期，将全
部代码进⾏打包，和后端代码部署到同⼀服务器上，同时会进⾏简单的动静态分离部署。
此时，应⽤的开发流程如下图所⽰。
⽽在实现前后端分离架构之后，前端⼯程师只需要编写HTML、js、CSS等前端资源，然后通过HTTP请求调⽤后端提供的服务即可。除了开发期的分离，在运⾏期前后端资源也会进⾏分离部署。
前后端分离之后，开发流程将如下图所⽰。
通过上⾯的两幅流程图，不难发现，在开发模式上，前后段分离不仅仅只是⼯程师的分⼯开发，更重要的意义在于实现了前后端的并⾏开发，简化了开发流程。
四、数据接⼝规范流程
在开发期间前后端共同商定好数据接⼝的交互形式和数据格式。然后实现前后端的并⾏开发，其中前端⼯程师再开发完成之后可以独⾃进⾏mock测试，⽽后端也可以使⽤接⼝测试平台进⾏接⼝⾃测，然后前后端⼀起进⾏功能联调并校验格式，最终进⾏⾃动化测试。
分离的四个好处
前后端分离模式和传统的web应⽤架构相⽐有很⼤的不同，到底分还是不分，这还真是个问题。
从⽬前应⽤软件开发的发展趋势来看，主要有两⽅⾯需要注意：
1. 越来越注重⽤户体验，随着互联⽹的发展，开始多终端化。
2. ⼤型应⽤架构模式正在向云化、微服务化发展。
我们主要通过前后端分离架构，为我们带来以下四个⽅⾯的提升：
为优质产品打造精益团队
通过将开发团队前后端分离化，让前后端⼯程师只需要专注于前端或后端的开发⼯作，是的前后端⼯程师实现⾃治，培养其独特的技术特性，然后构建出⼀个全栈式的精益开发团队。
提升开发效率
前后端分离以后，可以实现前后端代码的解耦，只要前后端沟通约定好应⽤所需接⼝以及接⼝参数，便可以开始并⾏开发，⽆需等待对⽅的开发⼯作结束。与此同时，即使需求发⽣变更，只要接⼝与数据格式不变，后端开发⼈员就不需要修改代码，只要前端进⾏变动即可。如此⼀来整个应⽤的开发效率必然会有质的提升。
完美应对复杂多变的前端需求
如果开发团队能完成前后端分离的转型，打造优秀的前后端团队，开发独⽴化，让开发⼈员做到专注专精，开发能⼒必然会有所提升，能够完美应对各种复杂多变的前端需求。
增强代码可维护性
前后端分离后，应⽤的代码不再是前后端混合，只有在运⾏期才会有调⽤依赖关系。
应⽤代码将会变得整洁清晰，不论是代码阅读还是代码维护都会⽐以前轻松。
需要进⾏前后端分离的场景
任何⼀项技术以及架构都不是适⽤于任何场景，前后端分离同样也是如此。虽然前后端分离架构能带来许多的好处，但前提是建⽴在开发团队合适的基础上的。
⽽我们百度⽹盘就属于那种：
1. 页⾯布局复杂，使⽤了主题和样式。
2. 需要有较⾼的页⾯渲染效果
3. 前端页⾯中包含复杂业务逻辑
4. 页⾯需要渲染的数据量较⼤
像这种重前端的应⽤我们综合考虑了各种情况，最终决定采⽤前后端分离架构。
部署⽅案
前后端分离之后，应⽤在部署时也需要进⾏前后端分离。在进⾏前后端分离⽅案选择时，需要结合项⽬的实际情况和⽤户来考虑。
分离之前的架构
前后端分离之前，⽹盘的后端架构是Nginx服务和后端的PHP服务以及前端的静态资源都是部署在同⼀台服务器上。当浏览器发起访问请求时，如何请求的是静态资源，Nginx直接把静态资源返回给服务器；如果请求的是页⾯或后端服务，则经Nginx将请求转发到后端的PHP服务器，完成响应后经Nginx返回到浏览器。
注：此图中的Nginx属于后端机，主要针对前端机Nginx转发过来的请求进⾏识别弄转发给本机的PHP服务；前端机和后端机各有⼀个Nginx 服务。
这个⽅案⽐较简单，易于实现，⽽且能到达前后端解耦的⽬的。⽽且很多公司⽬前都是基于这种架构或者⼀定的变形来实现的web应⽤。
但是对于页⾯量⽐较⼤，需要有良好SEO的应⽤来说，此⽅案缺点也较为明显。因为 Nginx只是向浏览器返回页⾯静态资源，⽽国内的搜索引擎爬⾍只会抓取静态数据，不会解析页⾯中的js，这使得应⽤得不到良好的搜索引擎⽀持。同时因为Nginx不会进⾏页⾯的组装渲染，需要把静态页⾯返回到浏览器，然后完成渲染⼯作，这加重了浏览器的渲染负担。
另外，由于这种架构使得前端⼯程师的⼯作范围只局限在了浏览器⼀侧，导致在进⾏⼀些特殊的性能优化时，前端⼯程师⽆法独⽴完成，还需要后端开发⼈员的配合，这也⼀定程度上影响了双⽅的进度。
分离之后的架构
前后端分离之后，我们在原先的架构只上再单独增加了⼀个Node Server作为中间层，将前端资源部署到Node Server中。Node Server还实现了⼀层数据代理服务，负责与提供数据的后端服务进⾏通信。
并且还在这个基础上增加并使⽤了前端机（前端机是对所有的请求进⾏预处理和负载均衡，然后再转发给后端机。）的Nginx服务，浏览器发起的请求经过前端机的Nginx进⾏分发，URL请求统⼀分发到Node Server，在Node Server中根据请求类型从后端服务器上通过RPC服务请求页⾯的模板数据，然后进⾏页⾯的组装和渲染；API请求则直接转发到后端服务器，完成响应。
前后端分离⽅案对⽐
实现和部署
⼤家分享百度⽹盘前后端分离中的Node Server基础架构、前端路由管理、模板数据交互以及运维和环境部署相关内容。
结语
前后端分离并⾮仅仅只是前后端开发的分⼯，⽽是在开发期进⾏代码存放分离、前后端开发职责分离，前后端能够独⽴进⾏开发测试；在运⾏期进⾏应⽤部署分离，前后端之间通过HTTP请求进⾏通讯。前后端分离的开发模式与传统模式相⽐，能为我们提升开发效率、增强代码可维护性，让我们有规划地打造⼀个前后端并重的精益开发团队，更好地应对越来越复杂多变的Web应⽤开发需求。

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