新时代架构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…...

智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...

vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

【网络安全】开源系统getshell漏洞挖掘
审计过程: 在入口文件admin/index.php中: 用户可以通过m,c,a等参数控制加载的文件和方法,在app/system/entrance.php中存在重点代码: 当M_TYPE system并且M_MODULE include时,会设置常量PATH_OWN_FILE为PATH_APP.M_T…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...