SpringBoot和Axios数据的传递和接收-Restful完全版

文章目录

  • 一、基础知识铺垫
      • Axios使用
      • HTTP请求方式
      • 数据传输方式
      • SpringBoot获取数据的方式
  • 二、基础传递代码示例
    • (一)Path Variables
    • (二)Get、Delete
      • @RequestParam
      • @ModelAttribute
    • (三)Post、Put、Patch
      • @RequestBody
  • 三、稍微复杂一点的传递
    • (一)数组
    • (二)GET/POST复合型
  • 四、特殊数据
    • (一)文件
    • (二)Cookies

一、基础知识铺垫

Axios使用

使用axios发送请求,一般有三个最常用的属性。

属性含义
url请求的端点 URL
methodHTTP 请求方法(如 get, post, put, delete, patch 等)。
params / data如果 methodgetdelete,使用 params 来传递 URL 查询参数。如果是 post, put, patch,则使用 data 传递请求体数据。通常是一个对象 {}。

HTTP请求方式

Restful风格定义了多种请求方式。

方式简介常用场景
GET请求指定的资源。通常用来获取或查询资源。读取或查询资源,如获取用户列表或特定用户的详细信息。
POST向指定资源提交数据,请求服务器进行处理(如创建或修改)。数据包含在请求体中。创建新资源(如新用户、新帖子),或提交用户数据表单。
PUT用请求体中的数据替换目标资源的所有当前表示。更新现有资源的全部内容,如编辑用户的完整个人信息。
PATCH对资源应用部分修改。更新资源的一部分,如修改用户的邮箱地址或密码。
DELETE删除指定的资源。删除资源,如删除用户账户或帖子。

数据传输方式

