Java implementation timeline

1. The need to add the dependency of data processing FastJson.

<dependency>
     <groupId>com.alibaba</groupId>
     <artifactId>fastjson</artifactId>
     <version>1.2.47</version>
</dependency>

2. Create a test database and table.

3. Create entity, dao, service, controller layers can be used to quickly generate EasyCode (blog before there are tutorials), then increase or decrease the code.

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

   /**
     * Get all the data
     * @return
     */
    List<Info> getAllData();

service

   /**
     * Get all the data
     * @return
     */
    List<Info> getAllData();

serviceimpl

    @Resource
    private InfoDao infoDao;


   /**
     * Get all the data
     * @return
     */
    public List<Info> getAllData(){
        return this.infoDao.getAllData();
    }

controller

   @Resource
   private InfoDao infoDao;

   /**
     * Get all the data
     * @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>

    <-! Query all data -> 
    < the SELECT the above mentioned id = "the getAllData" resultMap = "Infomap" >
        select * from ideatest.info order by time desc
    </select>

</mapper>

4. The front-end write js, css, html file.

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;
}

$.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: the problem zone because the database, it can be added after the connection URL database the following parameters:

server timezone = Hong Kong

5. show results

Java implementation timeline

Guess you like