基於springboot與axios的整合問題
springboot與axios的整合
使用axios的時候一定要引用它的js包(可用npm命令:npm install axios)
1.get請求
// 為給定 ID 的 user 創建請求 axios.get('/demo/name') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });
response用於接收後端的數據,而response.data正好對應後端傳入的 hello
後端接收
@RequestMapping(value = "/name",method = RequestMethod.GET) @ResponseBody public String Testname(){ return "hello"; }
2.post請求
這是一段前端發送請求代碼,利用axios發送post請求
<button type="button" onclick="openUrl()">testaxios</button> <script> function openUrl(){ axios({ method: 'post', url: '/demo/user', data: { ID: 'Fred', lastName: 'Flintstone' } }); } </script>
通過chrome瀏覽器解析,往後端傳遞的數據類型為Request Payload。
如何想接收這段數據,就需要用到@RequestBody註解
@RequestMapping(value = "/user",method = RequestMethod.POST) @ResponseBody public void Test(@RequestBody HashMap<String,String> map){ System.out.println(map.get("ID")); }
這種寫法,你就可以通過健值對的形式獲取瞭
springboot與axios遇到的坑
spring boot
@RequestParam
適用於content-type不等於application/json的post請求,post請求需要用qs.stringify()序列化數據
適用於get請求(好像隻能傳基本類型)
@RequestBody
適用於content-type等於application/json的post請求
axios
get
axios.get( '/api', { params: { //必須要這麼寫 })
post
axios.post( '/api', {}或者params//參數名隨意)
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Vue之請求如何傳遞參數
- react中axios結合後端實現GET和POST請求方式
- springboot RESTful以及參數註解的使用方式
- Vue項目中封裝axios的方法
- SpringBoot RESTful風格入門講解