【纠错】Vue+SpringBoot中axios发送数据后端为null的两种分析

本人小白，有错误后期再改
框架：Vue+SpringBoot+Mybatis

一、post方式会提交json字符串，在前后端数据交换出问题

1.后端解决方法：接收参数时添加@RequestBody转换为java对象
Handle.java

 @PostMapping("/save")
    public void save(@RequestBody Book book){
        bookRepository.save(book);
    }

2.前端解决办法：引入qs库，qs.stringify(data)用来当参数

vue中qs的使用——https://blog.csdn.net/weixin_42941619/article/details/85937855

二、前端用axios传json数据时，键值命名与后端接受参数不一致

错误示范：
后端：
.xml：注意value是获取name，author

    <insert id="save" parameterType="Book">
        insert into book(name,author) values(#{name},#{author})
    </insert>

前端：
.vue：注意此处本人前后端没做好对接，胡乱命名，导致json对象键值对为bname、bauthor，最终导致存入数据库为空，null

<template>
 <Input v-model="book.bname" placeholder="请输入图书名称"></Input>
 <Input v-model="book.bauthor" placeholder="请输入图书作者"></Input>
 </template>
 <script>
  book: {
            bname:'',
            bauthor:''
          },
 this.$axios.post('http://localhost:8181/save',this.book)
 //此处this.book 的json对象，键值对为bname、bauthor
 </script>

改正：
1、若传递对象为json数据，则前端对象命名与后端接收对象命名一致。

• 将bname、bauthor改为name、author