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

文章目录

  • 引言
  • SpringBoot+Thymeleaf
  • Vue+SpringBoot
    • SpringBoot
    • Vue（前端）
      • axios/ajax
      • Vue作用
        • 响应式动态绑定
        • 单页面应用SPA
          • 前端路由
        • 前端路由URL和后端API URL的区别
          • 前端路由的数据从哪里来的
      • Vue和只用三件套+axios区别
  • 关于地址栏url和axios请求不一致
    • Vue
    • JSP+Servlet中的

引言

我是一个喜欢知其然又知其所以然的人，快速入门致使我对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）处理数据并返回，前端渲染界面

  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），让页面内容动态变化并展示给用户。

举例

  • 用户点击 “查询订单” 按钮。
  • 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）的多

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/68601.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

jQuery小游戏（一）

jQuery小游戏（一）

jQuery小游戏&#xff08;一&#xff09; 嘻嘻&#xff0c;今天我们来写个jquery小游戏吧 首先&#xff0c;我们准备一下写小游戏需要准备的佩饰&#xff0c;如果&#xff1a;图片、音乐、搞怪的小表情 这里我准备了一些游戏中需要涉及到的图片 游戏中使用到的方法 eval() 函…
阅读更多...
H3CNE-28-VRRP

H3CNE-28-VRRP

虚拟网关冗余协议&#xff0c;Virtual Router Redundancy Protocotol 三层网关冗余技术对用户网关做冗余 VRRP配置示例 接口IP配置&#xff0c;略。 R1&#xff1a; int g0/0vrrp vrid 1 virtual 192.168.1.254vrrp vrid 1 priority 105 # 1-254,越大越优先R2&#xff1a; …
阅读更多...
私有包上传maven私有仓库nexus-2.9.2

私有包上传maven私有仓库nexus-2.9.2

一、上传 二、获取相应文件 三、最后修改自己的pom文件
阅读更多...
Alfresco Content Services dockerCompose自动化部署详尽操作

Alfresco Content Services dockerCompose自动化部署详尽操作

Alfresco Content Services docker社区部署文档 Alfresco Content Services简介 官方说明书 https://support.hyland.com/r/Alfresco/Alfresco-Content-Services-Community-Edition/23.4/Alfresco-Content-Services-Community-Edition/Using/Content/Folder-rules/Defining-…
阅读更多...
rust feature h和 workspace相关知识 (十一)

rust feature h和 workspace相关知识 (十一)

feature 相关作用和描述 在 Rust 中&#xff0c;features&#xff08;特性&#xff09; 是一种控制可选功能和依赖的机制。它允许你在编译时根据不同的需求启用或禁用某些功能&#xff0c;优化构建&#xff0c;甚至改变代码的行为。Rust 的特性使得你可以轻松地为库提供不同的…
阅读更多...
【Python-办公自动化】实现自动化输出json数据类型的分析报告和正逆转换

【Python-办公自动化】实现自动化输出json数据类型的分析报告和正逆转换

分析报告 import json from pprint import pprint, PrettyPrinterdef analyze_energy_data(file_path):"""能源数据分析与结构查看函数参数：file_path (str): JSON文件路径功能：1. 加载并解析JSON数据2. 显示数据结构概览3. 交互式结构探索"""…
阅读更多...
麒麟操作系统服务架构保姆级教程（十四）iptables防火墙四表五链和防火墙应用案例

麒麟操作系统服务架构保姆级教程（十四）iptables防火墙四表五链和防火墙应用案例

如果你想拥有你从未拥有过的东西&#xff0c;那么你必须去做你从未做过的事情 防火墙在运维工作中有着不可或缺的重要性。首先&#xff0c;它是保障网络安全的关键防线&#xff0c;通过设置访问控制规则&#xff0c;可精准过滤非法网络流量&#xff0c;有效阻挡外部黑客攻击、恶…
阅读更多...
力扣25.k个一组翻转链表

力扣25.k个一组翻转链表

给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。你不能只是单纯的改变节点内部的值&…
阅读更多...
Midjourney基础-常用修饰词+权重的用法大全

Midjourney基础-常用修饰词+权重的用法大全

用好修饰词很关键 Midjourney要用除了掌握好提示词的写法&#xff0c;按照上一篇《做Midjourney最好图文教程-提示词公式以及高级参数讲解》画面主体 场景氛围 主体行为 构图方式 艺术风格 图像质量。 要画出有质感的内容我们必须要掌握好“修饰词”&#xff0c;这些修饰…
阅读更多...
钉钉群机器人设置——python版本

钉钉群机器人设置——python版本

钉钉群机器人设置——python版本 应用场景钉钉界面操作程序开发效果展示 应用场景 由于工作需要&#xff0c;很多项目执行程序后出现报错信息无法第一时间收到&#xff0c;因此实时预警对于监控程序还是有必要。&#xff08;仅个人观点&#xff09; 参考文档及博客&#xff1a…
阅读更多...
doris:异常数据处理

