当前位置： 首页 > news >正文

（Python）待办事项升级网页版（html）（Python项目）

news 2025/8/10 1:00:16

源代码：

app.py

from flask import Flask, render_template, request, redirect, url_for, jsonify
import json
import osapp = Flask(__name__)# 数据存储文件
DATA_FILE = "todos.json"def load_todos():"""从文件加载待办事项"""if os.path.exists(DATA_FILE):try:with open(DATA_FILE, "r") as f:return json.load(f)except:return []return []def save_todos(todos):"""保存待办事项到文件"""with open(DATA_FILE, "w") as f:json.dump(todos, f)@app.route('/')
def index():"""显示主页"""todos = load_todos()# 计算完成和未完成的任务数量completed = sum(1 for todo in todos if todo["done"])not_completed = len(todos) - completedreturn render_template('index.html', todos=todos, completed=completed, not_completed=not_completed)@app.route('/add', methods=['POST'])
def add_todo():"""添加新任务"""task = request.form.get('task')if task:todos = load_todos()todos.append({"task": task, "done": False})save_todos(todos)return redirect(url_for('index'))@app.route('/toggle/<int:index>')
def toggle_todo(index):"""切换任务状态（完成/未完成）"""todos = load_todos()if 0 <= index < len(todos):todos[index]["done"] = not todos[index]["done"]save_todos(todos)return redirect(url_for('index'))@app.route('/delete/<int:index>')
def delete_todo(index):"""删除任务"""todos = load_todos()if 0 <= index < len(todos):todos.pop(index)save_todos(todos)return redirect(url_for('index'))@app.route('/clear')
def clear_completed():"""清除已完成的任务"""todos = load_todos()# 只保留未完成的任务todos = [todo for todo in todos if not todo["done"]]save_todos(todos)return redirect(url_for('index'))if __name__ == '__main__':app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页版待办事项</title><style>* {box-sizing: border-box;margin: 0;padding: 0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background-color: #f5f7fa;color: #333;line-height: 1.6;padding: 20px;}.container {max-width: 800px;margin: 0 auto;background-color: #fff;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);padding: 30px;}h1 {text-align: center;margin-bottom: 30px;color: #2c3e50;}.todo-form {display: flex;margin-bottom: 20px;}.todo-form input {flex: 1;padding: 12px;border: 2px solid #ddd;border-radius: 4px;font-size: 16px;transition: border-color 0.3s;}.todo-form input:focus {border-color: #3498db;outline: none;}.todo-form button {background-color: #3498db;color: white;border: none;padding: 12px 20px;margin-left: 10px;border-radius: 4px;cursor: pointer;font-size: 16px;transition: background-color 0.3s;}.todo-form button:hover {background-color: #2980b9;}.todo-stats {display: flex;justify-content: space-between;margin-bottom: 20px;padding: 10px;background-color: #f8f9fa;border-radius: 4px;font-size: 14px;}.todo-stats span {display: inline-block;padding: 4px 8px;border-radius: 4px;}.total-tasks {background-color: #e3f2fd;color: #1976d2;}.completed-tasks {background-color: #e8f5e9;color: #388e3c;}.pending-tasks {background-color: #fff3e0;color: #f57c00;}.todo-list {list-style-type: none;}.todo-item {display: flex;align-items: center;padding: 15px;border-bottom: 1px solid #eee;transition: background-color 0.3s;}.todo-item:hover {background-color: #f9f9f9;}.todo-item.completed .todo-text {text-decoration: line-through;color: #95a5a6;}.todo-checkbox {margin-right: 15px;width: 20px;height: 20px;cursor: pointer;}.todo-text {flex: 1;font-size: 16px;}.delete-btn {background: none;border: none;color: #e74c3c;cursor: pointer;font-size: 18px;opacity: 0.7;transition: opacity 0.3s;}.delete-btn:hover {opacity: 1;}.clear-btn {display: block;margin: 20px auto 0;padding: 10px 20px;background-color: #f5f5f5;color: #e74c3c;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;}.clear-btn:hover {background-color: #ffeef0;}@media (max-width: 600px) {.container {padding: 15px;}.todo-form {flex-direction: column;}.todo-form input {margin-bottom: 10px;}.todo-form button {margin-left: 0;}}</style>
</head>
<body><div class="container"><h1>📋 待办事项清单</h1><form class="todo-form" action="/add" method="POST"><input type="text" name="task" placeholder="添加新任务..." required><button type="submit">添加任务</button></form><div class="todo-stats"><span class="total-tasks">总任务: {{ todos|length }}</span><span class="completed-tasks">已完成: {{ completed }}</span><span class="pending-tasks">未完成: {{ not_completed }}</span></div><ul class="todo-list">{% for todo in todos %}<li class="todo-item {% if todo.done %}completed{% endif %}"><a href="{{ url_for('toggle_todo', index=loop.index0) }}"><input type="checkbox" class="todo-checkbox" {% if todo.done %}checked{% endif %}></a><span class="todo-text">{{ todo.task }}</span><a href="{{ url_for('delete_todo', index=loop.index0) }}" class="delete-btn">🗑️</a></li>{% else %}<li class="todo-item"><span class="todo-text" style="text-align: center; width: 100%;">暂无任务，添加一个吧！</span></li>{% endfor %}</ul>{% if completed > 0 %}<button class="clear-btn" onclick="location.href='{{ url_for('clear_completed') }}'">清除已完成任务</button>{% endif %}</div>
</body>
</html>

