浅聊前后端分离开发和前后端不分离开发模式

ops/2024/10/10 15:13:03/

1.先聊聊Web开发的开发框架Spring MVC

        首先要知道,Spring MVC是Web开发领域的一个知名框架,可以开发基于请求-响应模式的Web应用。而Web开发的本质是遵循HTTP(Hyper Text Transfer Protocol: 超文本传输协议)协议【发请求,给响应】。所以作为服务端,只要能运行一个服务,此服务监听某个端口上由客户端发送过来的请求,然后获取请求数据,进行业务处理后,最后给客户端发送一个响应,就可以实现Web开发。所以理论上不使用Web开发框架(如Spring MVC)甚至不使用Servlet API,也可以实现Web开发。

        比如经典的网络框架:Netty 就脱离了Servlet API。Netty开发的程序启动后,就监听某个端口上发送过来的数据,然后自己解析这些数据,进行业务处理,处理完成后,给客户端进行响应(按照客户端可以理解的数据格式向其响应数据)。【补充:Netty框架基于TCP协议。同时,Netty也支持UDP协议、HTTP协议、WebSockets协议、SSL/TLS协议等多种协议。所以,虽然Netty主要基于TCP协议,但它也具有广泛的协议支持能力,适用于各种不同类型的网络通信需求。

        通过以上分析可知,想要实现Web开发中的请求-响应。需要客户端和服务端事先约定好数据格式。众所周知的数据格式就是HTTP协议。当客户端根据HTTP协议给服务端传输数据,服务端就可以方便的进行解析;当服务端根据HTTP协议给客户端传输数据,客户端也可以方便的进行解析。

2. 从人的角度理解前后端分离开发

        前端页面由前端开发人员编程实现,后端业务逻辑由后端开发人员编程实现。这就是我一开始理解的前后端分离。

3. 从业务逻辑的角度理解前后端分离开发

3.1 前后不分离开发

        前端页面的跳转逻辑也是由开发人员自己编写控制的。比如在登录页面上输入用户名和密码登录成功后,需要跳转到系统首页,这个过程需要通过后端的业务逻辑控制进行跳转【这个就叫做前后不分离!】。此时,这个开发人员不仅要编写后端的业务逻辑,还要控制页面的数据渲染和页面跳转逻辑。如下图:

        通常在前后端不分离的开发模式中,需要在后端使用 转发 或 重定向跳转到指定页面。并且服务端返回的页面是完整的页面(暂不考虑Ajax),即服务端返回的是页面结构 + 数据。【这种前后端不分离的开发模式,也成为服务端渲染,渲染就是把数据填充到页面上】

3.2 前后分离开发

        服务端不再控制页面的跳转逻辑,以及页面数据的如何填充。如下图:

        所以可以看出,前后端分离,本质上是数据和页面分离。即数据由后端(服务端)负责,页面由前端负责。在前后端分离开发模式下,服务端给客户端响应的数据通常是 JSON格式的数据。

        前后端分离开发模式下,如果使用Spring MVC框架,使用 @RestController 和 @ResponseBody注解。

4. 前后端分离开发模式举例

        Spring MVC的经典例子。客户端发送一个请求给服务端,服务端只响应数据给客户端。如下图:

5. 前后端不分离开发模式举例

        在前后端不分离开发模式中,需要使用到模板引擎,常见的模板引擎有:Velocity, JSP,Freemarker,Thymeleaf等。SpringBoot官方推荐的模板引擎是Thymeleaf,其开发的步骤如下(具体开发案例可以查询网络,有很多案例):

(1)引入 spring-boot-starter-thymeleaf 依赖;

(2)编写页面模板文件(就是 html文件);

(3)接收客户端请求,进行业务处理,然后跳转到指定页面;

(4)使用Thymeleaf语法,给页面填充数据;

(5)把整个页面响应给客户端。


http://www.ppmy.cn/ops/121435.html

相关文章

查找计算机类文献的专业数据库介绍

一、ACM Digital Library 简介:美国计算机协会(Association for Computing Machinery,ACM)创立于1947年,是全球历史最悠久和最大的计算机教育、科研机构。ACM目前提供的服务遍及全球100多个国家,会员数超过…

MyBatis-Plus 字段对应不上或字段在MySQL中为关键字

MyBatis-Plus 名称对应不上比如在新增时如果名字对应不上或者改字段字段在MySQL中为关键子,在执行SQL操作的时候都会报错 解决方法 问题:如果是表名出现对应不上 解决方法:在Java实体类上加TableName("数据库表名") 问题&#…

一些以前使用的linux及shell命令,gnuplot脚本

tar tar -cvzf xxx.tar.gz * -c,--create 创建新的tar文件 -v,--verbose 列出每一步处理涉及的文件的信息,只用一个“v”时,仅列出文件名 使用两个“v”时,列出权限、所有者、大小、时间、文件名等信息 -z&#xff0c…

uniapp实战教程:如何封装一个可复用的表单组件

在uniapp开发过程中,表单组件的使用场景非常广泛。为了提高开发效率,我们可以将常用的表单组件进行封装。本文将带你了解如何在uniapp中封装一个表单组件,让你只需要通过属性配置轻松实现各种表单,效果图如下: 一、准备…

数据集-目标检测系列-豹子 猎豹 检测数据集 leopard>> DataBall

数据集-目标检测系列-豹子 猎豹 检测数据集 leopard>> DataBall 数据集-目标检测系列-豹子 猎豹 检测数据集 leopard 数据量:5k 想要进一步了解,请联系。 DataBall 助力快速掌握数据集的信息和使用方式,会员享有 百种数据集&#x…

wsl2 ubuntu 桥接以太网卡

注意:此方法需要至少 Windows 11 22H2。桥接模式就是将主机网卡与虚拟机虚拟的网卡利用虚拟网桥进行通信。 在桥接的作用下,类似于把宿主机虚拟为一个交换机,所有桥接设置的虚拟机连接到这个交换机的一个接口上,宿主机也同样插在这…

前端——js函数+DOM对象

一、函数 1.构建函数 // 接受实参 function name(t1, t2, t3, t4) { // code console.log(t1, t2, t3, t4); } 2.执行函数 name() 3.return function xxx() { return xxxx console.log(return 后的代码不执行); } 4.箭头函数 >常常以匿名函数的身份,出现在js中…

初学51单片机之I2C总线与E2PROM二

总结下上篇博文的结论: 1:ACK信号在SCL为高电平期间会一直保持。 2:在字节数据传输过程中如果发送电平跳变,那么电平信号就会变成重复起始或者结束的信号。(上篇博文的测试方法还是不能够明确证明这个结论&#xff0…