Web前后端分离

时间:2021-09-14 16:43:42

第一篇博客:见谅

用自己的通俗语言讲web工程的前后端分离:

只是从自己的角度去分析,我眼中的前后端分离(可能不对)

首先要明白我们服务器和浏览器之前传输和接受的是什么:

静态文件(html,css,js 等格式这样的文件) 就如同,你的浏览器能够直接打开桌面text文档,html文件和图片的文件

这就是问题关键,我们所谓的动态页面,是在浏览器接受了这些html 、css 和 js之后 ,浏览器(内核)去解析这些文件建并加载

然后动态的效果和渲染就出来了,所有的渲染和特效,是在客户端完成。

这里引用网上其他地方对servlet和jsp的关系来更加讲解这一点:

Servlet是一个特殊的Java程序,它运行于服务器的JVM中,能够依靠服务器的支持向浏览器提供显示内容。JSP本质上是Servlet的一种简易形式,JSP会被服务器处理成一个类似于Servlet的Java程序,可以简化页面内容的生成。Servlet和JSP最主要的不同点在于,Servlet的应用逻辑是在Java文件中,并且完全从表示层中的HTML分离开来。而JSP的情况是Java和HTML可以组合成一个扩展名为.jsp的文件。有人说,Servlet就是在Java中写HTML,而JSP就是在HTML中写Java代码,当然这个说法是很片面且不够准确的。JSP侧重于视图,Servlet更侧重于控制逻辑,在MVC架构模式中,JSP适合充当视图(view)而Servlet适合充当控制器(controller)

Web前后端分离

浏览器url输入login.jsp 这时候发生的过程是,客户端请求一个文件资源路径 ,因为jsp是特殊servlet ,其本质就是相当于,servlet中直接写html返回字符串,最后jsp,经过服务端jvm编译之后,走java的逻辑代码,将数据提前渲染在文件中,然后返回浏览器(客户端)html类型的文件。这就相当于访问servlet再用输出流输出的html页面,效率没有直接使用html高(是每次访问访问都会输出流)

半分离(前端资源代码和java程序代码还是在一个容器中)

前后端半分离,前端负责开发页面,通过接口(Ajax)获取数据,采用dom操作对页面进行数据绑定,最终是由前端把页面渲染出来。这也就是其他博客里说的,Ajax与SPA应用(单页应用)结合的方式。其结构图如下:

Web前后端分离

前端使用angular,vue ,react,编译打包,将代码放到web项目中。目前个人涉及的也是这种模式。但从分离的角度思考,个人没有涉及很深,至于网上的大牛说这样的分离会有缺点时:资源消耗严重,在业务复杂的情况下,一个页面可能要发起多次http请求才能将页面渲染完毕。移动端建立http请求消耗多少资源过多。个人之前写过一个大坑的页面(基于angular)下拉框的联动,因业务需求有一个五级联动的下拉框,每个下拉框又要自己的下拉,数据是后端接口拿过来,因此每次加载到这个也页面的时候超慢,每个下拉框点击之后,又走一次后端查询下个下拉框,导致页面渲染速度脱层。

分离(前端工程工程单独部署)

前端工程单独部署,运行在node环境下,与java层完全剥离 ,更偏向于数据交互,部分逻辑在node上实现,架构分离的更纯粹,此处不做过多描述0.0