2025Python-/flask_app.py at main · wulixin/2025Python- · GitHub

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
from flask import Flask, render_template_string, request, redirect

app = Flask(__name__)

# 模拟的文章数据
posts = [
    {"title": "欢迎来到我的博客", "content": "这是首页的第一篇文章。"},
    {"title": "关于 Flask", "content": "Flask 是一个轻量级的 Python Web 框架。"}
]

# 模拟的留言数据
comments = []

# 带样式的 HTML 页面模板
index_html = '''
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📝 我的博客</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }
        header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 20px;
            font-size: 2em;
        }
        .post {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        h2 {
            color: #4CAF50;
        }
        hr {
            border: none;
            border-top: 1px solid #ddd;
            margin: 20px 0;
        }
        form {
            margin-top: 20px;
        }
        input[type="text"] {
            width: calc(100% - 100px);
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .comment {
            background: #eef;
            padding: 10px;
            margin-top: 10px;
            border-left: 4px solid #4CAF50;
            border-radius: 4px;
        }
        @media (max-width: 600px) {
            input[type="text"] {
                width: 100%;
                margin-top: 10px;
            }
            button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <header>📝 我的博客</header>
    <div class="container">

        {% for post in posts %}
            <div class="post">
                <h2>{{ post.title }}</h2>
                <p>{{ post.content }}</p>
            </div>
        {% endfor %}

        <h2>💬 留言板</h2>
        <form method="POST" action="/comment">
            <input type="text" name="content" placeholder="写下你的留言..." required>
            <button type="submit">提交</button>
        </form>

        {% for comment in comments %}
            <div class="comment">{{ comment }}</div>
        {% endfor %}

    </div>
</body>
</html>
'''

@app.route('/')
def index():
    return render_template_string(index_html, posts=posts, comments=comments)

@app.route('/comment', methods=['POST'])
def add_comment():
    comment = request.form.get('content')
    if comment:
        comments.append(comment)
    return redirect('/')

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