iliev-blnk/todo-list-v2

# 待办事项清单 v2 这是 Ilie Beleniuc 为 **SEN204 - 互联网与网页编程** 提交的最终项目。 这是我的[期中待办事项清单项目](https://github.com/iliev-blnk/todo-list)的第二版。期中版本是一个使用原生 JavaScript 和 `localStorage` 的单一 HTML 页面。此版本将其转变为一个全栈 Web 应用程序，包含 React 前端、Django REST API 后端和 Docker。 ## 研究问题 管理日常任务是学生面临的常见问题。期中版本将任务存储在浏览器的 `localStorage` 中，这意味着任务与特定设备绑定，并且如果浏览器数据被清除，任务就会消失。v2 的目标是保持相同的简单"添加任务、勾选完成、删除"体验，但使用真实的数据库作为后端，以便任务在刷新后依然存在，并且不受浏览器限制。 ## 动机 SEN204 课程在前几周涵盖了 HTML、CSS 和 JavaScript，接着是 React，最后是使用 FastAPI 和 Django 的后端开发。这个最终项目将这些部分整合到一个应用程序中，以展示所有这些技术。 ## 控制流 1. 用户打开应用，进入仪表盘页面。 2. 仪表盘从 API 获取当前任务列表。 3. 用户添加任务，包含标题、可选描述、优先级和截止日期。 4. 用户可以将任务标记为完成、编辑标题或删除任务。 5. 用户可以按全部 / 活跃 / 已完成筛选列表。 ## 实现策略 ### 后端 后端是一个 Django 5 项目，包含一个名为 `api` 的应用。我选择 Django REST Framework 是因为它可以轻松地将 Django 模型转换为 JSON API，而无需编写大量样板代码。 `Task` 模型（`api/models.py`）存储标题、描述、完成状态、优先级、截止日期和创建时间戳。没有用户模型——任务是共享的，这简化了应用程序。 视图是使用 `@api_view` 装饰器编写的普通函数，而不是基于类的视图。这样可以更轻松地从上到下阅读逻辑，而无需在方法之间跳转。有两个视图函数： - `task_list` 处理 `GET`（列出所有任务，支持可选的 `?completed=` 过滤器）和 `POST`（创建任务）。 - `task_detail` 处理单个任务的 `GET`、`PUT`（部分更新）和 `DELETE`。 `TaskSerializer` 负责处理模型与 JSON 之间的转换，并在数据进入数据库之前验证传入的数据。 ### 前端 前端是一个使用 Vite 构建的 React 18 单页面应用。React Router 处理仪表盘和关于页面之间的导航。我使用纯 JavaScript，以贴近课堂所学内容。 `api.js` 是对浏览器 `fetch` API 的一个小型封装。每个请求都通过 `apiRequest()`，它会设置 `Content-Type` 头，并在服务器返回非 OK 状态时抛出错误。这将 fetch 逻辑集中在一个地方，而不是在每个组件中重复。 `App.jsx` 设置路由和共享的导航栏。`Dashboard.jsx` 是主页面——包含一个添加任务的表单、过滤按钮（全部 / 活跃 / 已完成）和任务列表。点击任务上的"编辑"会将标题切换为内联输入框；按 Enter 键或点击"保存"会发送 `PUT` 请求。所有样式都保存在一个 `App.css` 文件中。 ### Docker 每个服务都有自己的 Dockerfile。后端镜像安装 Python 依赖，并在启动时运行 `migrate` 然后 `runserver`。前端镜像使用 `npm run build` 构建静态文件，并用 `npm run preview` 来服务它们。`VITE_API_URL` 作为构建参数传递，以便前端知道在哪里访问 API。 ## 安装与使用 ### 使用 Docker 运行（推荐） ``` docker compose up --build ``` 在浏览器中打开 http://localhost:5173。要停止服务：`docker compose down`。 ### 本地运行 **后端：** ``` cd backend python -m venv venv source venv/bin/activate pip install -r requirements.txt python manage.py migrate python manage.py runserver ``` **前端**（在另一个终端中）： ``` cd frontend npm install npm run dev ``` 打开 http://localhost:5173。

标签：API 开发, CRUD 应用, Django, Docker, Internet 编程, React, REST API, Syscalls, Web 应用, Web 开发, 任务管理, 任务过滤, 全栈应用, 后端开发, 后端框架, 在线任务管理, 学生项目, 安全防御评估, 容器化部署, 待办事项管理, 教育项目, 数据可视化, 数据库存储, 简单待办, 请求拦截, 课程项目, 逆向工具, 项目演示