Python打造在线摄影展览平台

在这个数字化时代，摄影艺术不再局限于画廊和展览馆，而是通过网络平台走向全球。今天，我们将探讨如何用Python语言构建一个在线摄影展览平台，让摄影师的作品触达更广泛的观众。

Python打造在线摄影展览平台

项目背景

摄影是一种视觉艺术，能够捕捉瞬间的美。然而，传统的展览方式受限于地域和时间，无法让更多人欣赏到这些作品。在线摄影展览平台则打破了这些限制，提供了一个便捷的展示和交流空间。

技术选型

为了实现这一平台，我们选择以下技术栈：

后端：Python + Flask框架
数据库：SQLite
前端：HTML + CSS + JavaScript
部署：Heroku

项目架构

1. 后端设计

使用Flask框架搭建后端服务，主要负责处理图片上传、存储和展示逻辑。

from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy
import os

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///photos.db'
db = SQLAlchemy(app)

class Photo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    description = db.Column(db.Text, nullable=True)
    image_path = db.Column(db.String(200), nullable=False)

@app.route('/upload', methods=['POST'])
def upload_photo():
    title = request.form['title']
    description = request.form['description']
    image = request.files['image']
    image_path = os.path.join('uploads', image.filename)
    image.save(image_path)

    new_photo = Photo(title=title, description=description, image_path=image_path)
    db.session.add(new_photo)
    db.session.commit()

    return jsonify({'message': 'Photo uploaded successfully!'})

@app.route('/photos', methods=['GET'])
def get_photos():
    photos = Photo.query.all()
    return jsonify([{'title': photo.title, 'description': photo.description, 'image_path': photo.image_path} for photo in photos])

if __name__ == '__main__':
    db.create_all()
    app.run(debug=True)

2. 数据库设计

使用SQLite数据库存储图片信息，包括标题、描述和图片路径。

3. 前端设计

前端页面使用HTML、CSS和JavaScript实现，提供用户友好的上传和展示界面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Photography Exhibition</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .photo { margin: 20px; }
        img { max-width: 100%; }
    </style>
</head>
<body>
    <h1>Online Photography Exhibition</h1>
    <form id="uploadForm">
        <input type="text" name="title" placeholder="Title" required>
        <textarea name="description" placeholder="Description"></textarea>
        <input type="file" name="image" required>
        <button type="submit">Upload</button>
    </form>
    <div id="gallery"></div>

    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                loadPhotos();
            });
        });

        function loadPhotos() {
            fetch('/photos')
            .then(response => response.json())
            .then(photos => {
                const gallery = document.getElementById('gallery');
                gallery.innerHTML = '';
                photos.forEach(photo => {
                    const div = document.createElement('div');
                    div.className = 'photo';
                    div.innerHTML = `
                        <h2>${photo.title}</h2>
                        <p>${photo.description}</p>
                        <img src="${photo.image_path}" alt="${photo.title}">
                    `;
                    gallery.appendChild(div);
                });
            });
        }

        loadPhotos();
    </script>
</body>
</html>