“历史上的今天”web网站

今天我们来做一个网站，历史上的今天，相信大家都不陌生，我们可以百度搜一下，有很多这样的网站。

 

 看了上面的截图，我们来实现自己的，此网站是以一种时间轴的方式来实现的。看一下效果图，为了更好的效果，我放的是手机上显示的效果

网站的素材我已经上传到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下载