cyufeng的gravatar头像
cyufeng 2019-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对象数组了。

 

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

以上


打赏
最近浏览
opq221  LV5 2023年3月22日
jianinghaha  LV1 2022年5月22日
single815  LV1 2022年2月16日
天上掉下个小崽崽 2021年10月7日
暂无贡献等级
chiaki1234 2021年7月24日
暂无贡献等级
就是这个号码  LV1 2021年7月1日
135135  LV4 2021年6月30日
design  LV3 2021年5月17日
树荫初夏  LV3 2021年5月8日
happyLayGa 2021年5月5日
暂无贡献等级
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友