今天我们来做一个网站，历史上的今天，相信大家都不陌生，我们可以百度搜一下，有很多这样的网站。
看了上面的截图，我们来实现自己的，此网站是以一种时间轴的方式来实现的。看一下效果图，为了更好的效果，我放的是手机上显示的效果
网站的素材我已经上传到CSDN了，大家直接下载即可。
“历史上的今天”html+css+js素材
接下来我们来实现网站
首先，我们要解决的是api的调用的问题
这里给大家推荐一个网站，里面有很多免费的api接口可以调用，大家可以仿造我这个api的调用来调用其他的接口，实现自己的网站。
那么我们点进去历史上的今天，我们可以直接在这个网站上进行api接口的测试
返回的数据为：
可以，返回成功，那么现在我们开始进行服务器端的编程，我才用java来编写
这里我们需要创建一个maven的web项目，创建过程大家可以自行百度，需要导入两个依赖
一个是阿里巴巴的fastjson,用来处理Json数据，再一个就是okhttp,用来调用api接口
<dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.9.1</version></dependency><!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.76</version></dependency>我们首先使用okhttp编写一个工具类用来调用api接口
package com.lu.utils;import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;import java.io.IOException;public class OkHttpApi {OkHttpClient client = new OkHttpClient();public String run(String url) throws IOException {Request request = new Request.Builder().url(url).build();try (Response response = client.newCall(request).execute()) {return response.body().string();}}
}由于我是用SpringMVC来写的，如果大家还没有学过SpringMVC，可以用servlet来编写
我们来查看控制器类的编写
import com.alibaba.fastjson.JSONObject;
import com.lu.utils.OkHttpApi;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.IOException;@RestController
public class HistoryController {@RequestMapping("/j1")public String json1() throws IOException {OkHttpApi api = new OkHttpApi();String run = api.run("http://v.juhe.cn/todayOnhistory/queryEvent.php?date=8%2F10&key=1f72f4d53b576dd033fa0e16133aaed1");JSONObject jsonObject = JSONObject.parseObject(run);String result = jsonObject.getString("result");return result;}}我们通过return result就可以将获取到的数据传送给前端
前端我们需要使用ajax来获取数据
$.ajax({type:"post",url:"j1",async: false,success:function (data) {let obj = JSON.parse(data);let len = Object.keys(obj).length;$('#boxMessage').text(len);for (let i = 0; i < len; i++) {$('#wrapper').append('<div class="timeline__item timeline__item--' +i +'">\n' +' <div class="timeline__item__station"></div>\n' +' <div class="timeline__item__content">\n' +' <h2 class="timeline__item__content__date">' +obj[i].date +'</h2>\n' +' <p class="timeline__item__content__description">' +obj[i].title +'</p>\n' +' </div>\n' +' </div>')}},error:function () {console.log('失败了');}})当获取到数据时，我们使用jquery来动态生成
这时候我们配置一下tomcat，启动一下服务器
成品就是这样，界面还是挺美观的
全部的代码我已经放到我的github仓库里了，大家可以自行下载，如果不能登录github的，也可以在CSDN下载
github仓库
CSDN下载
