前后端日期时间交互：Uncaught (in promise) Error: Request failed with status code 400

ZJH'blog

已于 2022-01-28 21:22:15 修改

阅读量1.6k

点赞数

文章标签： postman java 前端

于 2022-01-28 16:43:14 首次发布

本文链接：https://blog.csdn.net/m0_56079407/article/details/122730985

版权

问题

使用axios修改，向后台put请求时，报错400

分析

后端controller

前端axios.put

查看前端控制台

确实PUT请求发出了

那么问题就很可能出在了后端

解决思路

postman测试，仍然报错

那么问题基本锁定在后端控制层了
查看后端控制台

postman点击一次put，后台就输出如下内容，仔细阅读后发现

2022-01-28 14:38:55.920 WARN 17460 — [nio-8080-exec-7] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type java.time.LocalDateTime from String “2022-01-28”: Failed to deserialize java.time.LocalDateTime: (java.time.format.DateTimeParseException) Text ‘2022-01-28’ could not be parsed: Unable to obtain LocalDateTime from TemporalAccessor: {},ISO,Asia/Shanghai resolved to 2022-01-28 of type java.time.format.Parsed; nested exception is com.fasterxml.jackson.databind.exc.InvalidFormatException: Cannot deserialize value of type java.time.LocalDateTime from String “2022-01-28”: Failed to deserialize java.time.LocalDateTime: (java.time.format.DateTimeParseException) Text ‘2022-01-28’ could not be parsed: Unable to obtain LocalDateTime from TemporalAccessor: {},ISO,Asia/Shanghai resolved to 2022-01-28 of type java.time.format.Parsed at [Source: (PushbackInputStream); line: 1, column: 75] (through reference chain: com.bootadmin1.bootajaxtest.domain.NXBMembers[“createDate”])]

指向了时间格式问题，仔细观察发现，后端的数据是这样
数据库中
而前端的数据是这样
页面的格式

然后使用postman补全数据，发现还是报错，根据上面的信息考虑是不是前端将数据转为了String，从而无法解析

仍然报错结果发现是controller层少写了时间hh:mm:ss
添加上

重新运行后修改操作还是报错400

因为时间不需要修改，在此尝试直接不传日期数据（属于是掩耳盗铃，不过没办法）
把this.formData = res.data直接list赋值改为属性赋值
但是不能三个属性都双向绑定，否则都不能修改

不要绑定position

      //弹出编辑窗口
        handleUpdate(row) {
            axios.get("/nxbmem/"+row.memberid).then((res)=>{
                // if(res.data.flag && res.data != null ){
                    this.dialogFormVisible4Edit = true;
                    this.formData.username = res.data.username;
                    this.formData.memberid = res.data.memberid;
                    // this.formData.position = res.data.position;
                //我们希望不能修改id和name，可以修改position
                //因此position不要动态双向绑定
                //一定要一个属性一个属性的挨个赋值，否则会把不想重传的属性给赋值重传了
                //并且可以防止有些属性不便于修改所带来的问题

                // }else{
                //     this.$message.error("数据同步失败，自动刷新");
                // }
            }).finally(()=>{
                //2.重新加载数据
                this.getAll();
            });
        },

        //修改
        handleEdit() {
            axios.put("/nxbmem",this.formData).then((res)=>{
                //判断当前操作是否成功

                    //1.关闭弹层
                    this.dialogFormVisible4Edit = false;
                    this.$message.success("自动刷新");

                    // this.$message.error("修改失败");

            }).finally(()=>{
                //2.重新加载数据
                this.getAll();
            });
        },

这样后台就成这样了~
可以正常修改

总结

由于前端对数据类型并不会区分，后端传的啥前端就显示啥，所以DateTime的前端显示和后端输出不一致，需要指定@JsonFormat
```
  @TableField(value = "creatDate")
  @JsonFormat(pattern = "yyyy-MM-dd hh:mm:ss", timezone = "Asia/Shanghai")
  private LocalDateTime createDate;
```
并且即便是格式相同，也只能一定保证前端正确接受，而前端如果设置时间post给后端，后端可能需要额外重写业务层的post逻辑