小編給大家分享一下怎么通過Java實(shí)現(xiàn)時(shí)間軸過程,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
成都創(chuàng)新互聯(lián)公司主營呼蘭網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),呼蘭h5重慶小程序開發(fā)搭建,呼蘭網(wǎng)站營銷推廣歡迎呼蘭等地區(qū)企業(yè)咨詢
1.需要添加FastJson的依賴處理數(shù)據(jù)。
com.alibaba fastjson 1.2.47
2.創(chuàng)建測(cè)試數(shù)據(jù)庫和表。
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
/** * 獲取所有數(shù)據(jù) * @return */ ListgetAllData();
service
/** * 獲取所有數(shù)據(jù) * @return */ ListgetAllData();
serviceimpl
@Resource private InfoDao infoDao; /** * 獲取所有數(shù)據(jù) * @return */ public ListgetAllData(){ return this.infoDao.getAllData(); }
controller
@Resource private InfoDao infoDao; /** * 獲取所有數(shù)據(jù) * @return */ public ListgetAllData(){ return this.infoDao.getAllData(); }
mapper
4.前端js、css、html文件編寫。
html
時(shí)間軸
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 = "" + ""; $(".container .time-line").append(childNode); } }"+result[i].time+"" + "" + result[i].content + "" + "
Ps:因?yàn)閿?shù)據(jù)庫的時(shí)區(qū)問題,所以可在數(shù)據(jù)庫的連接URL后添加如下參數(shù):
serverTimezone=Hongkong
5.效果展示
看完了這篇文章,相信你對(duì)“怎么通過Java實(shí)現(xiàn)時(shí)間軸過程”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!