前后端时间正确传递

news2024/12/24 20:12:41

引言:后端传递给前端去展示时间的时候将时间转化为String类型的时间数据去返回。此时就需要加上 @JsonFormat 注解来解决这个问题。

框架环境配置中,时间配置为

情形一:

  • 数据库字段exam_time类型为date

  • 后端实体类中examTime类型为Date

1.前端绑定的examTime类型type设置为datetime,以String类型进行传递

  <el-date-picker v-model="dataForm.examTime" type="datetime" :picker-options="pickerOptions" placeholder="考试时间"></el-date-picker>

若以上面的前后端字段设置,在进行时间传递的时候,交互会报错。

解决方法:

(1)如果需要页面展示日期时间字符串,则需要在前端页面的DateTimePicker日期时间选择器组件中加入属性value-format:"yyyy-MM-dd HH:mm:ss"

   <el-form-item label="考试时间" prop="examTime">
        <el-date-picker v-model="dataForm.examTime" type="datetime"  :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" placeholder="考试时间">
        </el-date-picker>
   </el-form-item>

显示效果:

(2)如果需要在前端页面仅仅只展示日期,加入属性value-format:"yyyy-MM-dd ",这样后端控制台会报Json解析错误,必须在后端字段上面加入注解@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd")才能防止报错

@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd")
	private Date examTime;

最后显示效果: 

2.前端绑定的examTime类型type设置为date,以String类型进行传递

el-date-picker v-model="dataForm.examTime" type="date" :picker-options="pickerOptions" placeholder="考试时间"></el-date-picker>

 这样设置的话,在后端会报错

解决方法:

(1)解决的方法依旧是如果页面需要展示日期字符串,后端实体字段加上注解@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd"),前端属性value-format:"yyyy-MM-dd ",最后页面展示的是以日期字符串展示的。

(2)若要展示日期时间字符串,前端加上属性value-format:"yyyy-MM-dd HH:mm:ss",后端什么注解都不加,最后页面是以日期时间字符串展示

情形二:

  • 数据库字段exam_time类型为datetime
  • 后端实体类中examTime类型为Date

1.前端绑定的examTime类型type设置为datetime,以String类型进行传递

<el-date-picker v-model="dataForm.examTime" type="datetime" :picker-options="pickerOptions"    placeholder="考试时间"></el-date-picker>
    

(1)若页面展示考试时间为日期时间字符串,前端加上属性value-format:"yyyy-MM-dd HH:mm:ss",后端加上注解@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd HH:mm:ss"),代码不会报错

(2)若页面展示考试时间为日期字符串,前端加上属性value-format:"yyyy-MM-dd ",后端加上注解@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd "),代码不会报错

2.前端绑定的examTime类型type设置为date,以String类型进行传递

(1)若页面展示考试时间为日期时间字符串,前端加上属性value-format:"yyyy-MM-dd HH:mm:ss",后端不加注解,不会报错

(2)若页面展示考试时间为日期字符串,前端加上属性value-format:"yyyy-MM-dd",后端不加注解会报错,加上注解@JsonFormat(timezone="GMT+8", pattern = "yyyy-MM-dd"),不会报错

总结:前端属性都加value-format,按自己想要转换的类型设置

           后端在时间字段上都加上@JsonFormat注解

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2108634.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

搭建VUE+VScode+elementUI环境遇到的问题

手把手教你搭建VUEVScodeelementUI开发环境-CSDN博客 vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1&#xff0c;因为在此系统上禁止运行脚本 vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1&#xff0c;因为在此系统上禁止运行脚本 - 知乎 更…

Django+Vue家居全屋定制系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 需要的环境3.2 Django接口层3.3 实体类3.4 config.ini3.5 启动类3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质创作者&…

虚拟机苹果系统MacOS中XCode的安装

1、背景介绍 主机系统Win11&#xff0c;虚拟机VMWare17&#xff0c;苹果系统MacOS 13.6.7 2、Xcode的在线 点击应用市场&#xff0c;输入Xcode搜索&#xff1a; 看来Xcode无法安装在macOS V13上&#xff0c;直接在线安装失败。 3、采用下载安装包的方法进行安装 解决办法参考链…

Linux操作系统下的一些常用命令分享(ubuntu16.04)

注意一般Linux命令字符与字符之间都是空格来隔开的&#xff0c;所以千万不能忘记打空格&#xff0c;而且Linux区分大小写。&#xff08;目录就是文件夹&#xff09; 1、pwd 查看当前所在目录 2、查看帮助 命令 --help 但是这个命令会把所有内容一次性全部显示我们看帮助时很…

Linux远程管理工具推荐

原文阅读:【巨人肩膀社区专栏分享】Linux远程管理工具推荐 前两天xshell不让用了&#xff0c;刚好一台新电脑要装一个远程连接工具&#xff0c;准备试试其他。网上找了一些资料整理如下。 欢迎各位看官评论区说出你在使用的工具&#xff0c;期待你的使用经验分享&#xff08;…

Git的基本使用(持续更新)

基本使用 创建仓库 命令&#xff1a;git initgit init&#xff1a;将当前文件夹作为Git仓库&#xff0c;并在该文件夹中生成一个.git目录&#xff0c;该目录包含了资源的所有元数据&#xff0c;不可修改里面的内容。 git init newWareHouse&#xff1a;新建一个newWareHouse…