方式介绍
URL路径参数(Path Variables通过 URL 的路径部分传递数据。在 Spring Boot 中使用 @PathVariable 注解获取。适用于 RESTful 风格的 API,例如获取特定资源的详情。
查询参数(Query Parameters通过 URL 的查询字符串(?key=value 形式)传递数据。在 Spring Boot 中使用 @RequestParam 注解获取。适用于 GETDELETE 请求。
请求体(Request Body通过 HTTP 请求的 body 部分传递数据。在 Spring Boot 中使用 @RequestBody 注解获取。适用于 POST , PUTPATCH请求,发送复杂的数据结构。

SpringBoot获取数据的方式

需要提及的是,单单从“获取数据”的角度,我们可以把DeleteGet归为一类,把PutPatchPost归为一类。

  • 前者在axios中使用params传递参数,属于Query Parameters
  • 后者在axios中使用data传递参数,属于Request Body
  • 无论是哪一种,都可以有Path Variables

在 Spring Boot(及一般的 HTTP 服务开发)中,将请求分为“GET 体系”和“POST 体系”可能会导致一些混淆,因为每种 HTTP 方法(GET、POST、PUT、PATCH、DELETE 等)都设计有其独特的用途和语义。不过,如果我们从“如何获取请求中的数据”这个角度来看,可以有一种比较宽泛的分类方式,尤其是关注于数据是通过 URL 还是请求体传递。

体系获取数据的常用注解
Path Variables@PathVariable
Get、Delete类@RequestParam@ModelAttribute
Post、Put、Patch类@RequestBody

二、基础传递代码示例

除了特殊的数据类型,普通的数据传递,默认以axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';为策略。

(一)Path Variables

Path Variables数据在url上,无关乎get还是post

return request({url: '/test/users/123',method: 'get'});return request({url: '/test/users/345/info',method: 'post'});
@RestController
@RequestMapping("/test")
public class CourseTestController {@GetMapping("/users/{userId}")public String getUser(@PathVariable String userId) {return "Received GET request for User ID: " + userId;}@PostMapping("/users/{userId}/info")public String updateUser(@PathVariable String userId) {return "Received POST request for User ID: " + userId;}}

(二)Get、Delete

@RequestParam

@RequestParam 主要用于将单个请求参数绑定到方法的参数上,通过指定 valuename 属性,你可以明确告诉 Spring Boot 请求参数的实际名称。

return request({url: '/users',method: 'get',params:{type:"1",status:"2",}});
	@GetMapping("/users")public String getUser(@RequestParam String type, @RequestParam(name = "status") String userStatus) {return "Received GET request for" + type + " " + userStatus;}

@ModelAttribute

利用 @ModelAttribute 注解。这个注解会告诉 Spring Boot,应该将请求中的查询参数自动绑定到方法参数对象的属性上。

return request({url: '/users',method: 'get',params:{type:"1",status:"2",}});
	@GetMapping("/users")public String getUser(@ModelAttribute Query query) {return "Received GET request for" + query.toString();}@Dataclass Query{String type;String status;}

通常情况下,我们会将所有的查询参数封装到一个对象中,而不是分开为两个对象,除非这两个对象在逻辑上代表着完全不同的东西,且您希望显式地区分它们。如果您确实有特定的理由需要这样做,也是可行的。比如第二个Query2表示分页查询时的分页参数

return request({url: '/users',method: 'delete',params:{type:"1",status:"2",}});
	@DeleteMapping("/users")public String deleteUser(@ModelAttribute Query1 query1, @ModelAttribute Query2 query2) {return "Received GET request for" + query1.toString() + query2.toString();}@Dataclass Query1{String type;}@Dataclass Query2{String userStatus;// 如果您希望整个对象通过 @ModelAttribute 来绑定,同时又有个别属性名不匹配// 您可以在后端对象中添加 setter 方法,并在其中处理名称不匹配的问题// 注意:Lombok @Data 注解会生成默认的 setter 方法,// 所以如果使用 Lombok,您需要手动添加一个额外的 setter 方法来处理不匹配的情况public void setStatus(String status) {this.userStatus = status;}
}

(三)Post、Put、Patch

@RequestBody

return request({url: '/users',method: 'post',data:{userId: 123,userName: "John Doe",userAge: 30,userSex: "Male"}
});
    @PostMapping("/users")public String getUser(@RequestBody UserVo userVo) {return userVo.toString();}@Dataclass UserVo{Long userId;String userName;Long userAge;String userSex;}

Spring Boot 后端的 UserVo 类中的属性名和前端传递的 JSON 对象的键名不一致时,可以使用@JsonProperty

return request({url: '/users',method: 'put',data:{userId: 123,userName: "John Doe",userAge: 32,userSex: "Male"}
});
    @PutMapping("/users")public String getUser(@RequestBody UserVo userVo) {return userVo.toString();}@Dataclass UserVo{Long userId;@JsonProperty("userName")String name;Long userAge;String userSex;}
return request({url: '/users',method: 'patch',data:{userId: 123,userAge: 34,}
});
    @PatchMapping("/users")public String getUser(@RequestBody UserVo userVo) {return userVo.toString();}@Dataclass UserVo{Long userId;@JsonProperty("userName")String name;Long userAge;String userSex;}

如果你不想额外写一个类作为@RequestBody的参数,你可以选择使用Map或者JsonNode

@PutMapping("/users")
public R<Boolean> getUser(@RequestBody Map<String, Object> body) {Long id = Long.valueOf(body.get("userId").toString());String mind = (String) body.get("name");// 业务逻辑
}
@PutMapping("/users")
public R<Boolean> getUser(@RequestBody JsonNode body) {Long id = body.get("userId").asLong();String mind = body.get("name").asText();// 业务逻辑
}

三、稍微复杂一点的传递

(一)数组

如果用的是Post,那么一般一切安好。

return request({url: '/users',method: 'post',data:{userId: 123,userOrder: ['1223', '3445', '556'],}
});
    @PostMapping("/users")public String getUser(@RequestBody UserVo userVo) {return userVo.toString();}@Dataclass UserVo{Long userId;List<String> userOrder;}

如果用的是Get,就需要注意默认情况下,Spring Boot 期望列表或数组类型的查询参数以特定的格式传递,例如:userOrder=1223&userOrder=3445&userOrder=556。但在你的例子中,由于是通过 axios 发送请求,并且当你在请求的 params 中包含一个数组时,axios 会将数组转换为 userOrder[0]=1223&userOrder[1]=3445&userOrder[2]=556 的格式,这与 Spring Boot 的默认期望不匹配

return request({url: '/users',method: 'get',params:{userId: 123,userOrder: ['1223', '3445', '556'].join(','),}
});
	@GetMapping("/users")public String getUser(@RequestParam String userId, @RequestParam List<String> userOrder) {return userId + "\n" + userOrder.toString();}

对于数组元素是简单类型,直接用字符’,'拼接即可,变成userOrder=1223,3445,556,Springboot也能匹配。或者可以去参考qs.stringify也就是qs库的用法。

如果数组元素比较复杂呢?如果你仍然坚持使用get,建议去阅读qs使用。一般的做法是用post,可以省去很多麻烦。

return request({url: '/users',method: 'post',data:{userId: 123,userOrder: [{ id: '1223', name: 'Order1' },{ id: '3445', name: 'Order2' },{ id: '556', name: 'Order3' }]}
});
    @PostMapping("/users")public String getUser(@RequestBody UserVo userVo) {return userVo.toString();}@Dataclass UserVo{Long userId;List<Item> userOrder;}@Dataclass Item{String id;String name;}

(二)GET/POST复合型

对于复合型请求,即在URL中通过查询参数(例如分页信息)传递部分数据,同时在请求体中通过JSON传递更复杂的数据(例如筛选条件),Spring Boot可以通过同时使用@RequestParam@RequestBody注解来接收这两种类型的数据。

const pageParams = {page: 1,size: 10
};
return request({url: `/users?page=${pageParams.page}&size=${pageParams.size}`,method: 'post',data:{userId: 123,userName: "Jack"}
});
    @PostMapping("/users")public String getUser(@RequestBody UserVo userVo,@RequestParam("page") int page,@RequestParam("size") int size) {return userVo.toString();}@Dataclass UserVo{Long userId;String userName;}

四、特殊数据

(一)文件

上传文件时,使用的 Content-Type 通常是 multipart/form-data。这种类型允许将请求体中的数据作为一系列部分(parts)发送,每个部分可以包含文件内容或其他数据。这种方式非常适合文件上传,因为它支持在单个请求中发送文件数据及其他表单字段

const formData = new FormData();
formData.append('file', file);
formData.append('filename', file.name);
formData.append('chunkIndex', i.toString());
formData.append('totalChunks', totalChunks.toString());
formData.append('md5', md5);
const rsp = await addChunk(formData);export const addChunk = (data: any) => {return request({url: '/video/chunk',method: 'post',data: data});
};
	@PostMapping(value = "/video/chunk")public R<String> handleChunkUpload(@RequestParam("file") MultipartFile file,@RequestParam("md5") String md5,@RequestParam("filename") String filename,@RequestParam("chunkIndex") int chunkIndex,@RequestParam("totalChunks") int totalChunks) {if (ObjectUtil.isNull(file)) {return R.fail("上传文件不能为空");}Boolean b = mediaFilesService.handleChunkUpload(file, md5);if (b){return R.ok();}else {return R.fail();}}

Vue 3 的框架 Element Plus中,el-upload 组件用于文件上传,它底层使用的也是 multipart/form-data 这种 Content-Type 来上传文件。这是因为 multipart/form-data 允许在一个请求中发送多部分数据,包括文本字段和文件,非常适合文件上传的场景

<template><el-uploadaction="http://example.com/upload":data="extraData":on-success="handleSuccess":on-error="handleError"><el-button size="small" type="primary">点击上传</el-button></el-upload>
</template><script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';// 额外数据
const extraData = ref({userId: "123",description: "这是一个文件描述"
});const handleSuccess = (response, file, fileList) => {// 文件上传成功的回调ElMessage.success('文件上传成功');
};const handleError = (err, file, fileList) => {// 文件上传失败的回调ElMessage.error('文件上传失败');
};
</script>
@RestController
public class FileUploadController {@PostMapping("/upload")public String handleFileUpload(@RequestParam("file") MultipartFile file,@RequestParam("userId") String userId,@RequestParam("description") String description) {return "文件上传成功,用户ID: " + userId + ",描述: " + description;}
}

(二)Cookies

cookies的传递和获取和Path Variables一样也无关乎getpost

document.cookie = "exampleCookie=exampleValue; path=/;";
// 输出当前域下的所有 Cookies
console.log("Current cookies:", document.cookie);return request({url: '/users',method: 'get',withCredentials:true
});
	@GetMapping("/users")public String getUser(@CookieValue(value = "exampleCookie", defaultValue = "") String exampleCookie) {return exampleCookie;}

在这个示例中,用于从接收到的请求中提取名为 exampleCookie的 Cookie 值。如果请求中没有 exampleCookie Cookie,defaultValue指定的默认值 ""会被使用。

在这里插入图片描述

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

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

相关文章

2024年五一杯数学建模B题思路分析

文章目录 1 赛题思路2 比赛日期和时间3 组织机构4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…

DataX案例,MongoDB数据导入HDFS与MySQL

【尚硅谷】Alibaba开源数据同步工具DataX技术教程_哔哩哔哩_bilibili 目录 1、MongoDB 1.1、MongoDB介绍 1.2、MongoDB基本概念解析 1.3、MongoDB中的数据存储结构 1.4、MongoDB启动服务 1.5、MongoDB小案例 2、DataX导入导出案例 2.1、读取MongoDB的数据导入到HDFS 2…

期货开户只要跟随于市场即可

仓&#xff0c;和时间无关&#xff1b;和价格运动的距离长短也很少关联&#xff0c;如果有的话&#xff0c;就是看价格运动的边界是否已经到达或准备穿越&#xff0c;价格运动的边界&#xff0c;其实很好辨认&#xff08;说的好&#xff0c;精辟&#xff09;。十五分钟以上图形…

分类预测 | Matlab实现RIME-LSSVM霜冰算法优化最小二乘支持向量机数据分类预测

分类预测 | Matlab实现RIME-LSSVM霜冰算法优化最小二乘支持向量机数据分类预测 目录 分类预测 | Matlab实现RIME-LSSVM霜冰算法优化最小二乘支持向量机数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现RIME-LSSVM霜冰算法优化最小二乘支持向量机数…

机器学习和深度学习--李宏毅(笔记与个人理解)Day9

Day9 Logistic Regression&#xff08;内涵&#xff0c;熵和交叉熵的详解&#xff09; 中间打了一天的gta5&#xff0c;图书馆闭馆正好npy 不舒服那天天气不好&#xff0c;哈哈哈哈哈总之各种理由吧&#xff0c;导致昨天没弄起来&#xff0c;今天补更&#xff01; 这里重点注意…

【植物大战僵尸融合机器学习】+源码

上期回顾&#xff1a; 今天给大家推荐一个Gtihub开源项目&#xff1a;PythonPlantsVsZombies&#xff0c;翻译成中就是植物大战僵尸。 《植物大战僵尸》是一款极富策略性的小游戏。可怕的僵尸即将入侵&#xff0c;每种僵尸都有不同的特点&#xff0c;例如铁桶僵尸拥有极强的抗…

【Android AMS】startActivity流程分析

文章目录 AMSActivityStackstartActivity流程startActivityMayWaitstartActivityUncheckedLocked startActivityLocked(ActivityRecord r, boolean newTask, boolean doResume, boolean keepCurTransition)resumeTopActivityLocked 参考 AMS是个用于管理Activity和其它组件运行…

网络靶场实战-PE 自注入

默认的 Windows API 函数&#xff08;LoadLibrary、LoadLibraryEx&#xff09;只能加载文件系统中的外部库&#xff0c;无法直接从内存中加载 DLL&#xff0c;并且无法正确地加载 EXE。有时候&#xff0c;确实需要这种功能&#xff08;例如&#xff0c;不想分发大量文件或者想增…

API管理平台:你用的到底是哪个?

Apifox是不开源的&#xff0c;在github的项目只是readme文件&#xff0c;私有化需要付费。当然saas版目前是免费使用的。 一、Swagger 为了让Swagger界面更加美观&#xff0c;有一些项目可以帮助你实现这一目标。以下是一些流行的项目&#xff0c;它们提供了增强的UI和额外的功…

Axure中继器排序失效 /没变化解决

问题复现 通过设置交互条件后&#xff0c;但是没效果&#xff0c;查了很多资料&#xff0c;按照教程操作&#xff0c;仍旧没效果。 原因 结论先行&#xff1a;问题出在汉化包&#xff0c;你用了汉化包导致axure内部出错。最简单的办法&#xff0c;删除汉化文件&#xff0c;…

AI应用实战2:使用scikit-learn进行回归任务实战

代码仓库在gitlab&#xff0c;本博客对应于02文件夹。 1.问题分析 在此篇博客中我们来对回归任务进行实战演练&#xff0c;背景是直播带货平台的业绩预测。第一步&#xff0c;就是分析问题。 问题痛点&#xff1a; 在直播带货平台上&#xff0c;由于市场环境多变、用户行为复…

SSH协议的优缺点

SSH&#xff08;Secure Shell&#xff09;是一种用于在计算机网络上进行安全远程访问和执行命令的协议。提供加密通信通道&#xff0c;防止敏感信息在传输过程中被窃听或篡改。SSH还支持文件传输和端口转发等功能&#xff0c;使其成为广泛使用的安全远程管理工具。 1. 安全远程…

SQLite的PRAGMA 声明(二十三)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite从出生到现在&#xff08;发布历史记录&#xff09;&#xff08;二十二&#xff09; 下一篇&#xff1a;用于 SQLite 的异步 I/O 模块&#xff08;二十四&#xff09; PRAGMA 语句是特定于 SQLite 的 SQL 扩…

Linux知识点(3)

文章目录 11. 进程间通信11.1 管道11.1.0 |11.1.1 匿名管道11.1.2 命名管道11.1.3 用匿名管道形成进程池 11.2 system V共享内存11.2.1 system V函数11.2.2 system 命令 11.3 system V消息队列11.4 system V 信号量 12. 进程信号12.1 前台进程和后台进程12.1.1 jobs12.1.2 fg &…

支持向量机模型pytorch

通过5个条件判定一件事情是否会发生&#xff0c;5个条件对这件事情是否发生的影响力不同&#xff0c;计算每个条件对这件事情发生的影响力多大&#xff0c;写一个支持向量机模型pytorch程序,最后打印5个条件分别的影响力。 示例一 支持向量机&#xff08;SVM&#xff09;是一种…

Oracle 正则,开窗,行列转换

1.开窗函数 基本上在查询结果上添加窗口列 1.1 聚合函数开窗 基本格式: ..... 函数() over([partition by 分组列,...][order by 排序列 desc|asc][定位框架]) 1&#xff0c;partition by 字段 相当于group by 字段 起到分组作用2&#xff0c;order by 字段 即根据某个字段…

解决npm install安装node-sass包容易失败的问题

具体问题如下&#xff1a; npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: XXX3.4.0 npm ERR! Found: webpack5.31.2 npm ERR! node_modules/webpack npm ERR! peer webpack”^4.0.0 || ^5.0.0″ from html-…

安全大脑与盲人摸象

21世纪是数字科技和数字经济爆发的时代&#xff0c;互联网正从网状结构向类脑模型进行进化&#xff0c;出现了结构和覆盖范围庞大&#xff0c;能够适应不同技术环境、经济场景&#xff0c;跨地域、跨行业的类脑复杂巨型系统。如腾讯、Facebook等社交网络具备的神经网络特征&…

WIN7用上最新版Chrome

1.下载WIN10最新版Chrome的离线安装包 谷歌浏览器 Chrome 最新版离线安装包下载地址 v123.0.6312.123 - 每日自动更新 | 异次元软件 文件名称&#xff1a;123.0.6312.123_chrome_installer.exe。 123.0.6312.123_chrome_installer.exe 文件右键解压缩得到 chrome.7z&#x…

【Linux】Linux信号

目录 信号的概念 生活中的信号 Linux中的信号 kill命令 kill 命令的使用 常见的信号 命令行代码示例 注意事项 信号的处理方式 产生信号 信号的捕捉 信号捕捉示意图 内核如何实现信号捕捉 信号的捕捉与处理 小结 阻塞信号 信号在内核中的表示图 信号集操作函数…