为什么要前后端分离

前后端职责不清

在业务逻辑复杂的系统里,我们最怕维护前后端混杂在一起的代码,因为没有约束,M-V-C每一层都可能出现别的层的代码,日积月累,完全没有维护性可言

虽然前后端分离没办法完全解决这种问题,但是可以大大缓解。因为从物理层次上保证了你不可能这么做

开发效率问题

淘宝的Web基本上都是基于MVC框架webx,架构决定了前端只能依赖后端。所以开发模式:前端写好静态demo,后端翻译成VM模版,这种模式的问题就不说了,被吐槽了很久

直接基于后端环境开发也很痛苦,配置安装使用都很麻烦。为了解决这个问题,我们发明了各种工具,比如VMarket,但是前端还是要写VM,而且依赖后端数据,效率依然不高。另外,后端也没法摆脱对展现的强关注,从而专心于业务逻辑层的开发

对前端发挥的局限

性能优化如果只在前端做空间非常有限,于是我们经常需要后端合作才能碰撞出火花,但由于后端框架限制,我们很难使用Comet、Bigpipe等技术方案来优化性能

怎么做前后端分离?

前端:负责View和Controller层

后端:负责Model层,业务处理/数据等

前后端人员双方约定好接口的数据格式,比如:前端需要调用一个用户信息的接口,数据格式为{name:”,gender:”},那么,后端人员只需要告诉他一个接口url(如:http://192.168.1.2:8080/pro/userInfo),并且将这个接口返回前端想要的数据即可,至于后端人员怎么实现这个接口,前端人员并不关心!
前端页面用ajax解析url,获取数据进行页面端的处理,然后再按照上述地址返回给后端,就想APP和后台接口对接是一个道理。
至于前端人员要用这个接口来做什么,后端人员同样不需要关心!双方都只专注于自己需要实现的业务逻辑

前后端分离的优势

前端静态化

前端有且仅有静态内容,再明确些,只有HTML/CSS/js. 其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装.前端内容的运行环境和引擎完全基于浏览器本身

后端数据化

后端可以用任何语言,技术和平台实现,但它们必须遵循一个原则:只提供数据,不提供任何和界面表现有关的内容.换言之,他们提供的数据可以用于任何其他客户端(如本地化程序,移动端程序)

平台无关化

前端3大技术本身就是平台无关的,而后台连接部分的本质是实现合适的RESTful接口和交互Json数据,就这2者而言,任何技术和平台都可以实现

构架分离化

前端架构完全基于HTML/CSS的发展和JS框架的演变,与我们耳熟能详的后台语言(如C#, Java, NodeJs等)完全无关. 由于前台是纯静态内容,大型构架方面可以考虑向CDN方向发展.

后端构架几乎可以基于任何语言和平台的任何解决方案,大型构架方面, RESTful Api可以考虑负载均衡;而数据,业务实现等可以考虑数据库优化和分布式

但总而言之,前后端的分离也实现了前后端构架的分离

前后端流量大幅减少

我们知道,前后端流量的大头是HTML/JS/IMG资源,而数据仅仅是小头,资源占到100K以上的页面不算大,但数据充其量10K左右,比如一个1万条记录的数据经过压缩也仅仅在100K左右,而一个稍大的JS库或图片就不止这些.

流量的减少在于”前端静态化”这个规则,在第一次获取以后静态资源会被浏览器缓存,即使浏览器继续轮询,服务端也会返回一个非常小Not Modified响应,流量几乎可以忽略不计.

举例说明,在一个页面为100K,数据为10K的页面中,100次请求的流量是100K+10X100 = 1.1M. 显而易见,其流量是大幅低于每次获取完整HTML的情况的

表现性能的提高

有人质疑这种模式的页面性能问题,其实情况没有那么悲观: 第一次获取的确会有些许损失,但我认为,损失微乎其微,一个HTML页面的加载,同时加载10多个几十K的JS, Image的情况非常常见,再多1-2个10K的Json也并非沉重负担.

但后续使用这个页面,性能优势就完全体现了,页面的绝大部分内容都是本地缓存直接加载,远程获取的仅仅是1-2个10K的内容,其加载时间百毫秒内,这和本地页面几无区别,其前端加载和响应速度得到非常大的提高是显而易见的.

前后端平台无关和技术无关

前端是纯HTML技术,前端人员只需要记事本就可以开发并非一句”戏言”,而后端能够实现RESTful的框架和平台比比皆是, 完全可以选择更适合团队,人员和公司的技术路线而不在纠结于平台和技术的选择

安全性方面的集中优化

前端静态化以后,前端页面攻击几无可能,一些注入式攻击在分离模式下被很好的规避; 而后端安全问题集中化了,仅仅只处理一个RESEful接口的安全考虑,安全架设和集中优化变得更明确和便利

开发的分离和构架的分离

也许很多团队还是1个开发人员全包前后端的模式,但前端的要求越来越高,前后端人员的需求分化日益明显,一旦系统上级别上档次,其分离的需求必将出现.

前后端人员的完全分离可以使得他们在各自领域进一步求深求专,成为更加专业的高手;另外,前后端的构架也可以分开考虑和架设,前端构架就能集中考虑性能和优化,而业务,安全和存储等问题就能集中到后端考虑

前后端分离状态下的工作与交互相关推荐

  1. 前后端分离架构下CSRF防御机制

    背景 1.什么是CSRF攻击? 这里不再介绍CSRF,已经了解CSRF原理的同学可以直接跳到:"3.前后端分离下有何不同?". 不太了解的同学可以看这两篇对CSRF介绍比较详细的参 ...

  2. 前后端分离模式下的权限设计方案

    前后端分离模式下,所有的交互场景都变成了数据,传统业务系统中的权限控制方案在前端已经不再适用,因此引发了我对权限的重新思考与设计. 权限控制到底控制的是什么? 在理解权限控制之前,需要明白两个概念:资 ...

  3. 前后端分离开发下的权限管控 :SpringSecurity 框架

    首先在了解前后端分离模式下使用SpringSecurity框架之前,我们需要先了解token和jwt(Json Web Token)技术 token 和 session 的区别? 由于http协议是无 ...

  4. localStorage.setItem()前后端分离情况下使用

    localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除. localStorage 属性是只读的. 前后端分离情况下,可以将后端返回的数据保存到localStor ...

  5. 【sprintboot+vue】前后端分离模式下的登录验证码验证

    [项目背景] 考虑登录时的验证安全,需要添加验证码验证,纯前端实现的验证码其实没有真正意义上做到安全验证的要求,简单一个网页爬虫就能获取到前端生成的验证码,所以应该由后台生成验证码,并由后台完成校验过 ...

  6. 网站静态化——前后端分离(下)

    我第一次听说nodejs技术大概是在2009年年末,不过我真正认真在网络上进一步了解nodejs还是在2010年年中,当时对nodejs的认识和我现在对nodejs的认识有着天壤的区别,开始想了解no ...

  7. 前后端分离状态保持问题之JWT

    问题原因 在传统的项目中我们利用,session+cookie来保持用户的登录状态,但这在前后端分离项⽬目中出现了问题;sessionid是使用cookie存储在客户端的,而cookie遵守同源策略, ...

  8. Java前后端分离第三方登录_网站前后端分离情况下如何实现QQ微信等第三方登陆-Fun言...

    前言 最近在弄第三方登录,实现起来很简单,就是调几个接口获取个人信息即可,详细了解:maven项目整合QQauth2.0第三方登录详细说明,然后因为本网站是前后端分离的,所以不能再回调接口那里直接跳转 ...

  9. 网站前后端分离情况下如何实现QQ微信等第三方登陆

    本文转自Fun言网:https://funyan.cn/p/1705.html 前言 最近在弄第三方登录,实现起来很简单,就是调几个接口获取个人信息即可,详细了解:maven项目整合QQauth2.0 ...

  10. 【云原生】前后端分离项目下 如何优雅的联调程序?

    文章目录 一.什么是ApiFox? 二.ApiFox的好处 三.ApiFox 在企业中的应用 前后端分离开发利器 ⛅需求分析 ⛄设计接口 编写代码 ⚡生成接口文档 四.ApiFox 更多功能 ⏳导入文 ...

最新文章

  1. Java各版本的重大改变
  2. nginx訪問php配置,thinkphp5配置nginx访问
  3. 知乎上关于固态硬盘的一些知识
  4. MarkDown编辑器常用语法
  5. .NET Core开发实战(第18课:日志框架:聊聊记日志的最佳姿势)--学习笔记(上)...
  6. python批量打印机excel,python自动化办公系列03_单个以及批量处理excel文件
  7. 关于集合中元素的有序无序的易混淆点
  8. php如何反向排列数组,php中的sort()如何排列目录结构数组?
  9. Python获取文件后缀名
  10. Debian 8 时间同步
  11. 开源许可协议了解这些就够了
  12. 堆栈和内存分配[转]
  13. 软考之软件设计师之第一战计算机系统概论重点和坑
  14. PR基础学习(四) 简单裁剪视频
  15. 自动合并两个.bib 去除.bib中的重复条目
  16. 什么是iBeacon?
  17. ReactNative 深层连结
  18. 如何下载ArcGis Server离线地图瓦片数据
  19. android ui设计 知乎,界面设计进化!知乎日报2.0新版发布下载
  20. Python 爬虫 Selenium 基本使用

热门文章

  1. 鸿蒙历程和路标图,鸿蒙2.0来了?华为开发者大会时间确认:Mate40会不会首发?...
  2. android view 画文字,【Android自定义View】绘图之文字篇(三)
  3. 隐藏与显现_惠州楼盘冷热不均价格涨跌互现 差异化调控作用显现
  4. 河南科技大学计算机科学与技术专业多少分,2016年河南科技大学计算机科学与技术专业在陕西录取分数线...
  5. allennlp train 参数
  6. python爱好者社区公众号历史文章合集_微信公众号历史文章爬取api
  7. mysql checking permissions 优化_mysql 查询优化 ~ 善用profie利器
  8. 一个纸水杯的测试用例设计。
  9. 浅谈C++中qsort与sort的使用方法与区别
  10. ubuntu16.04下 sublime text输入中文