帮我搭建一个展示相册网站，要求有常见的相册模板，用python flask模板

使用Flask搭建相册网站

下面我将为你展示如何使用Python和Flask框架搭建一个简单的相册网站，包含常见的相册模板功能。

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
photo_gallery/
├── app.py                  # Flask主应用文件
├── static/
│   ├── css/                # CSS样式文件
│   ├── js/                 # JavaScript文件
│   └── uploads/            # 上传的图片存放目录
└── templates/
    ├── base.html           # 基础模板
    ├── index.html          # 首页
    ├── album.html          # 单个相册页面
    ├── upload.html         # 上传页面
    └── thumbnail.html      # 缩略图模板片段

1. 安装依赖

首先安装必要的Python包：

1
pip install flask flask-uploads pillow

2. 创建Flask应用 (app.py)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import os
from flask import Flask, render_template, request, redirect, url_for
from flask_uploads import UploadSet, configure_uploads, IMAGES
from werkzeug.utils import secure_filename
from PIL import Image

app = Flask(__name__)

# 配置上传
app.config['UPLOADED_PHOTOS_DEST'] = 'static/uploads'
app.config['SECRET_KEY'] = 'your-secret-key-here'

photos = UploadSet('photos', IMAGES)
configure_uploads(app, photos)

# 模拟相册数据
albums = {
    'nature': {
        'title': '自然风光',
        'description': '美丽的自然风景照片',
        'images': ['nature1.jpg', 'nature2.jpg', 'nature3.jpg']
    },
    'travel': {
        'title': '旅行记录',
        'description': '我的旅行足迹',
        'images': ['travel1.jpg', 'travel2.jpg']
    }
}

@app.route('/')
def index():
    return render_template('index.html', albums=albums)

@app.route('/album/<album_name>')
def album(album_name):
    album_data = albums.get(album_name)
    if not album_data:
        return "相册不存在", 404
    return render_template('album.html', album=album_data)

@app.route('/upload', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST' and 'photo' in request.files:
        album_name = request.form.get('album')
        if album_name not in albums:
            albums[album_name] = {
                'title': album_name.capitalize(),
                'description': f'{album_name.capitalize()}照片集',
                'images': []
            }
        
        # 保存原始图片
        filename = photos.save(request.files['photo'])
        
        # 创建缩略图
        create_thumbnail(filename)
        
        albums[album_name]['images'].append(filename)
        return redirect(url_for('album', album_name=album_name))
    
    return render_template('upload.html')

def create_thumbnail(filename):
    file_path = os.path.join(app.config['UPLOADED_PHOTOS_DEST'], filename)
    thumb_path = os.path.join(app.config['UPLOADED_PHOTOS_DEST'], 'thumbs', filename)
    
    # 确保缩略图目录存在
    os.makedirs(os.path.dirname(thumb_path), exist_ok=True)
    
    # 创建缩略图
    image = Image.open(file_path)
    image.thumbnail((300, 300))
    image.save(thumb_path)

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

3. 创建模板文件

base.html (基础模板)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}我的相册{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <header>
        <h1>我的相册</h1>
        <nav>
            <a href="{{ url_for('index') }}">首页</a>
            <a href="{{ url_for('upload') }}">上传照片</a>
        </nav>
    </header>
    
    <main>
        {% block content %}{% endblock %}
    </main>
    
    <footer>
        <p>&copy; 2023 我的相册网站</p>
    </footer>
</body>
</html>

index.html (首页)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% extends "base.html" %}

{% block title %}相册首页{% endblock %}

{% block content %}
<section class="gallery-intro">
    <h2>欢迎来到我的相册</h2>
    <p>这里收藏了我拍摄的各种照片，点击下面的相册查看详情。</p>
</section>

