当前位置: 代码迷 >> 综合 >> “深入浅出”之老黄谈前后端分离
  详细解决方案

“深入浅出”之老黄谈前后端分离

热度:91   发布时间:2023-12-02 15:57:06.0

今天详细了解了前端的发展史,同时重点了解了前后端分离的架构原理,个人感觉通过今天的学习研究对前后端分离有了更为深刻透彻的认识,接下来就与大家分享下老黄眼中的前后端分离。

前端发展历程

前端发展简史SPA诞生的前夜

在了解前端发展历史的时候一定要重点说下前端的几次变革,最开始的网页就是集成了图片文字可以通过链接相互跳转的静态页面,所有的网页都是通过后端进行渲染(数据填充)然后返还给浏览器进行显示的(后端路由),这个时候的网站我称之为“WebPage”,WebPage最大的问题就是:1. 页面组件集成化高,且页面不能复用(页面布局稍有不同,就需要一个新的Page)。2. 任何数据更新都需要请求后端,后端更新数据刷新整个页面,这个时代典型的应用特点就是后端的MVC架构。问题总是与解决问题并存的,随着时间的流逝,Ajax横空出世,标志性事件就是Google推出的Gmail以及谷歌地图,这算是前端的第一次变革,局部加载带来流畅度体验的同时,也使得前端开发渐渐从后端中分离出来,有了Ajax这个把利器,前端页面完全拥有了自主权,页面数据从起初的无条件牺牲(前端页面需要被加工成包含服务端脚本的特殊页面例如:JSP,PHP,ASP等才能获取数据),到自主获取数据而不需要被改的面目全非(深入浅出里边讲过前端开发人员是看不懂JSP的,那时候的前端开发人员更像是UI设计师也就是不懂技术的“画家”),并使得动态网页成为可能,这是质的飞跃。
在这里插入图片描述
Ajax的诞生有如星星之火,紧接着DOM操作的神器基于JavaScript的JQuery诞生了,JQuery是在第二次浏览器大战的背景下诞生的,他主要解决了浏览器碎片化以及适配问题,JQuery的诞生使得前后台数据交互方式变成了:前端通过Ajax向后台请求数据,然后通过JQuery操作更新DOM树,至此前端呈现出了欣欣向荣的局面。随着前端的独立,网页复杂性的不断提高,渐渐出现了前端MVC架构,前端既可以读写数据,也可以切换视图,同时还实现了用户交互,这样前端看起来更像是一个应用(WebPage向WebApp(SPA的前身)的转变),MVC的进一步发展便是
MVVM的诞生,典型的就是前端三大框架(用于开发前端应用的框架)。2009年,Node项目诞生使得JavaScript可以在服务器上运行,JavaScript成为唯一支持浏览器和服务器的语言,同时也意味着前端工程师可以编写后端的程序了,此刻前端彻底独立,实现了全栈式开发,在到后来就是大前端的时代(BFF的诞生)以及时下流行的“中途岛”模式。

Tomcat在后端渲染以及前端渲染扮演的角色

在SSR的时代,Tomcat是应用服务器的作用,他不光是负责简单的静态资源处理,还参与后台业务逻辑的执行,通信,他是HttpAPI实现的必要条件。同时Tomcat也可以作为一个简易版的Web服务器处理静态资源,当然和Nginx以及Apache比起来会差点。既然Tomcat可以同时扮演两个角色也就意味着,我们可以将前后端分离的项目集中部署到其中,虽然部署方式是集成后部署,但仍然是前后端分离的架构,这一点需要特别说明。

Node.js与V8引擎

在了解前端发展史的时候我们首先必须明白前端开发与后端开发的本质:前端开发指得是面向浏览器的开发,代码最终运行在浏览器端。后端开发是面向服务器的开发,代码最终运行在服务器端。如果你了解前端历史知道著名的浏览器大战就会知道当年Chrome是如何击败一众高手,最后一枝独秀独步武林的。Chrome成功的关键就是为JavaScript正名(V8引擎的内嵌),起初的JavaScript只能操作一下Form表单,执行简单的UI逻辑,Node.js的诞生使得JavaScript可以实现针对服务器进行开发,同时也催生了 node-webkit 等项目,使得JavaScript开发针对GUI的跨平台桌面应用成为可能。2010 年 1 月,NPM 作为 Node.js 的包管理系统首次发布。开发人员可以按照 CommonJS 的规范编写 Node.js 模块,然后将其发布到 NPM 上面供其他开发人员使用, 前端逐渐呈现出了大一统的趋势。
在这里插入图片描述

分离部署还是分离运行(前后端分离的本质)

前后端分离的本质在于以下几点:1. 页面跳转(路由问题)。2.数据获取。以前的网站页面请求方式为浏览器通过URL请求,后端接受请求,利用后端的模板技术以及服务端脚本填充数据,返还视图模型,视图解析器解析视图模型并填充数据形成包含最新数据的页面返回给浏览器,浏览器呈现页面(Java中的Jsp以及JSTL和EL表达式),总结来看页面的渲染在后端,数据的获取为EL表达式。前后端分离之后,后端只负责提供接口(RestFul),前端通过Ajax请求接口数据,JS负责处理数据并控制UI逻辑,代码运行在浏览器中,前后端是独立的两个部位。比如你是基于node.js运用前端三大框架进行的开发,那么在前端项目研发完成之后需要经过node.js的编译,编译后的文件才能部署到web服务器,才能在浏览器端运行。所以前后端分离的本质与部署方式以及分离运行是无关的,应该看他的数据获取方式,页面渲染方式,以及是否前端路由控制页面跳转,后端既不参与页面跳转,也不参与数据填充,只负责提供数据(类似Android的后端,WebApp就相当于Android的app),处理后端的业务。

  相关解决方案