SpringBoot+Vue的明白（含axios/ajax）-前后端交互前端篇

天津储鑫盛钢材现货供应商 · 2025-2-14 16:13:35

引言

我是一个喜欢知其然又知其所以然的人，快速入门致使我对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）的互换
ajax是异步交互，即在不革新界面的环境下也可以哀求到后端数据进行展示
ajax的哀求一般用于对应后端哀求路径
可以看下这篇
Ajax快速入门
前端（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 向后端发送一个哀求：

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

复制代码

后端 Spring Boot 汲取到哀求，查询数据库并返回结果：

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

复制代码

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

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

复制代码

Vue作用

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

下面主要讲解一下和前端有关的2和3
响应式动态绑定

正如所说的，就是你的数据更改后页面会主动更改你的信息不需要革新网址进行操作
底层我们后端人员不用研究

就是调用从后端来的信息写代码加方便，且前端更改也能响应
好比前端更改了某个值，若该界面就有对应值的显示，他也会酿成对应
但是后端大概还没担当到该值的更改，需要提交后后端数据才会更新
Vue 只在前端做数据变化 → 视图更新，不会主动通知后端
单页面应用SPA

这里的JS动态替换：JS中可以写html和css，好比下面的方法1

方法1
不用url跳转，而是用js函数的方式实现，通过innerHTML操作DOM更换我们id为app里的html内容
不常用，已淘汰

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>SPA 示例</title>
</head>
<body>
<nav>
<button onclick="showHome()">主页</button>
<button onclick="showAbout()">关于</button>
</nav>
<div id="app">这里是主页内容</div>
<script>
function showHome() {
document.getElementById("app").innerHTML = "<h2>这里是主页</h2><p>欢迎来到主页！</p>";
}
function showAbout() {
document.getElementById("app").innerHTML = "<h2>关于我们</h2><p>这是关于页面。</p>";
}
</script>
</body>
</html>

复制代码

前端路由

界说一个前端路由
然后里面创建组件，然后挂载，我的明白是组件就相称于差别的页面
路由里包罗差别组件，组件用对应的url和html页面进行匹配
点击对应url按键就会哀求对应的url，url对应的vue组件就会替换内容
直接在地址栏输入

http://localhost:8080/about

复制代码

会被路由拦截加载对应vue组件

关于2的表明
3中vue组件里面大概哀求后端

前端路由URL和后端API URL的区别

前端URL和后端URL有所差别
前端就是展示界面用的，后端就是在界面根本上axios访问后端数据喽
axios界说是在原有Vue的url根本上+ /function（因为axios本来就在Vue组件中界说）

前端路由的数据从哪里来的

图一非常的恐惧解决了我的问题

Vue和只用三件套+axios区别

说实话，其实看完Vue这部分内容其实就能明白了
只使用 HTML + CSS + JavaScript + Axios 也能实现前后端分离，但 Vue 这样的框架提供了更好的开辟体验和维护性。我们先看不用 Vue 如何实现前后端分离，再分析 Vue 的上风。

关于地址栏url和axios哀求不一致

Vue

所有的axios都是隐式调用不会出如今我们用浏览器的地址栏中
而出如今我们地址栏中的都是前端路由的跳转地址！！！
我认为就是
通过 前端路由+参数 来进行内部数据替换
好比这个

而我们的后端和这个网址的url是不一样的
前端路由中的axios或调用/admin/dish/#{id}查询返回数据（而前端url是dish/add?id=69）
然后我们修改完后点击按钮保存按钮会执行/admin/dish的Put哀求进行菜品修改

JSP+Servlet中的

地址栏url对应我们controller/后端的url
因为这个直接返回的就是整个页面
固然他里面也可以带着axios里面实现异步更新
所以后端的设置的哀求URL会比前端可以调用（这里只返回页面的URL）的多

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

SpringBoot+Vue的明白（含axios/ajax）-前后端交互前端篇

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云