文件夹结构：

todo_web_app/
├── app.py          # Flask应用主文件
├── templates/      # HTML模板文件夹
│   └── index.html  # 主页模板
└── todos.json      # 数据存储文件（自动生成）

代码详解：

一、项目结构设计原理

1. 为什么需要这样的文件结构？

  • Flask框架要求：Flask遵循MVC（模型-视图-控制器）设计模式

    • app.py：控制器（Controller） - 处理业务逻辑

    • templates/index.html：视图（View） - 展示用户界面

    • todos.json：模型（Model） - 数据存储

  • 模板文件夹命名：Flask默认在templates文件夹中查找HTML模板文件

  • 数据文件位置：JSON数据文件放在项目根目录，便于读写

2. 为什么需要Web框架？

  • 处理HTTP协议：管理请求/响应生命周期

  • 路由管理：将URL映射到处理函数

  • 模板渲染：动态生成HTML内容

  • 会话管理：处理用户状态（本项目未使用）

二、app.py 代码逐行详解

# 导入必要的库
from flask import Flask, render_template, request, redirect, url_for
import json
import os# 创建Flask应用实例
app = Flask(__name__)# 数据存储文件
DATA_FILE = "todos.json"def load_todos():"""从文件加载待办事项"""# 检查文件是否存在if os.path.exists(DATA_FILE):try:# 打开文件并读取JSON内容with open(DATA_FILE, "r") as f:return json.load(f)except:# 如果读取失败（如文件为空或格式错误），返回空列表return []# 文件不存在时返回空列表return []def save_todos(todos):"""保存待办事项到文件"""# 将待办事项列表写入JSON文件with open(DATA_FILE, "w") as f:json.dump(todos, f)# 定义根路由，处理主页请求
@app.route('/')
def index():"""显示主页"""# 加载待办事项todos = load_todos()# 计算已完成任务数completed = sum(1 for todo in todos if todo["done"])# 计算未完成任务数not_completed = len(todos) - completed# 渲染index.html模板，并传入数据return render_template('index.html', todos=todos,completed=completed,not_completed=not_completed)# 添加任务的路由，只接受POST请求
@app.route('/add', methods=['POST'])
def add_todo():"""添加新任务"""# 从表单获取任务内容task = request.form.get('task')if task:# 加载现有任务todos = load_todos()# 添加新任务（默认为未完成）todos.append({"task": task, "done": False})# 保存更新后的任务列表save_todos(todos)# 重定向回主页return redirect(url_for('index'))# 切换任务状态的路由
@app.route('/toggle/<int:index>')
def toggle_todo(index):"""切换任务状态"""todos = load_todos()# 检查索引是否有效if 0 <= index < len(todos):# 切换完成状态（True变False，False变True）todos[index]["done"] = not todos[index]["done"]save_todos(todos)return redirect(url_for('index'))# 删除任务的路由
@app.route('/delete/<int:index>')
def delete_todo(index):"""删除任务"""todos = load_todos()if 0 <= index < len(todos):# 删除指定索引的任务todos.pop(index)save_todos(todos)return redirect(url_for('index'))# 清除已完成任务的路由
@app.route('/clear')
def clear_completed():"""清除已完成的任务"""todos = load_todos()# 创建新列表，只包含未完成的任务new_todos = [todo for todo in todos if not todo["done"]]save_todos(new_todos)return redirect(url_for('index'))# 程序入口
if __name__ == '__main__':# 确保templates文件夹存在if not os.path.exists('templates'):os.makedirs('templates')print("已创建templates文件夹")# 启动Flask开发服务器# debug=True 表示开启调试模式（自动重载代码并显示详细错误）app.run(debug=True, port=5001)  # 指定端口5001，避免与其他应用冲突

