脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → Java时间轴

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

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

这篇文章主要介绍了如何通过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.效果展示

您可能感兴趣的文章:

相关文章

  • SpringMvc根据返回值类型不同处理响应的方法

    SpringMvc根据返回值类型不同处理响应的方法

    这篇文章主要介绍了SpringMvc根据返回值类型不同处理响应,我们可以通过控制器方法的返回值设置跳转的视图，控制器支持如void，String，ModelAndView类型，需要的朋友可以参考下
    2023-09-09
  • SpringBoot在IDEA中实现热部署(JRebel实用版)

    SpringBoot在IDEA中实现热部署(JRebel实用版)

    这篇文章主要介绍了SpringBoot在IDEA中实现热部署(JRebel实用版)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Mybatis复杂查询的实现

    Mybatis复杂查询的实现

    本文主要介绍了Mybatis复杂查询的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-09-09
  • Java中数组和String相互转换的几种常见方法

    Java中数组和String相互转换的几种常见方法

    这篇文章主要介绍了Java中数组和String相互转换的几种常见方法,每种类型都有相应的转换方法,如使用String类的构造函数、toCharArray()、String.join()、Arrays.toString()、StringBuilder等,这些方法能帮助开发者高效地进行数据类型之间的转换,需要的朋友可以参考下
    2025-04-04
  • JDK15正式发布(新增功能预览)

    JDK15正式发布(新增功能预览)

    这篇文章主要介绍了JDK15正式发布，新增功能预览，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2020-09-09
  • Java IO之序列化与反序列化详解

    Java IO之序列化与反序列化详解

    这篇文章主要为大家介绍了Java IO之序列化与反序列化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • Spring实例化对象的几种常见方式

    Spring实例化对象的几种常见方式

    Spring框架作为一个轻量级的控制反转容器,为开发者提供了多种对象实例化的策略,通过这些策略,开发者可以更加灵活地控制对象的生命周期和依赖关系,无论是通过XML配置、注解配置还是Java配置,Spring都能轻松地实现对象的实例化,本文将介绍Spring实例化对象的几种常见方式
    2024-12-12
  • java正则表达式用法大全(深度好文)

    java正则表达式用法大全(深度好文)

    这篇文章主要给大家介绍了关于java正则表达式用法大全的相关资料,正则表达式在处理字符串时非常有用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • Java探索之Feign入门使用详解

    Java探索之Feign入门使用详解

    这篇文章主要介绍了Java探索之Feign入门使用详解，关于feign，我也是第一次遇到，于是在网上搜集了相关文章，这篇比较详细，介绍了其简介，选择feign的原因以及其他相关内容，需要的朋友可以参考下。
    2017-10-10
  • mybatis QueryWrapper的条件构造之apply、last、select解析

    mybatis QueryWrapper的条件构造之apply、last、select解析

    这篇文章主要介绍了mybatis QueryWrapper的条件构造之apply、last、select，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03

最新评论