技術標籤：後端前端Vuevuejavaspring boot後端spring cloud

問題

目前專案採用的是Vue+SpringCloud，因此請求介面採用的是Axios
首先，我們用F12來分析一下介面請求，因為目前後端並未做請求頭的限制，所以初步分析問題的出現應該是受以下結構影響
請求結構

//前端介面請求的請求方式與關鍵請求頭
......
Request Method: PUT
Content-Type: application/json;charset=UTF-8
......
//前端介面請求引數
{id:2,username:"admin"}

後端介面請求接收

/*
 	第一種接收方式（因為無法獲取到相關引數，直接報錯，也就是：
 	Required XXX parameter 'XXX' is not present）
 */
@PutMapping
public Result test(@RequestParam("id") Long id,@RequestParam("username") String username){
	//業務操作
	......
}
/*
 	第二種接收方式（雖然不會報錯，但得到的引數為null）
 */
@PutMapping
public Result test(Long id,String username)
 
{
	//業務操作
	......
}
/*
 	第三種接收方式（一切正常）
 */
@PutMapping
public Result test(@RequestBody User user){
	//業務操作
	......
}
/*
 	第四種接收方式（如果去掉@RequestBody，雖然不會報錯，但得到的引數為null）
 */
@PutMapping
public Result test(User user){
	//業務操作
	......
}

User.java

public class User{

	private Long id;
	
	private String username;
	.
 
.....
}

問題解決

以上存在的問題，是因為請求無法傳遞json格式資料，因此需要將json格式資料轉換為字串或者用，FormData的方式進行傳遞，經過測試不同解決方案適用不同的請求接收方式，比如：

//出現問題的傳參方式
const params = {id: 2,username: "admin"};

//第一種方式（該解決方案僅適用第三種請求方式）
const params = JSON.stringify({id: 2,username: "admin"});

//第二種方式（該解決方案適用以上四種請求方式）
const formData = new FormData();
formData.append("id",2)
formData.append("username","admin")