最代碼廣告位
cyufeng的gravatar頭像
cyufeng2019-01-06 18:10:59
springboot+vue+axios post傳參問題

最近在用標題的這幾個東西,之前也遇到過小問題,難度都不算是太大,但是今天這個問題我真是一定要說說

axios在和springboot之間數據交互的問題。

首先聲明我用的前端是vue.js+axios    后端用的springboot

我現在想做的事是在前端的頁面上給后端傳遞一個數組,數組中包含很多數據

遇到的問題是我知道傳值的時候要用json類型的數據,但是總是報415.

這個問題的原因是前端發送的數據類型和后端要接收的數據類型不一致產生的錯誤。

下面說說我現在是實現的:

后端:

    @PostMapping("/saveArticleTest")
    public String saveMoodTest(@RequestBody List<testdto> testdto) {
        String rr = new String();
        return "";
    }

后端的寫法就是這樣,紅色的部分等一下再說,最主要的部分就是@PostMapping和@RequestBody這兩個標簽

測試類(這里用了lombok自動生成get,set方法)

/**
 * 測試用的dto
 *
 * @author Cyufeng
 * Data:2019.01.06
 */
@Getter
@Setter
public class testdto {
    private String name;
    private String sex;

}

接下來就是前端

我是把axios在main.js里面定義為了全局變量,所以方法里面沒有引用,而是直接使用的

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8301/blog'
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'

// 將API方法綁定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
	el: '#app',
	router,
	components: {
		App
	},
	template: '<App/>'
})

這里除了有把axios定義為全局變量,而且紅色部分是把axios的所有post請求都設置為了application/json格式,這樣就解決了前臺傳輸的數據不是json格式的問題。

 

使用的地方

 methods: {
 save() {
      var list=new Array();//創建list集合
      var data = { name: "chenyufeng", sex: "man" };
      list.push(data);
      list.push(data);
      this.$axios
        .post("/article/saveArticleTest", JSON.stringify(list))
        .then(successResponse => {})
        .catch(failResponse => {}); //失敗后的操作
    }
  },
};

這里顯示創建了list集合,又創建了data對象,最后把data放進list集合里,兩次。

axios的post請求里,用json.stringify()將list轉換成了json格式,后臺就可以收到數據并且轉換為java對象數組了。

 

標紅色的地方是如果你想只傳遞一個對象的話就要把這兩個地方都改一下

以上


打賞
最近瀏覽
mark_chou3月31日
暫無貢獻等級
shmilqdd3月31日
暫無貢獻等級
admin123456686 LV103月17日
月亮月亮星星星星
一天一點愛戀 LV53月13日
月亮星星
bjc9342190873月6日
暫無貢獻等級
anxkun LV73月5日
月亮星星星星星星
123456mmm LV13月2日
星星
3454352月28日
暫無貢獻等級
luozhao528 LV12月24日
星星
wangxfeng2月20日
暫無貢獻等級
頂部客服微信二維碼底部
>掃描二維碼關注最代碼為好友掃描二維碼關注最代碼為好友
北京