インターフェースリンク：http://121.196.166.173/img/img.php
デモ表示：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.shuxhan.com/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 を使用して最適化していませんが、大まかなプロセスを書いただけです。具体的な使用時には、この画像表示ページをさらに最適化する予定です。