网络年终海报模板，只需几步轻松生成网页版年终海报

后端

2022-11-13 01:37:01

轻松制作个性化年终海报：Python 和 Flask Web 应用

简介

对于上班族来说，年终既是辞旧迎新的时候，也是进行年终总结和制作海报的时候。对于设计师来说，年终海报设计可能是一项繁琐的任务，特别是当他们需要为不同的主题和风格制作多张海报时。

为了简化这一过程，我们可以使用 Python 和 Flask 构建一个网页版年终海报模板，让用户能够轻松选择不同的主题，并根据选择生成相应的年终海报。本文将指导你构建这样一个项目，让你在几分钟内就可以生成一张个性化的年终海报。

技术栈

Python
Flask
Jinja2
HTML
CSS
JavaScript

项目结构

项目结构如下：

├── app.py
├── templates
│   ├── index.html
│   ├── poster.html
├── static
│   ├── css
│   │   ├── main.css
│   ├── js
│   │   ├── main.js
├── requirements.txt

项目实现

1. 创建 Flask 应用

from flask import Flask, render_template, request

app = Flask(__name__)

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

@app.route('/poster', methods=['POST'])
def poster():
    theme = request.form.get('theme')
    return render_template('poster.html', theme=theme)

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

2. 创建 Jinja2 模板

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
    <h1>年终海报模板</h1>
    <form action="/poster" method="POST">
        <select name="theme">
            <option value="default">默认</option>
            <option value="business">商务</option>
            <option value="technology">科技</option>
        </select>
        <input type="submit" value="生成海报">
    </form>
</body>
</html>

<!-- poster.html -->
<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
    <h1>{{ theme }}年终海报</h1>
    <img src="/static/images/{{ theme }}.png" alt="{{ theme }}年终海报">
</body>
</html>

3. 创建静态文件

/* main.css */
body {
    font-family: sans-serif;
}

h1 {
    font-size: 2em;
    margin-bottom: 1em;
}

select {
    width: 150px;
}

input[type="submit"] {
    margin-left: 1em;
}

.poster {
    width: 500px;
    margin: 0 auto;
    text-align: center;
}

.poster img {
    width: 100%;
}

/* main.js */
document.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('form');

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        var theme = document.querySelector('select[name="theme"]').value;

        var request = new XMLHttpRequest();
        request.open('POST', '/poster', true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        request.send('theme=' + theme);

        request.onload = function() {
            if (request.status === 200) {
                var response = JSON.parse(request.responseText);

                var poster = document.querySelector('.poster');
                poster.innerHTML = '<h1>' + response.theme + '年终海报</h1><img src="/static/images/' + response.theme + '.png" alt="' + response.theme + '年终海报">';
            }
        };
    });
});