一丶为什么要实现前后端分离:前后端分离有什么好处
按照项目开发来说:
1.实现前后端分离可以使 项目更快的研发完成,
2.加快了项目的时间
传统开发形式:
前后端分离开发:
在开发阶段,当有新的需求时,前后端工程师约定好接口数据格式,就可以并行进行开发测试了,前端工程师不必等待后端的接口开发好了才开始工作,可以利用mock假数据等方式模拟接口返回数据(当然还有其他方式),前后端都开发好之后双方再进行联调,测试,发现问题及时修复,从而保证项目的正常完成。
1.前端代码不再耦合后端代码,彻底解放前端
2.前后端可以按照约定好的数据格式同时进行开发,极大地提升了开发效率
3.发现问题之后也可以快速定位到问题。如果是接口的问题,则后端工程师来修复,如果是页面问题,则由前端工程师来修复,也降低了维护成本
4.可以应对复杂多变的需求,一套API可以用于不同的应用
前后端分离可以从四个方面理解:
1.交互形式
2.代码组织方式
3,开发模式
4.数据接口规范流程
在前后端分离架构中,后端只是负责按照约定的数据格式向前段提供可调用的api服务即可,前后端之间通过http请求进行交互,前段获取数据之后,进行页面的组装和渲染,最终返回给浏览器.
在传统架构模式中,前后端代码存放于同一个代码库中,甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时,都必须把整个项目导入到开发工具中。
而前后端分离模式在代码组织形式上有以下两种:
1.半分离
前后端共用一个代码库,但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况,前端不能独立进行开发和测试,项目中缺乏前后端 交互的测试用例。
2.分离
前后端代码库分离,前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端,能支持前端的独立开发和测试。而后端 代码中除了功能实现外,还有着详细的测试用例,以保证API的可用性,降低 集成风险。
分离之后的4大优点:
-
为优质产品打造精益团队
通过将开发团队前后端分离化,让前后端工程师只需要专注于前端或后端的开发工作,是的前后端工程师实现自治,培养其独特的技术特性,然后构建出一个全栈式的精益开发团队。 -
提升开发效率
前后端分离以后,可以实现前后端代码的解耦,只要前后端沟通约定好应用所需接口以及接口参数,便可以开始并行开发,无需等待对方的开发工作结束。与此同时,即使需求发生变更,只要接口与数据格式不变,后端开发人员就不需要修改代码,只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。 -
完美应对复杂多变的前端需求
如果开发团队能完成前后端分离的转型,打造优秀的前后端团队,开发独立化,让开发人员做到专注专精,开发能力必然会有所提升,能够完美应对各种复杂多变的前端需求。 -
增强代码可维护性
前后端分离后,应用的代码不再是前后端混合,只有在运行期才会有调用依赖关系。
应用代码将会变得整洁清晰,不论是代码阅读还是代码维护都会比以前轻松。
需要进行前后端分离的场景
任何一项技术以及架构都不是适用于任何场景,前后端分离同样也是如此。虽然前后端分离架构能带来许多的好处,但前提是建立在开发团队合适的基础上的。
而我们百度网盘就属于那种:
-
页面布局复杂,使用了主题和样式。
-
需要有较高的页面渲染效果
-
前端页面中包含复杂业务逻辑
-
页面需要渲染的数据量较大
像这种重前端
的应用我们综合考虑了各种情况,最终决定采用前后端分离架构。
部署方案
前后端分离之后,应用在部署时也需要进行前后端分离。在进行前后端分离方案选择时,需要结合项目的实际情况和用户来考虑
分离之前的架构
前后端分离之前,网盘的后端架构是Nginx服务和后端的PHP服务以及前端的静态资源都是部署在同一台服务器上。当浏览器发起访问请求时,如何请求的是静态资源,Nginx直接把静态资源返回给服务器;如果请求的是页面或后端服务,则经Nginx将请求转发到后端的PHP服务器,完成响应后经Nginx返回到浏览器。
这个方案比较简单,易于实现,而且能到达前后端解耦的目的。而且很多公司目前都是基于这种架构或者一定的变形来实现的web应用。
但是对于页面量比较大,需要有良好SEO的应用来说,此方案缺点也较为明显。因为 Nginx只是向浏览器返回页面静态资源,而国内的搜索引擎爬虫只会抓取静态数据, 不会解析页面中的js,这使得应用得不到良好的搜索引擎支持。同时因为Nginx不会进行页面的组装渲染,需要把静态页面返回到浏览器,然后完成渲染工作,这加重了浏览器的渲染负担。
另外,由于这种架构使得前端工程师的工作范围只局限在了浏览器一侧,导致在进行一些特殊的性能优化时,前端工程师无法独立完成,还需要后端开发人员的配合,这也一定程度上影响了双方的进度。
分离之后的架构
前后端分离之后,我们在原先的架构只上再单独增加了一个Node Server作为中间层,将前端资源部署到Node Server中。Node Server还实现了一层数据代理服务,负责与提供数据的后端服务进行通信。
并且还在这个基础上增加并使用了前端机(前端机是对所有的请求进行预处理和负载均衡,然后再转发给后端机。)的Nginx服务,浏览器发起的请求经过前端机的Nginx进行分发,URL请求统一分发到Node Server,在Node Server中根据请求类型从后端服务器上通过RPC服务请求页面的模板数据,然后进行页面的组装和渲染;API请求则直接转发到后端服务器,完成响应。