LocalDateTime和LocalDate日期格式处理和elemenui el-date时间组件处理方式

最新推荐文章于 2024-07-19 10:51:19 发布

prinrf('千寻)

最新推荐文章于 2024-07-19 10:51:19 发布

阅读量451

点赞数 1

分类专栏：前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_56419249/article/details/134773768

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了在Java中使用JDK1.8的LocalDateTime和LocalDate类型处理日期格式，尤其是在SpringMVC和Jackson框架下，如何正确地进行JSON字符串和querystring的序列化与反序列化，以及解决日期格式不匹配的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

LocalDateTime和LocalDate日期格式处理

省流

>  @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss") //jsonstring 
>  @DateTimeFormat(pattern ="yyyy-MM-dd HH:mm:ss" ) //querystri

详解

JDK1.8提供两个新的日期类型，取代之前使用Date类型。

年月日：LocalDate

年月日时分秒：LocalDateTime

JsonString：提交@RequestBody和响应@ResponseBody的时候，

客户端提交json数据，SpringMvc数据依靠“消息转换器”实现 json字符串反序列化控制器接收使用对象

服务器响应json数据，SpringMvc数据依靠“消息转换器”实现对象ResponseResult序列化json string。

案例一：jsonString

html页面提交数据

    <body>
        <div id="app">
            <el-form ref="form" :model="demo" label-width="80px">
                <el-form-item label="用户id">
                    <el-input v-model="demo.id"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="demo.name"></el-input>
                </el-form-item>
                <el-form-item label="生日">
    <!--
    value-format="yyyy-MM-dd HH:mm:ss" 设置绑定数据的格式问题
    -->
                    <el-date-picker
                            v-model="demo.birthday"
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            default-time="12:00:00">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交数据</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
            <div>
                您提交的数据如下所示：{{result.id}}---{{result.name}}---{{result.birthday}}
            </div>
        </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    demo: {
                        id: '',
                        name: '',
                        birthday: ''
                    },
                    result:{}
                }
            },
            methods:{
                onSubmit() {
                    axios.post("/test02",this.demo).then(resp=>{
                        alert(resp.data.msg)
                        this.result=resp.data.data;
                    });
                }
            }
        });
    </script>
    </html>

controller接受数据

    /**
         * axios.post()提交json string
         * @return
         */
        @RequestMapping("/test02")
        public ResponseResult<Demo> test02(@RequestBody Demo demo){
            log.info("demo:{}",demo);
            return new ResponseResult<>(200,"ok",demo);
        }

控制台提示以下异常：

异常发生的原因：jackson默认不认识jdk1.8新日期，我们需要在项目中导入jackson的jsr310规范，让程序识别

<dependency>
     <groupId>com.fasterxml.jackson.datatype</groupId>
     <artifactId>jackson-datatype-jsr310</artifactId>
      <version>2.9.0</version> 
</dependency>

再次启动项目，提交数据ok，但是观察html页面的日期格式显示：你会发现日期的显示是[2023,11,14,17,59,23]，这不是我们想看到的日期格式，如何解决呢？jsonstring响应，响应数据格式默认是数组，指定自己的格式，需要实体类添加

public class Demo {
    private Integer id;
    private String name;
    //jsonString提交过来，日期按照pattern指定格式解析
    @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss") //jsonstring
    private LocalDateTime birthday;
}

再次启动项目，提交数据，程序又报错了，why why why??? 仔细阅读控制台异常，你会发现，异常提示我们请求提交的日期格式，没有办法被json反序列化？原来：当我们添加了@JsonFormat后，json的序列化和反序列化都会使用pattern指定的格式来处理日期字符串，而请求提交的日期格式是

”2023-11-17T09:46:24.000Z”，日期格式有个“T”，这个跟pattern指定的格式不一样啊?怎么办？

解决方案：将elementUI的日期组件提交数据格式改成不含“t”。

<!--
value-format="yyyy-MM-dd HH:mm:ss" 设置绑定数据的格式问题
-->
<el-date-picker
                v-model="demo.birthday"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="12:00:00">
</el-date-picker>

OVER，经过上面一顿操作，json相关的日期问题就基本搞定了！！！

咱们再来看看queryString的日期。

案例二：QueryString

html页面提交数据

    axios.get("/test01",{
        params:this.demo
    }).then(resp=>{
        alert(resp.data.msg)
        this.result=resp.data.data;
    });

controller接收数据

    /**
         * querystring,后端接收方式
         * @return
         */
    @RequestMapping("/test01")
    public ResponseResult<Demo> test01(Integer id, String name, LocalDateTime birthday){
        Demo d=new Demo();
        d.setId(id);
        d.setName(name);
        d.setBirthday(birthday);
        log.info("demo:{}",d);
        return new ResponseResult<>(200,"ok",d);
    }

或

直接使用对象接收

@RequestMapping("/test03")
    public ResponseResult<Demo> test03(Demo demo){
        log.info("demo:{}",demo);
        return new ResponseResult<>(200,"oooooooooook",demo);
    }

启动程序，测试代码，控制台又报错了：

原因：querystring提交日期格式，不走“消息转换器”，SpringMvc的querystring统一用“类型转换器”处理。那么之前配置的@JsonFormat对QueryString不起作用。

解决方案：

如果使用非对象的方式接收日期数据

@RequestMapping(“/test01”)
public ResponseResult test01(Integer id, String name,
  @DateTimeFormat(pattern ="yyyy-MM-dd HH:mm:ss" ) LocalDateTime birthday){
      Demo d=new Demo();
      d.setId(id);
      d.setName(name);
      d.setBirthday(birthday);
      log.info("demo:{}",d);
      return new ResponseResult<>(200,"ok",d);

}

如果使用对象的方式接收日期数据

public class Demo {

      private Integer id;
      private String name;
      //jsonString提交过来，日期按照pattern指定格式解析
      @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss") //jsonstring
      @DateTimeFormat(pattern ="yyyy-MM-dd HH:mm:ss" ) //querystring
      private LocalDateTime birthday;

}