doris:异常数据处理

在导入过程中&#xff0c;源数据列与目标列的数据类型可能存在不一致的情况。导入过程会对这些类型不一致的数据进行转换&#xff0c;但在转换过程中可能会出现字段类型不匹配、字段超长、精度不匹配等问题&#xff0c;从而导致转换失败。 为了处理这些异常情况&#xff0c;Do…
阅读更多...
小白爬虫冒险之反“反爬”：无限debugger、禁用开发者工具、干扰控制台...（持续更新）

小白爬虫冒险之反“反爬”：无限debugger、禁用开发者工具、干扰控制台...（持续更新）

背景浅谈 小白踏足JS逆向领域也有一年了&#xff0c;对于逆向这个需求呢主要要求就是让我们去破解**“反爬机制”**&#xff0c;即反“反爬”&#xff0c;脚本处理层面一般都是decipher网站对request设置的cipher&#xff0c;比如破解一个DES/AES加密拿到key。这篇文章先不去谈…
阅读更多...
【Elasticsearch】中数据流需要配置索引模板吗？

【Elasticsearch】中数据流需要配置索引模板吗？

是的&#xff0c;数据流需要配置索引模板。在Elasticsearch中&#xff0c;数据流&#xff08;Data Streams&#xff09;是一种用于处理时间序列数据的高级结构&#xff0c;它背后由多个隐藏的索引组成&#xff0c;这些索引被称为后备索引&#xff08;Backing Indices&#xff0…
阅读更多...
babylon.js-3：了解STL网格模型

babylon.js-3：了解STL网格模型

网格模型上色 本篇文章主要介绍如何在 BabylonJS 中实现STL网格模型上色。 文章目录 网格模型上色运用场景概要延申正文加载器库的支持认识 OBJ 和 STL 文件GUI 色板选择器网格模型异步加载加载动画网格模型上色官方即将弃用 ImportMesh 而推荐使用 ImportMeshAsync 说明OBJ …
阅读更多...
大数据治理实战：架构、方法与最佳实践

大数据治理实战：架构、方法与最佳实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 大数据治理是确保数据质量、合规性和安全性的重要手段&#xff0c;尤其在数据驱动决策和人工智能应用日益普及的背景下&…
阅读更多...
【时时三省】(C语言基础）文件的随机读写

【时时三省】(C语言基础）文件的随机读写

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 fseek 根据文件指针的位置和偏移量来定位文件指针 示例&#xff1a; 这个输出的就是ade seek&#xff3f;cur的意思是从当前偏移量 2就是从a往后偏移两个就是d 偏移量 SEEK&#xff3f;CUR…
阅读更多...
均方误差（MSE）揭秘：预测模型的“真面目”

均方误差（MSE）揭秘：预测模型的“真面目”

前言 在这个充满数据的世界里，我们需要各种方式来衡量一个模型的表现，尤其在回归问题中，均方误差（MSE）是我们非常常见的“好朋友”。它就像一位忠诚的侦探，默默为我们揭示预测值与实际值之间的真相。今天，让我们一起进入均方误差的世界，看看它是如何用简单却有效的方式…
阅读更多...
yolov5错误更改与相关参数详解（train.py）

yolov5错误更改与相关参数详解（train.py）

1.错误更改 main中相关参数 if __name__ __main__:parser argparse.ArgumentParser()parser.add_argument(--weights, typestr, default, helpinitial weights path)parser.add_argument(--cfg, typestr, defaultmodels/yolov5s.yaml, helpmodel.yaml path)parser.add_arg…
阅读更多...
第4章 基于中点电流的NPC逆变器中点电压平衡策略

第4章 基于中点电流的NPC逆变器中点电压平衡策略

1. 工作原理 1.1 NPC型三电平逆变器工作原理 NPC型三相三电平逆变器有A、B、C三个桥臂&#xff0c;其组成结构是相同的&#xff0c;本章以A相为例&#xff0c;对其工作原理进行分析。开关器件SA1和SA3、SA2和SA4为互补器件&#xff0c;通过控制开关器件的导通和关断状态&#…
阅读更多...
【C++】内联函数inline、关键字auto与新式for

【C++】内联函数inline、关键字auto与新式for

内联函数 内联函数背景 我们在使用C语言中我们都学过函数&#xff0c;我们知道函数在调用的过程中需要开辟栈帧。如果我们需要频繁的调用一个函数&#xff0c;假设我们调用10次Add()函数&#xff0c;那我们就需要建立10次栈帧。我们都知道在栈帧中要做很多事情&#xff0c;例如…
阅读更多...
最新文章

Copyright @ 2022~2023