如何通过Java实现时间轴过程解析
作者:lightbc 发布时间:2022-01-02 00:31:32
标签: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.效果展示
来源:https://www.cnblogs.com/lightbc/p/12316581.html
0
投稿
猜你喜欢
- 首先微信公众号开发网页授权登录使用环境:开发工具:eclipse;服务器:tomcat8,开发语言:JAVA。我写的网页授权登录时用开发者模
- 通常在一份Excel文档中可能包含多个内容不同的工作表,而他们的默认名都为Sheet1、Sheet2、Sheet3等。为了方便我们的查找和操
- Java常用类库Math类Math包含用于执行基本数字运算的方法,例如基本指数,对数,平方根和三角函数一、Field SummaryModi
- spinner组件有点类型于HTML中的下拉框<Select></select>的样子,让用户每次从下拉框中选取一个
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成。同X
- 方法的重写(Overriding)和重载(Overloading)是Java多态性的不同表现。重写(Overriding)是父类与子类之间多
- 用java来打包文件生成压缩文件,有两个地方会出现乱码:内容的中文乱码问题:修改sun的源码。使用开源的类库org.apache.tools
- 好久没有做web了,JSON目前比较流行,闲得没事,所以动手试试将对象序列化为JSON字符(尽管DotNet Framework
- 在我们日常开发过程中,通常会涉及到数据权限问题,下面以我们常见的一种场景举例:一个公司有很多部门,每个人所处的部门和角色也不同,所以数据权限
- 一、前言微信接口调用验证最终需要用到的三个参数noncestr、timestamp、signature:接下来将会给出获取这三个参数的详细代
- 前言尽管可以通过不同的方式组合IO流类,但我们可能也就只用到其中的几种组合。下面的例子可以作为典型的IO用法的基本参考。在这些示例中,异常处
- 实体例子public class Person { private String name; &nb
- 这篇文章主要介绍了Java实现TCP/IP协议的收发数据(服务端)代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参
- 在style中如下面那样定义:<style name="mystyle"> <item name=&
- 在页面提交到tomcat乱码 解决方法是在tomcat/conf/server.xml中进行配置以tomcat6.0.32为例,需将以下代码
- 前言:List 去重指的是将 List 中的重复元素删除掉的过程。此题目考察的是对 List 迭代器、Set 集合和 JDK 8 中新特性的
- 抛出问题:Long a = 4l;Long b = 4l;a == b //trueLong a = 128l;Long b = 128l;
- 本文以实例阐述了C++中形参与实参的区别,有助于读者加深对于C++形参与实参的认识。形参出现在函数定义中,在整个函数体内都可以使用, 离开该
- 一、Spring Boot的特点首先我们要知道 Spring Boot 在底层已经为我们添加好了很多依赖。比如我们常用的Tomcat,Spr
- @ModelAttribute与@RequestBody的区别最近在写代码的过程中,发现之前项目都是使用的@ModelAttribute注解