首先看看前后端分离是什么?
“前端”通常指的是,相对来说更接近用户的一端,例如:APP,网页、桌面程序等,在现实开发中大部分情况可以理解为“客户端”;
“后端”相对来说就更泛化了,可以理解为是为前端提供服务的一端。
”分离“顾名思义就是将”前端“和”后端进行分开“,但是这里的分开主要从下面几个纬度进行分离
1:架构分离,前端不需要依赖后端架构同时后端也不需要知道前端使用何种架构
2:人员分离,前端后端使用的技术相互之间根部不需要相互了解完全可以在做到透明(当然相互了解会更好)
3:工作分离,基于项目或者产品的单个功能的横向进行工作分离,任务划分更细
4:关注点分离,前端偏向用户,后端偏向系统本身
下面分别是一体式web架构示意图和前后分离式web架构。
一体式 Web 架构示意
前后分离式 Web 架构示意
为什么要做前后端分离,它到底有什么好处?
前后端的分离也实现了前后端架构的分离,带来的好处有:
整个项目的开发权重往前移,实现真正的前后端解藕,动态资源和静态资源分离,提高了性能和扩展性。
前端静态化
前端有且仅有静态内容,再明确些,只有HTML/CSS/JS。
其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装。
前端内容的运行环境和引擎完全基于浏览器本身。
后端数据化
后端可以用任何语言,技术和平台实现。
遵循一个原则:只提供数据,不提供任何和界面表现有关的内容。
统一API接口,接口完全可以共用。
提供的数据可以用于任何其他客户端(如IOS,安卓,PC,微信小程序等)。
通过一些代码重构,就可以大量复用接口,提升效率。
平台无关化
前端3大技术(HTML/CSS/JS)本身就是平台无关的。
后台连接部分的本质是实现合适的RESTful接口和交互Json数据,就这2者而言,任何技术和平台都可以实现。
前后端交给不同的人来编写,明确划分职责,发现bug的时候可以快速定位。
vue.js等框架编写前端时,会比之前写jquery更简单快捷。
架构分离化
前端架构完全基于HTML/CSS的发展和JS框架的演变,由于前台是纯静态内容,大型构架方面可以考虑向CDN方向发展.
后端构架几乎可以基于任何语言和平台的任何解决方案,大型构架方面, RESTful Api可以考虑负载均衡;而数据,业务实现等可以考虑数据库优化和分布式。
在大并发情况下,可以同时水平扩展前后端服务器。
即使后端服务暂时超时或者宕机了,前端页面也会正常访问,只不过数据刷不出来而已,当然现在一般是服务器集群,少有出现这种现象。
前后端流量大幅减少。
减少后端服务器的并发压力,除了接口以外的其他所有http请求全部转移到前端服务器上。
页面不再是全局刷新,而是异步加载,局部刷新,减轻压力。
表现性能的提高
页面性能,第一次获取的确会有些损失。
后续使用这个页面,性能优势就完全体现了,页面的绝大部分内容都是本地缓存直接加载,远程获取的仅仅是1-2个10K的内容,其加载时间百毫秒内,这和本地页面几无区别,其前端加载和响应速度得到非常大的提高。
安全性方面的集中优化
前端静态化以后,一些注入式攻击在分离模式下被很好的规避。
而后端安全问题集中化了,主要考虑处理RESEful接口的安全。
安全架设和集中优化变得更明确和便利。