项目结构
在开始之前，我们需要设置一个基本的项目结构。推荐的结构如下：
1
2
3
4
5
6
7
| my_flask_app/
│
├── app.py
├── templates/
│ └── index.html
└── static/
└── style.css
|
安装 Flask
首先，确保你已经安装了 Flask。可以通过以下命令安装：
创建 Flask 应用
在 app.py 中创建基本的 Flask 应用：
1
2
3
4
5
6
7
8
9
10
| from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
|
这里，我们导入了 Flask 和 render_template，并创建了一个简单的路由 /。
创建模板
接下来，在 templates 目录下创建 index.html 文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>Flask Demo</title>
</head>
<body>
<h1>欢迎使用 Flask!</h1>
<p>这是我的第一个 Flask 应用。</p>
</body>
</html>
|
这里我们使用 {{ url_for('static', filename='style.css') }} 来引用静态资源。
添加样式
在 static 目录下创建 style.css 文件，加入一些简单的样式：
1
2
3
4
5
6
7
8
9
10
| body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
padding: 20px;
}
h1 {
color: #4CAF50;
}
|
运行应用
在终端中，导航到项目目录并运行应用：
打开浏览器，访问 http://127.0.0.1:5000/，你会看到你的应用界面。
添加更多路由
让我们为应用添加一个新的路由 /about：
1
2
3
| @app.route('/about')
def about():
return "<h2>关于我们</h2><p>这是一个关于页面。</p>"
|
重启 Flask 应用并访问 http://127.0.0.1:5000/about，你会看到新的关于页面。
使用表单
我们来添加一个简单的表单来收集用户输入。在 index.html 中加入以下代码：
1
2
3
4
5
| <form action="/submit" method="post">
<label for="name">请输入您的名字:</label>
<input type="text" id="name" name="name">
<input type="submit" value="提交">
</form>
|
在 app.py 中添加表单处理路由：
1
2
3
4
5
6
| from flask import request
@app.route('/submit', methods=['POST'])
def submit():
name = request.form['name']
return f"<h2>您好, {name}!</h2>"
|
现在，当用户输入名字并提交时，会看到一个欢迎的个性化消息。
总结
到此，你已经完成了一个简单的 Flask 应用，从创建项目结构到添加样式、路由和表单功能。掌握这些基础后，你可以继续扩展应用，尝试数据库集成、用户身份验证等更复杂的功能。Flask 为开发提供了灵活和丰富的工具，让我们可以轻松构建出强大的 Web 应用。
