新时代架构SpringBoot+Vue的理解（含axios/ajax）

引言

我是一个喜欢知其然又知其所以然的人，快速入门致使我对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

我们的vue+SpringBoot这种开发模式就是真正的前后端分离

为什么这样所呢？

因为其不靠后端渲染页面，具体解释如下

在传统的 JSP + Servlet 模式中，JSP 文件直接嵌入 Java 代码来渲染动态页面，Servlet 负责数据的处理和传递。

在 Vue + Spring Boot 模式中，Vue.js 作为前端框架来动态渲染页面，它不再依赖于后端渲染 HTML 页面。Vue 负责从后端请求数据，接收到数据后通过组件的方式在客户端渲染 HTML 页面。这意味着前端和后端通过 API 进行通信，而不是直接由后端传递渲染好的 HTML 页面。

注：这里的渲染不是浏览器渲染呈现html页面，而是将动态数据赋值到静态网页变量的过程（比如JSP中的EL表达式赋值过程）

SpringBoot

众所周知了，分成三层架构

Controller层：负责接收前端（客户端）网络请求以及返回给前端对应数据

Service层：这一层被Controller调用，负责对前端传输进来的数据（Request中的数据）进行数据处理，生成对应的数据再返回给Controller层

Dao/Mapper层：一般这一层都是被Service调用，用来查询数据库中的内容，返回内容来给Service方法以实现动态数据的效果

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

Vue（前端）

axios/ajax

我最疑惑的点就是前端怎么请求到后端的数据的这个点

简单来说就是：通过axios/ajax这项技术向后端发送请求（http）进行数据（json）的交换

前端（Vue）通过 Axios 发送请求，后端（Spring Boot）处理数据并返回，前端渲染界面

前端发送请求：
用户在页面上进行某些操作（如点击按钮、提交表单）。
Vue.js 使用 Axios 或其他 HTTP 库，通过 HTTP 请求（GET、POST、PUT、DELETE 等）将请求发送给后端。
后端处理请求：
Spring Boot 的控制器（@RestController）接收前端的请求，解析数据。
根据请求调用相应的服务层（Service）和数据访问层（DAO）来处理业务逻辑、查询或更新数据库。
后端返回数据：
后端处理完数据后，将结果（通常是 JSON 格式的数据）通过 HTTP 响应返回给前端。
前端接收数据并渲染：
Vue.js 的 Axios 获取后端返回的数据。
Vue 根据接收到的数据更新视图（UI），让页面内容动态变化并展示给用户。
举例
用户点击 "查询订单" 按钮。
Vue 通过 Axios 向后端发送一个请求：

js 复制代码

axios.get('/api/orders?userId=123').then(response => {
    // 后端返回的数据保存在 response 中
    this.orders = response.data; // 把订单数据绑定到 Vue 的 data
});

后端 Spring Boot 接收到请求，查询数据库并返回结果：

js 复制代码

@RestController
public class OrderController {
    @GetMapping("/api/orders")
    public List<Order> getOrders(@RequestParam int userId) {
        return orderService.getOrdersByUserId(userId);
    }
}

Vue 使用返回的数据动态渲染订单列表页面：

js 复制代码

<ul>
  <li v-for="order in orders" :key="order.id">{{ order.name }} - {{ order.price }}</li>
</ul>

Vue作用

说完Axios，我认为单纯的三件套html+css+js以及axios就可以实现前端效果（前后端分离）那么vue是干什么的呢？

组件化开发：