將資料庫中的圖片資訊匯出並調用

介面連結：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 進行優化，只是大致寫一下這個過程，待到以後具體使用時，我會對這個展示圖片的頁面進一步優化。