java - 将日期从 Angular 日期选择器传递到java后端的理想方法？

Question

我正在通过一个简单的待办事项应用程序学习 Angular 的基础知识。我有一个简单的 Spring Boot 后端，工作正常。我目前正在努力寻找将日期从 Angular 引导日期选择器传递到后端的最佳方法。由于代码现在的数据类型不匹配。

将其转换为秒并在后端将秒转换回 java 日期的理想方法是吗？

我的待办事项实体:

@Id
    @GeneratedValue
    private long id;
    private @NonNull
    String taskName;
    private Date dueDate;
    private String extraNote;
    private boolean taskCompleted;

当用户创建新的待办事项时，我在哪里获取用户输入:

@Input() toDoData = { taskName: '', taskCompleted: false, extraNote: '', dueDate: Date};

  addToDo() {
    this.todoService.addToDo(this.toDoData).subscribe((result) => {
      this.todoService.addToDo(this.toDoData);
    });
  }

添加我的 todoService 的 todo 部分:

addToDo(todo): Observable<any> {
        console.log(todo);
        return this.http.post<any>(this.API + 'todos', JSON.stringify(todo), this.httpOptions).pipe(
            tap((todo) => console.log(`added todo w/ id=${todo.id}`)),
            catchError(this.handleError<any>('addTodo'))
        );
    }

感谢您的帮助!

编辑(添加了 ToDoController):

@RestController
public class ToDoController {
    private ToDoRepository repository;

    public ToDoController(ToDoRepository repository) {
        this.repository = repository;
    }

    @GetMapping("/todos")
    List<ToDo> all() {
        return repository.findAll();
    }

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

    @GetMapping("/todos/{id}")
    ToDo one(@PathVariable Long id) {
        return repository.findById(id)
                .orElseThrow(() -> new ToDoNotFoundException(id));
    }

    @PutMapping("/todos/{id}")
    ToDo replaceToDo(@RequestBody ToDo newToDo, @PathVariable Long id) {

        return repository.findById(id)
                .map(toDo -> {
                    toDo.setTaskName(newToDo.getTaskName());
                    toDo.setDueDate(newToDo.getDueDate());
                    toDo.setExtraNote(newToDo.getExtraNote());
                    toDo.setTaskCompleted(newToDo.getTaskCompleted());
                    return repository.save(toDo);
                })
                .orElseGet(() -> {
                    newToDo.setId(id);
                    return repository.save(newToDo);
                });
    }

    @DeleteMapping("/todos/{id}")
    void deleteToDo(@PathVariable Long id) {
        repository.deleteById(id);
    }

    @GetMapping("/deleteall")
    @CrossOrigin(origins = "http://localhost:4200")
    public void deleteAll() {
        repository.deleteAll();
    }

    @GetMapping("/init")
    @CrossOrigin(origins = "http://localhots:4200")
    public void createDefaults() {
        Date date = new Date();
        repository.save(new ToDo("PMB", date, false));
        repository.save(new ToDo("GMDU", date, false));
        repository.save(new ToDo("INMA", date, true));
        repository.save(new ToDo("SLGP", date, false));
    }
}

Answer 1

首先。使用日期时，您应该考虑夏季/冬季时间问题，因此我建议使用 LocalDate(Time) 类。

也就是说:我会创建一个

@Configuration
public class JacksonConfig {

    @Bean
    @Primary
    public ObjectMapper serializingObjectMapper() {
        ObjectMapper objectMapper = new ObjectMapper();

        // Mirror the default Spring Boot Jackson settings
        objectMapper.configure(MapperFeature.DEFAULT_VIEW_INCLUSION, false);
        objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);

        JavaTimeModule javaTimeModule = new JavaTimeModule();
        javaTimeModule.addSerializer(LocalDateTime.class, new LocalDateSerializer());
        javaTimeModule.addDeserializer(LocalDateTime.class, new LocalDateDeserializer());
        objectMapper.registerModule(javaTimeModule);
        return objectMapper;
    }

    public static class LocalDateSerializer extends JsonSerializer<LocalDateTime> {
        @Override
        public void serialize(LocalDateTime value, JsonGenerator gen, SerializerProvider serializers) throws IOException {
            gen.writeNumber(value.atZone(ZoneId.systemDefault()).toInstant().toEpochMilli());
        }
    }
    public static class LocalDateDeserializer extends JsonDeserializer<LocalDateTime> {
        @Override
        public LocalDateTime deserialize(JsonParser p, DeserializationContext ctxt) throws IOException {
            return LocalDateTime.ofInstant(Instant.ofEpochMilli(p.getValueAsLong()), ZoneId.systemDefault());
        }
    }
}

将所有日期/时间等转换为毫秒，然后从毫秒转换回 localDate(Time)。您可以在互联网上找到很多示例。

这充当在应用程序中传递端点的所有日期/时间的过滤器。这样您就无需再担心任何转换问题。

然后，您需要在 Angular 中实现 dateToMillisecond 和反之亦然的例程，并在需要转换日期的地方使用它。您可以拦截 http 流量并执行相同的操作，但实现起来可能会更复杂一些。

示例

function timeFromMillis(millis) {
    if (_.isEmpty(millis)) {
        return undefined;
    }
    const momentTimeStamp = moment.unix(millis / 1000);
    if (!momentTimeStamp.isValid()) {
        return undefined;
    }
    return momentTimeStamp.toDate();
}

function timeToMillis(obj) {
    if (!_.isEmpty(obj)) {
        if (obj instanceof moment) {
            return obj.valueOf();
        } else if (obj instanceof Date) {
            return obj.getTime();
           else if (angular.isString(obj)) {
            return parseDateString(obj).getTime();
        } else {
           return angular.undefined;
        }
    }
}

function parseDateString(dateString) {
    if (angular.isDefined(dateString) && dateString) {
        return moment(dateString, 'YYYY-MM-DD').toDate();
    }
}