柠檬学院
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对象数组了。

 

标红色的地方是如果你想只传递一个对象的话就要把这两个地方都改一下

以上


打赏

分享到:

最近浏览
15558616361 LV2昨天
星星星星
sunjiansh LV6前天
月亮星星星星
wl2301821 LV1前天
星星
Azure1 LV21月15日
星星星星
0312wangchen LV161月15日
太阳
落叶似从容 LV111月15日
月亮月亮星星星星星星
Knightjie LV61月15日
月亮星星星星
lcjz99 LV111月15日
月亮月亮星星星星星星
sandao_liu LV71月15日
月亮星星星星星星
天险无涯 LV61月14日
月亮星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友