YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

YPE html>

《Python中怎么用Flask创建一个简单的网页？》

在Python的Web开发领域，Flask因其轻量级、灵活和易上手的特性，成为许多开发者的首选框架。它不需要复杂的配置，就能快速搭建一个功能完整的Web应用。本文将通过一个完整的案例，详细讲解如何使用Flask创建一个简单的网页，涵盖从环境搭建到功能实现的每一步，适合零基础或有一定Python基础的读者学习。

一、Flask框架简介

Flask是一个基于Werkzeug WSGI工具箱和Jinja2模板引擎的Python Web框架。它采用“微内核”设计，仅提供核心功能（如路由、请求处理、模板渲染），其他功能通过扩展实现。这种设计使得Flask既适合小型项目，也能通过扩展支持大型应用。

与Django等全功能框架相比，Flask的优势在于：

• 学习成本低：核心概念简单，文档清晰

• 灵活性高：开发者可以自由选择数据库、ORM等组件

• 性能优异：轻量级架构减少资源占用

二、环境准备

在开始编写代码前，需要完成以下环境配置：

1. 安装Python

Flask支持Python 3.6及以上版本。建议使用最新稳定版（如3.11）。

验证安装：

python --version
# 或
python3 --version

2. 创建虚拟环境

虚拟环境可以隔离项目依赖，避免版本冲突。

# 创建虚拟环境（Windows）
python -m venv venv

# 激活虚拟环境（Windows）
venv\Scripts\activate

# 激活虚拟环境（Mac/Linux）
source venv/bin/activate

激活后，命令行提示符前会显示虚拟环境名称（如(venv)）。

3. 安装Flask

在虚拟环境中运行：

pip install flask

验证安装：

pip show flask

应显示Flask的版本信息（如Version: 3.0.0）。

三、创建第一个Flask应用

按照以下步骤创建最简单的Flask网页：

1. 项目结构

建议的项目目录结构：

my_flask_app/
├── app.py          # 主程序文件
├── templates/      # 模板文件夹（存放HTML文件）
│   └── index.html
└── venv/           # 虚拟环境（自动生成）

2. 编写主程序

创建app.py文件，输入以下代码：

from flask import Flask, render_template

# 创建Flask应用实例
app = Flask(__name__)

# 定义路由和视图函数
@app.route('/')
def home():
    return '欢迎来到Flask首页！'

# 启动开发服务器
if __name__ == '__main__':
    app.run(debug=True)

代码解析：

• Flask(__name__)：创建应用实例，__name__表示当前模块名

• @app.route('/')：装饰器，将URL路径'/'映射到home函数

• app.run(debug=True)：启动开发服务器，debug模式方便调试

3. 运行应用

在命令行执行：

python app.py

输出应显示：

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

在浏览器访问http://localhost:5000，即可看到“欢迎来到Flask首页！”的文字。

四、添加HTML模板

直接返回字符串适合简单场景，但实际开发中需要渲染HTML页面。Flask使用Jinja2模板引擎实现这一功能。

1. 创建模板文件

在templates文件夹下创建index.html：

    


    
{{ title }}
    
{{ message }}

Jinja2模板语法：

• {{ variable }}：输出变量值

• {% ... %}：执行控制语句（如循环、条件）

2. 修改视图函数

更新app.py中的home函数：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template(
        'index.html',
        title='Flask教程',
        message='这是通过模板渲染的页面！'
    )

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

render_template函数会：

1. 在templates文件夹中查找index.html

2. 将传入的变量（title、message）替换到模板中

3. 返回渲染后的HTML字符串

3. 刷新页面

保存文件后，浏览器会自动刷新（debug模式开启时），显示格式化后的HTML页面。

五、处理表单数据

Web应用常需要处理用户输入。下面演示如何创建一个简单的表单并处理提交的数据。

1. 创建表单页面

在templates文件夹下创建form.html：

    


    
请留下您的建议
    

        
        提交
    

2. 添加路由和视图

更新app.py：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', title='首页')

@app.route('/feedback')
def feedback_form():
    return render_template('form.html')

