first commit

data/Web/18.md

@@ -0,0 +1,41 @@
+# 任务管理系统——系统整合测试与成果展示 教学设计
+
+| **课题** | **任务管理系统——系统整合测试与成果展示** |
+|:---|:---|
+| **课时** | 1课时（40分钟） |
+| **教学目标** | **知识目标**：理解功能测试、边界测试、可用性测试和回归测试的基本含义，掌握前端项目交付检查流程。<br>**技能目标**：能够整合任务系统全部功能，依据测试用例发现并修复问题，完成项目归档、演示和技术说明。<br>**素养目标**：培养质量责任、协作测试、问题记录和成果表达能力，形成“功能完成不等于项目完成”的职业认识。 |
+| **教学重难点** | **重点**：功能整合；测试用例；缺陷定位；回归测试；项目展示。<br>**难点**：覆盖正常、异常和边界场景，修复问题后验证其他功能未受影响。 |
+| **教学资源准备** | 前五课任务管理系统、综合验收表、测试用例卡、缺陷记录单、浏览器开发者工具、项目展示评分表。 |
+
+## 教学过程
+
+| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
+|:---|:---|:---|:---|:---|
+| **1. 验收任务导入**<br>（5分钟） | 回顾项目功能链，发布最终整合、测试和展示任务。 | **功能回顾**<br>串联任务数据、条件循环、函数事件、DOM 添加和本地存储。<br><br>**标准发布**<br>说明功能正确、界面清楚、数据持久、代码规范、表达完整五项验收标准。 | **进度盘点**<br>按功能清单标记已完成项和高风险项。<br><br>**测试分工**<br>两人一组确定开发者与测试员角色。 | 将分散知识整合为系统能力，以明确标准组织最终项目交付。 |
+| **2. 测试方法梳理**<br>（8分钟） | 学习正常、异常、边界和回归测试，编写简要测试用例。 | **案例讲解**<br>以添加任务为例设计正常文字、空白、超长和特殊字符输入；说明预期结果和实际结果。<br><br>**回归说明**<br>演示修复添加功能后重新测试完成、删除和保存。 | **用例设计**<br>为添加、完成、删除、刷新恢复各写一条测试用例。<br><br>**结果预判**<br>填写预期结果，明确通过标准。 | 用结构化用例代替随意点击，建立覆盖风险和回归验证意识。 |
+| **3. 系统整合测试**<br>（17分钟） | 执行双轮测试，记录、定位、修复并复测缺陷。 | **测试组织**<br>第一轮按用例执行，第二轮交换项目进行探索性测试；要求缺陷包含步骤、现象和截图或控制台信息。<br><br>**巡回评审**<br>引导按“复现—定位—最小修改—回归”的顺序处理，集中讲解高频问题。 | **用例执行**<br>测试空白、重复文字、特殊字符、连续删除和刷新恢复，记录结果。<br><br>**缺陷修复**<br>根据元素、控制台和存储面板定位原因，修复后重跑全部核心用例。 | 通过真实测试闭环综合运用调试工具，培养可复现、可验证的问题解决能力。 |
+| **4. 成果展示交付**<br>（6分钟） | 完成项目整理并进行一分钟路演。 | **展示组织**<br>要求演示添加、完成、删除、刷新恢复，并说明数据流程和一个修复案例。<br><br>**多元评价**<br>教师与同伴依据评分表评价功能、代码和表达。 | **项目路演**<br>按固定场景操作系统，展示 localStorage 持久化。<br><br>**成果归档**<br>清理测试代码和无关文件，提交项目、测试表和缺陷记录。 | 让最终评价同时关注产品表现、技术理解和质量过程，形成完整交付成果。 |
+| **5. 课程复盘总结**<br>（4分钟） | 回顾三项目能力递进，完成个人学习复盘。 | **体系梳理**<br>总结“HTML 组织内容、CSS 设计表现、JavaScript 管理数据与交互”。<br><br>**成长评价**<br>引导学生对照首课目标评估结构、样式、编程和调试能力。 | **个人复盘**<br>记录最有价值的技能、典型错误和下一步改进方向。<br><br>**成果确认**<br>提交完整学习成果并完成自评。 | 将18课时知识整合为前端开发基本流程，帮助学生形成可迁移的项目经验。 |
+
+## 板书设计
+
+```text
+任务管理系统交付闭环
+
+需求 → 数据 → 逻辑 → DOM → 存储
+                   ↓
+测试用例 → 复现 → 定位 → 修复 → 回归
+
+前端三层：
+HTML        CSS          JavaScript
+内容结构    视觉布局      数据交互
+
+项目完成 = 功能 + 质量 + 文档 + 表达
+```
+
+## 教学成效与反思
+
+| | |
+|:---|:---|
+| **教学成效** | 学生能够依据测试用例完成系统验收，使用控制台、元素面板和存储面板定位问题。多数项目实现添加、完成、删除和刷新恢复，学生能说明数据流程与修复依据。 |
+| **教学反思** | 自由测试容易遗漏边界情况，测试用例卡显著提升了覆盖度。部分学生修复后未做回归，教学中应把核心用例全量重跑设为交付条件，并在评分中保留测试证据权重。 |