<section class="album-grid">
    {% for album_name, album in albums.items() %}
    <div class="album-card">
        <a href="{{ url_for('album', album_name=album_name) }}">
            {% if album.images %}
            <img src="{{ url_for('static', filename='uploads/thumbs/' + album.images[0]) }}" 
                 alt="{{ album.title }}">
            {% else %}
            <div class="empty-album">暂无照片</div>
            {% endif %}
            <h3>{{ album.title }}</h3>
        </a>
        <p>{{ album.description }}</p>
        <p>共 {{ album.images|length }} 张照片</p>
    </div>
    {% endfor %}
</section>
{% endblock %}

album.html (单个相册页面)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% extends "base.html" %}

{% block title %}{{ album.title }}{% endblock %}

{% block content %}
<section class="album-header">
    <h2>{{ album.title }}</h2>
    <p>{{ album.description }}</p>
    <a href="{{ url_for('upload') }}?album={{ request.path.split('/')[-1] }}" class="upload-btn">上传照片</a>
</section>

<section class="photo-grid">
    {% for image in album.images %}
    <div class="photo-item">
        <a href="{{ url_for('static', filename='uploads/' + image) }}" target="_blank">
            <img src="{{ url_for('static', filename='uploads/thumbs/' + image) }}" 
                 alt="照片 {{ loop.index }}">
        </a>
    </div>
    {% else %}
    <p class="no-photos">此相册暂无照片，请上传。</p>
    {% endfor %}
</section>
{% endblock %}

upload.html (上传页面)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{% extends "base.html" %}

{% block title %}上传照片{% endblock %}

{% block content %}
<section class="upload-form">
    <h2>上传照片</h2>
    <form method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="album">选择相册：</label>
            <select name="album" id="album" required>
                {% for album_name in albums %}
                <option value="{{ album_name }}" {% if request.args.get('album') == album_name %}selected{% endif %}>
                    {{ albums[album_name].title }}
                </option>
                {% endfor %}
                <option value="_new">创建新相册</option>
            </select>
            <input type="text" name="new_album" id="new_album" placeholder="新相册名称" style="display: none;">
        </div>
        
        <div class="form-group">
            <label for="photo">选择照片：</label>
            <input type="file" name="photo" id="photo" accept="image/*" required>
        </div>
        
        <button type="submit" class="btn">上传</button>
    </form>
</section>

<script>
document.getElementById('album').addEventListener('change', function() {
    const newAlbumInput = document.getElementById('new_album');
    if (this.value === '_new') {
        newAlbumInput.style.display = 'block';
        newAlbumInput.setAttribute('required', '');
    } else {
        newAlbumInput.style.display = 'none';
        newAlbumInput.removeAttribute('required');
    }
});
</script>
{% endblock %}

4. 添加CSS样式 (static/css/style.css)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/* 基础样式 */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
}

header {
    background: #2c3e50;
    color: white;
    padding: 1rem;
    text-align: center;
}

nav a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

footer {
    text-align: center;
    padding: 10px;
    background: #f4f4f4;
}

/* 相册网格 */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.album-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s;
}

.album-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.album-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.empty-album {
    height: 200px;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
}

/* 照片网格 */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.photo-item {
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 3px;
}

.photo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
}

.no-photos {
    text-align: center;
    grid-column: 1 / -1;
    color: #777;
    padding: 20px;
}

/* 上传表单 */
.upload-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="file"],
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.btn {
    background: #2c3e50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn:hover {
    background: #1a252f;
}

.upload-btn {
    display: inline-block;
    background: #27ae60;
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
}

.upload-btn:hover {
    background: #219653;
}

5. 运行应用

1
python app.py

访问 http://localhost:5000 即可查看你的相册网站。

功能扩展建议

  1. 用户认证：添加用户登录功能，让用户可以拥有自己的私人相册
  2. 图片编辑：集成简单的图片编辑功能（裁剪、旋转等）
  3. 标签系统：为照片添加标签，方便搜索
  4. 评论功能：允许访客对照片发表评论
  5. 响应式设计：优化移动设备上的显示效果
  6. 相册封面：允许用户自定义相册封面
  7. 批量上传：支持一次上传多张照片

这个基础版本已经包含了相册网站的核心功能，你可以根据需要进一步扩展和完善它。