@PathVariable、@PathParam、@RequestBody接收axios传递的请求参数;后端接收前端传递过来的参数

news/2024/2/21 3:16:42

目录

一、前言 :Content-Type 类型

   (1)、 application/x-www-form-urlencoded 类型

(2)、application/json 类型

二、@PathVariable

二、@PathParam 

三、@RequestBody

 四、后端发送数据给前端

五、注意事项


一、前言 :Content-Type 类型

 

   (1)、 application/x-www-form-urlencoded 类型

        请求参数以key-value的形式传输

(2)、application/json 类型

        请求参数以JOSN串的形式传输

        axios的Content-Type 类型 默认是application/json 类型

        !!!前后端数据传输Content-Type 类型必须一致

二、@PathVariable

@PathVariable接收数据和Content-Type 类型无关。

@PathVariable接收的是请求路径中的参数

前端axios代码(get):

function Vget(){let str="发送数据V--get";axios({url:`http://localhost:8081/v/${str}`,method:'get',});}

后端代码(get):

(log.info是日志打印,就是sout)

@RequestMapping(value = "/v/{str}",method = RequestMethod.GET)public String GetVtest(@PathVariable("str") String str){log.info("请求接入v----GET____________________________________________________ ");log.info("str:{}",str);return "V-GET";}

post请求

前端(post):

 function VPost(){let str="发送数据V--post";axios({url:`http://localhost:8081/v/${str}`,method:'post',});}

后端(post)

  @RequestMapping(value = "/v/{str}",method = RequestMethod.POST)public String PostVtest(@PathVariable("str") String str){log.info("请求接入v----POST____________________________________________________ ");log.info("str:{}",str);return "V-POST";}

总结:

优点:无论是get还是post请求都是传递参数

缺点:不能传递带 “/” 的数据、不能传递对象、只能传递简单的数据

用途:可以在“修改”操作的时候传递user的id

二、@PathParam 

@PathParam 接收数据的Content-Type 类型需要是application/x-www-form-urlencoded 类型

而axios中默认是application/json 类型。

需要引入qs (当然更改Content-Type也行,推荐直接使用qs)

引入qs (axios自带,不用而外下载)

import qs from 'qs'

