新时代架构SpringBoot+Vue的理解(含axios/ajax)
文章目录
- 引言
- 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区别 引言 我是一个喜欢知其然又知其所以然的…...

代理模式 -- 学习笔记
代理模式学习笔记 什么是代理? 代理是一种设计模式,用户可以通过代理操作,而真正去进行处理的是我们的目标对象,代理可以在方法增强(如:记录日志,添加事务,监控等) 拿一…...
gif动画图像优化,相同的图在第2,4,6帧中重复出现,会增加图像体积吗?
对于 GIF 图像,情况与 Git 文件存储有所不同。GIF 是一种图像格式,其体积主要取决于图像的内容、颜色数量、优化设置等因素。如果在 GIF 动画中,相同的图像在第 2、4、6 帧中重复出现,是否会增加图像体积,取决于以下几…...

Harmony Next 跨平台开发入门
ArkUI-X 官方介绍 官方文档:https://gitee.com/arkui-x/docs/tree/master/zh-cn ArkUI跨平台框架(ArkUI-X)进一步将ArkUI开发框架扩展到了多个OS平台:目前支持OpenHarmony、Android、 iOS,后续会逐步增加更多平台支持。开发者基于一套主代码…...

阿里巴巴Qwen团队发布AI模型,可操控PC和手机
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...
android 音视频系列引导
音视频这块的知识点自己工作中有用到,一直没有好好做一个总结,原因有客观和主观的。 客观是工作太忙,没有成段时间做总结。 主观自己懒。 趁着这次主动离职拿了n1的钱,休息一下,对自己的人生做一下总结,…...

STM32调试手段:重定向printf串口
引言 C语言中经常使用printf来输出调试信息,打印到屏幕。由于在单片机中没有屏幕,但是我们可以重定向printf,把数据打印到串口,从而在电脑端接收调试信息。这是除了debug外,另外一个非常有效的调试手段。 一、什么是pr…...
基于 Jenkins 的测试报告获取与处理并写入 Jira Wiki 的技术总结
title: 基于 Jenkins 的测试报告获取与处理并写入 Jira Wiki 的技术总结 tags: - jenkins - python categories: - jenkins在软件开发的持续集成与持续交付(CI/CD)流程里,及时、准确地获取并分析测试报告对保障软件质量至关重要。本文将详细…...
Vue.js组件开发-实现导出PDF文件可自定义添加水印及水印样式方向
使用 Vue 实现导出 PDF 文件并添加水印,同时支持设置水印样式、方向和自定义水印内容。 步骤 安装依赖:使用 html2canvas 将 HTML 内容转换为 canvas,使用 jspdf 生成 PDF 文件。创建 Vue 组件:在组件中实现水印生成、HTML 转 c…...
css中的animation
css的animation animation是一个综合属性,是animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline这些属性的简写 不过在…...

四.3 Redis 五大数据类型/结构的详细说明/详细使用( hash 哈希表数据类型详解和使用)
四.3 Redis 五大数据类型/结构的详细说明/详细使用( hash 哈希表数据类型详解和使用) 文章目录 四.3 Redis 五大数据类型/结构的详细说明/详细使用( hash 哈希表数据类型详解和使用)2.hash 哈希表常用指令(详细讲解说明)2.1 hset …...

基于Springboot + vue实现的洗衣店订单管理系统
“前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站:人工智能学习网站” 💖学习知识需费心, 📕整理归纳更费神。 🎉源码免费人人喜…...

用 Scoop 优雅管理 Windows 软件:安装、配置与使用全指南
本篇将主要讲讲如何用「Scoop」优雅管理 Windows 软件:安装、配置与使用全指南 一、Scoop 是什么? Scoop 是一款专为 Windows 设计的命令行软件包管理工具,它能让你像 Linux 系统一样通过命令快速安装、更新和卸载软件。其核心优势包括&…...
深度学习中常用的评价指标方法
深度学习中常用的评价指标方法因任务类型(如分类、回归、分割等)而异。以下是一些常见的评价指标: 1. 分类任务 准确率(Accuracy) 定义:正确预测的样本数占总样本数的比例。 公式:AccuracyTPT…...
多协议网关BL110钡铼6路RS485转MQTT协议云网关
多协议网关BL110钡铼6路RS485转MQTT协议云网关是一款集成了多种通信协议的工业级网关设备,专为物联网(IoT)应用设计。该网关能够将RS485总线设备的数据转化为MQTT协议,通过网络传输到云平台,实现远程监控和数据管理。以…...
Nginx 安装配置指南
Nginx 安装配置指南 引言 Nginx 是一款高性能的 HTTP 和反向代理服务器,同时也可以作为 IMAP/POP3/SMTP 代理服务器。由于其稳定性、丰富的功能集以及低资源消耗而被广泛应用于各种场景。本文将为您详细介绍 Nginx 的安装与配置过程。 系统要求 在安装 Nginx 之…...

二叉树介绍
一.树的概念 树的图: 1.结点的度:一个结点含有子树的个数称为该结点的度; 如上图:A的度为6 2.树的度:一棵树中,所有结点度的最大值称为树的度; 如上图:树的度为6 3.叶子结点或终…...
VLC-Qt: Qt + libVLC 的开源库
参考链接 https://blog.csdn.net/u012532263/article/details/102737874...

【四川乡镇界面】图层shp格式arcgis数据乡镇名称和编码2020年wgs84无偏移内容测评
本文将详细解析标题和描述中提到的IT知识点,主要涉及GIS(Geographic Information System,地理信息系统)技术,以及与之相关的文件格式和坐标系统。 我们要了解的是"shp"格式,这是一种广泛用于存储…...
Helm Chart 详解:从入门到精通
Helm 是 Kubernetes 的包管理工具,而 Helm Chart 是 Helm 的核心概念,用于定义、安装和升级 Kubernetes 应用。本文将详细介绍 Helm Chart 的结构、核心文件及其作用,帮助你从入门到精通 Helm Chart。 © ivwdcwso (ID: u012172506) 1. 什么是 Helm Chart? Helm Char…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
A2A JS SDK 完整教程:快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...

LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

在 Spring Boot 中使用 JSP
jsp? 好多年没用了。重新整一下 还费了点时间,记录一下。 项目结构: pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景
Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知,帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量,能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度,还为机器人、医疗设备和制造业的智…...

五子棋测试用例
一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏,有着深厚的文化底蕴。通过将五子棋制作成网页游戏,可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家,都可以通过网页五子棋感受到东方棋类…...

使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件,这个上传文件是整体功能的一部分,文件在上传的过程中…...