使用Python构建一个简单的Web应用：从零开始的Flask项目实战
在当今的互联网时代，Web开发已经成为软件工程领域的重要组成部分。无论是大型企业还是初创公司，Web 应用都扮演着核心角色。对于开发者而言，掌握一门现代 Web 框架是必不可少的技能之一。
本文将带你一步步使用 Python 的 Flask 框架构建一个简单的 Web 应用程序 —— 一个待办事项（Todo）管理应用。我们将从环境搭建、代码编写到运行调试，完整地实现一个具备基本功能的 Web 系统。整个过程注重实践与代码演示，适合有一定 Python 基础的读者。
准备工作
1. 安装Python和pip
确保你的系统中安装了 Python 3.x 和 pip 包管理工具。可以通过以下命令检查：
python --versionpip --version如果没有安装，请前往 Python官网 下载并安装。
2. 安装Flask框架
Flask 是一个轻量级的 Python Web 框架，非常适合初学者和小型项目开发。我们使用 pip 来安装：
pip install Flask项目结构设计
我们将采用以下目录结构来组织我们的 Flask 应用：
todo_app/│├── app.py # 主程序文件├── requirements.txt # 依赖库列表├── templates/ # HTML模板目录│ └── index.html # 主页模板└── static/ # 静态资源目录（CSS, JS等） └── style.css # 样式表文件编写Flask应用
1. 初始化Flask应用（app.py）
我们在 app.py 中创建一个简单的 Flask 应用，并实现首页访问和添加任务的功能。
from flask import Flask, render_template, request, redirect, url_forapp = Flask(__name__)# 模拟数据库：使用列表存储任务tasks = []@app.route('/')def index(): return render_template('index.html', tasks=tasks)@app.route('/add', methods=['POST'])def add_task(): task_content = request.form.get('content') if task_content: tasks.append({'content': task_content, 'done': False}) return redirect(url_for('index'))@app.route('/toggle/<int:task_id>')def toggle_task(task_id): if 0 <= task_id < len(tasks): tasks[task_id]['done'] = not tasks[task_id]['done'] return redirect(url_for('index'))@app.route('/delete/<int:task_id>')def delete_task(task_id): if 0 <= task_id < len(tasks): tasks.pop(task_id) return redirect(url_for('index'))if __name__ == '__main__': app.run(debug=True)说明：
我们使用了一个全局列表tasks来模拟数据库。实现了三个主要功能：添加任务、切换完成状态、删除任务。使用了 Flask 的路由机制处理 HTTP 请求。
2. 创建HTML模板（templates/index.html）
在 templates 文件夹下创建 index.html 文件，内容如下：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>待办事项</title> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"></head><body> <div class="container"> <h1>我的待办事项</h1> <form action="/add" method="post"> <input type="text" name="content" placeholder="输入新任务..." required> <button type="submit">添加</button> </form> <ul> {% for task in tasks %} <li class="{% if task.done %}completed{% endif %}"> <a href="/toggle/{{ loop.index0 }}">[切换]</a> <a href="/delete/{{ loop.index0 }}">[删除]</a> {{ task.content }} </li> {% endfor %} </ul> </div></body></html>说明：
使用 Jinja2 模板引擎渲染动态内容。每个任务项包含“切换”和“删除”的链接。使用 CSS 类名控制已完成任务的样式。
3. 添加样式（static/style.css）
在 static 文件夹下创建 style.css 文件，美化页面：
body { font-family: Arial, sans-serif; background-color: #f4f4f4;}.container { width: 500px; margin: 50px auto; padding: 20px; background-color: white; box-shadow: 0 0 10px rgba(0,0,0,0.1);}input[type="text"] { width: 70%; padding: 10px; margin-right: 10px;}button { padding: 10px 15px;}ul { list-style-type: none; padding-left: 0;}li { margin-top: 10px; padding: 10px; border-bottom: 1px solid #ddd;}.completed { text-decoration: line-through; color: gray;}运行应用
在项目根目录下运行以下命令启动 Flask 应用：
python app.py打开浏览器访问 http://127.0.0.1:5000/，你将看到一个简单的待办事项管理系统界面，可以添加、标记完成和删除任务。
部署与扩展建议
1. 导出依赖包列表
为了方便他人部署或上线项目，我们可以导出当前使用的依赖包版本：
pip freeze > requirements.txt该文件内容大致如下：
Flask==2.3.3Werkzeug==3.0.12. 使用真实数据库（如SQLite）
目前我们使用的是内存中的列表作为数据存储，不适合生产环境。你可以替换为 SQLite 数据库来持久化保存数据。例如使用 sqlite3 模块进行操作：
import sqlite3# 初始化数据库def init_db(): conn = sqlite3.connect('todo.db') c = conn.cursor() c.execute('''CREATE TABLE IF NOT EXISTS tasks (id INTEGER PRIMARY KEY AUTOINCREMENT, content TEXT NOT NULL, done BOOLEAN NOT NULL DEFAULT 0)''') conn.commit() conn.close()# 获取所有任务def get_tasks(): conn = sqlite3.connect('todo.db') c = conn.cursor() c.execute("SELECT id, content, done FROM tasks") tasks = [{'id': row[0], 'content': row[1], 'done': bool(row[2])} for row in c.fetchall()] conn.close() return tasks# 插入新任务def add_task(content): conn = sqlite3.connect('todo.db') c = conn.cursor() c.execute("INSERT INTO tasks (content) VALUES (?)", (content,)) conn.commit() conn.close()然后在视图函数中调用这些方法即可。
总结
通过本文的学习，我们完成了一个基于 Flask 的简单 Web 应用，实现了任务的增删改查功能，并掌握了以下技术点：
Flask 路由与请求处理Jinja2 模板引擎的使用表单提交与响应跳转页面静态资源管理基本的前后端交互逻辑当然，这只是一个起点。后续你可以继续拓展此项目，比如：
添加用户登录认证支持多用户系统使用前端框架（如 Vue.js 或 React）增强交互体验部署到云服务器（如 Heroku、阿里云等）希望这篇文章能为你进入 Web 开发的世界提供帮助！
附录：完整项目地址参考
你可以在 GitHub 上找到类似项目的完整源码，例如：
https://github.com/example/flask-todo-app （请自行替换为实际项目）如需进一步学习，推荐阅读官方文档：
Flask: https://flask.palletsprojects.com/Jinja2: https://jinja.palletsprojects.com/欢迎留言交流更多 Web 开发技巧！
