| 浅谈前后端分离（上篇） | 您所在的位置：网站首页 › vue前后端分离的好处 › 浅谈前后端分离（上篇） |
浅谈前后端分离（上篇）
|
一、什么是前后端分离？ 前后端分离是一种架构模式，说通俗点就是后端项目里面看不到页面（JSP|HTML）,后端给前端提供接口，前端调用后端提供的REST风格接口就行，前端专注写页面（html|jsp）和渲染（JS|CSS|各种前端框架）；后端专注写代码就行。前后端分离的核心：后台提供数据，前端负责显示 二、为什么要前后端分离？为了了解这个问题，我们有必要先了解一下 Web的研发模式演变，关于这个题材，可以查看下面这篇博文 https://github.com/lifesinger/blog/issues/184 我们不能“为了分离而分离”，而应该“为了真正理解web开发、为了更好完成需求而分离” 三、前后端分离的优点1、前端静态化 前端有且仅有静态内容，再明确些，只有HTML/CSS/JS其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装。前端内容的运行环境和引擎完全基于浏览器本身2、后端数据化 后端可以用任何语言，技术和平台实现。遵循一个原则：只提供数据，不提供任何和界面表现有关的内容。统一API接口，接口完全可以共用。提供的数据可以用于任何其他客户端（如IOS,安卓，pc,微信小程序等）通过一些代码重构，就可以大量复用接口，提升效率3、平台无关化 前端三大技术（HTML/CSS/JS）本身就是平台无关的。后台链接部分的本质是实现合适的RESTful接口和交互JSON数据，就这两者而言，任何技术和平台都可以实现。前后端交给不同的人来编写，明确划分职责，发现bug的时候可以快速定位。vue.js等框架编写前端的时候，会比之前写Jquery更简单快捷。4、架构分离化 前端架构完全基于HTML/CSS/JS的发展和js框架的演变，由于前台是纯静态内容，大型架构方面可以考虑向CDN方向发展。后端架构几乎可以基于任何语言和平台的任何解决方案，大型架构方面，RESTful Api可以考虑负载均衡，而数据，业务实现等可以考虑数据库优化和分布式。在大并发情况下，可以同时水平扩展前后端服务器。即使后端服务器暂时超时或者宕机，前端页面也会正常访问，只是数据刷新不出来而已，当然现在一般是服务器集群，少有出现这种现象。5、前后端流量大幅减少 减少后端服务器的并发压力，除了接口以外的其他所有http请求全部转移到前端服务器上页面不再是全部刷新，而是异步加载，局部刷新，减轻压力。6、表现性能的提高 页面性能，第一次获取的确会有所损失后续使用这个页面，性能优势就完全体现了，页面的绝大部分内容都是本地缓存直接加载，远程获取的仅仅是1-2个10k的内容，其加载时间百毫秒内，这和本地页面几乎无区别，其前端加载和相应速度得到非常大的提高。7、安全性方面的集中优化 前端静态以后，一些注入式攻击在分离模式下被很好的规避。后端安全问题集中化了，主要考虑处理RESTful接口安全安全架设和集中优化变得更明确和便利四、前后端分离的缺点前后端学习门槛增加数据依赖导致文档重要性增加前端工作量加大SEO的难度加大后端开发模式迁移增加成本五、什么场景下可以考虑前后端分离页面布局复杂，使用了主题和样式。需要有较高的页面渲染效果前端页面中包含复杂业务逻辑页面需要渲染的数据量较大 六、前后端分离技术方案目前前后端分离的方式主要有两种，一种是使用 nodejs 作为中间层进行全栈式的开发，另一种是前后端通过约定的数据接口进行通信，以相同的数据格式如 JSON 格式进行数据传输。  图 1-1 借助 nodejs 进行前后端分离  图 1-2 借助数据接口进行前后端分离  七、参考文档对于前后端分离技术的理解和实现 https://blog.csdn.net/jielysong117/article/details/68948972?spm=a2c4e.11153940.blogcont657614.9.20d63e7doe02Z8 前后端分离扫盲 https://www.imooc.com/article/details/id/26469 前后端分离技术方案 https://mp.weixin.qq.com/s?_biz=MzU2MDU3MzE1Mg==&mid=2247483910&idx=2&sn=020fa6e13a11b13bb4d8a01e08e6bdf4&chksm=fc04bd89cb73349f95d410467b9b95d574a02a66635b9c7cc396979c83cd62f94fd77e3dd76b&token=1314010464&lang=zhCN#rd 八、总结任何一项技术以及架构都不是适用于任何场景，前后端分离同样也是如此。虽然前后端分离架构能带来许多的好处，但前提是建立在开发团队合适的基础上的 |
【本文地址】