前端(get)

   function Pget(){let str="发送数据P--get";let str2="get";axios({url:`http://localhost:8081/p`,method:'get',data:qs.stringify({str:str,str2:str2}) //get请求无法传输参数});}

后端(get)

  @RequestMapping(value = "/p",method = RequestMethod.GET)public String GetPtest(@PathParam("str") String str,@PathParam("str2") String str2){log.info("请求接入P----GET____________________________________________________ ");log.info("str:{}",str);return "P-GET";}

注意:axios的get请求是不能传递请求体中的参数的,所以后端接收时候str和str2都是 “null”

 POST方式

才能传递请求体中的参数

前端(POST) 

function Ppost(){let str="发送/数/据P--post";let str2="pos/t";axios({url:`http://localhost:8081/p`,method:'post',data:qs.stringify({str:str,str2:str2})});}

后端(post)

  @RequestMapping(value = "/p",method = RequestMethod.POST)public String PostPtest(@PathParam("str") String str,@PathParam("str2") String str2){log.info("请求接入P----POST ____________________________________________________");log.info("str:{}",str);return "P-POST";}

总结

优点:可以传递对象类型,参数内容带 “/” 也能传输

缺点:需要前后端协调清楚(稍微key不一样就不能接收到value) 

 在与后端交互过程qs会把Content-Type 改变成application/x-www-form-urlencoded类型

虽然浏览器请求头中依旧是application/json 类型,实际是改变了

三、@RequestBody

@RequestBody接收数据的Content-Type 类型需要是application/json 类型

且请求方式需要是POST类型

前端(POST)

  function Rpost(){let str="P";let str2="post色地方";//let str={sd:'sdw'};axios({url:'http://localhost:8081/r',method:'post',data:{str:str,str2:str2}});}

后端(POST)

@RequestMapping(value = "/r",method = RequestMethod.POST)public String PostRtest(@RequestBody Map<Object,Object> map){log.info("请求接入R----POST____________________________________________________ ");log.info("map:{}",map);return "sdjw";}

总结

优点:省事

缺点:后端类型不匹配错误 会报400、415 错误

 四、后端发送数据给前端

介绍了后端接收前端数据,那也简单说一下后端发送数据给前端吧(其实我其他博客有说过)

发送的数据需要是json,所以要引入依赖

<dependency><groupId>com.alibaba.fastjson2</groupId><artifactId>fastjson2</artifactId><version>2.0.26</version>
</dependency>

后端

    @ResponseBody@RequestMapping(value = "/user",method = RequestMethod.GET)public String User(){Temp temp=new Temp(); //自定义的Temp类temp.setStr("数据1");temp.setStr2("数据2");//JSON.toJSONString 把对象转化成JSON串return JSON.toJSONString(temp);}

前端

   function getUser(){axios({url:'http://localhost:8081/user'}).then((data)=>{console.log("接收到参数")console.log(data.data);}).catch((e)=>{console.log("出现错误");console.log(e.msg);})}

五、注意事项

2、后端使用@RequestBody时候出现

前端axios出现

Request failed with status code 400
Request failed with status code 415

报错的时候检查

(1)axios请求体中data有没有写错(是不是写成了date)

(2)后端接收类型是否匹配(推荐直接使用map或者String)

(3)检查请求方式是不是POST

   (4) vue有没有配置跨域(解决跨域可以看看其他博主的)

2、后端使用@PathParam 接收时候出现 null

(1)检查data是不是写错了(是不是写成了date)

(2)检查axios发送请求方式是不是POST

(3)检查前后端的参数key是不是相同

(4)检查data有没有使用qs

3、个人感想

          每次写项目中前后端的交互总会出现一点小问题,每次都要暂停思路来检查这种小问题,

这是很让人浮躁的,今天花了一下午试错和查找解决办法,我上面提到的是最简单的解决办法了。

总之一句话:学习过程不要好高骛远因小失大




发现错误欢迎在评论区指出


http://www.ppmy.cn/news/94245.html

相关文章

使用binary-wang开发微信小程序的登录和微信支付

贴个官网&#xff0c;建议down下来他的源码&#xff0c;对照着开发更方便&#xff0c;因为备注很详尽。 其它不多废话了&#xff0c;我直接写步骤了。 1. Maven引入 时间2023年5月&#xff0c;目前最新版本是4.5.0 <dependency><groupId>com.github.binarywang&l…

选择合适的 MQTT 云服务:一文了解 EMQX Cloud Serverless、Dedicated 与 BYOC 版本

引言 EMQX Cloud 是基于 EMQX Enterprise 构建的一款全托管云原生 MQTT 消息服务。为了满足不同客户的需求&#xff0c;EMQX Cloud 提供了三种版本供客户选择&#xff1a;Serverless 版、专有版和 BYOC 版。 本文将简要介绍这三个版本的核心区别&#xff0c;并通过三个用户故…

【python】无限量PPT免费下载?找模板在不怕心仪得不能用啦

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 开发环境: python 3.8 pycharm 不会安装的可以文末名片我获取哦 &#x1f60e; 模块使用: 第三方模块&#xff0c;需要安装 win R 输入cmd 输入安装命令 pip install 模块名 &#xff08;如果出现爆红 可能是因为 网络…

【沐风老师】3DMAX宇宙生成器(一键生成星系)插件使用方法详解

3DMAX宇宙生成器&#xff08;一键生成星系&#xff09;插件 3DMAX宇宙生成器&#xff08;一键生成星系&#xff09;插件&#xff0c;用于模拟星团及星系的运动。可以创建单个集合进行动画计算&#xff0c;也可以输入不同坐标&#xff0c;建立多个集合后统一进行动画计算。 【安…

机试打卡 -12 滑动窗口最大值(优先队列堆)

我的思路1&#xff1a;队列&#xff0c;每次 出队入队&#xff0c;记录1个队列中的最大值索引&#xff0c;超时。。。 class Solution:def maxSlidingWindow(self, nums: List[int], k: int) -> List[int]:nums_lenlen(nums)ans_list[]# 队列长度为kqueuenums[:k]# 队列最大…

Learning C++ No.24 【哈希/散列实战】

引言&#xff1a; 北京时间&#xff1a;2023/5/20/7:30&#xff0c;周六&#xff0c;可惜有课&#xff0c;而且还是早八&#xff0c;说明我们现在没有多少的学习时间啦&#xff01;得抓紧把该博客的引言给写完&#xff0c;我们距离期末考越来越近啦&#xff01;再过一个星期就…

「SQL面试题库」 No_76 每月交易 I

&#x1f345; 1、专栏介绍 「SQL面试题库」是由 不是西红柿 发起&#xff0c;全员免费参与的SQL学习活动。我每天发布1道SQL面试真题&#xff0c;从简单到困难&#xff0c;涵盖所有SQL知识点&#xff0c;我敢保证只要做完这100道题&#xff0c;不仅能轻松搞定面试&#xff0…

建议熟知:2023谷歌新搜索规则!

谷歌作为全球最大的搜索引擎之一&#xff0c;不断更新和调整其搜索算法和规则&#xff0c;以提供更精准、高质量的搜索结果。2023年&#xff0c;谷歌搜索将迎来一系列新的搜索规则&#xff0c;同时&#xff0c;AI工具的快速发展也为谷歌搜索带来了全新的应用场景和可能性。 这…

JavaScript 验证 API

JavaScript提供了多种验证API&#xff0c;用于验证用户输入的数据或者执行其他类型的验证操作。以下是一些常用的JavaScript验证API&#xff1a; 1. **正则表达式&#xff08;Regular Expressions&#xff09;**&#xff1a;正则表达式是一种强大的验证工具&#xff0c;用于匹…

English Learning - L3 作业打卡 Lesson3 Day21 2023.5.25 周四

English Learning - L3 作业打卡 Lesson3 Day21 2023.5.25 周四 引言&#x1f349;句1: Here is another expression about meat one man’s meat is another man’s poison.成分划分连读爆破语调 &#x1f349;句2: In other words, one person might like something very muc…

CentOS7.6(Linux)环境下有网和无网安装Docker

1、 服务器有网环境 1.1、手动卸载旧版本 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine1.2、安装yum-utils sudo yum install -y yum-utils \device-mapper-per…

Java安全和防护:如何保护Java应用程序和用户数据的安全

第一章&#xff1a;引言 在当今数字化时代&#xff0c;Java已经成为主流的编程语言之一。无论是企业级应用程序还是个人项目&#xff0c;Java应用程序都承载着大量的敏感数据和业务逻辑。然而&#xff0c;随着网络攻击日益猖獗&#xff0c;保护Java应用程序和用户数据的安全变…

MySQL运维篇(二)

四.MyCat 4.1 MyCat概述 4.1.1 介绍 Mycat是开源的、活跃的、基于Java语言编写的数据库中间件。可以像使用mysql一样来使用 mycat&#xff0c;对于开发人员来说根本感觉不到mycat的存在。mycat不单只可以做MySQL的代理&#xff0c;其它常用的数据库也可以。 开发人员只需要…

Linux 禁用23端口

禁用23端口 前言 23端口是用于Telnet服务的默认端口。Telnet是一种早期的网络协议&#xff0c;允许用户使用一个远程终端连接到远程计算机上&#xff0c;以便在远程计算机上执行命令和操作。通过输入用于Telnet服务器的IP地址和端口号&#xff0c;用户可以在本地计算机上打开一…

Go 并发的 20+ 种踩坑案例

Go语言天生支持并发&#xff0c;这也是其广受欢迎的一个原因。但是&#xff0c;在实践中&#xff0c;Go并发也存在一些坑点&#xff0c;下面介绍一些常见的并发踩坑案例&#xff1a; 并发操作共享变量时&#xff0c;需要注意变量的同步。Go中提供了Mutex、RWMutex等同步机制&a…

K8s进阶6——pod安全上下文、Linux Capabilities、OPA Gatekeeper、gvisor

文章目录 一、Pod安全上下文1.1 配置参数1.2 案例11.2.1 dockerfile方式1.2.2 pod安全上下文方式 1.3 案例21.4 Linux Capabilities方案案例1案例2 二、pod安全策略2.1 PSP&#xff08;已废弃&#xff09;2.1.1 安全策略限制维度 2.2 OPA Gatekeeper方案2.2.1 安装Gatekeeper2.…

docker版jxTMS使用指南:python服务之jxGo模块

本文讲解4.0版jxTMS中python服务的jxGo模块&#xff0c;整个系列的文章请查看&#xff1a;docker版jxTMS使用指南&#xff1a;4.0版升级内容 docker版本的使用&#xff0c;请参考&#xff1a;docker版jxTMS使用指南 示例python服务是jxTMS体系的一个子集。该体系为&#xff1…

Dockerfile(3) - WORKDIR 指令详解

WORKDIR 切换到镜像中的指定路径&#xff0c;设置工作目录在 WORKDIR 中需要使用绝对路径&#xff0c;如果镜像中对应的路径不存在&#xff0c;会自动创建此目录一般用 WORKDIR 来替代 切换目录进行操作的指令 RUN cd <path> && <do something> WORKDIR…

117.【微信小程序】

微信小程序 (一)、微信小程序概括1.微信小程序简介(1).小程序与普通网页开发的区别 2.注册微信小程序账号(1).注册小程序账号(2).获取小程序的AppID 3.安装微信开发者工具(1).微信开发者工具的简介:(2).微信开发者工具的下载 4.创建第一个小程序(1).创建小程序步骤(2).开发者工…

[机器学习]线性回归

准备入门一下机器学习算法。 今天学习了线性回归&#xff0c;都是理论的东西&#xff0c;没有对于代码的实现&#xff0c;代码也会跟着进度好好搞一下。 对于线性回归的基础概念&#xff0c;我感觉很依靠概率论和线性代数两门课&#xff0c;作为刚准备完数学一考研的我&#xf…
最新文章