新时代架构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)处理数据并返回,前端渲染界面

  1. 前端发送请求:
    用户在页面上进行某些操作(如点击按钮、提交表单)。
    Vue.js 使用 Axios 或其他 HTTP 库,通过 HTTP 请求(GET、POST、PUT、DELETE 等)将请求发送给后端。
  2. 后端处理请求:
    Spring Boot 的控制器(@RestController)接收前端的请求,解析数据。
    根据请求调用相应的 服务层(Service)和 数据访问层(DAO)来处理业务逻辑、查询或更新数据库。
  3. 后端返回数据:
    后端处理完数据后,将结果(通常是 JSON 格式的数据)通过 HTTP 响应返回给前端。
  4. 前端接收数据并渲染:
    Vue.js 的 Axios 获取后端返回的数据。
    Vue 根据接收到的数据更新视图(UI),让页面内容动态变化并展示给用户。
    举例
  5. 用户点击 "查询订单" 按钮。
  6. Vue 通过 Axios 向后端发送一个请求:
js 复制代码
axios.get('/api/orders?userId=123').then(response => {
    // 后端返回的数据保存在 response 中
    this.orders = response.data; // 把订单数据绑定到 Vue 的 data
});
  1. 后端 Spring Boot 接收到请求,查询数据库并返回结果:
js 复制代码
@RestController
public class OrderController {
    @GetMapping("/api/orders")
    public List<Order> getOrders(@RequestParam int userId) {
        return orderService.getOrdersByUserId(userId);
    }
}
  1. 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是干什么的呢?

组件化开发:

相关推荐
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_2 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏2 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
Pomelo_刘金3 小时前
用 DDD 把「闹钟」需求一点点捏出来
架构·rust·领域驱动设计
Pomelo_刘金3 小时前
Clean Architecture 整洁架构:借一只闹钟讲明白「整洁架构」的来龙去脉
后端·架构·rust
双力臂4043 小时前
Spring Boot 单元测试进阶:JUnit5 + Mock测试与切片测试实战及覆盖率报告生成
java·spring boot·后端·单元测试
碳酸的唐3 小时前
Inception网络架构:深度学习视觉模型的里程碑
网络·深度学习·架构
小毛驴8504 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
itLaity4 小时前
基于Kafka实现简单的延时队列
spring boot·分布式·kafka
midsummer_woo5 小时前
基于spring boot的医院挂号就诊系统(源码+论文)
java·spring boot·后端