Vue与Springmvc之间的对象传递

后端：

UserVo.java

@Data
public class UserVo{
    
    private Integer id;

    private String nickname;

    private String fileId;

}

UserController.java

    @PutMapping("/updateUser")
    public void updateUser(@RequestBody UserVo userVo){
        System.out.println("nickname = " + userVo.getNickname());
        System.out.println("userId = " + userVo.getId());
        System.out.println("fileId = " + userVo.getFileId());
    }

注意：参数名要与前端的对象名一致，使用@RequestBody注解

前端：

封装了axios的工具js

request.js

import axios from "axios";
const service=axios.create({
    baseURL:"http://localhost:9527",
    timeout:5000
})

export default service

user.js

import request from '@/utils/request';

export default{
    updateUser(userVo){
        return request({
            url:'/user/updateUser',
            method:'put',
            data: userVo
        })
    }
}

写index.vue的步骤

1.导入user.js

import Apiuser from "../api/user";

2.data里面有定义一个对象，名字与前面spring中定义的一致

data() {
    return {
       userVo: {}
    };
  }

3.在方法里调用axios通过地址访问后端

methods: {
    updateInfo() {
      return Apiuser.updateUser(this.userVo)
        .then((response) => {
          this.$message.success("发送成功！");
        })
        .catch((error) => {
          this.$message.error("发送失败！");
        });
    }

4.通过手段调用updateInfo()方法