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

目录

一、前言 ：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