目錄
一、前言 ：Content-Type 類型
? ?(1)、?application/x-www-form-urlencoded 類型
（2）、application/json 類型
二、@PathVariable
二、@PathParam?
三、@RequestBody
?四、后端發(fā)送數(shù)據(jù)給前端
五、注意事項
一、前言 ：Content-Type 類型
? ?(1)、?application/x-www-form-urlencoded 類型
? ? ? ? 請求參數(shù)以key-value的形式傳輸
（2）、application/json 類型
? ? ? ? 請求參數(shù)以JOSN串的形式傳輸
? ? ? ? axios的Content-Type 類型 默認是application/json 類型
? ? ? ? ?。。∏昂蠖藬?shù)據(jù)傳輸Content-Type 類型必須一致
二、@PathVariable
@PathVariable接收數(shù)據(jù)和Content-Type 類型無關(guān)。
@PathVariable接收的是請求路徑中的參數(shù)
前端axios代碼(get)：
function Vget(){
let str="發(fā)送數(shù)據(jù)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="發(fā)送數(shù)據(jù)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";
}總結(jié)：
優(yōu)點：無論是get還是post請求都是傳遞參數(shù)
缺點：不能傳遞帶 “/” 的數(shù)據(jù)、不能傳遞對象、只能傳遞簡單的數(shù)據(jù)
用途：可以在“修改”操作的時候傳遞user的id
二、@PathParam?
@PathParam?接收數(shù)據(jù)的Content-Type 類型需要是application/x-www-form-urlencoded 類型
而axios中默認是application/json 類型。
需要引入qs (當(dāng)然更改Content-Type也行，推薦直接使用qs)
引入qs (axios自帶，不用而外下載)
import qs from 'qs'前端(get)
function Pget(){
let str="發(fā)送數(shù)據(jù)P--get";
let str2="get";
axios({
url:`http://localhost:8081/p`,
method:'get',
data:qs.stringify({str:str,str2:str2}) //get請求無法傳輸參數(shù)
});
}后端(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請求是不能傳遞請求體中的參數(shù)的，所以后端接收時候str和str2都是 “null”
?POST方式
才能傳遞請求體中的參數(shù)
前端(POST)?
function Ppost(){
let str="發(fā)送/數(shù)/據(jù)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";
}總結(jié)
優(yōu)點：可以傳遞對象類型，參數(shù)內(nèi)容帶 “/” 也能傳輸
缺點：需要前后端協(xié)調(diào)清楚(稍微key不一樣就不能接收到value)?
?在與后端交互過程qs會把Content-Type 改變成application/x-www-form-urlencoded類型
雖然瀏覽器請求頭中依舊是application/json 類型，實際是改變了
三、@RequestBody
@RequestBody接收數(shù)據(jù)的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";
}總結(jié)
優(yōu)點：省事
缺點：后端類型不匹配錯誤 會報400、415 錯誤
?四、后端發(fā)送數(shù)據(jù)給前端
介紹了后端接收前端數(shù)據(jù)，那也簡單說一下后端發(fā)送數(shù)據(jù)給前端吧(其實我其他博客有說過)
發(fā)送的數(shù)據(jù)需要是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("數(shù)據(jù)1");
temp.setStr2("數(shù)據(jù)2");
//JSON.toJSONString 把對象轉(zhuǎn)化成JSON串
return JSON.toJSONString(temp);
}前端
function getUser(){
axios({
url:'http://localhost:8081/user'
}).then((data)=>{
console.log("接收到參數(shù)")
console.log(data.data);
}).catch((e)=>{
console.log("出現(xiàn)錯誤");
console.log(e.msg);
})
}五、注意事項
2、后端使用@RequestBody時候出現(xiàn)
前端axios出現(xiàn)
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 接收時候出現(xiàn) null
（1）檢查data是不是寫錯了（是不是寫成了date）
（2）檢查axios發(fā)送請求方式是不是POST
（3）檢查前后端的參數(shù)key是不是相同
（4）檢查data有沒有使用qs
3、個人感想
? ? ? ? ? 每次寫項目中前后端的交互總會出現(xiàn)一點小問題，每次都要暫停思路來檢查這種小問題，
這是很讓人浮躁的，今天花了一下午試錯和查找解決辦法，我上面提到的是最簡單的解決辦法了。
總之一句話：學(xué)習(xí)過程不要好高騖遠因小失大文章來源：http://www.zghlxwxcb.cn/news/detail-799837.html
發(fā)現(xiàn)錯誤歡迎在評論區(qū)指出文章來源地址http://www.zghlxwxcb.cn/news/detail-799837.html
到了這里，關(guān)于@PathVariable、@PathParam、@RequestBody接收axios傳遞的請求參數(shù)；后端接收前端傳遞過來的參數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
