接口链接:http://121.196.166.173/img/img.php 展示 demo:http://121.196.166.173/img
前言
为了写博客以及其他的一些用途,我使用服务器搭建了一个连接 github 仓库的上传网页,并且在数据库中记录上传的信息,比如缩略名、时间戳和图片链接。分别对应 GitHub 仓库中的图片,但是后期我发现在 GitHub 查看图片非常别扭,因此我打算写一个可展示图片的网页,把 GitHub 仓库中的图片通过链接展示出来,当然我们不可能一张张复制,还好有数据库。
看一下具体内容
写一个接口
很好,拥有我们需要的字段。事不宜迟,直接开动,下面是完成的接口代码。
<?php
header('Content-Type:application/json; charset=utf-8');
header("Access-Control-Allow-Origin:*");
$servername = "localhost";
$username = "imgbed";
$password = "imgbed";
$dbname = "imgbed";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
die("连接失败:" . $conn->connect_error);
}
// imgmd5 名称转 md5
// imguploadtime 上传时间戳
// imgurl 链接
// 上传 ip
$sql = "select imgmd5,imguploadtime,imgurl,imguploadip from remote_imgs
";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出数据
while($row = $result->fetch_assoc()) {
$data[]=$row;
}
$json = json_encode($data,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);//把数据转换为 JSON 数据。
exit($json) ;
} else {
echo "未查询到结果!";
}
$conn->close();
?>
分别将缩略名,时间戳,图片链接,和上传 ip 通过 json 格式导出,非常完美。接口链接:http://121.196.166.173/img/img.php
使用 ajax 进行调用
然后只需要在前端将接口调用,然后简单写一个页面即可,下面是 html 代码,,通过 ajax 调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图床</title>
<style>
.container {
max-width: 1000px;
margin: 40px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width:300px;
/* height: 300px; */
overflow: hidden;
border: 2px solid #bbb;
margin-bottom: 24px;
}
.item a{
display: block;
width: 300px;
/* height: 300px; */
overflow: hidden;
}
.item img{
max-width: 300px;
max-height: 300px;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="https://cdn.zburu.com/list/jquery3.6.0.js"></script>
<script>
var str = '';
$.ajax({
url: 'http://121.196.166.173/img/img.php',
type: 'get',
dataType: 'json',
async: false,
success: function (data) {
$.each(data, function (i, item) {
console.log(item)
list = "<div class='item'><p>缩略名:" + item.imgmd5 + "</p>" +
"<p>时间戳:" + item.imguploadtime + "</p>" +
"<a target='_blank' href='"+ item.imgurl +"'><img src='" + item.imgurl + "'></a>" +
"<p>上传 ip:" + item.imguploadip + "</p></div>"
str += list;
}),
$(".container").html(str);
console.log('数据请求成功')
},
error: function () {
console.log('数据请求失败')
}
});
</script>
</body>
</html>
最后我把这个页面传到我的服务器当中,可以看一下效果 http://121.196.166.173/img
时间仓促,我也没使用更好的 ui 进行优化,只是大致写一下这个过程,待到以后具体使用时,我会对这个展示图片的页面进一步优化。