第 8 周作业报告
提交信息
姓名：未提供（提交前填写）
SUNet ID：未提供（提交前填写）
引用资料：Django、FastAPI、Flask、React、Vite 与 Tailwind CSS 官方文档；Bolt.new 产品说明
我大约花了 12 小时完成这项作业。
应用概念
Focus Tasks 是一个个人任务与备注管理器。用户可以创建任务、查看列表、修改标题和备注、切换完成状态、删除任务；三个版本都把数据持久化到 SQLite，并提供输入校验、错误提示和完整 CRUD 流程。相同需求分别用前后端分离、Django 全栈、Flask 加原生 JavaScript 实现，便于直接比较开发体验。
版本 1 说明
应用详情
- 文件夹名称：
stack1-bolt-react - AI 应用生成平台：Bolt.new（用于界面方向、组件结构和初始提示迭代）
- 技术栈：React + Vite + Tailwind CSS 前端，FastAPI 后端
- 持久化方案：Python 标准库
sqlite3，数据库文件为backend/tasks.db - 使用的框架/库：React、Vite、Tailwind CSS、FastAPI、Pydantic、Uvicorn
- 核心流程截图：未附截图；运行后首页可完成新建、编辑、状态切换和删除
反思
a. 问题及解决方法： Bolt 风格前端最初只有浏览器内状态，刷新后数据丢失。我将数据操作统一改为调用 FastAPI REST 接口，并在后端用参数化 SQL 接入 SQLite。前后端端口不同导致跨域限制，因此只为本地 Vite 地址配置 CORS。错误响应在前端统一解析并显示，空标题则前后端同时拦截。
b. 提示词设计： 首次提示明确“单页任务管理器、深色现代卡片、标题/备注/完成状态、移动端适配”，能快速得到稳定布局。后续提示一次只解决一个问题：先列出数据模型和五个 CRUD 接口，再要求加载/空/错误状态，最后要求可访问性和删除确认。“做一个漂亮的任务应用”过于宽泛，容易只生成静态界面；明确字段、端点和验收流程效果更好。
示例提示词：
Build a responsive task-and-notes dashboard with React, Vite and Tailwind. A task has id, title, notes, completed and timestamps. Provide create, list, edit, toggle and delete flows, including loading, empty and error states. Connect every action to a FastAPI REST API backed by SQLite; do not use mock data or localStorage.
c. 用时： 从开始到前端首次运行约 25 分钟；到 FastAPI、SQLite 和完整 CRUD 可用约 4 小时。
版本 2 说明
应用详情
- 文件夹名称：
stack2-django - AI 应用生成平台：未使用生成平台；按 Django 官方项目结构实现
- 技术栈：Python Django 服务端全栈、Django Templates、HTML/CSS
- 持久化方案：Django ORM + SQLite，数据库文件为
db.sqlite3 - 使用的框架/库：Django Model、ModelForm、Templates、Admin、JsonResponse
- 核心流程截图：未附截图；首页列表包含新建、编辑、完成切换和删除入口
反思
a. 问题及解决方法： Django 的页面 CRUD 与 JSON API 有不同输入形式。页面使用 ModelForm 复用模型约束和 CSRF 防护，API 单独解析 JSON 并返回一致的 4xx 错误。删除操作使用确认页和 POST，避免 GET 产生副作用。提交初始迁移文件，让新环境只需执行 migrate 即可运行；Admin 注册后可搜索和筛选任务。
b. 提示词设计： 最有效的提示是指定 Django 的每一层：Task 模型字段、ModelForm、函数视图、命名路由、模板、Admin 和迁移。额外强调“服务端渲染 CRUD 必须无需 JavaScript”和“不安全页面操作使用 POST + CSRF”，可以避免只有 API 或不安全删除链接。要求同时添加 JSON API时，需要明确返回字段、方法和状态码。
示例提示词：
Create a Django task board using one Task model and SQLite. Implement server-rendered list/create/update/toggle/delete pages with ModelForm, CSRF and a delete confirmation. Register the model in Admin, commit the initial migration, and expose GET/POST plus GET/PUT/DELETE JSON endpoints with validation. Do not depend on a separate frontend.
c. 用时： 从项目结构开始到首页首次运行约 35 分钟；到模板、Admin、迁移与双套 CRUD 完成约 3.5 小时。
版本 3 说明
应用详情
- 文件夹名称：
stack3-flask-sqlite - AI 应用生成平台：未使用生成平台；以轻量、少依赖为目标手动实现
- 技术栈：Python Flask + 原生 JavaScript/HTML5/CSS
- 持久化方案：Python
sqlite3，数据库文件为tasks.db - 使用的框架/库：Flask、Jinja2、Fetch API、原生 DOM API
- 核心流程截图：未附截图；单页界面可进行 CRUD、状态切换和筛选
反思
a. 问题及解决方法： 原生 JavaScript 没有组件状态管理，需要避免 DOM 与数据库状态不同步。我将服务器结果保存在一个任务数组中，每次写操作成功后重新加载并集中渲染。所有用户文本用 textContent 写入，避免把备注当 HTML 注入；SQL 使用占位符。Flask 应用启动时自动建表，应用上下文结束时关闭连接，错误统一返回 JSON。
b. 提示词设计： 提示词强调“不使用前端框架、不使用 localStorage、只用 Fetch 与 DOM API”，可以防止生成多余依赖。把交互拆成表单状态、任务渲染、筛选、编辑回填、删除确认和错误区域后，生成结果更容易检查。需要额外明确移动端布局、键盘焦点样式和 aria 标签，否则生成器常只关注视觉效果。
示例提示词：
Build a clean mobile-friendly Flask task manager using one HTML5 page, vanilla CSS and vanilla JavaScript only. Use Fetch against SQLite-backed REST endpoints for full CRUD. Include inline editing, completion toggle, all/open/done filtering, empty and error states, delete confirmation, accessible labels, server validation and parameterized SQL. Do not use localStorage or frontend packages.
c. 用时： 从 Flask 页面首次运行约 20 分钟；到 REST API、SQLite、筛选和完整交互完成约 3 小时。