当前位置：首页 > article >正文

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

article 2026/5/11 18:22:02

文章目录

引言
SpringBoot+Thymeleaf
Vue+SpringBoot
- SpringBoot
- Vue（前端）
- - axios/ajax
  - Vue作用
  - - 响应式动态绑定
    - 单页面应用SPA
    - - 前端路由
    - 前端路由URL和后端API URL的区别
    - - 前端路由的数据从哪里来的
  - Vue和只用三件套+axios区别

引言

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

前端（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组件
在这里插入图片描述

在这里插入图片描述

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

前端URL和后端URL有所不同
前端就是展示界面用的，后端就是在界面基础上axios访问后端数据喽
axios定义是在原有Vue的url基础上+ /function（因为axios本来就在Vue组件中定义）
在这里插入图片描述

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

图一非常的惊骇解决了我的问题
在这里插入图片描述

在这里插入图片描述

Vue和只用三件套+axios区别

说实话，其实看完Vue这部分内容其实就能理解了
只使用 HTML + CSS + JavaScript + Axios 也能实现前后端分离，但 Vue 这样的框架提供了更好的开发体验和维护性。我们先看不用 Vue 如何实现前后端分离，再分析 Vue 的优势。
在这里插入图片描述

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

文章目录引言SpringBootThymeleafVueSpringBootSpringBootVue（前端）axios/ajaxVue作用响应式动态绑定单页面应用SPA前端路由前端路由URL和后端API URL的区别前端路由的数据从哪里来的 Vue和只用三件套axios区别引言我是一个喜欢知其然又知其所以然的…...

编程日记 2026/5/3 22:20:09

视频外绘技术总结：Be-Your-Outpainter、Follow-Your-Canvas、M3DDM

Diffusion Models专栏文章汇总：入门与实战前言：视频Inpaint的技术很火，但是OutPaint却热度不高，这篇博客总结比较经典的几篇视频Outpaint技术。其实Outpaint在runway等工具上很火，可是学术界对此关注比较少，博主从这三年的顶会中找到了最具代表性的三篇论文解读。目录 …...

编程日记 2026/4/7 20:24:30

HashMap讲解

在Java开发中，HashMap 是最常用的数据结构之一，它不仅提供了键值对的快速存储和检索功能，还具备较高的性能和较低的空间占用。但很多开发者对其底层原理并不清楚，今天我们将详细解析HashMap的内部结构，并用通俗的方式解…...

编程日记 2026/4/15 20:34:14

AIP-133 标准方法：Create

编号133原文链接AIP-133: Standard methods: Create状态批准创建日期2019-01-23更新日期2019-01-23 在REST API中，通常向集合URI（如 /v1/publishers/{publisher}/books ）发出POST请求，在集合中创建新资源。面向资源设计&#x…...

编程日记 2026/5/8 11:12:38

aerodrome交易所读合约分析

池地址 0xb2cc224c1c9fee385f8ad6a55b4d94e92359dc59token0 0x4200000000000000000000000000000000000006token1 0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913tickSpacing 100stakedLiquidity 4579376109215388530 snapshotCumulativesInside tickLower tickUpperslot0 …...

编程日记 2026/2/17 13:25:45

ts 基础核心

吴悠讲编程 : 20分钟学会TypeScript 无废话速成TS https://www.bilibili.com/video/BV1gX4y177Kf...

编程日记 2026/5/1 3:16:38

[内网安全] 内网渗透 - 学习手册

这是一篇专栏的目录文档，方便读者系统性的学习，笔者后续会持续更新文档内容。如果没有特殊情况的话，大概是一天两篇的速度。（实验多或者节假日，可能会放缓） 笔者也是一边学习一边记录笔记，如果…...

编程日记 2026/5/11 4:44:50

FaceFusion

文章目录一、关于 FaceFusion预览二、安装三、用法一、关于 FaceFusion FaceFusion 是行业领先的人脸操作平台 github : https://github.com/facefusion/facefusion官方文档：https://docs.facefusion.io/Discord : https://discord.com/invite/facefusion-1141…...

编程日记 2026/5/5 8:56:03

使用github提交Pull Request的完整流程

文章目录 1.Fork仓库2. git clone 仓库在本地3.对项目进行修改开发4.上传项目到远程仓库操作补充1. git add .2. git commit -m "提交信息"3. git pull4. git push总结完整工作流程示例 5.将更新的项目pull Request给原来的仓库主人当多人进行项目的开发的时候&…...

编程日记 2026/5/7 13:35:40

游戏与硬件深度协同，打造更精细的体验优化

高画质的游戏往往带来手机的发热和卡顿从而影响游戏体验。开发者希望能够获取到手机运行的实时状态，从而能够进行主动的负载调节，将手机发热时游戏体验影响降到最低；同时手机也可以通过游戏传入的关键场景如"正在下载资源"“团战中…...

