Vue.js与SSM前后端基本交互，可以参见我的上一篇博客

上一篇博客：点击这里.

本文介绍前后端交互传递对象的方法

如果前后端交互过程中要传对象，那么上一篇博客可能就不适用了。

向后端传对象与传普通字符串/字段的区别：

1. 传对象首先要将对象格式转化为JSON格式，即JSON.stringify(_this.user),

2. 然后将其直接赋给data，即data: JSON.stringify(_this.user)。

此时不需要用到**Qs**库的方法：

Qs.stringify({ }),


最后，一定要加**headers**，才有效！即：

headers: {
         'Content-Type': 'application/json;charset=utf-8'
          },

大家可以基于我的[上一篇博客](https://blog.csdn.net/qq_40994260/article/details/102824366)，
修改script部分的Vue核心程序段，从而得到前后端交互传递对象的前端代码：

前端：

var app = new Vue({

    el: '#app',

    data: {

        message: 'okay',

        user: {

            userName: 'Sun',
            password: '123',

        },

        value: 0

    },

    methods: {

        send: function () {

            var _this = this;

            // console.log(JSON.stringify(_this.user))

            axios({

                method: 'post',
                
                url: "http://localhost:8080/Sun_war_exploded/judge",

                headers: {

                    'Content-Type': 'application/json;charset=utf-8'
                
                },
                
                // data: Qs.stringify({

                    // message: _this.message

                    // user: JSON.stringify(_this.user)
                
                // }),

                data: JSON.stringify(_this.user),
                
                // responseType: 'json'

            }).then (function (response) {

                console.log(response.data);

                _this.message = response.data;

                _this.value = response.data;

            }).catch (function (error) {

                console.log(error.data);
                _this.message = error.data;
            
            });

        }

    },

    computed: {

        

    }

});

后端：

@RequestMapping(value = "/judge", method = RequestMethod.POST)
@ResponseBody
public String judge(@RequestBody User user) {

    List<User> list = userDao.selectAllUser();

    System.out.println(user);

    System.out.println(user.getUserName());
    System.out.println(user.getPassword());


    for (User per : list) {

        if (per.getUserName().equals(user.getUserName()) && per.getPassword().equals(user.getPassword())) {

            return "1";

        }

    }

    return "-1";

}

结语

后端传对象与传参，基本无异。

需要说明的是：
@RequestBody会直接将传入的json格式数据转为对应种类的JavaBean实体类。
返回响应给前端时，只要标记了@ResponseBody注解后，直接return就好。