JVM性能监控和调优

JVM性能监控和调优 文章目录 JVM性能监控和调优性能优化的步骤GC日志分析GC日志参数测试GC分类日志结构 OOM&#xff1a;堆溢出模拟堆溢出dump文件分析gc日志分析 OOM&#xff1a;元空间溢出模拟元空间溢出dump文件分析原因及解决方案 OOM&#xff1a;GC overhead limit exceed…

python学习第二节:安装开发工具pycharm

python学习第二节&#xff1a;安装开发工具pycharm 1.下载安装包&#xff1a;https://www.jetbrains.com/pycharm/ 点击 Download 下滑页面到下面的社区版&#xff0c;&#xff08;上面的专业版是收费的&#xff0c;下面的社区版是免费的&#xff09; 2.安装 点击安装文件 …

计算机基础知识复习9.5

数据交换 电路交换&#xff1a;交换信息的两个主机之间简历专用通道&#xff0c;传输时延小&#xff0c;实时性强&#xff0c;效率低&#xff0c;无法纠正错误。 报文交换&#xff1a;信息拆分成小包(报文&#xff09;大小无限制&#xff0c;有目的/源等信息提高利用率。有转…

C++入门项目:Linux下C++轻量级Web服务器 跑通|运行|测试(小白进)

TinyWebServer是一个开源的项目&#xff0c;适合小白入门C网络编程&#xff0c;注意该项目是在linux系统下。 Linux下C轻量级Web服务器&#xff0c;助力初学者快速实践网络编程&#xff0c;搭建属于自己的服务器. 使用 线程池 非阻塞socket epoll(ET和LT均实现) 事件处理(R…

时钟分频流程

具体流程&#xff1a; 外部晶振&#xff08;XTIpll&#xff09;和 外部时钟&#xff08;EXTCLK&#xff09;经过OM【3&#xff1a;2】选择进入时钟模块 我们可以看到&#xff0c;在不同的模式下会选择不同的时钟源和状态。 时钟信号进入锁相环(PLL)后&#xff0c;会改…

Java项目:139 springboot基于SpringBoot的论坛系统设计与实现

项目介绍 论坛系统设置的角色有管理员&#xff0c;版主&#xff0c;用户等。 管理员管理论坛&#xff0c;主要是对论坛帖子增删改查以及对论坛帖子回复进行查看&#xff0c;对版主和用户进行管理&#xff0c;管理新闻等。 版主可以发布帖子&#xff0c;可以查询论坛帖子&…

Stage 模型应用程序包的结构

AppScope 目录是工具自动生成的 Module 则是工具自动生成的 entry、library&#xff0c;也可以自定义。 Module 类型 Module 有两种类型&#xff1a; Ability 类型的 Module&#xff1a;用来实现应用功能和特性&#xff0c;每一个 Ability 类型的 Module 编译以后。生成一个…

【C++ Primer Plus习题】11.5

问题: 解答: main.cpp #include <iostream> #include "Stonewt.h" using namespace std;int main() {Stonewt incognito 275;cout << "incognito: " << incognito << endl;Stonewt wolfe(285.7);cout << "wolfe: &qu…

Spring Boot技术在医疗排班系统开发中的创新

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 在这里插入图片描述 …

Web入门-08.Tomcat-基本使用

一.Tomcat的基本使用 二.Tomcat使用时的常见问题 Tomcat默认占用8080端口 如果占用8080端口的进程不方便被关闭掉&#xff0c;那么便配置Tomcat端口号(conf/server.xml) 三.Tomcat部署项目

机器学习之 PCA降维

1.PCA 降维简介 主成分分析&#xff08;Principal Component Analysis, PCA&#xff09;是一种统计方法&#xff0c;用于在数据集中寻找一组线性组合的特征&#xff0c;这些特征被称为主成分。PCA 的目标是通过变换原始特征空间到新的特征空间&#xff0c;从而减少数据的维度&…

AGV行业遇冷,叉车AGV逆风崛起:180家企业掀起血战

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 在自动化物流领域&#xff0c;一场悄然发生的变革正引领着行业风向的转折。尽管2024年以来&#xff0c;整体AGV&#xff08;自动引导车&#xff09;行业因下游市场需求疲软而遭遇增速…

打造安心宠物乐园:EasyCVR平台赋能猫咖/宠物店的智能视频监控解决方案

随着宠物经济的蓬勃发展&#xff0c;宠物店与猫咖等场所对顾客体验、宠物安全及健康管理的需求日益提升。然而&#xff0c;如何确保这些场所的安全与秩序&#xff0c;同时提升顾客体验&#xff0c;成为了经营者们关注的焦点。引入高效、智能的视频监控方案&#xff0c;不仅能够…

uniapp交互反馈

页面交互反馈可以通过:uni.showToast(object)实现,常用属性有 ioc值说明 值说明success显示成功图标&#xff0c;此时 title 文本在小程序平台最多显示 7 个汉字长度&#xff0c;App仅支持单行显示。error显示错误图标&#xff0c;此时 title 文本在小程序平台最多显示 7 个汉字…