理解前后端分离

朱雀 2022-05-17 07:51 292阅读 0赞

# 理解前后端分离 #

*  理解前后端分离
    
     *  为什么要做前后端分离，它到底有什么好处？
     *  实现的一些表现
     *  RESTful风格的API

## 为什么要做前后端分离，它到底有什么好处？ ##

前后端的分离也实现了前后端架构的分离，带来的好处有：

*  整个项目的开发权重往前移，实现真正的前后端解藕，动态资源和静态资源分离，提高了性能和扩展性。
 *  前端静态化
    
     *  前端有且仅有静态内容,再明确些,只有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接口的安全。
     *  安全架设和集中优化变得更明确和便利。

## 实现的一些表现 ##

*  前后端人员双方约定好接口的数据格式，
 *  比如：前端需要调用一个用户信息的接口，数据格式为`{name:"tielemao"}`。那么，后端人员只需要告诉他一个接口url（如：`http://www.tielemao.com/api/userInfo`），并且将这个接口返回前端想要的数据即可，至于后端人员怎么实现这个接口，前端人员并不关心！
 *  前端页面用ajax解析url，获取数据进行页面端的处理，然后再按照上述地址返回给后端。
 *  前端人员要用这个接口来做什么，后端人员同样不需要关心！双方都只专注于自己需要实现的业务逻辑。

## RESTful风格的API ##

RESTful风格的API是前后端分离的最佳实践。

*  RESTful推荐每个URL能操作具体的资源。
 *  能准确描述服务器对资源的处理动作。
 *  通常服务器对资源支持get/post/put/delete/等，用来实现资源的增删改查。
 *  前后端分离的话，这些api-url是对接的桥梁，采用restful接口地址，含义才更清晰、见名知意。

by：铁乐与猫

参考：  
[https://blog.csdn.net/jielysong117/article/details/68948972][https_blog.csdn.net_jielysong117_article_details_68948972]

[https_blog.csdn.net_jielysong117_article_details_68948972]: https://blog.csdn.net/jielysong117/article/details/68948972