解决前端回显日期：竖立 —— 横向_前端竖版变横板-优快云博客

本文链接：https://blog.youkuaiyun.com/2201_75732091/article/details/145801243

效果展示

实现意义

效果展示

左图data日期格式为竖立排列，右图则为优化效果。

实现意义

提高可读性：横向排列可以让用户在浏览数据时视线移动更自然，尤其是在表格形式的数据展示中，横向布局可以使得每条记录的信息更加紧凑和连续，减少上下滚动的需要。

优化空间利用：对于包含多个日期字段的复杂数据结构，横向排列可以帮助更好地利用屏幕宽度，尤其在宽屏显示器上，避免了纵向空间的浪费，并且可以在不增加页面长度的情况下显示更多信息。

适应响应式设计：现代网页设计趋向于响应式，即能够在不同的设备上提供良好的用户体验。横向排列的日期字段更容易适配不同尺寸的屏幕，尤其是移动设备上的横向滚动比纵向滚动更为友好。

支持数据分析：如果前端应用涉及到数据分析功能，横向排列的数据格式更易于集成图表、趋势线等可视化元素，方便用户进行深入分析。

实现思路（代码）

方案一

使用@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")注解来格式化Java对象中的日期字段，在序列化为JSON格式时，可以指定日期时间的显示格式。

在通过直接在实体类的字段或getter方法或传递对应日期格式的字段上添加注解。


@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Student implements Serializable {

    private static final long serialVersionUID = 1L; // 序列化ID

    private Integer studentId; // 学生ID

    private String name; // 学生姓名

    private Integer gender; // 性别

    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime birthDate; // 出生日期

    private String major; // 专业

    private String grade; // 年级

    private String className;// 班级

}

例如：以上在出生日期加入注解，可以实现指定日期的显示格式（自定义）。

方案二

扩展Spring MVC框架的消息转换器来处理前端回显日期的问题，将日期字段从竖向排列改为横向排列的需求，主要涉及自定义消息转换逻辑以满足特定的数据格式化要求。

步骤一：在WebMvcConfiguration配置类中重写extendMessageConverters这个方法，扩展一个消息转换器。

步骤二：为消息转换器提供对应的对象转换器。

步骤一实现如下：

    /**
     * 扩展Spring MVC框架的消息转化器 解决问题：前端回显日期 (竖立 → 横向)
     * @param converters
     */
    protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
        log.info("扩展消息转换器...");
        //创建一个消息转换器对象
        MappingJackson2HttpMessageConverter converter = new MappingJackson2HttpMessageConverter();
        //需要为消息转换器设置一个对象转换器，对象转换器可以将Java对象序列化为json数据
        converter.setObjectMapper(new JacksonObjectMapper());
        //将自己的消息转化器加入容器中
        converters.add(0,converter);
    }

步骤二实现如下：

/**
 * 对象映射器:基于jackson将Java对象转为json，或者将json转为Java对象
 * 将JSON解析为Java对象的过程称为 [从JSON反序列化Java对象]
 * 从Java对象生成JSON的过程称为 [序列化Java对象到JSON]
 */
public class JacksonObjectMapper extends ObjectMapper {

    //定义默认的日期时间格式
    public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
    public static final String DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
    public static final String DEFAULT_TIME_FORMAT = "HH:mm:ss";

    public JacksonObjectMapper() {
        //调用父类 ObjectMapper 的构造函数
        super();
        //收到未知属性时不报异常
        this.configure(FAIL_ON_UNKNOWN_PROPERTIES, false);

        //反序列化时，属性不存在的兼容处理
        this.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);

        //创建一个 SimpleModule 实例，用于注册自定义的序列化器和反序列化器
        SimpleModule simpleModule = new SimpleModule()
                .addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
                .addDeserializer(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
                .addDeserializer(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)))
                .addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
                .addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
                .addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)));

        //注册功能模块 例如，可以添加自定义序列化器和反序列化器
        //将 simpleModule 注册到当前的 ObjectMapper 实例中，使其生效
        this.registerModule(simpleModule);
    }
}

上述代码都提供了相应的注释，你可以通过注释去分析以上代码。