溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么通過Java實現時間軸過程，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
1.需要添加FastJson的依賴處理數據。
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.47</version> </dependency>
2.創(chuàng)建測試數據庫和表。
3.創(chuàng)建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:因為數據庫的時區(qū)問題，所以可在數據庫的連接URL后添加如下參數：
serverTimezone=Hongkong
5.效果展示
看完了這篇文章，相信你對“怎么通過Java實現時間軸過程”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
