簡易圖片瀏覽網站

BY GPT4

我想創建一個圖片瀏覽網站。我的服務器的公網IP是xxxxxxx,我的圖片存儲在xxxxxxxxxxx的各個子目錄中,這個目錄可能是嵌套的。我希望用戶可以通過網頁,方便地瀏覽、下載該目錄下的圖片。並且,服務器上的圖片經常增加或者更新,我需要保證該網頁的實時性,也就是與服務器上的圖片情況同步。我希望你用盡可能簡單的方式逐步實現,每給出一部分代碼都應該有一個可以驗證的結果,而不是一次給出所有代碼。

好的,我們將逐步創建一個簡單的圖片瀏覽網站。首先,我們將使用Python的Flask框架創建一個基本的Web應用程序。爲了使用Flask,你需要確保你的服務器上已經安裝了Python和Flask。如果沒有,請按照以下命令安裝:

sudo apt update
sudo apt install python3 python3-pip
pip3 install Flask

現在,我們可以開始創建一個簡單的Flask應用程序。在服務器上創建一個新文件app.py,並添加以下代碼:

from flask import Flask, render_template, send_from_directory

app = Flask(__name__)

@app.route('/')
def index():
    return "歡迎來到圖片瀏覽網站!"

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

保存文件後,在命令行中輸入以下命令運行Flask應用:

python3 app.py

此時,你可以在瀏覽器中通過服務器的公網IP和端口訪問網站,即 http://xxxxxxxxx:8080/,你將看到“歡迎來到圖片瀏覽網站!”的歡迎信息。 

在驗證了基本的Flask應用程序之後,我們將繼續添加功能以顯示和下載圖片。請讓我知道你準備好進行下一步時。

PS. 如果租用阿里雲或者騰訊雲,需要設置安全組,不然無法正常訪問。

我已經準備好進行下一步。

很好,接下來我們將在Flask應用程序中添加功能以瀏覽和下載圖片。

首先,在app.py同級目錄下創建一個名爲templates的文件夾,並在其中創建一個名爲index.html的文件。我們將在這個HTML文件中展示圖片。將以下代碼添加到index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>圖片瀏覽網站</title>
</head>
<body>
  <h1>圖片列表</h1>
  <ul>
    {% for image in images %}
      <li>
        <a href="{{ url_for('download_image', path=image.path) }}" target="_blank">
          <img src="{{ url_for('download_image', path=image.path) }}" alt="{{ image.name }}" width="200">
        </a>
        <br>
        {{ image.name }}
      </li>
    {% endfor %}
  </ul>
</body>
</html>

然後,更新app.py文件以包含必要的函數來獲取圖片列表,以及爲模板提供圖片數據。我們還將添加一個新的路由來處理圖片下載。在app.py文件中添加以下代碼:

import os
from collections import namedtuple

Image = namedtuple('Image', ['name', 'path'])

def get_image_list(base_path):
    image_list = []
    for root, dirs, files in os.walk(base_path):
        for file in files:
            if file.lower().endswith(('.png', '.jpg', '.jpeg', '.gif', '.bmp')):
                image_path = os.path.join(root, file)
                rel_path = os.path.relpath(image_path, base_path)
                image_list.append(Image(name=file, path=rel_path))
    return image_list

@app.route('/images')
def images():
    base_path = 'xxxxxxxxxxx/outputs'
    image_list = get_image_list(base_path)
    return render_template('index.html', images=image_list)

@app.route('/download_image/<path:path>')
def download_image(path):
    base_path = 'xxxxxxxxxxx/outputs'
    return send_from_directory(base_path, path)

現在,重新啓動Flask應用程序:

python3 app.py

打開瀏覽器並訪問 http://xxxxxxxxx:8080/images,你將看到`xxxxxxxxxx/outputs`目錄下的圖片列表。 

點擊圖片,它將在新標籤頁中打開,用戶可以通過右鍵菜單下載圖片。圖片列表將根據服務器上的圖片實時更新。

這就是一個基本的圖片瀏覽和下載網站。如果你需要添加更多功能或者對頁面樣式進行調整,請隨時告訴我。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章