48 lines
4.9 KiB
Markdown
48 lines
4.9 KiB
Markdown
# 任务管理系统——状态管理与本地存储 教学设计
|
||
|
||
| **课题** | **任务管理系统——状态管理与本地存储** |
|
||
|:---|:---|
|
||
| **课时** | 1课时（40分钟） |
|
||
| **教学目标** | **知识目标**：理解任务状态、数据数组、界面渲染和持久化之间的关系，掌握对象、数组更新、`localStorage`、JSON 序列化与反序列化。<br>**技能目标**：能够保存任务对象，实现完成状态切换、任务删除和刷新后恢复，并通过统一渲染函数保持数据与页面一致。<br>**素养目标**：建立“数据是单一事实来源”的状态管理意识，养成每次修改数据后保存、渲染和复测的习惯。 |
|
||
| **教学重难点** | **重点**：任务对象数组；状态更新；删除；JSON 转换；本地存储读写。<br>**难点**：理解先修改数据、再保存、最后重新渲染的流程，避免只改页面而数据未同步。 |
|
||
| **教学资源准备** | 上节课项目、状态流转图、本地存储示例、测试任务数据、浏览器 Application 面板、故障代码。 |
|
||
|
||
## 教学过程
|
||
|
||
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||
|:---|:---|:---|:---|:---|
|
||
| **1. 数据丢失导入**<br>（5分钟） | 刷新页面后任务消失，提出状态管理和本地保存需求。 | **问题演示**<br>添加任务后刷新页面，展示列表清空；再演示完成版可恢复数据。<br><br>**任务发布**<br>明确本课实现添加、完成、删除和刷新恢复。 | **现象分析**<br>说明当前任务只存在于页面节点中。<br><br>**流程猜想**<br>提出需要把数据保存到浏览器并在启动时读取。 | 用数据丢失形成真实动机，引出界面之外的数据状态和持久化。 |
|
||
| **2. 状态模型探究**<br>（10分钟） | 使用对象表示单项任务，用数组保存全部任务，建立数据与界面关系。 | **模型讲解**<br>示范任务对象包含 `id`、`name`、`done`，说明唯一标识和状态字段作用。<br><br>**流程绘制**<br>画出“用户操作→修改数组→保存数据→重新渲染”的单向流程。 | **对象建模**<br>为两项任务填写对象属性和值。<br><br>**流程追踪**<br>模拟点击完成后数组中哪一项、哪个字段发生变化。 | 把操作转化为数据变化，建立后续功能共享同一状态的核心模型。 |
|
||
| **3. 存储渲染示范**<br>（8分钟） | 学习 `JSON.stringify`、`JSON.parse` 和 `localStorage` 读写。 | **代码演示**<br>编写 `saveTasks()` 保存数组，启动时读取字符串并还原；在 Application 面板查看数据。<br><br>**边界讲解**<br>说明首次访问没有数据时使用空数组，避免解析空值。 | **跟随编码**<br>保存两项模拟任务，刷新后读取并在控制台确认。<br><br>**面板观察**<br>查看键名和值，删除存储后观察程序默认状态。 | 通过可视化存储面板理解浏览器持久化及 JSON 转换的必要性。 |
|
||
| **4. 完整功能实践**<br>（13分钟） | 改造添加逻辑，完成统一渲染、状态切换、删除和本地保存。 | **任务分解**<br>添加时先写入数组；完成和删除根据 `id` 更新数组；每次修改后调用保存与渲染。<br><br>**巡回指导**<br>检查只改 DOM、标识重复、删除索引错误和启动时未渲染等问题。 | **系统改造**<br>编写 `renderTasks()`，为任务生成完成和删除按钮，连接状态更新函数。<br><br>**持久测试**<br>添加三项、完成一项、删除一项、刷新页面，核对剩余数据和状态。 | 以固定测试序列验证数据、界面和存储一致，完成系统核心闭环。 |
|
||
| **5. 成果评价总结**<br>（4分钟） | 展示刷新恢复效果，归纳状态管理流程。 | **故障点评**<br>对比只修改页面与修改数据后渲染的两种实现，说明前者刷新后失效。<br><br>**知识总结**<br>强调“数据先变、保存跟上、界面重画”。 | **成果演示**<br>按测试序列操作并刷新验证。<br><br>**流程复述**<br>说明一次删除操作经过的四个步骤。 | 用刷新作为真实性检验，强化单一数据来源和一致性意识。 |
|
||
|
||
## 板书设计
|
||
|
||
```text
|
||
任务状态
|
||
|
||
tasks = [
|
||
{ id, name, done }
|
||
]
|
||
|
||
用户操作
|
||
↓
|
||
修改 tasks
|
||
↓
|
||
saveTasks()
|
||
↓
|
||
renderTasks()
|
||
|
||
localStorage 只存字符串
|
||
数组 → JSON.stringify → 保存
|
||
读取 → JSON.parse → 数组
|
||
```
|
||
|
||
## 教学成效与反思
|
||
|
||
| | |
|
||
|:---|:---|
|
||
| **教学成效** | 学生能够用任务对象数组管理状态，并实现完成、删除和刷新恢复。固定操作序列有效检验了数据、页面和本地存储的一致性，多数学生理解了统一渲染的价值。 |
|
||
| **教学反思** | 本课概念密度较高，学生容易同时修改 DOM 和数组造成不同步。应提供状态流转图和函数骨架，把实践重点限定为“修改数据—保存—渲染”，高级事件委托不在本课展开。 |
|