如何通过Java实现时间轴过程解析

这篇文章主要介绍了如何通过Java实现时间轴过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了如何通过Java实现时间轴过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1.需要添加FastJson的依赖处理数据。

com.alibabafastjson1.2.47

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 getAllData();

service

/** * 获取所有数据 * @return */ List getAllData();

serviceimpl

@Resource private InfoDao infoDao; /** * 获取所有数据 * @return */ public List getAllData(){ return this.infoDao.getAllData(); }

controller

@Resource private InfoDao infoDao; /** * 获取所有数据 * @return */ public List getAllData(){ return this.infoDao.getAllData(); }

mapper

select * from ideatest.info order by time desc

4.前端js、css、html文件编写。

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[i].time+"

" + "" + result[i].content + "

" + ""; $(".container .time-line").append(childNode); } }

Ps:因为数据库的时区问题，所以可在数据库的连接URL后添加如下参数：

serverTimezone=Hongkong

5.效果展示