新时代架构SpringBoot+Vue的理解(含axios/ajax)

时间:2025-01-29 14:21:20

SpringBoot+Vue

我是一个喜欢知其然又知其所以然的人,快速入门致使我对JavaWeb整体开发有点模糊不清,这篇我们就讲一下SpringBoot+Vue的这个模式如何进行的数据交互,这篇重点讲前端,因为我是一个后端开发人员,当你用过SpingBoot就知道他工作原理是什么

SpringBoot+Thymeleaf

上篇文章我们讲过了JSP+Servlet
用过SpringBoot的朋友知道SpringBoot代替了Servlet的功能进行数据处理和响应
那么JSP的替代者是谁呢
以下是AI回答

在 Spring Boot 中,JSP 通常被 Thymeleaf 或其他模板引擎所替代。Thymeleaf 是一种现代的模板引擎,它的主要作用与 JSP 类似:用于在服务器端动态生成 HTML 页面。但是,与 JSP 不同的是,Thymeleaf 具备更好的语法、性能和灵活性,并且 支持更强的模板逻辑,例如条件判断、循环等。
Spring Boot + Thymeleaf 的工作方式:
控制器(Controller):处理请求,执行业务逻辑,并将模型数据(如从数据库查询到的信息)传递到视图模板。
模板引擎(Thymeleaf):接收到模型数据后,生成最终的 HTML 内容,并将其返回给浏览器。

其实就是跟JSP和Servlet差不多
与Vue+SpringBoot不同的是
这种方式并没有实现前后端分离的模式

还是在服务器进行的前端html页面的生成然后返回给客户端再展示
这个框架我们就不多说了,不经常使用

Vue+SpringBoot

SpringBoot

众所周知了,分成三层架构
Controller层:负责接收前端(客户端)网络请求以及返回给前端对应数据
Service层:这一层被Controller调用,负责对前端传输进来的数据(Request中的数据)进行数据处理,生成对应的数据再返回给Controller层
Dao/Mapper层:一般这一层都是被Service调用,用来查询数据库中的内容,返回内容来给Service方法以实现动态数据的效果

至于IOC/DI等内容就不多讲了

Vue+axios/ajax

这里我不明白的点就是前后端数据的交互方式