如何通过Java实现时间轴过程解析
这篇文章主要介绍了如何通过Java实现时间轴过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1.需要添加FastJson的依赖处理数据。
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.47</version> </dependency>
2.创建测试数据库和表。
3.创建entity、dao、service、controller各层，可以使用EasyCode快速生成(之前博客有教程)，然后增减代码。
entity
private static final long serialVersionUID = 423496079020131231L;
private Integer id;
@JSONField(format = "yyyy-MM-dd HH:mm:ss")
private Date time;
private String content;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Date getTime() {
return time;
}
public void setTime(Date time) {
this.time = time;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
dao
/** * 获取所有数据 * @return */ List<Info> getAllData();
service
/** * 获取所有数据 * @return */ List<Info> getAllData();
serviceimpl
@Resource
private InfoDao infoDao;
/**
* 获取所有数据
* @return
*/
public List<Info> getAllData(){
return this.infoDao.getAllData();
}
controller
@Resource
private InfoDao infoDao;
/**
* 获取所有数据
* @return
*/
public List<Info> getAllData(){
return this.infoDao.getAllData();
}
mapper
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.dao.InfoDao">
<resultMap type="com.example.entity.Info" id="InfoMap">
<result property="id" column="id" jdbcType="INTEGER"/>
<result property="time" column="time" jdbcType="TIMESTAMP"/>
<result property="content" column="content" jdbcType="VARCHAR"/>
</resultMap>
<!-- 查询所有数据 -->
<select id="getAllData" resultMap="InfoMap">
select * from ideatest.info order by time desc
</select>
</mapper>
4.前端js、css、html文件编写。
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时间轴</title> <link rel="stylesheet" href="../static/css/tl.css"/> <script type="text/javascript" src="../static/jquery-3.4.1.js"></script> <script src="../static/js/tl.js"></script> </head> <body> <div class="container"> <div class="time-line"> </div> </div> </body> </html>
css
* {
margin: 0;
padding: 0;
}
.container {
margin: 20px;
}
.container .time-line {
position: relative;
width: 0;
border-right: 1px gray dashed;
}
.container .square {
position: absolute;
width: 10px;
height: 10px;
margin-left: -5px;
background-color: gray;
}
.container .square .time {
position: absolute;
width: 300px;
height: 30px;
margin-top: -10px;
margin-left: 20px;
line-height: 30px;
}
.container .square .content {
position: absolute;
width: 300px;
height: 60px;
margin-top: 20px;
margin-left: 20px;
line-height: 60px;
}
js
$.ajax({
url: "/info/getAllData",
type: "GET",
success: function(data) {
success(data);
}
});
function success(data) {
var result = JSON.parse(data);
$(".container .time-line").css({
"height": result.length * 100 + "px"
});
for (var i = 0; i < result.length; i++) {
var childNode = "<div class='square' style='top:" + i * 100 + "px'>" +
"<div class='time'>"+result[i].time+"</div>" +
"<div class='content'>" + result[i].content + "</div>" +
"</div>";
$(".container .time-line").append(childNode);
}
}
Ps:因为数据库的时区问题，所以可在数据库的连接URL后添加如下参数：
serverTimezone=Hongkong
5.效果展示
相关推荐
-
java实现的日期时间转换工具类完整示例
本文实例讲述了java实现的日期时间转换工具类.分享给大家供大家参考,具体如下: 最基础的东西,总结一下,下次用的时候就方便一些了.废话不多说,直接贴代码: package com.incar.base.util; import com.incar.base.exception.BaseRuntimeException; import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDat
-
Java缓存Map设置过期时间实现解析
这篇文章主要介绍了Java缓存Map设置过期时间实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 前言 最近项目需求需要一个类似于redis可以设置过期时间的K,V存储方式.项目前期暂时不引进redis,暂时用java内存代替. 解决方案 1. ExpiringMap 功能简介 : 1.可设置Map中的Entry在一段时间后自动过期. 2.可设置Map最大容纳值,当到达Maximum size后,再次插入值会导致Map中的第一个值过期.
-
Java8新特性时间日期库DateTime API及示例详解
Java8新特性的功能已经更新了不少篇幅了,今天重点讲解时间日期库中DateTime相关处理.同样的,如果你现在依旧在项目中使用传统Date.Calendar和SimpleDateFormat等API来处理日期相关操作,这篇文章你一定不要错过.来刷新你的知识库吧! 背景 Java对日期.日历及时间的处理一直以来都饱受诟病,比如java.util.Date和java.util.Calendar类易用性差,不支持时区,非线程安全:还有用于格式化日期的类DateFormat也是非线程安全的等问题. J
-
通过java记录数据持续变化时间代码解析
这篇文章主要介绍了通过java记录数据持续变化时间代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.需求:获取count为null和不为null的持续变化 [{count=0, time=0}, {count=10, time=1000}, {count=20, time=2000}, {count=30, time=3000}, {count=40, time=4000}, {count=null, time=5000}, {cou
-
Java日期与时间类原理解析
这篇文章主要介绍了Java日期与时间类原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 基础知识 日期: 类似于 2018-12-12 时间: 类似于 2018-12-12 12:12:12 时刻: 类似于 2018-12-12 12:12:12 地区: 计算机中的 Locale, 如 zh_CN, en_US 等, 影响着对于日期, 时间, 货币等格式的显示 EpochTime: 从 1970 年 1 月 1 日 UTC+00:00 到
-
Java8 新特性之日期时间对象及一些其他特性
日期时间对象 关于日期时间的操作可以分为两种: 转换:与字符串的互相转换,与时间戳的互相转换 计算:计算两个时间点之间的间隔.时间点与时间段的计算(计算下周N.下个月D日.去年M月D日等等) Java8 提供了三个类:LocalDate.LocalTime.LocalDateTime,它们的形式如 2020-01-01.12:30:00.2020-01-01 12:30:00 创建对象 获取类对象的方法非常非常简单 LocalDate now = LocalDate.now(); LocalDa
-
Java使用DateTimeFormatter实现格式化时间
用扫描器获取输入的时间(年月日时分),这个时间的格式是常用的格式,然后格式化这个时间,把格式化的时间输出到控制台,可以在控制台重复输入时间.格式化的时间参考企业微信聊天记录的展示时间.用DateTimeFormatter实现,功能如下: 同年: 不同年: 同月:月日+上午/下午+时分 同年不同月:月日+时分 今天:上午/下午+时分 明天:明天+上午/下午+时分 昨天:昨天+上午/下午+时分 包括今天在内的一周内:星期+上午/下午+时分 首先看一下测试类: package hrkj; import
-
Java日期时间及日期相互转换实现代码
这篇文章主要介绍了Java日期时间及日期相互转换实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 java.util 包提供了 Date 类来封装当前的日期和时间. Date 类提供两个构造函数来实例化 Date 对象. 第一个构造函数使用当前日期和时间来初始化对象. Java日期时间,以及相互转化,供大家参考,具体内容如下 package com.study.string; import java.text.ParseException
-
如何通过Java实现时间轴过程解析
这篇文章主要介绍了如何通过Java实现时间轴过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.需要添加FastJson的依赖处理数据. <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.47</version> </depen
-
原生Java操作mysql数据库过程解析
这篇文章主要介绍了原生Java操作mysql数据库过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.引入数据库驱动的jar包 以通过maven引入mysql driver为例 1.1 到http://mvnrepository.com 搜索 mysql 1.2 复制所需maven配置文件到工程的 pom.xml <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-
-
Java继承构造器使用过程解析
这篇文章主要介绍了Java继承构造器使用过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 初始化基类 前面提到,继承是子类对父类的拓展.<Thinking in Java>中提到下面一段话: 当创建一个导出类的对象时,该对象包含了一个基类的子对象.这个子对象与你用基类直接创建的对象是一样的.二者区别在于,后者来自于外部,而基类的子对象被包装在导出类的对象内部. 我们在创建子类对象时,调用了父类的构造器,甚至父类的父类构造器.我们知道,构
-
通过Java实现bash命令过程解析
这篇文章主要介绍了通过Java实现bash命令过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.BASH 命令简介 Bash,Unix shell的一种,在1987年由布莱恩·福克斯为了GNU计划而编写.1989年发布第一个正式版本,原先是计划用在GNU操作系统上,但能运行于大多数类Unix系统的操作系统之上,包括Linux与Mac OS X v10.4都将它作为默认shell. Bash是Bourne shell的后继兼容版本与开放
-
JAVA如何定义构造函数过程解析
这篇文章主要介绍了JAVA如何定义构造函数过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 构造函数在类里面定义,构造函数名一定要跟类名相同,实例化一个对象的时候,如果没有初始化成员变量,可以不用定义构造函数,系统会自己定义好,定义了也不会影响.如果实例化对象需要初始化成员变量就一定自定义构造函数. 定义构造函数 class Cat { String name; int age; //可定义可不定义,不定义时实例化一个对象会自动定义这个构
-
如何基于java实现Gauss消元法过程解析
补充知识: 正定矩阵 奇异矩阵 严格对角占优 要理解Gauss消去法,首先来看一个例子: 从上例子可以看出,高斯消去法实际上就是我们初中学的阶二元一次方程组,只不过那里的未知数个数$n=2$ $n>2$时,Gauss消去法的思路实际上和解二元一次方程组是一样的,方法如下: 将n方程组中的n−1个方程通过消元,形成一个与原方程组等价的一个新方程组,新方程组中的n−1个方程仅包含n−1个未知数. 故问题就转化为了求解n−1元的方程组,这样我们可以继续消元,以次类推,直到最后一个方程组为一元一次方程组
-
基于Java信号量解决死锁过程解析
死锁在多线程的情况下,会出现数据不同步情况, 而为了避免这种情况,之前也说了:界区实现方法有两种,一种是用synchronized,一种是用Lock显式锁实现. 而如果不恰当的使用了锁,且出现同时要锁多个对象时,会出现死锁情况,如下: package lockTest; import java.util.Date; /** * 崔素强 * @author cuisuqiang@163.com */ public class LockTest { public static String obj1
-
使用maven插件对java工程进行打包过程解析
现在基本上都是采用maven来进行开发管理,我有一个需求是需要把通过maven管理的java工程打成可执行的jar包,这样也就是说必需把工程依赖的jar包也一起打包.而使用maven默认的package命令构建的jar包中只包括了工程自身的class文件,并没有包括依赖的jar包.我们可以通过配置插件来对工程进行打包,pom具体配置如下: maven-assembly-plugin <plugin> <artifactId>maven-assembly-plugin</art
-
Java 图片复制功能实现过程解析
需求说明 实现思路 见代码注释 代码内容 使用IO复制图片 import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; /** * @auther::9527 * @Description: 第十题 * @program: 多线程 * @create: 2019-08-10 00:26 */ pu
-
lambda表达式解决java后台分组排序过程解析
需求:按照起始日期查询出数据库里一段连续日期的住院信息. 问题:数据库里的住院信息可能不是完整的,也就是在给出的日期区间里只有若干天的数据,缺少某些日期的数据. 解决: 1.需要我们先按日期分组查出数据库里有的数据: 2.然后遍历日期,将不存在的日期以日期为key,value为null插入集合里: 3.对集合里的key即日期进行排序. 注:这里分组和排序都用JDK8的新特性lambda表达式 /** * * @param startTime 开始时间 * @param endTime 结束时间