@app.route('/submit', methods=['POST'])
def handle_submit():
    feedback = request.form.get('feedback')
    return f'您提交的建议是：{feedback}'

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

关键点：

• methods=['POST']：指定该路由只处理POST请求

• request.form.get('feedback')：获取表单中name="feedback"的字段值

3. 测试表单

访问http://localhost:5000/feedback，输入内容并提交，应显示提交的数据。

六、静态文件处理

Web应用通常需要CSS、JavaScript和图片等静态文件。Flask默认在static文件夹中查找这些文件。

1. 创建静态文件夹

项目结构更新为：

my_flask_app/
├── app.py
├── static/
│   ├── style.css
│   └── script.js
└── templates/
    └── index.html

2. 添加CSS文件

在static/style.css中输入：

body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

3. 修改HTML模板

更新index.html的head部分：

url_for函数生成静态文件的URL，参数说明：

• 'static'：指定静态文件端点

• filename='style.css'：文件路径（相对于static文件夹）

4. 刷新页面

浏览器应显示应用了CSS样式的页面。

七、部署前的准备

开发完成后，需要为生产环境做准备：

1. 关闭调试模式

修改app.run()：

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

2. 使用生产级WSGI服务器

Flask自带的开发服务器不适合生产环境。推荐使用：

• Gunicorn（Linux/Mac）

• Waitress（Windows）

安装Gunicorn：

pip install gunicorn

启动命令：

gunicorn -w 4 -b 0.0.0.0:8000 app:app

参数说明：

• -w 4：使用4个工作进程

• -b 0.0.0.0:8000：绑定到所有网络接口的8000端口

• app:app：模块名:应用实例名

八、完整代码示例

以下是整合所有功能的app.py完整代码：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
    return render_template(
        'index.html',
        title='Flask教程首页',
        message='欢迎学习Flask开发！'
    )

@app.route('/feedback')
def feedback_form():
    return render_template('form.html')

@app.route('/submit', methods=['POST'])
def handle_submit():
    feedback = request.form.get('feedback')
    if not feedback:
        return '请输入建议内容！', 400
    return render_template(
        'result.html',
        feedback=feedback
    )

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

对应的result.html模板：

    
    


    
感谢您的反馈！
    
您提交的内容是：{{ feedback }}
    返回表单

九、常见问题解决

在学习过程中可能遇到以下问题：

1. 模板未找到错误

错误信息：

jinja2.exceptions.TemplateNotFound: index.html

原因：

• 模板文件未放在templates文件夹中

• 文件夹名称拼写错误（如template而非templates）

解决方案：检查项目结构，确保templates文件夹存在且包含正确文件。

2. 静态文件404错误

错误现象：CSS/JS文件未加载

原因：

• 静态文件未放在static文件夹中

• url_for参数错误

解决方案：使用开发者工具检查网络请求，确认文件路径是否正确。

3. 端口冲突

错误信息：

OSError: [Errno 98] Address already in use

解决方案：

• 终止占用5000端口的进程

• 修改app.run()的port参数：

app.run(port=5001)

十、总结与扩展

通过本文，我们完成了以下工作：

1. 安装并配置Flask开发环境

2. 创建第一个Flask应用并运行

3. 使用Jinja2模板渲染HTML页面

4. 处理表单数据提交

5. 管理静态文件（CSS/JS）

6. 准备生产环境部署

Flask的扩展生态非常丰富，推荐进一步学习的方向：

• Flask-SQLAlchemy：数据库操作

• Flask-WTF：表单验证

• Flask-Login：用户认证

• Flask-RESTful：构建API

关键词：Flask框架、Python Web开发、Jinja2模板、表单处理、静态文件、虚拟环境、路由装饰器、WSGI服务器

简介：本文详细介绍了使用Flask框架创建简单网页的全过程，包括环境搭建、路由配置、模板渲染、表单处理和静态文件管理。通过完整的代码示例和分步讲解，帮助读者快速掌握Flask的核心功能，为进一步开发Web应用打下基础。