编程日记 2026/5/5 10:24:23

简笔画生成smplx sketch2pose

目录 smplx安装： patch diff 命令行运行 pyrender报错：解决方法：这篇博客也不错，值得推荐 sketch2pose github地址： GitHub - kbrodt/sketch2pose: Sketch2Pose: Estimating a 3D Character Pose from a Bitmap Sketch smplx安装：只能用这个版本，别的版本报错…...

编程日记 2025/12/3 4:36:15

SpringCloud系列教程：微服务的未来（十七）监听Nacos配置变更、更新路由、实现动态路由

前言在微服务架构中，API 网关是各个服务之间的入口点，承担着路由、负载均衡、安全认证等重要功能。为了实现动态的路由配置管理，通常需要通过中心化的配置管理系统来实现灵活的路由更新，而无需重启网关服务。Nacos 作为一个开源…...

编程日记 2026/5/5 10:00:03

复古壁纸中棕色系和米色系哪个更受欢迎？

根据最新的搜索结果，我们可以看到棕色系和米色系在复古壁纸设计中都非常受欢迎。以下是对这两种颜色系受欢迎程度的分析： 棕色系受欢迎程度：棕色系在复古壁纸中非常受欢迎，因为它能够营造出温暖、质朴和自然的氛围。棕色系的壁纸…...

编程日记 2026/5/9 12:04:43

Linux 非阻塞IO

Linux 非阻塞IO 1. fcntl() 在Linux操作系统中，fcntl() 是一个用于操作文件描述符的系统调用。它提供了多种功能，包括控制文件描述符的属性、管理文件锁定、设置文件的非阻塞模式等。本文只截取了用于IO模型的 fcntl() 部分内容， fcntl() …...

编程日记 2026/5/5 8:46:32

go入门Windows环境搭建

简介 Go 即 Golang，是 Google 公司 2009 年 11 月正式对外公开的一门编程语言。根据 Go 语言开发者自述，近 10 多年，从单机时代的 C 语言到现在互联网时代的 Java，都没有令人满意的开发语言，而 C往往给人的感觉是&a…...

编程日记 2026/5/9 18:33:02

es6中关于let的使用以及案例，包括但不限于块级作用域，不允许重复声明，没有变量提升，暂存性死区，不与顶层对象挂钩

ES6 let 关键字完整指南 1. 块级作用域 1.1 let vs var 作用域对比 // var - 函数作用域 function varExample() {var x 1;if (true) {var x 2; // 同一个 xconsole.log(x); // 2}console.log(x); // 2 }// let - 块级作用域 function letExample() {let x 1;if (true…...

编程日记 2026/2/26 9:24:25

IO进程线程复习

文件IO和标准IO的区别文件IO: 1.系统提供的用于输入输出的函数 2.有文件描述符0，1，2 3.open,close,puts,gets 4.可以操作任意类型的文件，不能操作目录 5.无缓存机制标准IO： 1.C库提供的用于输入输出的函数 2.有文件流&#xf…...

编程日记 2026/1/23 1:00:57

Mybatis初步了解

mysql缓存：根据sql语句进入缓存，如果sql语句多加一个空格就进入不到同一个缓存，另外数据库数据发生了更新，缓存中的数据不会同步。延迟加载：先查询基本信息，再查询其他信息，而不是一次就查询出…...

编程日记 2026/5/5 2:06:31

基于PyQt设计的智能停车管理系统

文章目录一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】设计意义【4】国内外研究现状【6】摘要1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】VSCODE【2】python【3】ptqt【4】HyperLPR31.5 参考文献二、安装Python环境1.1 环境介绍**1.2 Python版本介…...

编程日记 2026/5/5 21:47:10

linux系统中的 scp的使用方法

SCP（Secure Copy Protocol）是一种通过加密的方式在本地主机和远程主机之间安全地传输文件的协议。它是基于SSH协议的扩展，允许用户在不同主机之间进行文件复制和传输，是Linux和Unix系统中常用的工具之一。在嵌入式Linux软件的…...

编程日记 2026/2/19 23:40:16

短连接项目01---基本框架的搭建和测试运行

文章目录 1.什么是短链2.仓库的创建3.项目的创建4.配置文件的修改5.三个模块的创建5.1如何创建5.2类型的选择5.3包的完善 6.yml文件的配置7.启动类的测试8可能会出现的问题 1.什么是短链下面的这个就是一个长的url，我们的短链里面的链就是链接，也就是我…...

编程日记 2026/5/5 7:48:22

Unity阿里云OpenAPI 获取 Token的C#【记录】

获取Token using UnityEngine; using System; using System.Text; using System.Linq; using Newtonsoft.Json.Linq; using System.Security.Cryptography; using UnityEngine.Networking; using System.Collections.Generic; using System.Globalization; using Cysharp.Thr…...

编程日记 2025/12/24 2:21:16