前端发送数据给后端，后端只得部分数据

快来打我* 2023-10-16 11:38 61阅读 0赞

## 项目场景：前后端联调 ##

--------------------

## 问题描述 ##

前端发送数据给后端，后端只得部分数据

### 前端代码: ###

前端总共有四个数据，统一封装到form表单里面，并发送给后端

前端form表单:

form: {
        
            cid: '',
            cName: '',
            count: '',
          },

前端axios请求:

// 编辑 
                this.$axios.post('/classification/update', this.form,
                  {
        
                    headers: {
        
                      "Authorization": this.$store.getters.getToken
                    },
                  }).then((res) => {
        
                      this.$message.success('编辑成功');
                      this.dialogVisible = false;
                      this.getlist();
                  }).catch((err) => {
        
                    this.$message.error(res.data.msg);
                  });

抓包结果:前端已发送数据，cName已有数据

![在这里插入图片描述][a155a248b5124595b1bc1fe056db6e57.png]

后端代码类别类代码:

import lombok.Data;
    
    /**
     * 类别类
     */
    @Data
    public class Classification {
        
        //类别ID
        private Long cid;
        //类别名称
        private String cName;
        //借阅量
        private int count;
        //状态
        private int status;
    }

后端接收代码:

@RequestMapping("/update")
    public String update(@RequestBody Classification classification) {
        
        //1.判断非空
        if (classification == null) {
        
            return JSON.toJSONString(AjaxResult.fail(-1, "数据错误"));
        }
        //2.操作
        int result = classificationService.update(classification);
        return JSON.toJSONString(AjaxResult.success(result));
    }

后端打印:

![在这里插入图片描述][9a09f7960c8847e89966ff6276bc175b.png]

打印结果:显示cName为空

![在这里插入图片描述][819f9899978a4790b2da0cd97647520a.png]

--------------------

## 原因分析： ##

产生原因:是lombok生成的getter,setter方法产生问题，在代码中lombok的get方法为 `getCName()`

![在这里插入图片描述][25e17145af134fb8806f196b39be0563.png]

但是实际上在类别中，构造的getter,setter方法是`getcName()` ,所以后端获取的数据为空

![在这里插入图片描述][0b2d383838b6449fb3d48e2f53f861d6.png]

--------------------

## 解决方案： ##

解决方案一:更改属性名，即cName改成classificationName  
Lombok:

![在这里插入图片描述][ab093d33bcf9480d9b7bdaf74a180eda.png]

类别中的构造:

![在这里插入图片描述][e49aacdbabc64738b932942bd2328901.png]

以上均同步  
解决方案二:在这个类别中，单独构造getter,setter方法，当你所涉及的方法比较多时

![在这里插入图片描述][93ff426758514a77a833ba9015c3f31c.png]

此时再发送数据  
抓包结果:  
![在这里插入图片描述][c5feb7548054419bbc70423212683674.png]

后端打印结果:

![在这里插入图片描述][ec140d2008fb4266a0495b142c2a08c8.png]

--------------------

## 总结 ##

在Java后端中，类别的变量声明时，首字母不要小写或者大写，大写也是类似的结果，从而避免类似的错误。

[a155a248b5124595b1bc1fe056db6e57.png]: https://img-blog.csdnimg.cn/a155a248b5124595b1bc1fe056db6e57.png
[9a09f7960c8847e89966ff6276bc175b.png]: https://img-blog.csdnimg.cn/9a09f7960c8847e89966ff6276bc175b.png
[819f9899978a4790b2da0cd97647520a.png]: https://img-blog.csdnimg.cn/819f9899978a4790b2da0cd97647520a.png
[25e17145af134fb8806f196b39be0563.png]: https://img-blog.csdnimg.cn/25e17145af134fb8806f196b39be0563.png
[0b2d383838b6449fb3d48e2f53f861d6.png]: https://img-blog.csdnimg.cn/0b2d383838b6449fb3d48e2f53f861d6.png
[ab093d33bcf9480d9b7bdaf74a180eda.png]: https://img-blog.csdnimg.cn/ab093d33bcf9480d9b7bdaf74a180eda.png
[e49aacdbabc64738b932942bd2328901.png]: https://img-blog.csdnimg.cn/e49aacdbabc64738b932942bd2328901.png
[93ff426758514a77a833ba9015c3f31c.png]: https://img-blog.csdnimg.cn/93ff426758514a77a833ba9015c3f31c.png
[c5feb7548054419bbc70423212683674.png]: https://img-blog.csdnimg.cn/c5feb7548054419bbc70423212683674.png
[ec140d2008fb4266a0495b142c2a08c8.png]: https://img-blog.csdnimg.cn/ec140d2008fb4266a0495b142c2a08c8.png