Vue——利用axios访问spring boot后台数据和处理静态（七）

1.安装 npm install axios --save

2 导入 import axios from 'axios'

3 配置使用 Vue.prototype.axios = axios

4 Vue使用

let that = this;
  this.axios({
    method: 'post',
    url:'/test',
    dataType: "json",
    contentType: "application/json;charset=UTF-8",//指定类型
    data:{"userInfo":userInfo}//这里搞了好久 我的是列表形式的 然后一直类型错误 直接这么写就好了
  })
    .then((response)=>{
      for(let i = 0;i<response.data.success.length;i++){
        that.color1[response.data.success[i]] = "green";
      }
      for(let i = 0;i<response.data.fail.length;i++){
        that.color1[response.data.fail[i]] = "red";
      }
      for(let i = 0;i<response.data.successFail.length;i++){
        that.color1[response.data.successFail[i]] = "blue";
      }
      this.colorStyle = "yellow";
    })
    .catch((error)=>{
      console.log(error)
    })

}

 

5 spring boot方面

@requestBody注解常用来处理content-type不是默认的application/x-www-form-urlcoded编码的内容，比如说：application/json或者是application/xml等。一般情况下来说常用其来处理application/json类型。

@PostMapping(value = "/test")
public JSONObject test1(@RequestBody JSONObject userInfo){

    List<UserList> userInfo1 = (List<UserList>)userInfo.get("userInfo");//提取
    List<UserList> saveUsers = new ArrayList<>();
    for(int i=0;i<userInfo1.size();i++){
        UserList userList = JSON.parseObject(JSON.toJSONString(userInfo1.get(i)),UserList.class);//之前一直想着直接转换List但是一直不能用 所以选择遍历每一个然后进行转换
        //先转换成字符串，然后转换成json
        saveUsers.add(userList);
    }

    System.out.println(saveUsers);

}

 

图片路径 推荐：

https://www.cnblogs.com/zhaowy/p/10072570.html

也可以写入变量然后放入进去