关键点解析：

  1. 路由系统：

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

    • 动态路由@app.route('/toggle/<int:index>')：<int:index>捕获URL中的整数参数

  2. 请求方法：

    • 默认只处理GET请求

    • methods=['POST']明确指定处理POST请求

  3. 重定向模式：

    • 操作后重定向回主页(redirect(url_for('index')))

    • 避免浏览器重复提交(POST/重定向/GET模式)

  4. 数据持久化：

    • load_todos()和save_todos()封装数据读写

    • JSON格式简单易读，适合小型应用

  5. 调试模式：

    • app.run(debug=True)启用调试模式

    • 修改代码后自动重启服务器

    • 显示详细错误信息

三、index.html 代码逐行详解

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页版待办事项</title><style>/* 基础样式重置 */* {box-sizing: border-box;margin: 0;padding: 0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}/* 页面整体样式 */body {background-color: #f5f7fa;color: #333;line-height: 1.6;padding: 20px;}/* 内容容器 */.container {max-width: 800px;margin: 0 auto;background-color: #fff;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);padding: 30px;}/* 标题样式 */h1 {text-align: center;margin-bottom: 30px;color: #2c3e50;}/* 任务表单样式 */.todo-form {display: flex;margin-bottom: 20px;}.todo-form input {flex: 1;padding: 12px;border: 2px solid #ddd;border-radius: 4px;font-size: 16px;transition: border-color 0.3s;}.todo-form input:focus {border-color: #3498db;outline: none;}.todo-form button {background-color: #3498db;color: white;border: none;padding: 12px 20px;margin-left: 10px;border-radius: 4px;cursor: pointer;font-size: 16px;transition: background-color 0.3s;}.todo-form button:hover {background-color: #2980b9;}/* 任务统计样式 */.todo-stats {display: flex;justify-content: space-between;margin-bottom: 20px;padding: 10px;background-color: #f8f9fa;border-radius: 4px;font-size: 14px;}.todo-stats span {display: inline-block;padding: 4px 8px;border-radius: 4px;}.total-tasks {background-color: #e3f2fd;color: #1976d2;}.completed-tasks {background-color: #e8f5e9;color: #388e3c;}.pending-tasks {background-color: #fff3e0;color: #f57c00;}/* 任务列表样式 */.todo-list {list-style-type: none;}.todo-item {display: flex;align-items: center;padding: 15px;border-bottom: 1px solid #eee;transition: background-color 0.3s;}.todo-item:hover {background-color: #f9f9f9;}/* 已完成任务样式 */.todo-item.completed .todo-text {text-decoration: line-through;color: #95a5a6;}/* 复选框样式 */.todo-checkbox {margin-right: 15px;width: 20px;height: 20px;cursor: pointer;}/* 任务文本样式 */.todo-text {flex: 1;font-size: 16px;}/* 删除按钮样式 */.delete-btn {background: none;border: none;color: #e74c3c;cursor: pointer;font-size: 18px;opacity: 0.7;transition: opacity 0.3s;}.delete-btn:hover {opacity: 1;}/* 清除按钮样式 */.clear-btn {display: block;margin: 20px auto 0;padding: 10px 20px;background-color: #f5f5f5;color: #e74c3c;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;}.clear-btn:hover {background-color: #ffeef0;}/* 响应式设计 - 小屏幕适配 */@media (max-width: 600px) {.container {padding: 15px;}.todo-form {flex-direction: column;}.todo-form input {margin-bottom: 10px;}.todo-form button {margin-left: 0;}}</style>
</head>
<body><div class="container"><h1>📋 待办事项清单</h1><!-- 添加任务的表单 --><!-- action="/add" 表示提交到/add路由 --><!-- method="POST" 使用POST方法提交 --><form class="todo-form" action="/add" method="POST"><input type="text" name="task" placeholder="添加新任务..." required><button type="submit">添加任务</button></form><!-- 任务统计信息 --><!-- 使用Jinja2模板变量显示统计 --><div class="todo-stats"><span class="total-tasks">总任务: {{ todos|length }}</span><span class="completed-tasks">已完成: {{ completed }}</span><span class="pending-tasks">未完成: {{ not_completed }}</span></div><!-- 任务列表 --><ul class="todo-list"><!-- 遍历待办事项 -->{% for todo in todos %}<!-- 根据任务状态添加completed类 --><li class="todo-item {% if todo.done %}completed{% endif %}"><!-- 切换状态链接 --><a href="{{ url_for('toggle_todo', index=loop.index0) }}"><!-- 根据状态显示复选框 --><input type="checkbox" class="todo-checkbox" {% if todo.done %}checked{% endif %}></a><!-- 任务内容 --><span class="todo-text">{{ todo.task }}</span><!-- 删除任务链接 --><a href="{{ url_for('delete_todo', index=loop.index0) }}" class="delete-btn">🗑️</a></li><!-- 如果没有任务 -->{% else %}<li class="todo-item"><span class="todo-text" style="text-align: center; width: 100%;">暂无任务，添加一个吧！</span></li>{% endfor %}</ul><!-- 清除已完成任务按钮（只在有完成的任务时显示） -->{% if completed > 0 %}<button class="clear-btn" onclick="location.href='{{ url_for('clear_completed') }}'">清除已完成任务</button>{% endif %}</div>
</body>
</html>

关键点解析：

  1. Jinja2模板引擎：

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

    • {% for ... %}：循环结构

    • {% if ... %}：条件判断

    • loop.index0：当前循环索引（从0开始）

  2. 动态内容生成：

    • 后端传入todos、completed、not_completed等变量

    • 模板根据这些数据动态生成HTML

  3. URL生成：

    • url_for('函数名')：生成对应路由的URL

    • url_for('toggle_todo', index=loop.index0)：生成带参数的URL

  4. 响应式设计：

    • 使用CSS媒体查询适配不同屏幕尺寸

    • 移动端优化布局

  5. 用户交互元素：

    • 表单提交：添加新任务

    • 链接点击：切换状态、删除任务

    • 按钮点击：清除已完成任务

四、工作流程解析

1. 用户访问主页 (GET /)

用户请求 -> Flask路由(index函数) -> 加载数据 -> 渲染模板 -> 返回HTML

2. 用户添加任务 (POST /add)

表单提交 -> Flask路由(add_todo函数) -> 处理数据 -> 保存到文件 -> 重定向到主页

3. 用户切换任务状态 (GET /toggle/<index>)

点击链接 -> Flask路由(toggle_todo函数) -> 修改状态 -> 保存数据 -> 重定向

4. 用户删除任务 (GET /delete/<index>)

点击删除图标 -> Flask路由(delete_todo函数) -> 删除任务 -> 保存数据 -> 重定向

5. 用户清除已完成任务 (GET /clear)

点击按钮 -> Flask路由(clear_completed函数) -> 过滤任务 -> 保存数据 -> 重定向

运行结果：

打开网址网页版待办事项

注：该代码是本人自己所写，可能不够好，不够简便，欢迎大家指出我的不足之处。如果遇见看不懂的地方，可以在评论区打出来，进行讨论，或者联系我。上述内容全是我自己理解的，如果你有别的想法，或者认为我的理解不对，欢迎指出！！！如果可以，可以点一个免费的赞支持一下吗？谢谢各位彦祖亦菲！！！！

http://www.lryc.cn/news/612008.html

相关文章：

  • 识别 Base64 编码的 JSON、凭证和私钥
  • IntelliJ IDEA 2025.1.4.1 中文版
  • 防火墙（firewalld）
  • 医疗AI中GPU部署的“非对等全节点架构“方案分析（中）
  • 队列很多时，为什么RocketMQ比Kafka性能好？
  • Linux seLinux
  • 【通俗易懂】详解AI大模型微调中的常见超参数的作用
  • 工控机 vs 服务器：核心区别与应用场景深度解析
  • K8S云原生监控方案Prometheus+grafana
  • 基于MATLAB实现的具有螺旋相位板的4F系统用于图像边缘增强的仿真
  • [科普] 从单核到千核：Linux SMP 的“演化史”与工程细节
  • 学习 Android (十六) 学习 OpenCV (一)
  • 【React 插件】@uiw/react-md-editor 使用教程：从基础使用到自定义扩展
  • 人工智能大数据模型驱动企业创新
  • AttributeError: ‘WSGIRequest‘ object has no attribute ‘data‘
  • LibTorch C++ 部署深度学习模型：GPU 调用配置详解
  • 关于C语言连续强制类型转换，有符号数据位移，以及温度传感器int16有符号数据重组处理问题
  • 数论手机辅助：打造便捷高效的移动应用交互体验
  • 房产开发证书识别-建筑工程施工许可证识别-竣工验收备案表识别-土地规划许可证识别-商品房预售许可证识别-建筑工程施工许可证识别等房产企业证书识别场景剖析
  • 【数据分享】西藏土壤类型数据库
  • 生成模型实战 | GPT-2（Generative Pretrained Transformer 2）详解与实现
  • 【Linux内核系列】：信号（上）
  • 力扣热题100------136.只出现一次的数字
  • JAVA高级编程第五章
  • QT----简单的htttp服务器与客户端
  • 主流linux版本分类与说明
  • 盲盒抽卡机小程序系统开发：打造个性化娱乐新平台
  • Web 端 AI 图像生成技术的应用与创新：虚拟背景与创意图像合成
  • Vite vs. vue-cli 创建 Vue 3 项目的区别与使用场景
  • [AI 生成] hive 面试题