怎么通过Java实现时间轴过程-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

怎么通过Java实现时间轴过程

小编给大家分享一下怎么通过Java实现时间轴过程，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

成都创新互联公司主营呼兰网站建设的网络公司,主营网站建设方案,成都app开发,呼兰h5重庆小程序开发搭建,呼兰网站营销推广欢迎呼兰等地区企业咨询

1.需要添加FastJson的依赖处理数据。


   com.alibaba
   fastjson
   1.2.47

2.创建测试数据库和表。

怎么通过Java实现时间轴过程

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 getAllData();

service

  /**
   * 获取所有数据
   * @return
   */
  List getAllData();

serviceimpl

@Resource
  private InfoDao infoDao;

  /**
   * 获取所有数据
   * @return
   */
  public List getAllData(){
    return this.infoDao.getAllData();
  }

controller

@Resource
  private InfoDao infoDao;

  /**
   * 获取所有数据
   * @return
   */
  public List getAllData(){
    return this.infoDao.getAllData();
  }

mapper





  
    
    
    
  

  
  
    select * from ideatest.info order by time desc

4.前端js、css、html文件编写。

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 = "" +
      ""+result[i].time+"

" + "" + result[i].content + "

" + "

"; $(".container .time-line").append(childNode); } }

Ps:因为数据库的时区问题，所以可在数据库的连接URL后添加如下参数：

serverTimezone=Hongkong

5.效果展示

怎么通过Java实现时间轴过程

看完了这篇文章，相信你对“怎么通过Java实现时间轴过程”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

分享标题：怎么通过Java实现时间轴过程
网页URL：http://scyingshan.cn/article/jeedjo.html

新闻中心

其他资讯