第 8 周：三种技术栈实现同一任务应用

本周用三套独立技术栈实现 Focus Tasks。三个版本的数据模型和功能一致：任务包含标题、备注、完成状态与时间戳；用户可以创建、查看、编辑、切换状态和删除，数据都保存在 SQLite。

项目一览

版本	前端	后端	持久化	特点
stack1-bolt-react	React + Vite + Tailwind	FastAPI	SQLite	Bolt.new 风格，前后端分离，交互丰富
stack2-django	Django Templates	Django	Django ORM + SQLite	完整全栈、表单、Admin、JSON API
stack3-flask-sqlite	原生 HTML/CSS/JS	Flask	SQLite	依赖少，Fetch 单页交互，结构直观

每个目录都有独立依赖和运行说明，项目之间不共享运行时或数据库。

统一功能

• 创建带标题和备注的任务
• 查看持久化任务列表
• 编辑标题、备注和完成状态
• 一键完成或恢复任务
• 删除前确认
• 前后端输入校验、空状态和错误提示
• REST 风格接口（Django 同时提供服务端页面 CRUD）

架构

Stack 1

React/Tailwind → Fetch → FastAPI/Pydantic → sqlite3 → tasks.db

浏览器和 API 分开运行。前端负责交互状态，FastAPI 负责校验、错误码与数据库操作。

Stack 2

浏览器 → Django URL/View → ModelForm/Template → ORM → db.sqlite3
                         └→ JSON API

Django 在同一项目内管理模型、页面、表单、路由、Admin 和 API，服务端渲染页面无需前端构建。

Stack 3

HTML/CSS/Vanilla JS → Fetch → Flask → sqlite3 → tasks.db

Flask 提供页面和 API；原生 JavaScript 集中维护列表状态并安全更新 DOM。

三种方案比较

• 开发速度： Django 内置 ORM、表单、迁移和后台，标准 CRUD 最省样板代码。
• 前端体验： React 的组件状态适合复杂交互，但要单独管理前后端依赖与 CORS。
• 简单程度： Flask + 原生 JS 文件少、链路清楚；功能变大后需要更主动地组织状态和模块。
• 数据访问： Django ORM 可读性最好；FastAPI/Flask 直接使用参数化 SQL，更容易看清实际查询。
• 部署方式： Django、Flask 可单进程提供页面；React + FastAPI 通常分别构建和部署。

解题思路

1. 先固定统一数据模型和 CRUD 验收流程，保证三个版本功能可比较。
2. 每套技术栈独立建目录、依赖和数据库，避免配置互相影响。
3. 先完成持久化与 API，再连接界面；所有写操作都由服务端校验。
4. 更新和删除先检查资源是否存在，失败返回明确的 4xx 错误。
5. 界面覆盖加载、空列表、编辑、删除确认和错误状态，不只做静态页面。
6. README 写清前置条件、安装、启动、环境配置和已知限制，保证别人能独立运行。

具体启动命令见三个项目各自的 README.md。