Flask教程：构建你的第一个Web应用 – wiki基地

作者： /

Flask教程：构建你的第一个Web应用

Flask是一个轻量级的Python Web框架。它被称为“微框架”，因为它不包含ORM（对象关系映射器）或Web表单验证等工具。这些功能由第三方库提供，使Flask保持核心简单而易于扩展。本教程将引导你构建第一个Flask Web应用。

1. 环境准备

在开始之前，确保你的系统上安装了Python。推荐使用Python 3。

1.1. 创建并激活虚拟环境

为了更好地管理项目依赖，我们总是建议为每个Python项目创建一个独立的虚拟环境。

“`bash

创建虚拟环境

python -m venv venv

激活虚拟环境 (Windows)

.\venv\Scripts\activate

激活虚拟环境 (macOS/Linux)

source venv/bin/activate
“`

激活虚拟环境后，你的命令行提示符前会显示 (venv)，表示你正在虚拟环境中工作。

1.2. 安装Flask

在虚拟环境激活状态下，使用pip安装Flask：

bash
pip install Flask

2. 构建你的第一个Flask应用 – “Hello, World!”

现在，我们来创建一个最简单的Flask应用。

在一个名为 app.py 的文件中写入以下代码：

“`python

app.py

from flask import Flask

创建一个Flask应用实例

app = Flask(name)

定义一个路由，当访问根URL时触发

@app.route(‘/’)
def hello_world():
return ‘Hello, World!’

运行应用

if name == ‘main‘:
app.run(debug=True)
“`

2.1. 运行应用

保存 app.py 文件后，在命令行中确保你的虚拟环境已激活，然后运行：

bash
python app.py

你会在命令行中看到类似以下的输出：

* Serving Flask app 'app'
* Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on http://127.0.0.1:5000
Press CTRL+C to quit
* Restarting with stat
* Debugger is active!
* Debugger PIN: XXX-XXX-XXX

在浏览器中打开 http://127.0.0.1:5000，你将看到 “Hello, World!”。debug=True 会在代码更改时自动重启服务器，并在发生错误时提供一个交互式调试器。

3. 路由和视图函数

Flask使用装饰器 @app.route() 来将URL与Python函数（称为视图函数）关联起来。

“`python

app.py (在现有代码中添加)

@app.route(‘/about’)
def about():
return ‘This is an About page.’

@app.route(‘/user/‘)
def show_user_profile(username):
# show the user profile for that user
return f’User {username}’

@app.route(‘/post/‘)
def show_post(post_id):
# show the post with the given id, the id is an integer
return f’Post {post_id}’
“`

重启应用（如果 debug=True，保存文件即可），然后访问 /about, /user/gemini 和 /post/123，看看有什么效果。

4. 使用模板 – Jinja2

直接从视图函数返回HTML字符串很快就会变得笨拙。Flask使用Jinja2作为其默认模板引擎，这允许你将HTML结构与Python逻辑分离。

4.1. 创建模板文件夹

在 app.py 同级目录下创建一个名为 templates 的文件夹。Flask会自动在这个文件夹中查找模板文件。

4.2. 创建一个HTML模板

在 templates 文件夹内创建一个 index.html 文件：

“`html







{{ title }} – My Flask App

欢迎来到 {{ title }}!

这是一个使用Flask和Jinja2构建的简单Web应用。

{% if name %}

你好, {{ name }}!

{% else %}

请访问 /hello/YourName 来个性化问候。

{% endif %}

“`

4.3. 更新视图函数以渲染模板

修改 app.py 以使用 render_template 函数：

“`python

app.py (导入render_template并修改hello_world函数)

from flask import Flask, render_template

app = Flask(name)

@app.route(‘/’)
def hello_world():
# 渲染 index.html 模板，并传递变量
return render_template(‘index.html’, title=’主页’, name=’访客’)

@app.route(‘/hello/‘)
def hello_name(name):
return render_template(‘index.html’, title=’个性化问候’, name=name)

… 其他路由 …

if name == ‘main‘:
app.run(debug=True)
“`

现在访问 http://127.0.0.1:5000 和 http://127.0.0.1:5000/hello/Gemini，你将看到渲染后的HTML页面。

5. 静态文件

Web应用通常需要CSS文件来美化页面，JavaScript文件来实现交互功能，以及图片等资源。这些被称为静态文件。

5.1. 创建静态文件文件夹

在 app.py 同级目录下创建一个名为 static 的文件夹。Flask会自动在这个文件夹中查找静态文件。

5.2. 添加一个CSS文件

在 static 文件夹内创建一个 style.css 文件：

“`css
/ static/style.css /
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}

h1 {
color: #0056b3;
}

p {
line-height: 1.6;
}
“`

5.3. 在模板中链接静态文件

我们已经在 index.html 中使用了 url_for 函数来链接 style.css：

html
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

url_for('static', filename='style.css') 会生成指向 static/style.css 的正确URL。

现在刷新浏览器，你的页面应该会应用新的样式了。

6. 总结与展望

恭喜你！你已经成功构建并运行了你的第一个Flask Web应用。你学会了：

  • 设置Python虚拟环境
  • 安装Flask
  • 创建基本的Flask应用
  • 定义路由和视图函数
  • 使用Jinja2模板引擎渲染HTML
  • 提供静态文件（CSS）

这仅仅是Flask世界的开始。接下来，你可以探索更多内容，例如：

  • 表单处理: 使用 flask_wtf 处理用户输入。
  • 数据库集成: 使用ORM如SQLAlchemy (通过 flask_sqlalchemy)。
  • 蓝图 (Blueprints): 组织大型应用。
  • 用户认证: 实现登录和注册功能。
  • 部署: 将你的应用部署到生产环境。

希望这个教程能为你打开Flask开发的大门！祝你编码愉快！

滚动至顶部