Angular datepicker如何解析为Java Date？

Question

我有一个带有 Angular 前端和 Spring Boot 作为后端的小待办事项应用程序。我对 Spring Boot 很陌生，可能需要进一步解释。感谢您的理解。

我的问题是解析从 angular datepicker 组件获得的日期格式以键入 Date。这是我得到的当前错误：

"JSON parse error: Cannot deserialize instance of `java.util.Date` out of START_OBJECT token; nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize instance of `java.util.Date` out of START_OBJECT token
        at[Source:(PushbackInputStream);line:1,column:73](through reference chain:todo.ToDo["dueDate"])"

我一直在寻找解决方案，我想我找到了，但我不太明白如何在我的情况下实施它：Angular2 Spring boot date serialization

由于我目前作为 ToDo 实体接收来自用户的帖子：

@PostMapping("/todos")
    ToDo newToDo(@RequestBody ToDo newToDo) {
        return repository.save(newToDo);
    }

我应该如何提取用户输入的日期？然后我会解析日期，然后保存它。在我的脑海里它应该可以工作......

感谢您的任何帮助或建议

Answer 1

您可能需要为此使用LocalDateSerializer 和LocalDateDeserializer。

ToDo 类。

 public class ToDo {
  @JsonDeserialize(using = LocalDateDeserializer.class)
  @JsonSerialize(using = LocalDateSerializer.class)
  private LocalDate dueDate;

  // getters and setters

 }

LocalDateDeserializer.java

   import java.time.LocalDate;

   import com.fasterxml.jackson.core.JsonParser;
   import com.fasterxml.jackson.databind.DeserializationContext;
   import com.fasterxml.jackson.databind.deser.std.StdDeserializer;

  public class LocalDateDeserializer extends StdDeserializer<LocalDate> {

private static final long serialVersionUID = 1L;

protected LocalDateDeserializer() {
    super( LocalDate.class );
}

@Override
  public LocalDate deserialize( JsonParser jp, DeserializationContext ctxt ) {
    try {
        return LocalDate.parse( jp.readValueAs( String.class ) );
    }
    catch (Exception e) {
        // TODO: handle exception
        return null;
    }
}
}

LocalDateSerializer.java

 import java.io.IOException;
 import java.time.LocalDate;
 import java.time.format.DateTimeFormatter;

import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.SerializerProvider;
import com.fasterxml.jackson.databind.ser.std.StdSerializer;

public class LocalDateSerializer extends StdSerializer<LocalDate>
{

private static final long serialVersionUID = 1L;

public LocalDateSerializer()
{
    super( LocalDate.class );
}

  @Override
  public void serialize( LocalDate value, JsonGenerator gen, SerializerProvider sp ) 
  throws IOException, JsonProcessingException
    {
        gen.writeString( value.format( DateTimeFormatter.ISO_LOCAL_DATE ) );
  }
}

您还应该将日期作为字符串传递，例如：“2019-02-01”。从前端传递 Date 对象不是一个好习惯。

    import { Component,Input } from '@angular/core';
   import {TodoService} from './todo.service';

@Component({
  selector: 'app-root',
   templateUrl: './app.component.html', 
  styleUrls: ['./app.component.scss']
 })
  export class AppComponent {
  title = 'ToDoApp';

constructor(private todoService: TodoService) {
}

@Input() toDoData = {name: '', dueDate: Date};

addToDo() {
    this.toDoData.dueDate = // formatted date
    this.todoService.addToDo(this.toDoData).subscribe((result) => {
        this.todoService.addToDo(this.toDoData);
        console.log(this.toDoData.dueDate);
    });
}

convertToMilliseconds(dueDate: DateConstructor) {
    return dueDate.valueOf();
}
}