如何通过Java实现时间轴过程解析
作者:lightbc 时间:2022-01-02 00:31:32
这篇文章主要介绍了如何通过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.效果展示
来源:https://www.cnblogs.com/lightbc/p/12316581.html
标签:Java,时间,轴
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Java线程池Executor用法详解
2022-02-13 01:21:16
![](https://img.aspxhome.com/file/2023/2/62812_0s.jpg)
Java WebService开源框架CXF详解
2023-12-20 13:02:35
![](https://img.aspxhome.com/file/2023/0/62820_0s.jpg)
Maven 多profile及指定编译问题的解决
2022-04-22 23:43:24
java实现抽奖功能解析
2021-08-29 16:08:21
springboot中.yml文件参数的读取方式
2021-06-20 00:57:51
![](https://img.aspxhome.com/file/2023/3/62413_0s.png)
Java 线程池原理深入分析
2023-01-30 19:59:43
![](https://img.aspxhome.com/file/2023/7/66227_0s.png)
Android Build类的详解及简单实例
2023-07-02 21:12:45
idea设置JVM运行参数的几种方式
2023-05-26 14:57:33
![](https://img.aspxhome.com/file/2023/3/63803_0s.png)
Java设计模式之共享模式/享元模式(Flyweight模式)介绍
2023-06-15 04:35:10
Unity实现场景漫游相机
2023-06-15 19:08:57
Java实现输出数字三角形实例代码
2023-08-25 02:09:51
![](https://img.aspxhome.com/file/2023/4/58304_0s.png)
Spring Boot Debug调试过程图解
2023-12-13 10:27:33
![](https://img.aspxhome.com/file/2023/7/62497_0s.png)
Springboot 整合RabbitMq(用心看完这一篇就够了)
2023-11-23 05:27:17
![](https://img.aspxhome.com/file/2023/3/59753_0s.jpg)
Java实现二分搜索树的示例代码
2023-08-05 10:43:40
![](https://img.aspxhome.com/file/2023/5/62145_0s.png)
flutter中使用流式布局示例详解
2023-08-24 23:49:06
![](https://img.aspxhome.com/file/2023/5/86765_0s.jpg)
Maven+SSM框架实现简单的增删改查
2023-11-16 17:14:38
![](https://img.aspxhome.com/file/2023/0/59720_0s.png)
Mybatis Log Plugin的使用方式
2021-08-27 19:02:31
![](https://img.aspxhome.com/file/2023/8/61828_0s.jpg)
Java结构型设计模式中建造者模式示例详解
2023-04-24 13:37:31
![](https://img.aspxhome.com/file/2023/6/60286_0s.png)
Java实现按行读取大文件
2022-11-05 13:56:57
JAVA的反射机制你了解多少
2023-11-29 16:46:38
![](https://img.aspxhome.com/file/2023/9/60609_0s.jpg)