first commit
This commit is contained in:
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
1
.superpowers/brainstorm/3-1781487692/state/server.pid
Normal file
1
.superpowers/brainstorm/3-1781487692/state/server.pid
Normal file
@@ -0,0 +1 @@
|
|||||||
|
3
|
||||||
@@ -0,0 +1,317 @@
|
|||||||
|
<style>
|
||||||
|
.cards {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
.card-image {
|
||||||
|
height: 330px;
|
||||||
|
padding: 12px;
|
||||||
|
background: #eef2f6;
|
||||||
|
}
|
||||||
|
.browser {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #cfd6df;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f3f4f6;
|
||||||
|
box-shadow: 0 8px 24px rgba(38, 50, 65, 0.08);
|
||||||
|
}
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 30px;
|
||||||
|
padding: 0 9px;
|
||||||
|
color: #51606f;
|
||||||
|
font-size: 9px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-bottom: 1px solid #dde2e8;
|
||||||
|
}
|
||||||
|
.brand {
|
||||||
|
color: #17212b;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.pill {
|
||||||
|
padding: 3px 7px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #fff;
|
||||||
|
background: #1f7a55;
|
||||||
|
}
|
||||||
|
.pill.secondary {
|
||||||
|
color: #40505f;
|
||||||
|
background: #e8edf1;
|
||||||
|
}
|
||||||
|
.workspace {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 55px 1fr;
|
||||||
|
height: calc(100% - 31px);
|
||||||
|
}
|
||||||
|
.sidebar {
|
||||||
|
padding: 7px 5px;
|
||||||
|
color: #6a7785;
|
||||||
|
font-size: 8px;
|
||||||
|
background: #f8fafb;
|
||||||
|
border-right: 1px solid #dde2e8;
|
||||||
|
}
|
||||||
|
.lesson {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
padding: 5px 3px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.lesson.active {
|
||||||
|
color: #1c6d4c;
|
||||||
|
font-weight: 700;
|
||||||
|
background: #dcefe6;
|
||||||
|
}
|
||||||
|
.canvas {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.paper {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 145px;
|
||||||
|
min-height: 255px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 13px 10px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 8px rgba(44, 54, 64, 0.13);
|
||||||
|
}
|
||||||
|
.paper-title {
|
||||||
|
margin: 2px 0 8px;
|
||||||
|
color: #1b252d;
|
||||||
|
font: 700 11px/1.2 serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
border-top: 1px solid #99a3ad;
|
||||||
|
border-left: 1px solid #99a3ad;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 30px 1fr;
|
||||||
|
min-height: 17px;
|
||||||
|
}
|
||||||
|
.cell {
|
||||||
|
padding: 3px;
|
||||||
|
color: #5d6872;
|
||||||
|
font-size: 6px;
|
||||||
|
border-right: 1px solid #99a3ad;
|
||||||
|
border-bottom: 1px solid #99a3ad;
|
||||||
|
}
|
||||||
|
.cell.label {
|
||||||
|
color: #2b343d;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
background: #f4f6f7;
|
||||||
|
}
|
||||||
|
.editable {
|
||||||
|
background: #fffceb;
|
||||||
|
outline: 1px dashed #d4a933;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
.section-line {
|
||||||
|
height: 5px;
|
||||||
|
margin: 8px 0 4px;
|
||||||
|
border-left: 3px solid #1f7a55;
|
||||||
|
background: #dfe5e9;
|
||||||
|
}
|
||||||
|
.split-workspace {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 48% 52%;
|
||||||
|
height: calc(100% - 31px);
|
||||||
|
}
|
||||||
|
.form-panel {
|
||||||
|
padding: 8px;
|
||||||
|
background: #fff;
|
||||||
|
border-right: 1px solid #d6dde3;
|
||||||
|
}
|
||||||
|
.form-label {
|
||||||
|
margin: 6px 0 2px;
|
||||||
|
color: #33404c;
|
||||||
|
font-size: 7px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.field {
|
||||||
|
height: 15px;
|
||||||
|
border: 1px solid #cdd4db;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: #fafbfc;
|
||||||
|
}
|
||||||
|
.field.large {
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
.preview-panel {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 10px 6px;
|
||||||
|
background: #eef1f4;
|
||||||
|
}
|
||||||
|
.preview-panel .paper {
|
||||||
|
width: 118px;
|
||||||
|
min-height: 230px;
|
||||||
|
padding: 11px 8px;
|
||||||
|
}
|
||||||
|
.thumbs {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 6px;
|
||||||
|
border-bottom: 1px solid #d9dfe5;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.thumb {
|
||||||
|
width: 24px;
|
||||||
|
height: 34px;
|
||||||
|
border: 1px solid #bec7cf;
|
||||||
|
background: linear-gradient(#fff 20%, #d7dde2 20% 23%, #fff 23% 45%, #d7dde2 45% 48%, #fff 48%);
|
||||||
|
}
|
||||||
|
.thumb.active {
|
||||||
|
border: 2px solid #1f7a55;
|
||||||
|
}
|
||||||
|
.readonly {
|
||||||
|
height: calc(100% - 74px);
|
||||||
|
padding: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.readonly .paper {
|
||||||
|
width: 145px;
|
||||||
|
min-height: 245px;
|
||||||
|
}
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 3px 7px;
|
||||||
|
color: #52616f;
|
||||||
|
font-size: 11px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #eef1f4;
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.cards {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2>上传多份 Markdown 后，主要怎样编辑？</h2>
|
||||||
|
<p class="subtitle">三种方案都会按文件名自然排序、生成整册 A4 页面并支持一键打印。请选择最符合日常使用习惯的一种。</p>
|
||||||
|
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||||
|
<div class="card-image">
|
||||||
|
<div class="browser">
|
||||||
|
<div class="toolbar">
|
||||||
|
<span class="brand">教学设计生成器</span>
|
||||||
|
<span class="actions"><span class="pill secondary">上传 18 份</span><span class="pill">打印整册</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="workspace">
|
||||||
|
<div class="sidebar">
|
||||||
|
<div class="lesson active">01 项目启动</div>
|
||||||
|
<div class="lesson">02 文档结构</div>
|
||||||
|
<div class="lesson">03 图片链接</div>
|
||||||
|
<div class="lesson">04 列表表格</div>
|
||||||
|
<div class="lesson">05 表单设计</div>
|
||||||
|
</div>
|
||||||
|
<div class="canvas">
|
||||||
|
<div class="paper">
|
||||||
|
<div class="paper-title">个人主页——项目启动</div>
|
||||||
|
<div class="table">
|
||||||
|
<div class="row"><div class="cell label">课题</div><div class="cell editable">个人主页——项目启动与环境搭建</div></div>
|
||||||
|
<div class="row"><div class="cell label">课时</div><div class="cell editable">1课时（40分钟）</div></div>
|
||||||
|
<div class="row"><div class="cell label">目标</div><div class="cell editable">知识目标、技能目标、素养目标</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="section-line"></div>
|
||||||
|
<div class="table">
|
||||||
|
<div class="row"><div class="cell label">环节</div><div class="cell editable">教学内容 / 师生活动 / 设计意图</div></div>
|
||||||
|
<div class="row"><div class="cell label">01</div><div class="cell editable">项目情境导入（6分钟）</div></div>
|
||||||
|
<div class="row"><div class="cell label">02</div><div class="cell editable">技术角色认知（8分钟）</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h3>A. A4 页面内直接编辑</h3>
|
||||||
|
<p>左侧切换课次，右侧就是可打印页面；点击文字直接修改，所见即所得。</p>
|
||||||
|
<span class="badge">接近参考站 · 推荐</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||||
|
<div class="card-image">
|
||||||
|
<div class="browser">
|
||||||
|
<div class="toolbar">
|
||||||
|
<span class="brand">教学设计生成器</span>
|
||||||
|
<span class="actions"><span class="pill secondary">上传文件</span><span class="pill">打印</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="split-workspace">
|
||||||
|
<div class="form-panel">
|
||||||
|
<div class="form-label">课题</div><div class="field"></div>
|
||||||
|
<div class="form-label">课时</div><div class="field"></div>
|
||||||
|
<div class="form-label">教学目标</div><div class="field large"></div>
|
||||||
|
<div class="form-label">教学重难点</div><div class="field large"></div>
|
||||||
|
<div class="form-label">教学过程</div><div class="field large"></div>
|
||||||
|
</div>
|
||||||
|
<div class="preview-panel">
|
||||||
|
<div class="paper">
|
||||||
|
<div class="paper-title">个人主页——项目启动</div>
|
||||||
|
<div class="table">
|
||||||
|
<div class="row"><div class="cell label">课题</div><div class="cell">个人主页——项目启动</div></div>
|
||||||
|
<div class="row"><div class="cell label">课时</div><div class="cell">1课时（40分钟）</div></div>
|
||||||
|
<div class="row"><div class="cell label">目标</div><div class="cell">三维教学目标内容</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="section-line"></div>
|
||||||
|
<div class="table">
|
||||||
|
<div class="row"><div class="cell label">环节</div><div class="cell">教学过程预览</div></div>
|
||||||
|
<div class="row"><div class="cell label">01</div><div class="cell">项目情境导入</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h3>B. 表单编辑 + 实时预览</h3>
|
||||||
|
<p>左侧字段更容易精确编辑，右侧同步显示打印效果，但可用宽度较紧张。</p>
|
||||||
|
<span class="badge">编辑清晰 · 屏幕占用较大</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||||||
|
<div class="card-image">
|
||||||
|
<div class="browser">
|
||||||
|
<div class="toolbar">
|
||||||
|
<span class="brand">教学设计生成器</span>
|
||||||
|
<span class="actions"><span class="pill secondary">重新上传</span><span class="pill">打印整册</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="thumbs">
|
||||||
|
<div class="thumb active"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div>
|
||||||
|
</div>
|
||||||
|
<div class="readonly">
|
||||||
|
<div class="paper">
|
||||||
|
<div class="paper-title">个人主页——项目启动</div>
|
||||||
|
<div class="table">
|
||||||
|
<div class="row"><div class="cell label">课题</div><div class="cell">个人主页——项目启动与环境搭建</div></div>
|
||||||
|
<div class="row"><div class="cell label">课时</div><div class="cell">1课时（40分钟）</div></div>
|
||||||
|
<div class="row"><div class="cell label">目标</div><div class="cell">知识、技能与素养目标</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="section-line"></div>
|
||||||
|
<div class="table">
|
||||||
|
<div class="row"><div class="cell label">环节</div><div class="cell">教学内容与教学活动</div></div>
|
||||||
|
<div class="row"><div class="cell label">01</div><div class="cell">项目情境导入（6分钟）</div></div>
|
||||||
|
<div class="row"><div class="cell label">02</div><div class="cell">技术角色认知（8分钟）</div></div>
|
||||||
|
<div class="row"><div class="cell label">03</div><div class="cell">环境搭建示范（8分钟）</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h3>C. 只读整册预览</h3>
|
||||||
|
<p>上传后直接排版、检查和打印，不在网站内修改内容，交互最简单。</p>
|
||||||
|
<span class="badge">实现最轻 · 不支持修改</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||||
|
<p class="subtitle">界面模式已选择：A4 页面内直接编辑。继续在对话中确认内容范围...</p>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
{"reason":"idle timeout","timestamp":1781489646395}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
43675
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
5
README.md
Normal file
5
README.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + TypeScript + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||||
44
data/C#/1.md
Normal file
44
data/C#/1.md
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
# 智能教室环境监控系统——项目启动与技术认知 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能教室环境监控系统——项目启动与技术认知** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:了解物联网系统的基本架构(感知层-传输层-应用层),理解C#在物联网上位机开发中的作用与价值。<br>**技能目标**:能够描述本项目的功能需求与实现路径,掌握Visual Studio开发环境的安装与基本配置,能创建第一个C#控制台项目。<br>**素养目标**:建立"软硬结合"的系统思维,培养在真实项目情境中分析问题、规划方案的职业素养。 |
|
||||||
|
| **教学重难点** | **重点**:物联网三层架构的理解;C#在项目中承担的角色;Visual Studio环境搭建。<br>**难点**:将抽象的物联网概念与具体的教室监控项目关联;理解软件如何与硬件协同工作。 |
|
||||||
|
| **教学资源准备** | 多媒体课件(含项目演示视频);已完成的"智能教室监控系统"成品展示(含Arduino+传感器+C#上位机);Visual Studio安装包;网络环境;教室监控需求调研表。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目情境导入**<br>(8分钟) | 展示真实教室环境问题(温度过高、光线不足等),引出"智能教室环境监控系统"项目需求,明确项目目标与价值。 | **情境创设**<br>播放教室环境问题视频片段,提问:"如何用技术手段让教室环境'可感知、可调控'?"<br>**成品演示**<br>展示完整项目运行效果:传感器采集数据→C#界面实时显示→异常报警。 | **观察思考**<br>观看视频,联系自身体验,思考改进方案;<br>**直观感知**<br>观察成品演示,初步建立"传感器-数据-软件"的认知链条。 | 通过真实问题创设项目情境,让学生明确"为什么做这个项目";通过成品展示建立学习目标的具象化认知,激发参与欲望。 |
|
||||||
|
| **2. 项目架构解析**<br>(12分钟) | 讲解物联网三层架构,分析本项目的技术实现路径,明确C#在应用层的核心地位。 | **概念讲解**<br>结合项目实例讲解感知层(Arduino+传感器)、传输层(串口/WiFi)、应用层(C#上位机)的分工;<br>**角色定位**<br>强调C#在项目中的作用:数据接收、界面展示、逻辑控制、数据存储。 | **聆听记录**<br>理解三层架构,在笔记中绘制项目结构简图;<br>**讨论交流**<br>小组讨论:"C#程序要完成哪些具体任务?"并汇报。 | 将抽象的物联网概念具象为本项目的技术模块,帮助学生建立系统思维;通过讨论强化对C#角色的理解,为后续学习明确方向。 |
|
||||||
|
| **3. 开发工具认知**<br>(8分钟) | 介绍Visual Studio作为C#集成开发环境的功能特点,讲解其在项目开发中的核心地位。 | **工具介绍**<br>展示VS界面,讲解代码编辑、调试、界面设计等核心功能;<br>**演示操作**<br>演示创建新控制台项目的完整流程:启动VS→新建项目→选择模板→配置项目名称。 | **观看学习**<br>认识VS的界面布局与主要功能区;<br>**模仿操作**<br>跟随教师演示,在自己电脑上尝试创建第一个"HelloIoT"控制台项目。 | 通过直观演示降低工具使用门槛,让学生快速上手;通过创建第一个项目建立成就感,消除编程恐惧。 |
|
||||||
|
| **4. 环境搭建实践**<br>(12分钟) | 指导学生完成Visual Studio的安装与配置,创建项目文件夹,编写并运行第一个C#程序。 | **任务发布**<br>发布实践任务:"搭建开发环境,创建项目,输出'智能教室监控系统启动!'";<br>**巡回指导**<br>巡视学生操作,解答安装配置问题,强调路径设置与工作区管理规范。 | **动手实践**<br>按步骤安装VS(或确认已安装),创建控制台项目;<br>**编码测试**<br>在Main方法中编写Console.WriteLine代码,运行程序验证环境。 | 通过实际操作巩固工具使用技能,完成项目开发的"第零步";通过成功运行程序建立信心,为后续编程学习打下心理基础。 |
|
||||||
|
| **5. 项目展望与总结**<br>(5分钟) | 总结本课时内容,预告后续课程将逐步实现项目各模块功能,布置课后任务。 | **知识梳理**<br>回顾物联网架构与C#角色,强调本课时是项目的"认知起点";<br>**任务布置**<br>布置课后任务:调研教室环境需求,提出至少3项监控指标建议。 | **回顾反思**<br>总结收获,明确后续学习路径;<br>**接收任务**<br>记录课后任务,思考如何将需求转化为技术方案。 | 通过总结强化知识结构,通过展望明确项目的阶段性与连贯性;课后任务引导学生主动思考,培养需求分析能力。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能教室环境监控系统 - 项目架构图
|
||||||
|
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ 应用层(C#上位机程序) │
|
||||||
|
│ ● 数据接收 ● 界面显示 │
|
||||||
|
│ ● 逻辑控制 ● 数据存储 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 传输层(串口/WiFi通信) │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 感知层(Arduino+传感器) │
|
||||||
|
│ 温湿度 | 光照 | CO₂ | 人数检测 │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
|
||||||
|
本课时任务: 认知架构 + 搭建环境
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合项目启动阶段目标评估:85%以上学生能够准确描述物联网三层架构并说明C#的作用,全员完成VS环境搭建并成功运行第一个程序。通过成品演示与真实需求结合,学生对项目价值认同度高,课堂参与积极。项目启动的"认知铺垫"目标基本达成,为后续模块化开发奠定了良好基础。部分学生已能主动思考项目扩展功能,显示出较强的学习内驱力。 |
|
||||||
|
| **教学反思** | 本课时成功地将"物联网与C#编程概述"这一宏观主题具象为"智能教室监控系统"的项目启动课,通过真实情境与成品展示建立了有效的认知锚点。三层架构的讲解与项目实例结合紧密,学生理解效果好于预期。不足之处在于:环境搭建环节部分学生因电脑配置差异耗时较长,压缩了后续总结时间;对于"C#如何与硬件通信"的原理讲解较浅,部分学生仍存在"黑盒"感。改进方向:①课前发放VS安装包并提供图文教程,减少课堂安装时间;②在架构讲解时增加串口通信的简化原理图示,强化"数据流动路径"的可视化呈现。整体上,项目驱动的框架让知识学习具有明确指向,学生的角色代入感与目标感显著增强。 |
|
||||||
42
data/C#/10.md
Normal file
42
data/C#/10.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# 智能停车场管理系统——TCP/IP网络实现多节点车位状态联网 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能停车场管理系统——TCP/IP网络实现多节点车位状态联网** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解TCP/IP协议的客户端-服务器模型,掌握TcpListener和TcpClient类的基本使用方法,了解其在**停车场分布式监控**中的应用。<br>**技能目标**:能够编写C#网络服务器程序接收多个ESP8266传感器节点的车位数据,**实现项目中多车位状态的网络化集中管理**。<br>**素养目标**:培养网络编程中的安全意识(端口管理、异常处理),体验分布式物联网系统架构设计的工程思维。 |
|
||||||
|
| **教学重难点** | **重点**:TcpListener的启动、监听、接受连接流程;NetworkStream的数据读取。<br>**难点**:理解异步多客户端连接处理机制,区分单串口与网络通信在项目架构中的差异。 |
|
||||||
|
| **教学资源准备** | 项目架构演示课件;Visual Studio开发环境;2-3台已烧录TCP客户端程序的ESP8266开发板;网络测试工具(NetAssist);项目服务器端程序框架。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目复盘与需求升级**<br>(5分钟) | 回顾上节课实现的串口单车位监控;**提出项目新需求**:监控整个停车场100个车位,串口方案的局限性分析。 | **问题引导**<br>展示项目架构图,提问:"如果要监控100个车位,用100个串口线可行吗?";<br>**方案对比**<br>对比串口与网络方案的优劣,**引出网络化升级的项目必然性**。 | **思考讨论**<br>分析串口方案在**大规模项目部署**中的问题(布线、距离、成本);<br>**需求认同**<br>理解网络通信是**项目扩展的必然选择**。 | **从已完成的项目功能出发**,通过真实工程问题驱动技术升级需求,建立新旧知识在项目演进中的逻辑关联。 |
|
||||||
|
| **2. 核心概念讲解**<br>(10分钟) | TCP/IP协议基础(IP地址、端口号);C#中的TcpListener类(Start、AcceptTcpClient);NetworkStream数据流读取;**网络架构在项目中的角色**。 | **概念讲解**<br>用"邮局收信"类比服务器监听机制,讲解IP和端口在**项目网络架构**中的作用;<br>**代码演示**<br>演示创建TcpListener,监听8888端口,接受首个客户端连接。 | **聆听理解**<br>记录关键类和方法,绘制**项目网络拓扑简图**(多节点→服务器);<br>**同步操作**<br>在自己电脑上创建**项目服务器端程序**,配置监听端口。 | 将抽象网络协议**转化为项目架构中的具体组件**,通过类比和可视化架构图降低理解难度,明确技术服务的项目目标。 |
|
||||||
|
| **3. 项目任务实践**<br>(20分钟) | **项目任务**:编写停车场管理服务器程序,接收3个ESP8266节点发送的车位编号和状态数据(格式:"P01:OCCUPIED"),在ListBox中显示所有在线车位状态。 | **任务分解**<br>拆解为:①启动监听②循环接受连接③创建线程处理④读取并解析数据;<br>**关键点突破**<br>重点讲解使用Thread为每个客户端创建独立处理线程,避免阻塞;<br>**巡回指导**<br>协助学生调试网络连接,使用NetAssist模拟客户端测试。 | **编码实现**<br>**以项目服务器开发者角色**编写TcpListener启动代码,编写客户端处理函数;<br>**联调测试**<br>连接ESP8266硬件或使用工具发送测试数据,验证**项目多节点接入功能**;<br>**协作调试**<br>与邻组交换测试,模拟多客户端场景。 | 以**真实的多节点项目场景**驱动编程实践,在网络调试中理解并发处理机制,**完成项目联网架构的核心模块**,体验分布式系统开发。 |
|
||||||
|
| **4. 功能验证与优化讨论**<br>(7分钟) | 展示成功接收多节点数据的界面;讨论项目优化方向(连接断开检测、数据校验、性能优化)。 | **成果展示**<br>选取典型学生作品,演示**多车位实时状态在项目中的集中显示**;<br>**引导思考**<br>提问:"如果某个传感器节点断网了,程序如何处理?",启发优化思路。 | **功能演示**<br>展示自己的**项目服务器程序**接收多客户端数据效果;<br>**思考交流**<br>讨论项目中可能遇到的网络异常,提出改进想法。 | 通过**项目成果验证**强化技能掌握,通过开放性问题培养**系统健壮性思维**,为后续项目完善埋下伏笔。 |
|
||||||
|
| **5. 总结与项目展望**<br>(3分钟) | 总结本节课实现的**项目网络层架构**;预告下节课:将车位数据上传到云端管理平台(HTTP API)。 | **知识梳理**<br>回顾TCP服务器开发流程,强调其在**项目多节点管理**中的核心地位;<br>**项目进度**<br>更新项目进度图,明确已完成模块和下一步目标。 | **总结笔记**<br>整理网络编程关键步骤,绘制**项目当前架构图**;<br>**任务预习**<br>了解云平台概念,思考本地与云端的关系。 | **巩固项目阶段成果**,建立本地网络与云平台的技术层级关系,保持**项目持续推进的连贯性**。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能停车场管理系统——网络架构
|
||||||
|
|
||||||
|
[项目网络拓扑]
|
||||||
|
ESP8266节点1(车位P01-P30) ┐
|
||||||
|
ESP8266节点2(车位P31-P60) ├─→ C#服务器(IP:192.168.1.100:8888) → 数据库/界面
|
||||||
|
ESP8266节点3(车位P61-P90) ┘
|
||||||
|
|
||||||
|
[核心代码流程]
|
||||||
|
1. TcpListener listener = new TcpListener(IPAddress.Any, 8888);
|
||||||
|
2. listener.Start();
|
||||||
|
3. while(true) { TcpClient client = listener.AcceptTcpClient(); }
|
||||||
|
4. Thread thread = new Thread(HandleClient);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合**"多节点联网"项目阶段目标**,约75%的学生成功搭建TCP服务器并接收到至少2个节点的数据,完成了停车场系统从单点监控到网络化集中管理的关键跨越。学生对**项目架构升级的必要性**有了深刻认识,**多节点并发处理**这一复杂概念通过真实硬件连接得以具象化。部分基础较好的学生主动添加了客户端IP显示功能,展现出良好的项目扩展意识。 |
|
||||||
|
| **教学反思** | 本课时成功将TCP/IP网络编程融入"停车场多节点联网"的项目需求中,通过对比串口方案的局限性,自然引出技术升级的必然性,学生接受度高。不足:①多线程编程对中职生而言较为抽象,部分学生虽能照写代码但对并发原理理解不深,建议增加动画演示或简化为Task异步模式;②网络调试环节因防火墙、IP配置等环境问题耗时较多,应提前准备标准化测试环境和故障排查清单;③对异常处理(如客户端突然断开)讲解不足,导致部分程序运行中崩溃。整体上,项目驱动下的网络编程教学让学生体验到技术选型的工程价值,教学效果显著。 |
|
||||||
42
data/C#/11.md
Normal file
42
data/C#/11.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# 智能停车场管理系统——HTTP API实现停车记录云端上传 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能停车场管理系统——HTTP API实现停车记录云端上传** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解HTTP协议的请求-响应模型,掌握RESTful API的基本概念(GET/POST方法、JSON数据格式),了解其在**停车场云端数据管理**中的应用。<br>**技能目标**:能够使用HttpClient类发送POST请求,将车辆进出记录以JSON格式上传至云平台,**完成项目数据云端同步功能模块**。<br>**素养目标**:培养数据安全意识(API密钥保护、HTTPS使用),理解物联网系统"端-边-云"协同架构的工程价值。 |
|
||||||
|
| **教学重难点** | **重点**:HttpClient类的使用、JSON数据序列化、POST请求构造与发送。<br>**难点**:理解异步编程(async/await),正确处理HTTP响应并解析返回的JSON数据。 |
|
||||||
|
| **教学资源准备** | 云平台API接口文档;Visual Studio开发环境(已安装Newtonsoft.Json包);Postman测试工具;项目主程序(已集成车辆进出记录模块);云平台测试账号。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目需求引入**<br>(5分钟) | 展示停车场管理员跨地点查看数据的场景;**提出项目云端化需求**:将本地停车记录实时同步到云平台,实现远程管理和数据统计分析。 | **场景演示**<br>播放管理员使用手机APP查看停车数据的视频,提问:"本地程序的数据如何传到云端?";<br>**概念引入**<br>介绍**云平台在项目中的角色**,讲解API接口是"云服务的钥匙"。 | **需求理解**<br>观看演示,讨论**项目云端化的价值**(跨平台访问、数据备份、统计分析);<br>**概念感知**<br>初步理解API作为数据交互桥梁的作用。 | **从项目实际应用场景出发**,建立本地系统与云平台协同工作的认知,明确本课时任务在整体**项目云端架构**中的定位。 |
|
||||||
|
| **2. 技术原理讲解**<br>(12分钟) | HTTP协议基础(请求方法、状态码);RESTful API规范;JSON数据格式;C#中的HttpClient类和JsonConvert序列化。 | **原理讲解**<br>用"寄快递"类比HTTP请求,讲解URL、请求头、请求体在**项目API调用**中的对应关系;<br>**接口演示**<br>使用Postman演示调用云平台的POST接口上传测试数据,展示响应结果;<br>**代码示范**<br>演示C#中创建HttpClient、序列化对象为JSON、发送POST请求的完整流程。 | **聆听记录**<br>记录HTTP方法含义,理解JSON作为**项目数据交换格式**的优势;<br>**工具体验**<br>使用Postman模拟发送请求,观察请求和响应的数据结构;<br>**代码跟随**<br>在项目程序中添加HttpClient对象,导入JSON序列化库。 | 将抽象的Web协议**具体化为项目云端通信手段**,通过可视化工具降低学习曲线,为编码实践搭建清晰的认知框架。 |
|
||||||
|
| **3. 项目任务开发**<br>(18分钟) | **项目任务**:在车辆进场时,将记录(车牌号、进场时间、车位编号)封装为JSON格式,通过HTTP POST请求上传至云平台API(https://api.parking.com/records),并处理返回结果显示上传状态。 | **任务分解**<br>拆解为:①定义数据类②序列化为JSON③构造POST请求④发送并处理响应;<br>**关键点突破**<br>讲解async/await关键字在网络请求中的必要性,演示异常捕获(网络超时、401错误等);<br>**巡回指导**<br>检查学生API密钥配置,协助调试请求格式错误。 | **编码实现**<br>**以项目云端集成开发者角色**编写数据类,使用JsonConvert.SerializeObject序列化,编写异步上传方法;<br>**功能测试**<br>在**项目程序**中触发车辆进场事件,验证数据是否成功上传到云平台,在云端后台查看记录;<br>**问题排查**<br>根据HTTP状态码和响应信息定位错误(如401认证失败、400参数错误)。 | 以**真实云平台API集成任务**驱动开发实践,在完整的请求-响应-验证流程中掌握Web服务调用技能,**完成项目云端同步核心功能**。 |
|
||||||
|
| **4. 成果验证与安全讨论**<br>(7分钟) | 展示学生成功上传数据的云端后台截图;讨论API密钥泄露风险、HTTPS的重要性等安全话题。 | **成果点评**<br>选取成功案例,展示**项目云端数据同步效果**,分析代码质量;<br>**安全教育**<br>强调API密钥不能写死在代码中,讲解配置文件存储、环境变量等**项目安全实践**。 | **功能演示**<br>展示自己**项目程序的云端同步功能**,打开云平台后台验证数据;<br>**安全反思**<br>检查自己代码中的安全隐患,讨论**项目上线前的安全检查清单**。 | 通过**项目云端验证**强化成就感,通过安全教育培养**工程安全意识**,为后续项目实际部署打下基础。 |
|
||||||
|
| **5. 总结与扩展思考**<br>(3分钟) | 总结本节课实现的**项目云端数据流**;提出扩展思考:如何实现云端到本地的反向控制(如远程开闸)。 | **知识梳理**<br>回顾HTTP请求流程,强调其在**项目端-云协同架构**中的纽带作用;<br>**思考延伸**<br>提问:"如果要从云端APP远程控制停车场道闸,需要什么技术?"(预告MQTT)。 | **归纳总结**<br>整理HTTP API调用步骤,更新**项目架构图**,标注云端模块;<br>**思考讨论**<br>思考双向通信需求,为下节课MQTT学习做准备。 | **巩固项目阶段性成果**,建立HTTP单向通信与双向消息机制的认知差异,保持**项目技术演进的连续性**。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能停车场管理系统——云端数据同步
|
||||||
|
|
||||||
|
[项目数据流向]
|
||||||
|
本地系统(车辆进出记录) --HTTP POST--> 云平台API --存储--> 云数据库
|
||||||
|
↓
|
||||||
|
手机APP/Web管理后台
|
||||||
|
|
||||||
|
[核心代码结构]
|
||||||
|
1. 定义: class ParkingRecord { 车牌, 时间, 车位 }
|
||||||
|
2. 序列化: string json = JsonConvert.SerializeObject(record);
|
||||||
|
3. 请求: var content = new StringContent(json, Encoding.UTF8, "application/json");
|
||||||
|
4. 发送: var response = await httpClient.PostAsync(url, content);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合**"云端同步"项目阶段目标**,约80%的学生成功实现了停车记录的云端上传,并能在云平台后台查看到自己提交的数据,完成了停车场系统从本地到云端的关键跨越。学生对**物联网"端-边-云"架构**有了直观认识,**异步编程**概念通过真实网络请求得以初步理解。多数学生能够根据HTTP状态码自主排查简单的接口调用错误,展现出良好的问题解决能力。 |
|
||||||
|
| **教学反思** | 本课时成功将HTTP API调用融入"停车场云端数据同步"的项目场景,通过Postman工具的可视化演示有效降低了抽象协议的理解难度。不足:①async/await异步编程对部分学生仍较晦涩,虽能模仿编写但对其原理认识不足,建议增加同步与异步对比实验或提供更详细的代码注释模板;②API接口调试时因网络延迟、云平台限流等问题影响教学进度,应准备本地Mock服务器作为备用方案;③JSON序列化错误(属性命名不匹配)较为隐蔽,部分学生花费较多时间定位,后续应强化JSON结构对比和错误日志分析训练。整体上,真实云平台的集成体验让学生深刻感受到技术的实用价值,项目驱动效果显著。 |
|
||||||
42
data/C#/12.md
Normal file
42
data/C#/12.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# 智能停车场管理系统——MQTT协议实现车位状态实时发布订阅 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能停车场管理系统——MQTT协议实现车位状态实时发布订阅** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解MQTT协议的发布-订阅模型,掌握主题(Topic)、消息、QoS等核心概念,了解其在**停车场实时消息推送**中的优势。<br>**技能目标**:能够使用MQTTnet库编写C#客户端程序,订阅车位状态主题,接收并处理实时推送的消息,**实现项目LED引导屏的动态更新功能**。<br>**素养目标**:培养物联网轻量级通信协议选型意识,理解发布-订阅模式在大规模设备管理中的架构优势。 |
|
||||||
|
| **教学重难点** | **重点**:MQTT客户端的连接、订阅主题、消息处理回调函数编写。<br>**难点**:理解发布-订阅模式与传统请求-响应模式的区别,掌握异步消息到达时的事件处理机制。 |
|
||||||
|
| **教学资源准备** | MQTT Broker测试服务器(如EMQX Cloud);MQTT.fx测试工具;Visual Studio开发环境(已安装MQTTnet包);项目主程序(已集成LED引导屏界面);车位状态模拟发布器。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 技术需求对比导入**<br>(6分钟) | 回顾HTTP轮询方式获取车位状态的局限性(延迟、资源浪费);**提出项目实时性需求**:LED引导屏需要"一有变化就立即更新",引入MQTT消息推送方案。 | **问题场景**<br>演示HTTP轮询导致的1秒延迟和服务器压力,提问:"如何让系统像微信一样实时收到消息?";<br>**方案对比**<br>对比HTTP与MQTT在**项目实时通信场景**中的适用性,讲解发布-订阅模式原理。 | **对比分析**<br>分析HTTP轮询在**项目实时性要求**下的不足;<br>**模式理解**<br>通过"公众号订阅"类比理解发布-订阅模式,思考其在停车场系统中的应用。 | **从已有技术方案的不足出发**,建立新技术引入的必然性,通过生活化类比降低MQTT抽象模型的理解难度。 |
|
||||||
|
| **2. MQTT核心概念讲解**<br>(10分钟) | MQTT协议特点(轻量、低功耗);Broker、Publisher、Subscriber角色;Topic主题结构设计;QoS服务质量等级;MQTTnet库基本使用。 | **概念讲解**<br>绘制**项目MQTT架构图**(传感器发布→Broker→多个订阅者),讲解Topic命名规范(parking/floor1/slot01);<br>**工具演示**<br>使用MQTT.fx连接测试Broker,订阅主题"parking/#",发布测试消息,观察实时接收效果;<br>**代码示范**<br>演示C#中使用MQTTnet创建客户端、连接Broker、订阅主题的核心代码。 | **概念记录**<br>记录Topic设计规范,理解通配符(#、+)在**项目主题管理**中的作用;<br>**工具体验**<br>使用MQTT.fx订阅测试主题,体验消息推送的即时性;<br>**代码跟随**<br>在项目程序中添加MQTTnet引用,创建客户端对象。 | 将抽象的消息队列协议**具体化为项目实时通信基础设施**,通过可视化工具增强感知,为编码实践建立清晰的认知模型。 |
|
||||||
|
| **3. 项目功能开发**<br>(20分钟) | **项目任务**:编写C#程序订阅主题"parking/status/#",接收车位状态消息(JSON格式:{"slotId":"P01","status":"OCCUPIED"}),实时更新LED引导屏界面显示车位占用情况。 | **任务分解**<br>拆解为:①连接Broker②订阅主题③注册消息回调④解析JSON⑤更新界面;<br>**关键点突破**<br>重点讲解MessageReceived事件中的跨线程UI更新(使用Invoke),演示消息负载的byte[]到字符串转换;<br>**巡回指导**<br>协助学生配置Broker地址和端口,检查Topic订阅语法是否正确,指导消息解析错误处理。 | **编码实现**<br>**以项目消息订阅者角色**编写连接和订阅代码,编写MessageReceived回调函数解析并显示消息;<br>**联调测试**<br>使用模拟发布器或MQTT.fx工具向主题发送车位状态消息,验证**项目LED屏**是否实时更新;<br>**互助验证**<br>邻组互相发布消息,测试订阅功能的稳定性和准确性。 | 以**真实的消息推送场景**驱动开发实践,在异步消息处理中掌握事件驱动编程,**完成项目实时信息展示核心模块**,体验物联网消息系统。 |
|
||||||
|
| **4. 成果展示与架构讨论**<br>(6分钟) | 展示学生实现的实时LED引导屏更新效果;讨论MQTT在项目中的架构价值(解耦、可扩展、多端同步)。 | **成果点评**<br>选取优秀作品,演示**项目实时推送效果**,对比之前HTTP方案的性能改善;<br>**架构提升**<br>引导学生思考:多个管理端(APP、大屏、Web)如何同时获取车位状态?讲解**发布-订阅模式在项目扩展中的优势**。 | **功能演示**<br>展示自己**项目LED屏的实时响应**,模拟多个车位状态变化;<br>**架构思考**<br>讨论MQTT如何实现**项目一点发布、多端订阅**,理解其与传统点对点通信的差异。 | 通过**项目成果对比**强化技术优势认知,通过架构讨论培养**系统设计思维**,理解协议选型在工程中的战略意义。 |
|
||||||
|
| **5. 总结与系统集成展望**<br>(3分钟) | 总结本节课实现的**项目实时消息层**;展望项目完整架构:传感器→MQTT→监控中心/LED屏/移动端。 | **知识梳理**<br>回顾MQTT客户端开发流程,强调其在**项目实时性和扩展性**中的核心作用;<br>**项目总结**<br>展示完整的停车场系统架构图,标注各技术模块(串口、TCP、HTTP、MQTT)在项目中的协同关系。 | **总结反思**<br>整理MQTT订阅关键步骤,完善**项目整体架构图**;<br>**成果回顾**<br>回顾整个项目的技术演进路径,认识到各模块在系统中的价值。 | **巩固项目最终核心功能**,建立完整的系统技术栈认知,让学生看到**项目从零到完整的技术演进全景**。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能停车场管理系统——MQTT实时消息架构
|
||||||
|
|
||||||
|
[项目消息流向]
|
||||||
|
车位传感器 --发布--> MQTT Broker(消息中心) <--订阅-- C#监控程序
|
||||||
|
↓ ↓
|
||||||
|
LED引导屏 移动端APP
|
||||||
|
|
||||||
|
[核心代码结构]
|
||||||
|
1. 创建: var factory = new MqttFactory();
|
||||||
|
2. 连接: await mqttClient.ConnectAsync(options);
|
||||||
|
3. 订阅: await mqttClient.SubscribeAsync("parking/status/#");
|
||||||
|
4. 处理: mqttClient.ApplicationMessageReceivedAsync += HandleMessage;
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合**"实时消息推送"项目阶段目标**,约78%的学生成功订阅MQTT主题并实现了LED引导屏的实时更新,完成了停车场系统从轮询到推送的通信模式升级。学生对**发布-订阅模式**的理解较为深刻,能够举一反三地提出"多个管理端同步"等扩展应用场景。通过对比HTTP方案,学生直观感受到MQTT在**项目实时性和资源效率**上的显著优势,技术选型意识得到培养。 |
|
||||||
|
| **教学反思** | 本课时成功将MQTT协议融入"停车场实时消息推送"的项目需求,通过与HTTP方案的性能对比有效凸显了新技术的价值。不足:①发布-订阅模式虽用生活化类比(公众号)降低了理解难度,但部分学生对Broker的角色认识仍较模糊,建议增加网络拓扑动画演示消息流转过程;②MQTT连接失败的错误排查(网络、端口、认证)较为复杂,占用较多课堂时间,应提前准备标准化配置文件和常见错误对照表;③QoS服务质量等级概念讲解偏理论化,学生兴趣不高,后续可设计对比实验(QoS0丢包vs QoS1保证送达)增强体感。整体上,真实的消息推送体验让学生深刻认识到轻量级协议在物联网中的核心地位,项目完整性得到显著提升,教学效果良好。 |
|
||||||
39
data/C#/13.md
Normal file
39
data/C#/13.md
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
# 智能温室监控系统——数据持久化与本地存储 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能温室监控系统——数据持久化与本地存储** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解数据持久化的概念与必要性,掌握SQLite数据库的基本特点,了解ADO.NET数据访问技术在项目中的应用价值。<br>**技能目标**:能够在C#项目中引用System.Data.SQLite组件,创建数据库文件与数据表,编写代码实现温湿度数据的插入操作,为项目构建历史数据存储功能模块。<br>**素养目标**:培养在项目开发中重视数据管理的意识,养成规范创建数据库结构、注重数据完整性的严谨工作习惯。 |
|
||||||
|
| **教学重难点** | **重点**:SQLite数据库的创建与连接、使用SQLiteCommand执行INSERT语句保存传感器数据。<br>**难点**:理解数据库连接字符串的构成、SQL参数化查询的编写方法及其在项目中防止数据异常的作用。 |
|
||||||
|
| **教学资源准备** | Visual Studio开发环境、System.Data.SQLite组件安装包、项目前期代码(已实现串口数据读取)、SQLite数据库管理工具(如DB Browser)、教学课件、Arduino温湿度采集硬件。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **项目问题引入**<br>(5分钟) | 回顾项目已完成功能,提出数据无法保存的实际问题,引出数据持久化需求。 | **问题驱动**<br>演示运行现有项目程序,关闭后数据消失,提问:"如果温室管理员想查看昨天的温度变化趋势,我们的系统能做到吗?这暴露了什么问题?"<br>**任务发布**<br>发布本课时项目任务:为系统添加历史数据存储功能。 | **观察思考**<br>观看演示,认识到项目当前的局限性;<br>**需求分析**<br>以项目开发者角色讨论数据保存的重要性,明确本课时要解决的实际问题。 | 从项目实际运行中发现问题,让学生认识到数据持久化是项目功能完善的必然需求,激发学习动机。 |
|
||||||
|
| **新知探究(关键技术)**<br>(12分钟) | 数据持久化概念、SQLite数据库特点、ADO.NET数据访问流程、数据库连接与表结构设计。 | **概念讲解**<br>讲解数据持久化定义,对比文件与数据库存储方式,说明SQLite轻量级特性适合项目需求;<br>**技术剖析**<br>讲解"连接数据库→创建命令对象→执行SQL语句→关闭连接"的标准流程;<br>**设计演示**<br>演示使用DB Browser创建SensorData表(字段:ID、Temperature、Humidity、RecordTime)。 | **聆听记录**<br>理解数据库在项目中的定位,记录关键概念;<br>**可视化理解**<br>通过工具直观认识数据库表结构,将抽象的"数据存储"转化为可见的表格形式。 | 将数据库理论与项目实际需求紧密结合,通过可视化工具降低认知难度,为后续编程实践奠定基础。 |
|
||||||
|
| **代码实现(项目功能开发)**<br>(18分钟) | 在项目中引用SQLite组件、编写数据库连接代码、实现数据插入功能。 | **操作示范**<br>演示通过NuGet安装System.Data.SQLite包,讲解连接字符串格式;<br>**核心编码**<br>带领学生在数据接收事件中编写插入代码,强调参数化查询的写法(使用`@Temperature`等占位符),说明其防止SQL注入的重要性;<br>**调试指导**<br>演示运行程序,查看数据库文件中是否成功写入数据。 | **跟随配置**<br>在自己的项目中安装组件,配置数据库路径;<br>**编写代码**<br>在教师脚手架支持下,将数据插入逻辑集成到现有数据接收方法中;<br>**测试验证**<br>运行程序,使用DB Browser打开数据库文件检查数据,体验项目功能的实现。 | 通过教师演示+学生实践的方式,将数据库操作无缝嵌入到已有项目框架中,完成从"读取显示"到"存储管理"的功能升级。 |
|
||||||
|
| **功能测试与优化**<br>(7分钟) | 测试数据存储功能、处理可能的异常情况、优化代码结构。 | **测试引导**<br>组织学生采集真实温湿度数据并观察数据库记录增长情况;<br>**异常处理**<br>提示学生添加try-catch语句捕获数据库操作异常,演示在连接失败时给出友好提示。 | **功能验收**<br>以项目测试员角色,检查数据是否准确保存,时间戳是否正确;<br>**代码完善**<br>在提示下添加异常处理代码,提升项目健壮性。 | 培养学生的测试意识和异常处理能力,体会项目开发中"能用"与"好用"的差别。 |
|
||||||
|
| **总结提升**<br>(3分钟) | 总结本课时完成的项目模块、知识要点回顾、展望后续功能。 | **模块总结**<br>总结本课时为项目增加的核心功能,强调数据持久化是后续数据分析、报表生成的基础;<br>**知识梳理**<br>回顾SQLite使用流程关键步骤;<br>**任务预告**<br>预告下节课将实现历史数据查询与图表展示功能。 | **自我评估**<br>对照项目任务检查自己的完成情况;<br>**反思记录**<br>记录本课时遇到的问题与解决方法。 | 帮助学生在项目推进过程中建立知识体系,明确当前进度与后续方向,保持项目学习的连贯性。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能温室监控系统 - 数据持久化模块
|
||||||
|
├─ 核心任务:保存历史温湿度数据
|
||||||
|
├─ 技术方案:C# + SQLite数据库
|
||||||
|
├─ 关键步骤:
|
||||||
|
│ 1. 创建数据库与表结构(SensorData表)
|
||||||
|
│ 2. 建立数据库连接(连接字符串)
|
||||||
|
│ 3. 编写INSERT语句(参数化查询)
|
||||||
|
│ 4. 在数据接收事件中调用保存方法
|
||||||
|
└─ 项目收益:数据可追溯、为分析功能打基础
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合本课时"为项目添加数据持久化功能"这一阶段目标,约85%的学生能够成功配置SQLite环境并完成基本的数据插入操作,实现了温湿度数据的自动保存功能。学生通过可视化工具验证数据写入,直观感受到项目功能的实质性进步,成就感显著。少数学生在连接字符串路径配置上出现问题,经个别指导后解决。整体上,项目任务驱动下的学习目标达成度较高,学生角色代入感强,课堂参与积极。 |
|
||||||
|
| **教学反思** | 本课时成功将数据持久化这一重要概念融入"智能温室监控系统"项目的功能扩展中,教学逻辑连贯。通过"现有功能演示→发现问题→引入解决方案"的项目推进方式,学生能够自然理解数据库技术的必要性。不足之处在于,对SQL参数化查询的讲解略显仓促,部分学生对`@`占位符的理解停留在"照着写"的层面,未充分认识到其防止SQL注入的安全意义。今后应增加一个对比实验环节,演示拼接字符串与参数化查询的差异,强化安全编程意识。此外,可在课前准备阶段提供SQLite组件的安装视频,减少课上配置环境的时间损耗,为功能测试环节留出更充裕的时间。 |
|
||||||
39
data/C#/14.md
Normal file
39
data/C#/14.md
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
# 智能温室监控系统——多线程数据采集与界面优化 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能温室监控系统——多线程数据采集与界面优化** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解单线程程序的阻塞问题,掌握多线程基本概念,了解async/await异步编程模型在物联网项目中的应用价值。<br>**技能目标**:能够使用Task与async/await关键字改造串口数据读取方法,实现数据采集与界面响应的并行处理,解决项目中界面卡顿问题。<br>**素养目标**:培养在项目开发中关注用户体验的意识,养成使用异步编程优化耗时操作的良好编程习惯。 |
|
||||||
|
| **教学重难点** | **重点**:async/await关键字的使用、将同步数据读取改造为异步操作。<br>**难点**:理解异步方法的执行流程、跨线程访问UI控件时使用Invoke机制避免异常。 |
|
||||||
|
| **教学资源准备** | Visual Studio开发环境、项目前期代码(已实现同步串口读取与数据库存储)、模拟高频数据采集的Arduino程序、教学课件、界面卡顿对比演示视频。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **问题场景复现**<br>(6分钟) | 演示项目在高频数据采集时的界面卡顿现象,引出多线程需求。 | **现象展示**<br>运行现有项目,将Arduino设置为每100ms发送一次数据,演示界面出现明显卡顿、按钮点击无响应的问题;<br>**问题剖析**<br>提问:"为什么数据处理会让界面'卡住'?这在实际项目部署中会造成什么影响?" | **观察体验**<br>观看演示,亲自尝试点击卡顿状态下的界面按钮;<br>**问题讨论**<br>分组讨论界面无响应对项目用户体验的负面影响,认识到优化的必要性。 | 通过真实的项目问题场景,让学生直观感受单线程阻塞带来的用户体验缺陷,建立学习多线程技术的内在动力。 |
|
||||||
|
| **核心概念讲解**<br>(10分钟) | 单线程与多线程概念、异步编程模型、async/await工作原理。 | **原理讲解**<br>用"餐厅服务员"类比单线程(一个人按顺序服务)与多线程(多人同时服务),讲解并发处理的优势;<br>**语法剖析**<br>讲解async标记方法为异步、await标记等待点,绘制异步方法执行流程图;<br>**UI线程说明**<br>强调WinForm的UI线程安全规则,介绍Invoke方法的作用。 | **理解记录**<br>通过类比理解多线程概念,记录async/await关键语法;<br>**流程跟踪**<br>在流程图上标注"主线程继续执行"与"异步任务完成回调"的时间点。 | 用生活化类比降低抽象概念的理解难度,通过可视化流程图帮助学生建立异步执行的心智模型。 |
|
||||||
|
| **代码改造实践**<br>(20分钟) | 将项目中的同步数据读取改造为异步方法,解决界面卡顿问题。 | **改造示范**<br>在屏幕演示将数据接收方法签名改为`async Task`,在耗时操作(如数据库写入)前添加`await Task.Run()`;<br>**跨线程处理**<br>演示使用`this.Invoke()`方法更新TextBox显示的温湿度值,说明直接访问UI控件会引发异常;<br>**逐步引导**<br>将改造步骤拆解为:①修改方法签名 ②识别耗时操作 ③添加await ④处理UI更新,逐步指导学生完成。 | **代码实施**<br>在教师脚手架支持下,对照步骤改造自己项目中的数据处理方法;<br>**问题解决**<br>遇到"跨线程操作UI控件"异常时,尝试使用Invoke解决;<br>**对比测试**<br>改造完成后运行程序,点击界面按钮验证响应是否恢复流畅。 | 通过分步骤的结构化改造,降低异步编程的学习门槛,让学生在项目实践中掌握async/await的实际应用。 |
|
||||||
|
| **功能验收与优化**<br>(6分钟) | 测试改造后的项目性能,对比优化前后的用户体验差异。 | **性能对比**<br>组织学生同时运行优化前后两个版本,对比界面响应速度;<br>**代码审查**<br>抽查学生代码,检查是否正确使用了异步语法和Invoke机制,指出常见错误。 | **用户视角测试**<br>以项目最终用户角色,在高频数据采集状态下测试各个按钮功能;<br>**经验总结**<br>记录异步改造的关键步骤和注意事项。 | 通过对比实验强化学生对优化效果的认知,培养以用户体验为中心的项目开发意识。 |
|
||||||
|
| **总结与拓展**<br>(3分钟) | 总结本课时实现的项目优化、知识要点回顾、拓展思考。 | **模块总结**<br>总结异步编程为项目带来的核心改进:数据采集与界面响应并行,用户体验显著提升;<br>**知识归纳**<br>回顾async/await使用要点和UI线程安全原则;<br>**思考拓展**<br>提问:"项目中还有哪些操作可以用异步优化?比如数据库查询、网络请求?" | **自我评估**<br>检查自己的代码改造是否达到预期效果;<br>**拓展思考**<br>思考项目其他功能模块的异步优化可能性。 | 帮助学生将本课时学习的技术举一反三,为后续项目功能的持续优化埋下伏笔。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能温室监控系统 - 多线程优化模块
|
||||||
|
├─ 核心问题:高频数据处理导致界面卡顿
|
||||||
|
├─ 解决方案:异步编程(async/await)
|
||||||
|
├─ 改造步骤:
|
||||||
|
│ 1. 方法签名添加 async Task
|
||||||
|
│ 2. 耗时操作前添加 await Task.Run()
|
||||||
|
│ 3. UI更新使用 this.Invoke(()=>{...})
|
||||||
|
├─ 关键原理:主线程不阻塞,任务并行执行
|
||||||
|
└─ 项目收益:界面流畅响应,用户体验提升
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合"优化项目界面响应性能"这一阶段目标,约80%的学生能够成功将同步数据处理改造为异步方法,并正确处理跨线程UI访问问题。学生通过对比测试,直观感受到优化前后的显著差异,对异步编程的价值认同度高。部分学生在理解"await等待但不阻塞主线程"这一概念时存在困惑,需要反复用流程图讲解。整体上,项目实际问题驱动的教学方式效果良好,学生主动探索解决方案的积极性较高。 |
|
||||||
|
| **教学反思** | 本课时成功将多线程异步编程技术融入项目性能优化场景,教学设计从"问题发现→原理学习→方案实施→效果验证"形成完整闭环。用"餐厅服务员"类比多线程的教学策略效果显著,降低了抽象概念的理解难度。不足之处在于,对Invoke机制的讲解不够深入,部分学生只知道"要这样写",但对"为什么跨线程访问UI会异常"的底层原因理解不足。建议在后续教学中增加一个演示环节:故意不使用Invoke,触发异常,让学生观察错误信息,再引出UI线程安全规则,印象会更深刻。此外,20分钟的代码改造实践时间对部分动手能力较弱的学生略显紧张,可考虑提前准备半成品代码模板,减少基础代码输入量。 |
|
||||||
40
data/C#/15.md
Normal file
40
data/C#/15.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
# 智能温室监控系统——JSON数据处理与云端对接 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能温室监控系统——JSON数据处理与云端对接** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解JSON数据格式的特点与应用场景,掌握C#中Newtonsoft.Json库的基本使用方法,了解数据序列化与反序列化的概念及其在物联网项目数据交换中的价值。<br>**技能目标**:能够创建传感器数据模型类,使用JsonConvert实现对象与JSON字符串的相互转换,编写代码将采集到的温湿度数据转换为JSON格式并保存到文件,为项目的云平台对接功能奠定基础。<br>**素养目标**:培养使用标准数据格式进行系统间通信的规范意识,养成在项目开发中注重数据结构设计与接口兼容性的良好习惯。 |
|
||||||
|
| **教学重难点** | **重点**:使用Newtonsoft.Json进行对象序列化(SerializeObject)与反序列化(DeserializeObject)操作。<br>**难点**:理解C#对象与JSON文本的映射关系、设计符合项目需求的数据模型类、处理JSON数据中的时间格式与中文编码问题。 |
|
||||||
|
| **教学资源准备** | Visual Studio开发环境、Newtonsoft.Json库(通过NuGet安装)、项目前期代码(已实现数据采集与数据库存储)、JSON在线解析工具演示、教学课件、物联网云平台API文档示例。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **项目需求引入**<br>(5分钟) | 展示智慧农业云平台界面,提出项目数据需要上传到云端进行远程监控和大数据分析的需求,引出数据标准化交换问题。 | **场景展示**<br>播放云平台监控大屏视频,说明项目下一阶段目标是将数据上传到云端;<br>**问题驱动**<br>提问:"我们的C#程序采集的数据如何才能被云平台、手机App等不同系统识别?需要什么样的数据格式?" | **观察分析**<br>观看云平台演示,理解项目拓展方向;<br>**需求讨论**<br>讨论不同系统间数据交换的挑战,认识到需要统一的数据格式标准。 | 通过真实的云平台应用场景,让学生理解JSON作为通用数据交换格式在物联网项目中的重要地位,建立学习动机。 |
|
||||||
|
| **核心知识讲解**<br>(12分钟) | JSON格式特点、序列化与反序列化概念、Newtonsoft.Json库使用方法、数据模型类设计原则。 | **格式解析**<br>对比展示数据库表记录与JSON文本的表现形式,讲解JSON的键值对结构、数组与对象嵌套特点;<br>**概念阐释**<br>讲解序列化(对象→文本)与反序列化(文本→对象)的过程,强调其在网络传输、文件存储中的作用;<br>**技术演示**<br>演示安装Newtonsoft.Json包,讲解JsonConvert.SerializeObject和DeserializeObject两个核心方法的使用。 | **对比理解**<br>观察数据在不同形式下的表现,理解JSON的轻量级与可读性优势;<br>**记录要点**<br>记录序列化的两个核心方法及其参数;<br>**模型思考**<br>思考如何设计一个类来表示温湿度数据记录。 | 通过可视化对比帮助学生理解抽象的"格式转换"概念,将技术学习与项目实际需求紧密结合。 |
|
||||||
|
| **代码实践(功能开发)**<br>(18分钟) | 创建传感器数据模型类、实现数据对象的JSON序列化、将JSON数据保存到文件。 | **模型设计**<br>演示创建SensorDataModel类,包含Temperature、Humidity、Timestamp等属性,说明属性命名规范;<br>**序列化实现**<br>演示在数据接收方法中创建数据对象,调用JsonConvert.SerializeObject转换为JSON字符串;<br>**文件操作**<br>演示使用File.AppendAllText将JSON字符串追加到日志文件,强调每条数据独立成行便于后续处理;<br>**反序列化演示**<br>演示读取JSON文件并反序列化为对象列表,验证数据完整性。 | **类库配置**<br>安装Newtonsoft.Json包,解决依赖问题;<br>**模型编写**<br>根据项目数据特点,定义自己的数据模型类;<br>**功能集成**<br>在现有数据采集流程中,插入JSON序列化代码,实现数据的双重保存(数据库+JSON文件);<br>**测试验证**<br>运行程序,打开生成的JSON文件,使用在线工具验证格式正确性。 | 通过完整的"设计类→序列化→保存→反序列化"流程,让学生掌握JSON处理的全链路操作,为云平台对接做好技术储备。 |
|
||||||
|
| **拓展应用**<br>(7分钟) | 了解JSON在物联网项目中的典型应用场景、处理常见问题(中文乱码、时间格式)。 | **场景拓展**<br>展示JSON在MQTT消息、HTTP API请求中的实际应用案例,说明其在项目后续阶段的使用方式;<br>**问题解决**<br>演示设置JsonSerializerSettings处理中文编码和日期格式,确保数据在不同平台间正确传输。 | **案例学习**<br>观看典型应用案例,理解JSON在项目全生命周期中的应用价值;<br>**代码优化**<br>在提示下添加序列化设置,解决中文显示和时间格式问题。 | 拓宽学生视野,让其认识到本课时学习的技术是项目云端化、移动化的关键基础。 |
|
||||||
|
| **总结与展望**<br>(3分钟) | 总结本课时完成的项目模块、知识要点回顾、预告后续云平台对接任务。 | **模块总结**<br>总结本课时为项目增加的数据标准化能力,强调JSON是连接本地系统与云端的桥梁;<br>**知识梳理**<br>回顾序列化与反序列化的核心方法和应用场景;<br>**任务预告**<br>预告下节课将学习MQTT协议,将JSON数据发送到云平台。 | **成果检查**<br>检查自己生成的JSON文件格式是否规范;<br>**知识归纳**<br>整理JSON处理的关键步骤和注意事项。 | 帮助学生建立完整的项目技术栈认知,明确当前技术在项目链条中的位置与作用。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能温室监控系统 - JSON数据交换模块
|
||||||
|
├─ 核心任务:数据格式标准化,对接云平台
|
||||||
|
├─ 技术方案:C# + Newtonsoft.Json
|
||||||
|
├─ 关键步骤:
|
||||||
|
│ 1. 设计数据模型类(SensorDataModel)
|
||||||
|
│ 2. 对象→JSON: JsonConvert.SerializeObject()
|
||||||
|
│ 3. JSON→对象: JsonConvert.DeserializeObject()
|
||||||
|
│ 4. 保存JSON到文件(为上传云平台准备)
|
||||||
|
├─ 典型应用:MQTT消息、HTTP API、数据日志
|
||||||
|
└─ 项目收益:数据可跨平台交换,为云端化铺路
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合"为项目建立标准化数据交换能力"这一阶段目标,约90%的学生能够成功创建数据模型类并实现JSON序列化操作,生成符合规范的JSON数据文件。学生通过在线工具验证JSON格式,直观理解了"对象转文本"的过程。多数学生能够将JSON处理无缝集成到现有数据采集流程中,实现数据的双重保存(数据库+JSON文件)。部分学生对"为什么需要序列化"的理解仍停留在表面,在教师引导下观看云平台API案例后认识得以深化。整体上,项目实际应用驱动的教学策略效果显著。 |
|
||||||
|
| **教学反思** | 本课时成功将JSON数据处理技术融入项目的云端对接准备阶段,教学逻辑符合"本地开发→标准化→云端部署"的实际工程流程。通过对比数据库记录与JSON文本的教学手法,有效降低了格式理解难度。不足之处在于,对反序列化的应用场景讲解不够充分,学生容易认为"序列化是单向的",应增加一个实际案例,如"从配置文件读取JSON反序列化为对象"来强化双向转换的认知。此外,18分钟的实践时间对于同时完成类设计、序列化、文件操作三个环节略显紧张,建议提前准备数据模型类的代码模板,让学生重点练习序列化调用和文件保存,提高课堂效率。后续可结合MQTT课时,让学生亲眼看到JSON数据被成功上传到云平台,进一步强化本课时技术的价值。 |
|
||||||
25
data/C#/16.md
Normal file
25
data/C#/16.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# 智能教室环境监测系统——项目启动与通信连接建立 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能教室环境监测系统——项目启动与通信连接建立** |
|
||||||
|
|---------|-------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:了解串口通信的基本概念(波特率、端口号),理解上位机与下位机的协作关系,知道WinForms在物联网项目中的作用。<br>**技能目标**:能够使用Visual Studio创建WinForms项目,正确配置SerialPort控件参数,编写代码实现串口的打开与关闭,为项目建立稳定的通信基础。<br>**素养目标**:培养项目规划意识和严谨的参数配置习惯,体验物联网项目开发的完整流程。 |
|
||||||
|
| **教学重难点** | **重点**:WinForms项目创建、SerialPort控件的属性配置与基本操作。<br>**难点**:理解串口通信参数(波特率、数据位、停止位)的含义及其与硬件的匹配关系。 |
|
||||||
|
| **教学资源准备** | 多媒体课件、项目演示视频;Visual Studio 2019/2022;已烧录测试程序的Arduino Uno开发板及USB线;硬件连接示意图。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| 1.**项目情境导入**<br>(5分钟) | 展示智慧校园场景,提出"智能教室环境监测系统"项目总目标,分析项目需要解决的核心问题。 | **情境创设**<br>播放智慧教室视频,展示已完成的项目成果界面,提问:"要实现这样的监控系统,我们第一步要解决什么技术问题?"<br>**任务发布**<br>明确本课时任务:建立电脑与Arduino之间的通信连接。 | **观察思考**<br>观看视频,了解项目全貌与实际应用价值;<br>**讨论交流**<br>小组讨论项目启动的首要技术问题,认识到"通信连接"是基础。 | 通过真实项目场景激发学生兴趣,明确本课时在整个项目中的关键地位,建立项目全局观。 |
|
||||||
|
| 2.**新知探究**<br>(15分钟) | 串口通信基本原理;WinForms项目结构;SerialPort类的核心属性与方法。 | **概念讲解**<br>讲解上位机/下位机概念、串口通信原理,重点说明波特率、端口号等参数的意义;<br>**操作演示**<br>演示创建WinForms项目、设计简洁界面(标签、按钮、文本框)、添加SerialPort控件到工具箱,配置其属性(PortName、BaudRate等)。 | **聆听记录**<br>听讲并记录关键参数(波特率9600、数据位8、停止位1),理解参数匹配的重要性;<br>**同步操作**<br>跟随教师演示,在自己电脑上创建项目"ClassroomMonitor",设计基础界面。 | 将抽象的通信概念具体化为项目必需的技术手段,通过可视化控件降低编程门槛,快速切入项目开发。 |
|
||||||
|
| 3.**项目实践**<br>(18分钟) | 编写串口打开/关闭功能代码,测试与Arduino的通信连接。 | **任务分解**<br>将实践任务分解为:①获取可用端口列表 ②编写"打开串口"按钮事件 ③编写"关闭串口"按钮事件 ④异常处理;<br>**巡回指导**<br>巡视学生操作,对共性问题进行集中讲解,个别指导硬件连接与参数配置。 | **编码实践**<br>根据任务清单,编写关键代码:`serialPort1.Open()`、`serialPort1.Close()`等,调试程序;<br>**硬件连接**<br>连接Arduino与电脑,在"设备管理器"中查看端口号,测试通信连接。 | 以明确的项目子任务驱动编程实践,在真实硬件环境中验证通信效果,增强项目开发的真实感和成就感。 |
|
||||||
|
| 4.**成果展示与总结**<br>(5分钟) | 检验通信连接效果,总结本课时完成的项目里程碑。 | **成果验收**<br>邀请2-3组学生演示成功打开/关闭串口的操作;<br>**要点总结**<br>总结串口通信的关键要素,强调"参数匹配"的重要性,预告下节课任务:接收并显示传感器数据。 | **展示分享**<br>展示自己的运行结果,分享遇到的问题与解决方法;<br>**反思提炼**<br>回顾本课时掌握的核心技能,明确下节课的项目目标。 | 通过成果展示肯定学生努力,建立项目阶段性成就感,同时为后续课时做好衔接与铺垫。 |
|
||||||
|
| 5.**安全与规范提醒**<br>(2分钟) | 强调硬件操作安全规范与代码规范。 | **安全强调**<br>提醒学生USB接口轻插轻拔、避免带电拔插,代码中必须进行异常处理防止程序崩溃。 | **聆听记录**<br>认真听讲,记录安全操作要点。 | 培养学生在项目开发中的安全意识与规范意识,为后续硬件操作奠定良好习惯。 |
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合"建立通信连接"这一项目启动阶段目标,85%以上学生能够成功创建WinForms项目、配置SerialPort控件并实现串口的打开与关闭,完成了项目的第一个里程碑。学生对项目整体框架有了清晰认知,课堂参与度高,硬件操作规范。少数学生在端口号识别上需要额外指导。 |
|
||||||
|
| **教学反思** | 本课时成功将串口通信这一关键技术置于"智能教室监测系统"的项目启动阶段,目标明确,学生角色代入感强。通过项目演示视频有效激发了学习动机。不足之处:部分学生对"波特率"等参数仍停留在机械记忆,后续应设计参数不匹配的对比实验,加深理解。另外,在异常处理代码讲解上略显仓促,今后应预留更多时间让学生理解try-catch的实际意义。整体而言,项目驱动的框架让知识学习更具指向性。 |
|
||||||
25
data/C#/17.md
Normal file
25
data/C#/17.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# 智能教室环境监测系统——数据接收与解析显示 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能教室环境监测系统——数据接收与解析显示** |
|
||||||
|
|---------|-------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解串口数据接收的事件驱动机制,掌握字符串解析与数据提取的基本方法,了解数据格式约定在项目中的重要性。<br>**技能目标**:能够编写SerialPort的DataReceived事件处理程序,正确解析Arduino发送的温湿度数据(格式:T:25.5,H:60.2),并将数据显示在界面标签或文本框中,实现项目的数据感知功能。<br>**素养目标**:培养跨线程操作UI的安全编程意识,养成制定并遵守数据协议的良好习惯。 |
|
||||||
|
| **教学重难点** | **重点**:DataReceived事件的编写、字符串分割与数据提取、界面控件的数据更新。<br>**难点**:理解事件驱动编程模型,解决跨线程访问UI控件的问题(使用Invoke或CheckForIllegalCrossThreadCalls)。 |
|
||||||
|
| **教学资源准备** | 第1课时完成的项目工程;已烧录DHT11数据采集程序的Arduino(持续发送温湿度数据);数据格式协议文档;调试工具(串口助手)。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| 1.**复习导入与任务明确**<br>(5分钟) | 回顾上节课建立的通信连接,明确本课时要实现"接收并显示数据"这一项目核心功能。 | **提问引导**<br>提问:"通信通道已建立,Arduino正在不断发送温湿度数据,我们如何接收并显示这些数据?"<br>**任务发布**<br>展示Arduino发送的数据格式(T:25.5,H:60.2),明确本课时任务。 | **回顾思考**<br>回顾串口打开操作,思考数据接收的实现方式;<br>**明确目标**<br>理解本课时要完成的项目功能:让界面实时显示温湿度数值。 | 建立新旧知识的连接,强调本课时任务是项目功能实现的关键一步,明确"接收-解析-显示"的技术路线。 |
|
||||||
|
| 2.**新知探究**<br>(15分钟) | 事件驱动编程模型;SerialPort的DataReceived事件;字符串分割方法(Split);跨线程UI访问问题及解决方案。 | **概念讲解**<br>讲解事件驱动机制:当串口接收到数据时自动触发DataReceived事件;介绍字符串处理方法Split、Substring等;<br>**难点突破**<br>重点讲解跨线程问题:DataReceived事件运行在后台线程,不能直接访问UI控件,演示使用`Control.Invoke`或设置`CheckForIllegalCrossThreadCalls=false`的方法;<br>**代码演示**<br>演示编写DataReceived事件处理程序的完整流程。 | **聆听记录**<br>记录事件处理程序的基本结构和字符串处理方法;<br>**理解机制**<br>理解"事件自动触发"与"跨线程访问"的概念,记录解决方案。 | 将抽象的事件驱动概念具体化为"数据到达自动响应"的机制,通过演示让学生理解项目中数据流动的完整过程。 |
|
||||||
|
| 3.**项目实践**<br>(18分钟) | 编写数据接收、解析与显示的完整代码,在界面上实时更新温湿度数据。 | **任务分解**<br>将实践任务分解为:①双击SerialPort控件添加DataReceived事件 ②读取串口数据 ③按协议解析数据(Split分割) ④更新界面标签显示;<br>**关键指导**<br>强调数据格式匹配的重要性,提示使用try-catch处理异常数据;<br>**巡回辅导**<br>观察学生编码过程,对跨线程问题进行针对性指导。 | **编码实现**<br>根据任务清单编写代码:`serialPort1.ReadLine()`,使用`Split(':')`和`Split(',')`提取温度和湿度值;<br>**调试验证**<br>连接硬件,运行程序,观察界面是否正确显示实时数据,调试解决报错。 | 以明确的项目功能目标驱动编程实践,让学生在真实数据环境中验证代码逻辑,建立"协议-解析-显示"的完整认知。 |
|
||||||
|
| 4.**成果展示与优化**<br>(5分钟) | 展示数据接收效果,讨论可能的异常情况及优化方案。 | **成果展示**<br>邀请学生演示实时数据显示效果;<br>**问题讨论**<br>引导讨论:如果数据格式不匹配会发生什么?如何通过异常处理提升程序健壮性?<br>**任务预告**<br>预告下节课任务:使用定时器实现数据的定时采集。 | **展示交流**<br>演示自己的运行结果,观察温湿度数值的实时变化;<br>**思考改进**<br>思考并提出程序优化建议,如数据校验、格式容错等。 | 通过成果展示强化项目阶段性成就,通过问题讨论培养学生的工程思维和代码健壮性意识。 |
|
||||||
|
| 5.**课堂小结**<br>(2分钟) | 总结本课时完成的项目功能与核心技术要点。 | **要点回顾**<br>总结事件驱动编程、字符串解析、跨线程访问三个核心知识点,强调数据协议在项目中的重要性。 | **归纳总结**<br>回顾并记录本课时的关键代码片段与技术要点。 | 帮助学生梳理知识脉络,巩固项目关键技术,为后续课时做好准备。 |
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合"实现数据感知"这一项目阶段目标,约80%学生能够成功编写DataReceived事件处理程序并正确解析显示温湿度数据,完成了项目数据采集与显示的基础功能。学生对事件驱动机制有了初步理解,能够按照约定的数据协议进行解析。部分学生在跨线程问题上仍需个别辅导,但整体上项目功能实现效果良好。 |
|
||||||
|
| **教学反思** | 本课时将事件驱动编程和字符串处理技术融入"数据接收显示"这一具体项目任务,学生学习目标明确。通过真实硬件数据验证,学生能够直观看到代码效果,成就感强。不足之处:跨线程访问这一难点讲解时间偏紧,部分学生理解不够深入,采用简化方案(CheckForIllegalCrossThreadCalls)虽降低了难度但未能充分体现规范性。今后应考虑设计专门的对比实验,让学生先遇到错误再引出解决方案,印象会更深刻。另外,应增加对异常数据处理的实践时间,提升程序健壮性。 |
|
||||||
25
data/C#/18.md
Normal file
25
data/C#/18.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# 智能教室环境监测系统——定时器实现实时数据刷新 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能教室环境监测系统——定时器实现实时数据刷新** |
|
||||||
|
|---------|-------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解定时器(Timer)的工作原理与应用场景,掌握Timer控件的核心属性(Interval、Enabled),了解定时采集在项目数据监控中的实际意义。<br>**技能目标**:能够在现有项目中添加Timer控件,设置合理的采集间隔,编写Tick事件处理程序实现定时数据刷新,并增加采集时间戳显示功能,完善项目的实时监控能力。<br>**素养目标**:培养合理规划系统资源的意识,体验通过定时机制实现自动化监控的项目价值,养成注重用户体验的习惯。 |
|
||||||
|
| **教学重难点** | **重点**:Timer控件的属性配置、Tick事件的编写、定时触发串口数据请求或读取的逻辑实现。<br>**难点**:理解定时器的工作机制,合理设置采集间隔以平衡数据实时性与系统负载,处理定时器与串口事件的协同工作。 |
|
||||||
|
| **教学资源准备** | 第2课时完成的项目工程(已实现数据接收与显示);优化后的Arduino程序(支持主动请求或持续发送);系统资源监控工具演示课件。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| 1.**问题情境导入**<br>(5分钟) | 分析现有项目的不足:数据显示是被动接收,缺乏主动控制;引出"定时自动采集"的项目需求。 | **问题引导**<br>提问:"目前我们的系统是被动接收数据,如果我们想每隔3秒主动采集一次数据,或者定时刷新显示,该怎么实现?"<br>**需求分析**<br>展示实际应用场景:监控系统需要按固定周期刷新数据,强调定时机制的重要性。 | **问题思考**<br>思考现有系统的局限性,讨论如何实现"定时自动刷新";<br>**需求理解**<br>理解本课时要为项目增加的功能:定时控制数据采集节奏。 | 从项目实际需求出发,让学生认识到定时器在自动化监控中的关键作用,建立学习新知识的内在动力。 |
|
||||||
|
| 2.**新知探究**<br>(12分钟) | Timer控件的基本概念;Timer的核心属性(Interval毫秒值、Enabled开关);Tick事件的触发机制;定时器在项目中的应用策略。 | **概念讲解**<br>讲解Timer控件的工作原理:每隔Interval毫秒触发一次Tick事件,介绍Interval属性(如3000表示3秒)和Enabled属性;<br>**策略分析**<br>讨论不同采集间隔的影响:间隔太短增加系统负担,间隔太长降低实时性,引导学生思考合理值;<br>**代码演示**<br>演示在项目中添加Timer控件,设置属性,编写Tick事件处理程序(在其中读取并更新数据)。 | **聆听记录**<br>记录Timer控件的关键属性与事件,理解定时触发的机制;<br>**参数讨论**<br>参与讨论,提出合理的采集间隔建议(如3-5秒);<br>**同步操作**<br>跟随演示,在自己的项目中添加Timer控件并初步配置。 | 通过讲解与演示,让学生掌握Timer的核心技术,并通过参数讨论培养其系统设计思维,将技术学习与项目实际需求结合。 |
|
||||||
|
| 3.**项目实践**<br>(20分钟) | 在项目中集成Timer控件,实现定时数据刷新,并增加时间戳显示功能,优化用户界面体验。 | **任务分解**<br>分解任务:①添加Timer控件并设置Interval=3000,Enabled=True ②在Tick事件中编写数据读取逻辑(如发送请求命令或直接读取缓存数据) ③添加Label显示当前采集时间(DateTime.Now) ④测试定时效果;<br>**技术指导**<br>指导学生处理定时器与串口事件的协同:可在Tick事件中发送请求指令,在DataReceived中接收数据,或直接在Tick中读取最新数据;<br>**巡回辅导**<br>观察学生实现过程,解答数据同步、界面卡顿等问题。 | **编码实现**<br>按任务清单实现定时刷新功能,编写Tick事件处理代码;<br>**功能测试**<br>运行程序,观察数据是否按设定间隔自动刷新,验证时间戳显示是否正确;<br>**问题调试**<br>调试解决可能出现的问题,如定时器未启动、数据不更新等。 | 以明确的项目功能增强任务驱动实践,让学生在真实项目环境中体验定时器的实际效果,建立自动化控制的概念。 |
|
||||||
|
| 4.**优化与展示**<br>(6分钟) | 优化界面布局,增加启动/停止监控按钮,展示定时监控效果。 | **优化建议**<br>建议学生增加"启动监控"和"停止监控"按钮,通过`timer1.Enabled=true/false`控制定时器,提升用户交互体验;<br>**成果展示**<br>邀请学生演示定时刷新效果,展示时间戳与数据的同步变化。 | **界面优化**<br>添加控制按钮,完善用户交互功能;<br>**成果分享**<br>演示自己的监控系统,观察定时采集的稳定性,交流实现心得。 | 通过功能优化培养学生的产品思维和用户体验意识,通过成果展示强化项目阶段性成就感。 |
|
||||||
|
| 5.**总结与展望**<br>(2分钟) | 总结定时器在项目中的作用,预告下节课任务:将数据可视化为历史曲线。 | **要点总结**<br>总结Timer控件的核心用法,强调定时机制实现了"自动化监控",是物联网项目的重要特征;<br>**任务预告**<br>预告下节课将学习Chart控件,绘制温湿度变化曲线,实现数据的可视化分析。 | **归纳反思**<br>总结本课时学到的技术与实现的功能,期待下节课的数据可视化学习。 | 帮助学生梳理知识,强化项目进展意识,为最后一个课时的数据可视化做好铺垫。 |
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合"实现自动化实时监控"这一项目阶段目标,约90%学生能够成功配置Timer控件并实现定时数据刷新功能,为项目增加了时间戳显示和启停控制,完成了从"被动接收"到"主动监控"的功能升级。学生对定时器工作机制有了清晰认识,能够合理设置采集间隔,课堂实践参与度高,项目系统性进一步增强。 |
|
||||||
|
| **教学反思** | 本课时成功将Timer控件的教学融入"定时自动采集"这一具体项目功能增强任务,学生学习目标明确,实践效果显著。通过问题导入,学生能够从现有系统的不足中自然引出定时器的需求,学习动机强。不足之处:对于定时器与串口事件的协同工作机制,部分学生理解不够深入,出现数据重复读取或遗漏的情况,今后应设计专门的流程图或时序图帮助学生理清逻辑。另外,关于采集间隔的合理性讨论可以更深入,引入资源消耗的概念,培养学生的系统优化思维。整体而言,定时器的引入让项目更具实用价值,学生成就感显著提升。 |
|
||||||
25
data/C#/19.md
Normal file
25
data/C#/19.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# 智能教室环境监测系统——数据可视化与历史曲线绘制 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能教室环境监测系统——数据可视化与历史曲线绘制** |
|
||||||
|
|---------|-------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解数据可视化在项目中的重要作用,掌握Chart控件的基本结构(ChartArea、Series、DataPoint),了解折线图的绘制原理。<br>**技能目标**:能够在项目中添加并配置Chart控件,编写代码实现温湿度数据的动态添加与曲线绘制,设置合理的坐标轴范围与图例,完成项目的数据可视化分析功能,形成完整的智能监控系统。<br>**素养目标**:培养数据分析意识和图表设计的审美能力,体验数据可视化对决策支持的价值,形成完整的项目开发成就感。 |
|
||||||
|
| **教学重难点** | **重点**:Chart控件的添加与配置、Series系列的创建、DataPoint数据点的动态添加、坐标轴与图例的设置。<br>**难点**:理解Chart的层次结构(Chart-ChartArea-Series-DataPoint),处理数据点过多时的显示优化(如限制显示数量、滚动显示最新数据)。 |
|
||||||
|
| **教学资源准备** | 第3课时完成的项目工程(已实现定时数据采集);Chart控件使用示例课件;数据可视化案例展示(智慧农业、智能家居等领域的监控图表)。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| 1.**项目回顾与需求引入**<br>(5分钟) | 回顾项目已完成的功能模块,提出"数据可视化"的项目最终需求,展示实际应用中的监控图表案例。 | **功能回顾**<br>引导学生回顾项目进展:已实现通信连接、数据显示、定时采集三大功能;<br>**需求引入**<br>提问:"数字显示很直观,但如何让用户一眼看出温湿度的变化趋势?"展示智慧农业、智能家居等领域的监控曲线图,引出数据可视化的价值。 | **回顾总结**<br>回顾并总结项目已完成的功能模块,形成系统化认知;<br>**需求理解**<br>观看案例,理解图表在数据分析中的作用,认识到可视化是项目完整性的重要体现。 | 通过项目回顾建立知识体系的连贯性,通过实际案例让学生认识到数据可视化的实用价值,激发完成项目最后一环的动力。 |
|
||||||
|
| 2.**新知探究**<br>(12分钟) | Chart控件的基本结构与核心概念;Chart、ChartArea、Series、DataPoint的层次关系;折线图的配置方法;数据动态添加的实现逻辑。 | **结构讲解**<br>讲解Chart控件的四层结构:Chart容器→ChartArea绘图区→Series数据系列→DataPoint数据点,用图示清晰展现层次关系;<br>**属性介绍**<br>介绍ChartType(折线图、柱状图等)、Series的Name、Color等关键属性,讲解坐标轴(AxisX、AxisY)的设置;<br>**代码演示**<br>演示在项目中添加Chart控件,通过属性编辑器创建两个Series("温度"和"湿度"),设置为折线图类型,演示代码动态添加DataPoint的方法:`series1.Points.AddXY(x,y)`。 | **聆听记录**<br>理解Chart的层次结构,记录关键属性与方法;<br>**结构识别**<br>在教师演示中识别ChartArea、Series等组成部分;<br>**同步操作**<br>跟随演示,在项目界面中添加Chart控件,通过属性窗口创建两个Series。 | 通过结构化讲解帮助学生建立对Chart控件的整体认知,通过可视化配置降低学习难度,为后续动态添加数据打下基础。 |
|
||||||
|
| 3.**项目实践**<br>(20分钟) | 在定时器Tick事件中集成数据点添加代码,实现温湿度曲线的实时绘制,优化显示效果。 | **任务分解**<br>分解任务:①在Tick事件中,每次采集数据后添加到Chart的两个Series中 ②设置X轴为采集次数或时间,Y轴为温湿度数值 ③限制显示最近30个数据点(防止曲线过密) ④设置图例、标题、坐标轴标签,优化显示效果;<br>**关键指导**<br>指导数据点添加的代码写法,提示使用`series.Points.Count`判断数据量,超过限制时移除最早的点(`series.Points.RemoveAt(0)`);<br>**巡回辅导**<br>观察学生实现过程,帮助解决曲线不显示、坐标轴范围不合理等问题。 | **编码实现**<br>在Timer的Tick事件中添加代码,将温湿度数据添加到Chart的对应Series中,实现动态绘制;<br>**效果调试**<br>运行程序,观察曲线的实时绘制效果,调整坐标轴范围、颜色等属性,优化视觉效果;<br>**功能完善**<br>实现数据点数量限制,测试长时间运行的显示稳定性。 | 以项目收官功能为目标驱动实践,让学生在真实数据环境中看到曲线的动态生成,体验数据可视化带来的直观性,完成项目最后一块拼图。 |
|
||||||
|
| 4.**项目成果展示与评价**<br>(6分钟) | 展示完整的智能教室环境监测系统,进行项目总结与互评。 | **成果展示**<br>邀请3-4组学生演示完整的监控系统:从打开串口、启动监控到数据实时更新、曲线动态绘制的全流程;<br>**项目总结**<br>总结项目四个课时完成的完整功能链:通信→接收→定时→可视化,强调各模块的协同作用;<br>**互评交流**<br>组织学生互评,从功能完整性、界面美观性、操作流畅性等维度进行评价。 | **成果演示**<br>展示自己的完整项目系统,介绍实现的功能与技术要点;<br>**观摩学习**<br>观看其他同学作品,学习优秀设计思路;<br>**互评反思**<br>参与互评,提出改进建议,反思自己项目的优缺点。 | 通过成果展示让学生获得完整的项目开发成就感,通过互评交流促进相互学习,强化项目整体性认知。 |
|
||||||
|
| 5.**拓展与展望**<br>(2分钟) | 提出项目后续拓展方向,鼓励学生继续优化与创新。 | **拓展建议**<br>提出可能的拓展方向:数据保存到文件或数据库、设置温湿度阈值报警、开发移动端监控等;<br>**价值强调**<br>强调本项目的知识迁移价值:掌握的技术可应用于智慧农业、工业监控、智能家居等多个领域。 | **思考规划**<br>思考感兴趣的拓展方向,规划后续学习与实践计划。 | 拓宽学生视野,激发持续学习的兴趣,强化项目式学习的迁移应用价值。 |
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合"完成数据可视化"这一项目收官目标,约85%学生能够成功配置Chart控件并实现温湿度曲线的动态绘制,完成了"智能教室环境监测系统"的全部核心功能。学生能够理解Chart的层次结构,掌握数据点的动态添加方法,并通过优化显示效果提升了用户体验。项目成果展示环节学生参与度极高,成就感强,对整个项目的技术链和功能模块有了系统化认知。 |
|
||||||
|
| **教学反思** | 本课时作为项目的收官之课,成功将Chart控件的教学融入数据可视化这一实际项目需求,学生学习目标明确,实践效果显著。通过前三课时的铺垫,学生对项目整体架构有清晰认知,本课时的学习水到渠成。不足之处:对于数据点过多时的显示优化策略,部分学生理解不够深入,出现曲线过密或内存占用过大的问题,今后应设计专门的性能测试环节,让学生直观感受优化的必要性。另外,坐标轴范围的自动调整(如Y轴根据数据范围动态缩放)可作为进阶内容,供学有余力的学生探索。整体而言,四课时项目式教学达到了预期目标,学生不仅掌握了WinForms、串口通信、定时器、数据可视化等技术,更重要的是建立了完整的项目开发思维和系统性解决问题的能力,为后续更复杂的物联网项目开发奠定了坚实基础。 |
|
||||||
40
data/C#/2.md
Normal file
40
data/C#/2.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
# 智能教室环境监控系统——C#数据处理基础 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能教室环境监控系统——C#数据处理基础** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:掌握C#常用数据类型(int、double、string、bool)的特点与应用场景,理解变量的声明、赋值与使用规则。<br>**技能目标**:能够根据项目中传感器数据的特点选择合适的数据类型,编写代码实现温湿度等监控数据的存储、计算与判断功能。<br>**素养目标**:养成"数据驱动"的编程思维,培养在实际项目中规范命名变量、合理选择数据类型的职业习惯。 |
|
||||||
|
| **教学重难点** | **重点**:常用数据类型的特点与选择;变量的声明、赋值与使用;基本运算与类型转换。<br>**难点**:根据监控数据特征选择合适的数据类型;理解不同类型间的转换规则及其在项目中的应用。 |
|
||||||
|
| **教学资源准备** | Visual Studio开发环境;项目数据需求表(温度、湿度、CO₂浓度、人数的数据范围与精度要求);教学课件(含数据类型对比表);传感器规格说明书示例。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目情境回顾**<br>(5分钟) | 回顾上节课的项目架构,引出本课时任务:为C#程序准备"数据容器",学会用代码表示和处理监控数据。 | **承上启下**<br>提问:"上节课我们搭建了开发环境,但程序要处理温度、湿度这些数据,该如何在代码中'存放'它们?"<br>**需求展示**<br>展示项目数据需求表:温度(0-50℃,精确到小数)、人数(整数)等。 | **回顾思考**<br>回忆项目目标,思考数据存储问题;<br>**观察分析**<br>查看需求表,发现不同数据有不同特征(整数/小数/文字)。 | 通过项目延续性建立知识衔接,将抽象的"数据类型"概念转化为"如何表示传感器数据"的实际问题,激发学习动机。 |
|
||||||
|
| **2. 新知探究(数据类型)**<br>(15分钟) | 讲解C#四种核心数据类型及其在项目中的应用场景;演示变量声明、赋值与命名规范。 | **概念讲解**<br>结合项目数据讲解:int(人数)、double(温湿度)、string(设备名称)、bool(是否超标);<br>**代码演示**<br>演示声明变量并赋值:```int personCount = 35; double temperature = 26.5;```强调命名规范(驼峰命名法)。 | **聆听记录**<br>在笔记中建立"数据类型-项目应用"对照表;<br>**模仿操作**<br>在VS中创建控制台项目,跟随教师声明项目所需的各类变量。 | 将数据类型与项目实际数据一一对应,降低抽象概念理解难度;通过命名规范强调职业素养,为后续团队协作打基础。 |
|
||||||
|
| **3. 项目任务实践(一)**<br>(12分钟) | 编写代码实现功能:输入温湿度数据,计算日平均值,判断是否超出舒适范围并输出结果。 | **任务发布**<br>发布编程任务:"模拟处理一天4次采集的温度数据,计算平均值,判断是否在18-26℃舒适区间";<br>**关键点拨**<br>提示:使用Console.ReadLine()接收输入,需进行string到double的转换;平均值计算使用算术运算符。 | **需求分析**<br>分析任务需要哪些变量(4个温度值、1个平均值、1个判断结果);<br>**编码实现**<br>动手编写代码:声明变量→接收输入→类型转换→计算→判断→输出。 | 通过完整的小项目任务将知识点串联,让学生在"做中学";输入输出与计算结合,体验数据处理的完整流程,增强成就感。 |
|
||||||
|
| **4. 项目任务实践(二)**<br>(8分钟) | 扩展功能:增加湿度数据处理,使用bool类型判断温湿度是否同时达标,输出综合评价。 | **任务升级**<br>要求在原程序基础上增加湿度处理(舒适范围40%-60%),使用bool变量存储达标状态;<br>**巡回指导**<br>观察学生编码,重点指导逻辑运算符(&&)的使用和bool类型的输出。 | **功能扩展**<br>修改代码增加湿度变量和判断逻辑;<br>**调试测试**<br>运行程序,输入不同数据测试各种情况(都达标/仅一项达标/都不达标)。 | 通过任务迭代强化知识应用,引入bool类型和逻辑判断;测试环节培养调试思维,让学生理解程序的分支逻辑。 |
|
||||||
|
| **5. 成果展示与总结**<br>(5分钟) | 展示学生作品,总结数据类型选择原则,预告下节课将接收真实传感器数据。 | **作品点评**<br>抽取2-3名学生演示程序运行效果,点评代码规范性和逻辑正确性;<br>**知识总结**<br>强调:"数据类型决定了数据的表示方式和可执行的操作",为项目选对类型是编程基础。 | **展示交流**<br>演示自己的程序,说明设计思路;<br>**反思归纳**<br>总结本节课学会的技能,思考在完整项目中还需要处理哪些类型的数据。 | 通过展示增强学习成就感和表达能力;总结提炼核心知识,建立"为项目选择工具"的意识,为下节课的真实数据处理做铺垫。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能教室监控项目 - 数据类型应用
|
||||||
|
|
||||||
|
数据类型 项目应用 示例代码
|
||||||
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||||
|
int 整数型 人数、设备编号 int personCount = 35;
|
||||||
|
double 浮点型 温度、湿度 double temp = 26.5;
|
||||||
|
string 字符串 教室名称、时间 string room = "A101";
|
||||||
|
bool 布尔型 是否超标、状态 bool isNormal = true;
|
||||||
|
|
||||||
|
本课时任务: 学会用代码"表示"和"处理"监控数据
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合项目数据处理阶段目标评估:90%以上学生能够准确识别四种基本数据类型并说明其在项目中的应用场景,85%的学生独立完成温度数据处理程序,70%的学生成功扩展湿度判断功能。通过与项目实际数据结合,学生对抽象的数据类型概念理解明显优于传统讲授。多数学生能自觉使用有意义的变量名(如temperature而非a、b),代码规范意识初步建立。任务完成后学生普遍表现出对"处理真实传感器数据"的期待,学习内驱力显著提升。 |
|
||||||
|
| **教学反思** | 本课时成功地将C#基础语法教学融入"智能教室监控系统"的数据处理需求中,通过"为什么需要不同类型"的项目驱动问题,有效降低了概念学习的抽象度。任务设计体现阶梯性:从单一数据类型到多类型综合应用,从简单计算到逻辑判断,符合认知规律。不足之处:①部分学生在类型转换(string到double)时对Convert.ToDouble()方法理解不够深入,出现死记硬背现象,应增加"为什么需要转换"的原理讲解;②时间分配上,任务实践(二)环节略显仓促,少数学生未能完成扩展功能,建议将湿度判断作为课后强化练习,课堂聚焦温度处理的完整实现。改进方向:设计"数据类型选择决策树"教具,帮助学生建立"看数据特征→选数据类型"的思维模式;增加结对编程环节,让能力强的学生带动学习困难者。整体上,项目任务的真实性和趣味性有效提升了课堂参与度,验证了项目式教学在编程基础课中的有效性。 |
|
||||||
42
data/C#/3.md
Normal file
42
data/C#/3.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# 智能教室环境监控系统——智能判断与批量处理 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能教室环境监控系统——智能判断与批量处理** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:掌握if/switch选择结构和for/while循环结构的语法规则与执行逻辑,理解其在项目数据处理中的应用场景。<br>**技能目标**:能够使用if语句实现监控数据的阈值判断与报警,使用循环结构批量处理多组传感器数据,编写"智能判断与统计"模块代码。<br>**素养目标**:建立"让程序自动决策"的算法思维,培养通过代码实现业务逻辑的工程化能力和严谨的逻辑推理习惯。 |
|
||||||
|
| **教学重难点** | **重点**:if条件判断的语法与嵌套使用;for循环的三要素与计数控制;循环中的累加统计。<br>**难点**:根据项目需求设计合理的判断条件;在循环中实现数据的累加、计数与平均值计算;理解循环终止条件的设置。 |
|
||||||
|
| **教学资源准备** | Visual Studio开发环境;项目业务逻辑表(温度阈值18-26℃、CO₂浓度分级标准);流程图绘制工具;模拟传感器数据集(24小时温度记录)。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目需求导入**<br>(5分钟) | 回顾已实现的数据存储功能,提出新需求:监控系统要能"自动判断"数据是否异常,并"批量处理"一天的历史数据。展示真实监控场景中的决策需求。 | **需求引入**<br>播放智能教室监控场景视频,演示:"当温度超过26℃时,系统自动发出'开启空调'提示;当需要分析全天温度变化趋势时,如果手动逐个查看24个数据点,效率太低..."<br>**问题驱动**<br>提问:"我们的监控系统目前只能存储数据,如何让它'自己做判断'和'批量处理任务'?现实中哪些场景需要程序自动决策?" | **情境理解**<br>观看视频,代入项目管理员角色,体会手动判断的低效;<br>**需求分析**<br>小组讨论并列举项目中需要自动判断的场景(温度报警、湿度调节、CO₂通风提醒等),思考批量处理的必要性。 | 通过真实项目场景视频创设问题情境,让学生体会"决策自动化"和"批量处理"的实际价值;通过小组讨论激活已有经验,为引入控制结构做好认知准备,增强学习的目标感。 |
|
||||||
|
| **2. 选择结构探究**<br>(12分钟) | 系统讲解if单分支、双分支、多分支语法;介绍switch多路分支的应用场景;结合项目业务逻辑演示温度报警与CO₂分级代码实现。 | **语法讲解**<br>讲解if语法结构,以温度判断为例:`if(temp > 26) { Console.WriteLine("温度过高!请开启空调"); }`强调条件表达式(布尔值)、花括号代码块、缩进规范;讲解else if多分支处理不同温度区间;<br>**对比演示**<br>演示用switch实现CO₂浓度分级:`switch(level) { case 1: "空气优"; case 2: "空气良"; case 3: "需通风"; }`对比if与switch的选择原则:连续区间用if,离散分类用switch;<br>**流程可视化**<br>在黑板绘制if判断流程图,标注条件成立/不成立的两条执行路径。 | **聆听记录**<br>理解if的执行流程,在笔记中记录语法要点和判断流程图;<br>**模仿操作**<br>在VS中创建控制台程序,编写代码:输入一个温度值,根据阈值(18℃、26℃)输出"偏冷/正常/偏热"三种提示信息,运行测试不同输入值;<br>**对比思考**<br>思考项目中哪些场景适合用if,哪些适合用switch。 | 通过项目真实业务逻辑(温度报警、浓度分级)将抽象语法具象化,降低学习难度;流程图可视化帮助学生理解程序执行路径;即学即练巩固语法,对比教学培养工具选择意识,为复杂判断逻辑打基础。 |
|
||||||
|
| **3. 循环结构探究**<br>(10分钟) | 详细讲解for循环的语法结构与执行过程;介绍while循环的应用场景;演示使用for循环批量处理24小时温度数据的完整流程。 | **概念讲解**<br>讲解for循环的三要素:`for(int i=0; i<24; i++)`——初始化(起点)、条件判断(终点)、迭代表达式(步长),用"24小时自动采集数据"场景类比;<br>**代码演示**<br>演示完整代码:声明变量sum和数组temps→用for循环24次输入温度→循环体内累加`sum += temps[i]`→循环结束后计算平均值`avg = sum/24`并输出,强调循环变量i的作用(既是计数器,也是数组索引);<br>**执行追踪**<br>单步演示:当i=0时执行什么,i=1时执行什么,帮助学生理解"自动重复"的本质。 | **理解分析**<br>观察循环执行过程,在笔记中记录i从0变化到23的全过程,理解"循环24次"的实现机制;<br>**动手实践**<br>编写代码:用for循环输出1到10的数字(简单任务),体验循环的基本特性;然后改写为"输入5个数字并求和"(进阶任务),掌握循环中的累加操作;<br>**概念对比**<br>听教师简要介绍while循环的"先判断后执行"特点。 | 通过"批量处理传感器数据"的项目需求引入循环,让学生理解"自动重复"的价值;从简单计数任务开始,逐步过渡到累加统计,符合认知梯度;单步追踪和可视化演示降低理解难度,为综合应用打基础。 |
|
||||||
|
| **4. 综合项目任务**<br>(13分钟) | 编写完整的监控数据智能处理程序:输入一天多组温度数据,综合运用循环与判断结构实现统计分析与异常检测功能。 | **任务发布**<br>明确项目任务:"开发监控系统的数据分析模块——输入一天8组温度数据(每3小时采集一次),自动统计平均值、最高值(及出现时刻)、最低值(及出现时刻),并统计超过26℃的异常次数";<br>**分步指导**<br>引导任务分解:①定义必需变量(数组temps、sum累加器、maxTemp/minTemp最值变量、maxHour/minHour时刻变量、overCount计数器);②用for循环8次输入数据;③在循环体内同时完成累加、最值判断(if更新max/min及对应索引)、超标计数;④循环结束后计算平均值并格式化输出统计报告;<br>**关键点提示**<br>提醒:最值初始化应设为第一个数据,避免用0初始化导致错误;索引i*3表示实际小时数。 | **需求拆解**<br>分析任务目标,在草稿纸上列出所需变量及其作用,绘制算法流程草图;<br>**编码实现**<br>按步骤编写代码:声明变量→for循环输入数据→循环内实现if(temps[i]>maxTemp)更新最大值和时刻、if(temps[i]>26)累加计数器→循环外计算平均并输出"平均温度XX℃,最高温度XX℃出现在XX时,最低温度XX℃出现在XX时,共XX次超标";<br>**调试优化**<br>运行测试,输入模拟数据,检查输出是否正确;遇到逻辑错误时,用断点或输出语句调试,修正算法。 | 通过完整的项目子任务将选择结构与循环结构深度融合,体验真实的算法设计全流程;任务分解降低复杂度,培养"大问题拆解为小步骤"的工程能力;强调变量初始化、索引映射等细节,培养严谨的编程习惯;调试环节提升问题解决能力。 |
|
||||||
|
| **5. 成果展示与拓展**<br>(5分钟) | 展示优秀学生作品,总结控制结构在项目智能化中的核心价值,布置拓展任务,预告下节课内容。 | **作品点评**<br>选取2-3个典型作品投屏展示运行效果,点评算法设计亮点(如最值查找的if逻辑、统计报告的格式化输出)和代码规范性,指出常见错误(如循环条件写错、累加器未初始化等);<br>**知识升华**<br>总结提炼:"选择结构让程序拥有'判断力',循环结构让程序拥有'执行力',二者结合就是监控系统的'智能大脑'。今天我们实现了数据的自动分析,项目向真正的智能化迈进了一大步!";<br>**任务布置**<br>课后优化任务:在现有代码基础上增加湿度数据的同步处理(双变量统计);预告下节课将学习数组和集合,实现更大规模的历史数据管理。 | **展示交流**<br>主动演示自己的程序运行效果,讲解统计算法的设计思路和遇到的问题及解决方法;<br>**反思总结**<br>对比课前"手动判断"与课后"自动决策"的差异,体会控制结构对项目功能提升的支撑作用,思考还有哪些监控场景可以用判断和循环优化;<br>**记录任务**<br>记录课后任务要求,思考如何扩展到多传感器数据处理。 | 通过作品展示强化学生成就感和表达能力,典型错误点评帮助全班避免共性问题;通过总结提炼控制结构的本质价值和项目意义,升华知识理解;课后任务引导知识迁移和主动探索,为下节课做衔接。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能监控系统 - 控制结构应用
|
||||||
|
|
||||||
|
选择结构(让程序做判断) 循环结构(让程序批量处理)
|
||||||
|
───────────────────── ─────────────────────
|
||||||
|
if(temp > 26) for(int i=0; i<24; i++)
|
||||||
|
开启空调提示 累加温度值
|
||||||
|
else if(temp < 18) → 统计最值
|
||||||
|
开启暖气提示 → 计数超标次数
|
||||||
|
else while(持续监控)
|
||||||
|
温度正常 检测异常则退出
|
||||||
|
|
||||||
|
本课时任务: 让监控系统"会判断、能统计"
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 85%以上学生能够正确编写if条件判断实现温度报警功能,75%的学生独立完成8组数据的循环统计任务。通过"让程序自动决策"的项目需求,学生对控制结构的价值理解深刻,多数能够主动分解复杂问题并逐步实现,算法思维初步形成。 |
|
||||||
|
| **教学反思** | 本课时成功将控制结构与项目智能判断功能结合。不足:综合任务时间略紧张,约30%学生未完成全部功能,建议将"最值判断"作为选做;循环变量作用域讲解不足,部分学生在循环外误用;while循环缺少实践。改进:设计"控制结构选择决策表";增加循环执行过程可视化动画。 |
|
||||||
46
data/C#/4.md
Normal file
46
data/C#/4.md
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
# 智能教室环境监控系统——数据集中管理 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能教室环境监控系统——数据集中管理** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:掌握一维数组的声明、初始化与访问方法,理解List<T>集合的动态特性与常用操作,了解数组与集合在项目中的应用场景差异。<br>**技能目标**:能够使用数组存储和管理一天24小时的多传感器数据,使用List集合动态记录异常数据,编写代码实现数据的遍历、查找、排序等操作。<br>**素养目标**:建立"结构化数据管理"的工程思维,养成根据数据特点(固定/动态)选择合适数据结构的专业习惯。 |
|
||||||
|
| **教学重难点** | **重点**:数组的声明、初始化与索引访问;结合循环遍历数组;List集合的Add、Remove等基本操作。<br>**难点**:理解数组下标从0开始的规则及越界问题;区分数组(固定长度)与List(动态长度)的使用场景;在项目中灵活选择数据结构。 |
|
||||||
|
| **教学资源准备** | Visual Studio开发环境;项目数据样例(一周温湿度数据表);数组内存结构示意图;List<T>与数组对比表;教学课件。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 问题情境导入**<br>(6分钟) | 回顾上节课用单个变量存储数据的方式,提出项目新需求:要存储一周(168小时)的温度数据进行趋势分析,如何避免声明temp1到temp168这样的"灾难代码"? | **痛点展示**<br>在屏幕上展示一段"灾难代码":声明temp1、temp2...temp50等几十个变量,然后逐个赋值、逐个比较,提问:"这样写代码现实吗?如果要存储一年的数据怎么办?有哪些问题?"<br>**需求引导**<br>说明项目升级需求:"监控系统现在要能存储一周甚至一个月的历史数据,进行趋势分析、生成统计报表,用单个变量管理方式根本不可行,我们需要一种更高效的'批量数据管理方案'";<br>**启发思考**<br>提问:"现实中仓库管理员如何管理几百种货物?不是给每个货物单独命名,而是用货架编号统一管理。编程中有类似方法吗?" | **观察反思**<br>观察"灾难代码",发现问题:变量命名混乱、代码冗长、难以维护、无法灵活扩展;<br>**需求理解**<br>理解项目对"批量数据存储与管理"的迫切需求,认识到单个变量方式的局限性;<br>**联系生活**<br>联想生活中的"批量管理"场景(图书馆书架、停车场车位等),思考编程中的解决方案。 | 通过极端的"反面教材"制造强烈的认知冲突,让学生深刻体会到现有方法的不足;通过生活类比(货架管理)降低抽象概念的理解难度;通过项目实际需求(历史数据分析)引出数组概念,使学习具有明确的目标感和问题解决导向。 |
|
||||||
|
| **2. 数组知识探究**<br>(12分钟) | 系统讲解数组的概念、声明与初始化语法;演示通过索引访问和修改数组元素;结合for循环实现数组的遍历与批量处理。 | **概念讲解**<br>讲解数组定义:"数组是存储同类型数据的有序集合,就像一排连续的储物柜",用PPT展示内存结构图(连续的方格,每个方格有编号和数据);讲解声明语法:`double[] temps = new double[24];` 解释:double[]表示温度类型数组、temps是数组名、new创建24个空间;<br>**语法演示**<br>演示索引访问:`temps[0] = 25.5;` 强调:下标从0开始,temps[0]表示第1小时的温度,temps[23]是第24小时,temps[24]会越界报错!演示读取:`Console.WriteLine(temps[0]);`<br>**循环结合**<br>演示核心操作:用for循环批量输入24个温度值,用for循环累加求平均,边演示边强调"循环变量i既是计数器也是数组下标"这一关键点。 | **聆听理解**<br>理解数组的"容器"本质,在笔记中绘制数组内存结构简图,记录声明语法、索引访问规则(下标从0开始、不能越界);<br>**模仿操作**<br>打开VS,创建控制台程序:①声明存储8个湿度值的数组`double[] hums = new double[8];` ②用for循环输入8个数据;③用for循环输出每个元素,观察下标与实际位置的对应关系;<br>**边界测试**<br>尝试访问hums[8],观察越界错误提示,加深对数组长度限制的理解。 | 通过内存结构图和生活类比(储物柜)可视化数组概念,降低抽象思维难度;通过强调"下标从0开始"和"越界错误"两个关键点,预防常见错误;通过"循环+数组"的结合演示,突出数组的批量处理优势,这是数组的核心价值;即学即练巩固语法,边界测试培养严谨习惯。 |
|
||||||
|
| **3. 数组综合应用**<br>(10分钟) | 编写完整的项目任务:使用数组存储一天24小时的温度数据,实现查找最高/最低温度及其出现时刻,统计超标小时数等综合功能。 | **任务发布**<br>明确项目任务:"开发监控系统的历史数据分析功能——用数组存储24小时温度数据,找出全天最热和最冷的时刻(输出具体小时数和温度值),统计有多少小时温度超过26℃";<br>**思路点拨**<br>引导算法设计:①需要哪些变量?(数组temps、最大值maxTemp、最小值minTemp、最大值索引maxHour、最小值索引minHour、超标计数器overCount)②如何查找最值?用for循环遍历数组,用if判断更新最大最小值及其索引;③如何记录时刻?索引就是小时数(0-23时);<br>**关键提示**<br>提醒常见错误:最值初始化应设为temps[0]而非0,否则如果所有温度都大于0会出错;索引范围是0-23,输出时可能需要转换为1-24时的表达方式。 | **算法设计**<br>在草稿纸上分析任务,列出所需变量及其用途,绘制算法流程图(输入数据→遍历查找最值→统计超标→输出结果);<br>**编码实现**<br>分步编写代码:①声明数组和辅助变量;②用for循环24次输入温度;③用for循环遍历数组,在循环体内用if(temps[i]>maxTemp)更新最大值和对应索引maxHour=i,用if(temps[i]<minTemp)更新最小值,用if(temps[i]>26)累加计数器;④输出结果:`Console.WriteLine($"最热时刻:{maxHour}时,温度{maxTemp}℃");`<br>**调试验证**<br>运行程序,输入测试数据(如0时20℃、14时28℃、18时24℃...),检查输出是否正确,若有错误则逐行排查逻辑。 | 通过完整的项目子任务强化数组操作技能,将查找、统计等算法与数组结合;通过"查找最值并记录索引"这一经典算法,培养"数据+位置"的双重思维;通过输出具体时刻增强项目真实感和成就感;通过调试环节培养问题定位能力,强化"测试-修正"的工程习惯。 |
|
||||||
|
| **4. 集合知识拓展**<br>(10分钟) | 介绍List<T>集合的动态特性,讲解Add、Count、Remove等常用方法;对比数组与List的应用场景,培养数据结构选择意识。 | **需求引入**<br>提出新问题:"刚才我们用数组统计超标次数,如果项目经理还要求'把所有超标的温度值都记录下来,生成报警清单',但我们不知道会有多少个超标数据,数组长度必须提前固定,怎么办?"引出List的动态特性;<br>**语法演示**<br>演示List的使用:①声明:`List<double> overTemps = new List<double>();` 解释:尖括号<double>指定存储温度类型,初始长度为0;②添加数据:`overTemps.Add(28.5);` 演示连续Add多次,集合自动扩容;③访问数据:`overTemps[0]`与数组类似;④获取数量:`overTemps.Count`;<br>**场景对比**<br>总结:"数据量固定(如24小时)用数组,效率高;数据量不确定(如报警记录)用List,灵活方便"。 | **理解对比**<br>理解List的核心特点:"可自动扩容、动态增删",与数组的"固定长度"形成对比认知,记录两种数据结构的优缺点和适用场景;<br>**实践操作**<br>修改上一任务代码:①声明List<double> alertList;②在遍历数组的循环中,当检测到temps[i]>26时,不仅计数,还执行`alertList.Add(temps[i]);` ③循环结束后,用foreach遍历List输出所有报警温度:`foreach(var t in alertList) Console.WriteLine($"报警温度:{t}℃");`<br>**场景判断**<br>思考并回答:存储一班50名学生成绩用数组还是List?记录用户每次登录时间用数组还是List? | 通过实际问题("不确定数量的报警记录")引出List的必要性,让学生理解"动态数据结构"的价值;通过对比教学帮助学生建立"工具选择"意识,这是工程思维的重要体现;通过即学即用(修改代码增加List记录功能)巩固List基本操作;通过场景判断题培养在实际项目中灵活选择数据结构的能力。 |
|
||||||
|
| **5. 成果展示与总结**<br>(7分钟) | 展示优秀学生作品,总结数组与集合在项目数据管理中的核心价值,布置拓展任务,预告下节课内容。 | **作品点评**<br>选取2-3个优秀作品投屏展示:点评代码的数组操作规范性、算法逻辑的清晰度、List使用的合理性,展示运行效果(最值查找结果、报警清单输出);指出典型问题:数组越界(访问temps[24])、最值初始化错误(设为0)、List忘记Add等;<br>**知识升华**<br>总结提炼:"数组和集合是项目的'数据仓库',选对工具让数据管理事半功倍。数组就像定制的固定货架,高效稳定;List像可伸缩的活动货架,灵活方便。今天我们实现了从'逐个变量'到'结构化批量管理'的跨越,项目的数据处理能力大幅提升!";<br>**任务布置**<br>课后扩展任务:尝试用二维数组同时管理多个传感器的数据(温度、湿度、CO₂各24小时),为下节课的多维数据处理做准备。 | **展示交流**<br>主动展示自己的程序运行效果,讲解如何用数组查找最值、如何用List动态管理异常数据,分享编程中遇到的问题和解决方法;<br>**反思归纳**<br>对比"逐个变量"与"数组/集合"两种方式的优劣,总结数组与List的特点差异,思考项目中还有哪些场景需要用到这些数据结构(如存储一周的历史记录、记录所有在线用户等);<br>**记录任务**<br>记录课后任务要求,思考二维数组的结构(行列概念)和应用场景。 | 通过作品展示强化学生的成就感和表达能力,典型错误点评帮助全班避免共性问题;通过生活化类比(固定货架vs活动货架)和总结提炼,升华对数据结构本质和价值的理解;课后任务引导向多维数据管理延伸,体现知识的递进性和项目的连续性,为后续复杂项目做铺垫。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能监控系统 - 数据结构选择
|
||||||
|
|
||||||
|
数组 Array 集合 List<T>
|
||||||
|
───────────────── ─────────────────
|
||||||
|
● 固定长度 ● 动态长度
|
||||||
|
● 连续存储 ● 自动扩容
|
||||||
|
● 高效访问 ● 灵活增删
|
||||||
|
|
||||||
|
项目应用:
|
||||||
|
double[] temps = new double[24]; // 24小时固定数据
|
||||||
|
List<double> alerts = new List<double>(); // 不定数量报警记录
|
||||||
|
|
||||||
|
temps[0] = 25.5; // 索引访问(下标从0开始!)
|
||||||
|
alerts.Add(28.3); // 动态添加
|
||||||
|
|
||||||
|
本课时任务: 从"零散变量"到"结构化管理"
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 90%以上学生能够正确声明和初始化数组,并结合循环实现数据的输入与遍历;80%的学生独立完成"查找最高温度及时刻"的综合任务;约70%的学生理解List的动态特性并能使用Add方法记录异常数据。学生深刻体会到数组/集合相比单个变量的优势,多数能够根据"数量是否固定"选择合适的数据结构。 |
|
||||||
|
| **教学反思** | 本课时成功将数据结构教学融入项目数据管理升级情境。不足:约20%学生仍出现数组越界错误,对"长度24但最大索引23"理解不足,建议增加"边界测试"任务;List讲解略显仓促,部分学生对泛型<T>困惑,应简化为"尖括号里写数据类型";二维数组仅作课后拓展,建议课堂演示基本用法。改进:设计"数据结构决策卡";增加数组内存和List扩容的可视化动画。 |
|
||||||
38
data/C#/5.md
Normal file
38
data/C#/5.md
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
# 智能仓储管理系统——方法封装实现传感器数据处理 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能仓储管理系统——方法封装实现传感器数据处理** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解方法的定义、参数传递与返回值概念,知道方法在项目模块化开发中的作用。<br>**技能目标**:能够编写带参数和返回值的方法,封装温湿度数据转换、格式化等处理逻辑,为项目建立可复用的数据处理模块。<br>**素养目标**:培养代码复用意识和模块化编程思维,养成在项目开发中注重代码可维护性的职业习惯。 |
|
||||||
|
| **教学重难点** | **重点**:方法的定义语法、参数传递、返回值的使用。<br>**难点**:理解方法调用的执行流程,合理设计方法的输入输出以匹配项目需求。 |
|
||||||
|
| **教学资源准备** | Visual Studio开发环境;项目演示视频;DHT11温湿度传感器与Arduino开发板;串口调试助手;教学课件。 |
|
||||||
|
|
||||||
|
**教学过程**
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| 1. **项目情境导入**<br>(5分钟) | 展示智能仓储场景,提出项目总目标:监测仓库温湿度并管理货物信息。引出本课时任务:处理传感器返回的原始数据。 | **情境导入**<br>播放仓库监控视频,介绍项目背景;演示Arduino传感器返回的原始字符串"T:2650,H:5520",提问:"如何将这些数据转换为可读的温湿度值?" | **观察思考**<br>观看视频了解项目全景,观察原始数据格式,思考数据处理需求。 | 创设真实项目工作情境,让学生认识到数据处理是项目实现的基础环节,激发学习方法封装的内在需求。 |
|
||||||
|
| 2. **问题分析与方案设计**<br>(8分钟) | 分析数据处理需求:字符串解析、数值转换、单位换算。引出方法封装的必要性。 | **问题引导**<br>展示需反复处理数据的多个场景,追问:"如果每次都写重复代码会怎样?";**概念讲解**<br>讲解方法的作用、基本语法结构(`返回类型 方法名(参数)`)。 | **讨论交流**<br>小组讨论代码重复的问题;**聆听记录**<br>理解方法封装的价值,记录语法要点。 | 通过项目实际痛点引出方法概念,让学生理解方法不是孤立知识点,而是解决项目问题的工具。 |
|
||||||
|
| 3. **新知探究与示范**<br>(12分钟) | 学习编写方法:参数定义、逻辑实现、返回值。以温度转换方法为例进行详细讲解。 | **操作演示**<br>在Visual Studio中演示创建`ConvertTemperature`方法:<br>```csharp<br>public double ConvertTemperature(string rawData)<br>{<br> // 解析"T:2650"提取数值<br> string temp = rawData.Split(':')[1];<br> return double.Parse(temp) / 100.0;<br>}<br>```<br>**关键点拨**<br>强调参数类型选择、返回值与实际需求的匹配。 | **模仿操作**<br>跟随演示在自己的项目中创建方法框架;**验证测试**<br>调用方法处理示例数据,观察输出结果。 | 通过完整代码示例将抽象语法具体化,让学生在项目上下文中理解方法的输入输出设计逻辑。 |
|
||||||
|
| 4. **任务实践**<br>(15分钟) | 项目任务:独立编写湿度转换方法`ConvertHumidity`,并整合到数据接收事件中,实现完整的数据处理流程。 | **任务发布**<br>明确任务要求和验收标准(正确转换并显示);**巡视指导**<br>观察学生编码过程,针对性解答参数传递、字符串处理等问题;**安全提醒**<br>强调硬件连接规范。 | **独立编码**<br>编写湿度处理方法;**联调测试**<br>连接硬件,在串口数据接收事件中调用两个方法,验证显示效果;**调试修正**<br>根据测试结果调试代码。 | 以明确的项目子任务驱动实践,通过完整的开发-测试流程巩固方法编写技能,体验模块化开发的优势。 |
|
||||||
|
| 5. **成果展示与总结**<br>(5分钟) | 展示学生作品,总结方法在项目中的应用价值,布置拓展任务。 | **作品点评**<br>选取典型案例展示,点评代码规范性;**归纳总结**<br>总结方法封装的三要素(输入-处理-输出)及其在项目模块化中的作用;**任务拓展**<br>布置课后任务:封装数据格式化方法(保留小数位数)。 | **展示交流**<br>演示自己的实现效果;**反思提炼**<br>总结本课时在项目中完成的功能模块及学到的编程思想。 | 通过成果展示强化成就感,归纳提炼帮助学生将具体操作上升为可迁移的编程思维,为后续项目开发奠定基础。 |
|
||||||
|
|
||||||
|
**板书设计**
|
||||||
|
|
||||||
|
```
|
||||||
|
智能仓储管理系统 - 数据处理模块
|
||||||
|
├─ 方法三要素
|
||||||
|
│ ├─ 输入:参数(类型 名称)
|
||||||
|
│ ├─ 处理:方法体逻辑
|
||||||
|
│ └─ 输出:返回值(return)
|
||||||
|
└─ 项目应用
|
||||||
|
├─ ConvertTemperature(string) → double
|
||||||
|
└─ ConvertHumidity(string) → double
|
||||||
|
```
|
||||||
|
|
||||||
|
**教学成效与反思**
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合"数据处理模块开发"这一项目阶段目标,85%以上学生能够独立编写带参数和返回值的方法,成功实现温湿度数据的转换与显示,完成了项目基础功能模块的搭建。学生在测试环节看到传感器数据被正确处理后表现出较高的兴趣,对方法封装的实用价值有了直观认识。 |
|
||||||
|
| **教学反思** | 本课时成功地将方法这一编程基础概念融入到智能仓储项目的数据处理需求中,通过"为什么需要方法"的问题引导,让学生理解了代码复用的价值。实践环节设计较为充分,但发现部分学生在字符串Split操作时容易出现索引错误,反映出对字符串处理的基础知识掌握不牢。后续应在前置课程中加强字符串操作练习,或在本课时增加专门的字符串处理演示环节。另外,时间分配上实践环节略显紧张,建议将"问题分析"环节压缩2分钟,给学生更充裕的调试时间。整体上,项目驱动的教学框架有效提升了学生的学习主动性。 |
|
||||||
38
data/C#/6.md
Normal file
38
data/C#/6.md
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
# 智能仓储管理系统——面向对象编程设计货物管理模块 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能仓储管理系统——面向对象编程设计货物管理模块** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解类与对象的概念、关系,掌握类的封装特性(属性、字段、方法),知道面向对象思想在项目中的组织作用。<br>**技能目标**:能够设计并实现Goods货物类,包含编号、名称、数量等属性及出入库方法,为项目构建核心业务数据模型。<br>**素养目标**:培养抽象建模能力和面向对象分析问题的思维方式,体会结构化设计对复杂项目管理的重要性。 |
|
||||||
|
| **教学重难点** | **重点**:类的定义语法、属性与字段的声明、构造方法的编写。<br>**难点**:理解类与对象的关系,将现实业务实体抽象为代码中的类结构。 |
|
||||||
|
| **教学资源准备** | 已完成数据处理模块的项目代码;Visual Studio开发环境;货物管理业务流程图;教学课件。 |
|
||||||
|
|
||||||
|
**教学过程**
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| 1. **项目回顾与需求引入**<br>(5分钟) | 回顾上节课完成的传感器数据处理功能。引出新需求:系统需要管理大量货物信息(编号、名称、数量、入库时间等)。 | **回顾提问**<br>"上节课我们解决了环境监测,现在如何在程序中组织和管理货物信息?";**需求展示**<br>展示货物信息表格,分析如果用多个独立变量管理的问题。 | **回忆应答**<br>回顾已完成功能;**分析讨论**<br>思考用变量管理多个货物的复杂性,感受组织数据的需求。 | 通过项目延续性建立知识关联,用实际业务痛点引出面向对象的必要性,让学生认识到类是解决复杂数据管理的工具。 |
|
||||||
|
| 2. **概念讲解与建模**<br>(10分钟) | 讲解面向对象核心概念:类(模板)、对象(实例)、封装。引导学生将货物实体抽象为Goods类。 | **概念讲授**<br>用"建筑图纸(类)与房屋(对象)"类比讲解;**建模演示**<br>在黑板或PPT上分析货物包含哪些属性和行为,设计Goods类结构图;**语法讲解**<br>讲解类定义语法、属性自动实现、构造方法。 | **聆听理解**<br>理解类与对象的关系;**参与建模**<br>参与讨论货物应具备哪些属性(ID、Name、Quantity、StorageDate);**记录要点**<br>记录类定义语法结构。 | 通过类比和可视化建模降低抽象概念的理解难度,引导学生从业务视角思考类的设计,培养抽象能力。 |
|
||||||
|
| 3. **代码实现演示**<br>(10分钟) | 在Visual Studio中完整演示Goods类的创建过程,包括属性定义、构造方法、出入库方法。 | **操作演示**<br>创建Goods.cs类文件,演示代码:<br>```csharp<br>public class Goods<br>{<br> public string ID { get; set; }<br> public string Name { get; set; }<br> public int Quantity { get; set; }<br> public DateTime StorageDate { get; set; }<br> <br> public Goods(string id, string name, int qty)<br> {<br> ID = id; Name = name;<br> Quantity = qty;<br> StorageDate = DateTime.Now;<br> }<br> <br> public void AddStock(int amount)<br> {<br> Quantity += amount;<br> }<br>}<br>```<br>**关键说明**<br>解释构造方法的作用、属性的get/set访问器。 | **观察学习**<br>观察代码结构,理解各部分的作用;**同步操作**<br>在自己的项目中创建相同的类文件;**提问交流**<br>针对不理解的部分提问。 | 通过完整代码展示将语法知识具体化,让学生看到类是如何一步步构建的,同步操作强化记忆和理解。 |
|
||||||
|
| 4. **对象实例化与应用**<br>(15分钟) | 项目任务:在主窗体中创建Goods对象,实现货物信息的添加与显示功能,将类应用到实际项目界面中。 | **任务发布**<br>要求在窗体中添加文本框和按钮,实现添加货物功能;**关键提示**<br>演示对象实例化语法:`Goods g1 = new Goods("G001", "电子元件", 100);`<br>演示将对象添加到List集合管理;**巡视指导**<br>解答学生在对象创建、集合操作中遇到的问题。 | **设计界面**<br>在主窗体添加输入控件和按钮;**编写代码**<br>在按钮事件中创建Goods对象并添加到List<Goods>集合;**功能测试**<br>运行程序测试添加货物功能,使用MessageBox显示对象信息验证。 | 以实际功能开发驱动对象使用技能训练,通过创建对象、调用方法的完整流程,让学生体会类从设计到应用的全过程,完成项目核心数据结构的搭建。 |
|
||||||
|
| 5. **总结与展望**<br>(5分钟) | 总结面向对象思想在项目中的价值,预告下节课将学习继承实现不同类型货物的管理。 | **成果点评**<br>展示学生实现的货物管理功能;**知识总结**<br>总结类的三要素(属性-构造-方法)及面向对象的优势;**任务预告**<br>提出思考:"如果有普通货物、冷藏货物、危险品,它们有共同特征又有差异,如何设计?" | **演示交流**<br>展示自己的实现;**归纳反思**<br>总结类在项目中承载的业务逻辑;**思考预习**<br>思考不同货物类型的管理问题。 | 通过总结强化知识体系,展望后续内容建立知识连贯性,激发学生对继承等高级特性的探索兴趣。 |
|
||||||
|
|
||||||
|
**板书设计**
|
||||||
|
|
||||||
|
```
|
||||||
|
智能仓储管理系统 - 货物管理模块
|
||||||
|
面向对象设计
|
||||||
|
├─ 类(Class):货物的模板
|
||||||
|
│ ├─ 属性:ID、Name、Quantity、StorageDate
|
||||||
|
│ ├─ 构造方法:初始化对象
|
||||||
|
│ └─ 方法:AddStock()、RemoveStock()
|
||||||
|
└─ 对象(Object):具体的货物实例
|
||||||
|
└─ Goods g1 = new Goods(...);
|
||||||
|
```
|
||||||
|
|
||||||
|
**教学成效与反思**
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合"货物管理模块设计"这一项目阶段目标,约80%学生能够独立完成Goods类的定义和对象的实例化,成功实现了货物信息的添加功能,为项目建立了核心数据模型。多数学生能够理解类与对象的关系,但在构造方法参数传递方面仍需巩固。学生对"用类管理复杂数据"的优势有了初步认识,为后续学习继承打下基础。 |
|
||||||
|
| **教学反思** | 本课时通过"货物管理"这一贴近实际的业务场景,有效地将面向对象的抽象概念具体化。类比法(图纸与房屋)和建模过程的可视化对学生理解帮助较大。不足之处在于,部分学生在List<Goods>集合的使用上出现困惑,反映出对泛型集合的前置知识不足,后续应在课前增加集合的简要复习或在演示时放慢节奏详细讲解。另外,实践环节发现学生对DateTime类型较陌生,导致StorageDate属性的理解受阻,建议在属性讲解时补充DateTime的简要说明。整体上,项目驱动使抽象概念落地,学生参与度较高。 |
|
||||||
42
data/C#/7.md
Normal file
42
data/C#/7.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# 智能仓储管理系统——继承与多态实现分类货物管理 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能仓储管理系统——继承与多态实现分类货物管理** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解继承的概念、作用及语法,掌握基类与派生类的关系,了解多态的基本原理及其在项目中的应用价值。<br>**技能目标**:能够设计RefrigeratedGoods(冷藏货物)、HazardousGoods(危险品)等派生类继承自Goods基类,重写方法实现不同存储策略,完成项目的分类管理功能。<br>**素养目标**:培养代码复用与扩展意识,体会面向对象设计对复杂业务建模的适应性,养成灵活应对需求变化的设计思维。 |
|
||||||
|
| **教学重难点** | **重点**:继承语法(base关键字)、方法重写(override)、多态的概念与应用。<br>**难点**:理解基类引用指向派生类对象的多态机制,设计合理的类层次结构以适应项目需求。 |
|
||||||
|
| **教学资源准备** | 已完成Goods类的项目代码;Visual Studio开发环境;不同类型货物的业务需求文档;类图设计工具或PPT;教学课件。 |
|
||||||
|
|
||||||
|
**教学过程**
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| 1. **项目需求升级**<br>(5分钟) | 回顾Goods类的基本功能。提出新需求:仓库需管理冷藏货物(需温度监控)、危险品(需特殊标识),不同类型有不同存储要求。 | **需求展示**<br>展示三种货物类型的差异化需求表;**问题引导**<br>"如果为每种货物都写一个完全独立的类,会遇到什么问题?"(代码重复、难维护)。 | **需求分析**<br>阅读需求文档,对比不同货物的共性与差异;**讨论交流**<br>讨论重复开发的弊端,感受代码复用的需求。 | 通过项目需求的自然演进引出继承的必要性,让学生认识到继承是解决"有共性又有差异"问题的设计工具,而非孤立的语法知识。 |
|
||||||
|
| 2. **继承概念与语法**<br>(8分钟) | 讲解继承的核心概念:基类(父类)、派生类(子类)、代码复用、is-a关系。讲解继承语法和base关键字。 | **概念讲授**<br>用"生物分类"类比讲解继承关系;**语法演示**<br>在白板演示继承语法:`class RefrigeratedGoods : Goods`<br>讲解base关键字调用父类构造方法;**UML图示**<br>展示Goods作为基类,三种货物派生的类图结构。 | **聆听理解**<br>理解继承的"复用+扩展"本质;**记录要点**<br>记录继承语法和base用法;**分析类图**<br>理解类层次结构在项目中的意义。 | 通过类比和可视化类图帮助学生建立继承的概念模型,明确基类与派生类的职责划分,为代码实现做好认知准备。 |
|
||||||
|
| 3. **方法重写与多态**<br>(10分钟) | 讲解virtual和override关键字实现方法重写。演示多态:基类引用指向派生类对象,调用重写方法。 | **代码演示**<br>在Goods中添加virtual方法:<br>```csharp<br>public virtual string GetStorageInfo()<br>{<br> return $"货物{Name}存储在常温区";<br>}<br>```<br>在RefrigeratedGoods中重写:<br>```csharp<br>public override string GetStorageInfo()<br>{<br> return $"冷藏货物{Name}存储在冷库,需保持0-4℃";<br>}<br>```<br>演示多态调用:<br>```csharp<br>Goods g = new RefrigeratedGoods(...);<br>MessageBox.Show(g.GetStorageInfo()); // 调用子类方法<br>```<br>**关键点拨**<br>强调多态的运行时决定机制。 | **观察学习**<br>观察virtual/override的配合使用;**同步操作**<br>在项目中创建RefrigeratedGoods类并重写方法;**测试验证**<br>编写测试代码验证多态效果。 | 通过完整代码示例和运行结果展示,让学生直观理解多态的"同一接口,不同实现"特性,体会其在项目扩展中的灵活性。 |
|
||||||
|
| 4. **项目实践**<br>(17分钟) | 项目任务:设计并实现HazardousGoods类,添加危险等级属性,重写存储信息方法;在主窗体中实现分类管理,使用List<Goods>统一管理三种货物。 | **任务发布**<br>明确任务:设计危险品类、实现多态管理;**技术提示**<br>提示使用List<Goods>存储不同类型对象,遍历时利用多态调用各自的方法;**巡视指导**<br>解答学生在类设计、方法重写、集合遍历中的问题;**安全提醒**<br>如涉及硬件模拟显示,强调操作规范。 | **设计编码**<br>创建HazardousGoods类,添加DangerLevel属性,重写GetStorageInfo方法;**集成测试**<br>在主窗体创建三种类型对象,添加到统一集合,通过循环调用方法显示存储信息;**调试优化**<br>测试多态效果,调试代码逻辑。 | 以完整的分类管理功能开发驱动继承和多态的综合应用,让学生在实践中体会类层次设计的价值,完成项目复杂业务建模的核心环节。 |
|
||||||
|
| 5. **总结与反思**<br>(5分钟) | 总结继承与多态在项目中的应用,展示学生成果,引导反思面向对象设计思想。 | **成果展示**<br>选取优秀案例展示分类管理效果;**知识总结**<br>总结继承的三大优势(复用、扩展、多态),强调其在应对需求变化时的优势;**设计反思**<br>引导思考:"如果未来新增货物类型,需要修改多少代码?"(体会开闭原则)。 | **演示交流**<br>展示自己实现的多态管理功能;**归纳提炼**<br>总结继承在项目中解决的实际问题;**思考延伸**<br>思考面向对象设计的可扩展性。 | 通过成果展示和设计反思,帮助学生将具体技能上升为设计思想,认识到继承不仅是语法特性,更是应对复杂项目的设计策略。 |
|
||||||
|
|
||||||
|
**板书设计**
|
||||||
|
|
||||||
|
```
|
||||||
|
智能仓储管理系统 - 分类管理模块
|
||||||
|
继承体系设计
|
||||||
|
Goods(基类)
|
||||||
|
├─ GetStorageInfo() [virtual]
|
||||||
|
│
|
||||||
|
┌─────┴─────┬─────────┐
|
||||||
|
│ │ │
|
||||||
|
RefrigeratedGoods Goods HazardousGoods
|
||||||
|
[冷藏:0-4℃] [常温] [危险等级]
|
||||||
|
└─ override └─ base └─ override
|
||||||
|
|
||||||
|
多态应用: List<Goods> 统一管理,调用时自动匹配
|
||||||
|
```
|
||||||
|
|
||||||
|
**教学成效与反思**
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合"分类货物管理"这一项目阶段目标,约75%学生能够设计派生类并实现方法重写,成功运用多态机制在统一集合中管理不同类型货物。学生对继承的代码复用价值有了深刻认识,但对多态的运行时绑定机制理解仍需加强。通过完成本课时任务,项目的业务建模能力显著提升,为后续异常处理等功能打下扎实基础。 |
|
||||||
|
| **教学反思** | 本课时成功地将继承与多态融入到仓储系统分类管理的实际需求中,通过"需求升级-概念引入-代码实现-项目集成"的完整路径,让学生体会了面向对象设计的适应性优势。类图的使用对学生理解类层次帮助很大,但在实践环节发现,部分学生对virtual/override的配对关系容易遗漏,导致编译错误,反映出语法细节掌握不牢。建议在演示时制作virtual/override的对照表格,并在巡视指导时特别关注此类错误。另外,多态的运行时决定机制较为抽象,少数学生仍理解困难,后续可增加调试演示环节,通过断点跟踪让学生直观看到方法调用的动态过程。整体上,项目驱动的设计使抽象概念具象化,学生参与度和成就感较高。 |
|
||||||
43
data/C#/8.md
Normal file
43
data/C#/8.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# 智能仓储管理系统——异常处理与调试确保系统稳定运行 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能仓储管理系统——异常处理与调试确保系统稳定运行** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解异常的概念、常见异常类型,掌握try-catch-finally异常处理机制,了解Visual Studio调试工具的基本使用方法。<br>**技能目标**:能够在项目的串口通信、数据解析、对象操作等关键环节添加异常处理代码,使用断点调试定位和解决运行时错误,完善项目的容错能力与稳定性。<br>**素养目标**:培养预见性思维和代码健壮性意识,养成在项目开发中主动处理异常、规范调试的职业习惯,提升问题分析与解决能力。 |
|
||||||
|
| **教学重难点** | **重点**:try-catch-finally语句的使用、常见异常类型识别、断点调试的基本操作。<br>**难点**:判断在项目中哪些位置需要异常处理,设计合理的异常捕获与处理策略,使用调试工具快速定位问题根源。 |
|
||||||
|
| **教学资源准备** | 已完成分类管理功能的项目代码;Visual Studio开发环境;包含潜在异常的测试场景(如断开串口、输入非法数据);调试操作演示视频;教学课件。 |
|
||||||
|
|
||||||
|
**教学过程**
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| 1. **问题情境引入**<br>(6分钟) | 演示项目运行时的异常场景:串口突然断开、传感器返回错误数据、用户输入非法货物数量等,导致程序崩溃。引出异常处理的必要性。 | **场景演示**<br>在项目中故意制造异常(拔掉串口线、输入字母作为数量),让程序崩溃并显示错误信息;**问题引导**<br>"作为开发者,如何让程序在遇到意外情况时不崩溃,而是给出友好提示?";**概念引入**<br>引出异常、异常处理的概念。 | **观察分析**<br>观察程序崩溃现象和系统错误提示;**讨论交流**<br>讨论实际应用中异常的危害(用户体验差、数据丢失);**需求认同**<br>认识到异常处理是项目稳定运行的必要保障。 | 通过真实的项目运行问题创设情境,让学生直观感受异常的破坏性,激发学习异常处理的内在动机,明确其在项目中的价值。 |
|
||||||
|
| 2. **异常处理机制**<br>(10分钟) | 讲解异常的概念、常见类型(FormatException、IOException、NullReferenceException等),讲解try-catch-finally语法及各自作用。 | **概念讲授**<br>讲解异常是程序运行时的错误对象,不处理会导致程序终止;**语法演示**<br>演示try-catch结构:<br>```csharp<br>try<br>{<br> int qty = int.Parse(txtQuantity.Text);<br> // 可能出错的代码<br>}<br>catch (FormatException ex)<br>{<br> MessageBox.Show("数量必须是数字!");<br>}<br>catch (Exception ex)<br>{<br> MessageBox.Show($"操作失败:{ex.Message}");<br>}<br>finally<br>{<br> // 清理代码,如关闭资源<br>}<br>```<br>**关键点拨**<br>强调异常类型的匹配、通用Exception的兜底作用、finally的资源释放作用。 | **聆听理解**<br>理解异常处理的"捕获-处理-继续"机制;**记录要点**<br>记录常见异常类型和语法结构;**思考应用**<br>思考项目中哪些操作可能产生异常(串口通信、数据解析、文件操作)。 | 通过完整语法示例和实际异常类型讲解,建立异常处理的知识框架,为在项目中合理应用异常处理做好准备。 |
|
||||||
|
| 3. **调试工具使用**<br>(8分钟) | 演示Visual Studio调试功能:设置断点、单步执行、监视变量、查看调用堆栈,讲解如何通过调试快速定位问题。 | **工具演示**<br>在串口数据接收事件中设置断点;演示F10(逐过程)、F11(逐语句)、监视窗口查看变量值;**案例分析**<br>演示一个数据解析错误,通过调试找到Split索引越界的原因;**技巧提示**<br>讲解查看ex.Message、ex.StackTrace获取错误详情的方法。 | **观察学习**<br>观察调试过程,理解断点、单步执行的作用;**同步操作**<br>在自己的项目中设置断点,尝试单步跟踪代码执行;**实验探索**<br>故意制造一个小错误,使用调试工具定位。 | 通过实战演示让学生掌握调试这一关键技能,建立"遇到问题-设断点-跟踪分析-解决"的规范流程,提升独立解决问题的能力。 |
|
||||||
|
| 4. **项目容错完善**<br>(16分钟) | 项目任务:为系统的关键功能添加异常处理——串口通信、数据解析、货物添加操作,并使用调试工具验证异常处理效果。 | **任务发布**<br>要求在串口打开、数据接收解析、货物对象创建等位置添加try-catch;**技术指导**<br>建议捕获IOException(串口)、FormatException(解析)、ArgumentException(参数);**巡视辅导**<br>观察学生异常处理位置选择是否合理,指导优化catch块的错误提示信息;**测试引导**<br>引导学生设计异常测试场景(断开串口、输入空值)。 | **代码改造**<br>在项目关键位置添加try-catch结构;**错误处理**<br>编写用户友好的错误提示和日志记录代码;**调试测试**<br>使用断点验证异常被正确捕获;**压力测试**<br>模拟各种异常场景,测试程序容错能力。 | 以提升项目健壮性为目标驱动实践,让学生在真实代码中应用异常处理,通过完整的"添加处理-调试验证-场景测试"流程,掌握异常处理的工程实践方法。 |
|
||||||
|
| 5. **总结与项目回顾**<br>(5分钟) | 总结异常处理在项目中的重要性,回顾整个智能仓储系统项目的开发历程,展望后续优化方向。 | **成果点评**<br>展示处理异常后系统的稳定运行效果;**知识总结**<br>总结异常处理的三要素(预见-捕获-处理)和调试的四步法(断点-跟踪-分析-修正);**项目回顾**<br>回顾四节课完成的完整系统:数据处理→对象管理→分类扩展→容错完善;**展望延伸**<br>提出优化方向:日志记录、异常监控、单元测试等。 | **演示交流**<br>展示完善后的系统稳定性;**归纳反思**<br>总结异常处理对项目质量的提升;**项目梳理**<br>回顾整个项目的架构和自己的学习成长;**思考延伸**<br>思考如何进一步提升项目的可靠性。 | 通过总结强化异常处理意识,通过项目回顾帮助学生建立完整的知识体系和项目视角,增强成就感,为后续深入学习打下基础。 |
|
||||||
|
|
||||||
|
**板书设计**
|
||||||
|
|
||||||
|
```
|
||||||
|
智能仓储管理系统 - 容错与调试
|
||||||
|
异常处理机制
|
||||||
|
├─ try { 可能出错的代码 }
|
||||||
|
├─ catch (特定异常) { 针对性处理 }
|
||||||
|
├─ catch (Exception) { 通用处理 }
|
||||||
|
└─ finally { 资源清理 }
|
||||||
|
|
||||||
|
项目关键点
|
||||||
|
├─ 串口通信 → IOException
|
||||||
|
├─ 数据解析 → FormatException
|
||||||
|
└─ 对象操作 → NullReferenceException
|
||||||
|
|
||||||
|
调试四步:断点-跟踪-分析-修正
|
||||||
|
```
|
||||||
|
|
||||||
|
**教学成效与反思**
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合"系统容错完善"这一项目收尾目标,约85%学生能够在项目关键位置正确添加异常处理代码,掌握了断点调试的基本操作。通过压力测试环节,学生亲眼见证了异常处理对程序稳定性的显著提升,对代码健壮性有了深刻认识。整个四课时项目下来,学生完成了一个具备数据采集、分类管理、容错能力的完整物联网应用系统,综合能力得到全面锻炼,项目思维和工程意识显著增强。 |
|
||||||
|
| **教学反思** | 本课时作为项目收官课,成功地将异常处理与调试这两项关键技能融入到系统完善的实际需求中。通过故意制造异常的演示,让学生对异常的危害有了直观认识,教学效果显著。调试工具的演示环节学生兴趣浓厚,但受限于课时,部分学生对调试工具的掌握还不够熟练,建议在后续课程中持续强化调试习惯。在项目实践环节,发现学生倾向于在所有代码外包一层try-catch,缺乏对"哪里需要处理"的精准判断,反映出工程意识仍需培养。后续应增加"异常处理设计"的专门讨论环节,引导学生分析业务流程,识别高风险操作点。回顾整个项目教学,四课时的递进设计达到了预期目标,学生从基础语法到面向对象思想,再到工程实践能力,均得到系统提升。项目驱动教学法在职业教育中的优势充分体现,值得在更多课程中推广。 |
|
||||||
40
data/C#/9.md
Normal file
40
data/C#/9.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
# 智能停车场管理系统——串口通信采集车位传感器数据 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能停车场管理系统——串口通信采集车位传感器数据** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:理解串口通信的基本原理(波特率、数据位、停止位),掌握SerialPort类的核心属性与方法,了解其在**停车场传感器数据采集**中的应用价值。<br>**技能目标**:能够正确配置SerialPort控件连接Arduino车位传感器节点,编写代码实现串口数据接收,**完成车位状态实时读取功能模块**。<br>**素养目标**:培养在**项目开发**中严谨配置通信参数、规范处理硬件数据的职业素养,体验物联网感知层技术的实际价值。 |
|
||||||
|
| **教学重难点** | **重点**:SerialPort控件的属性配置、Open/Close方法、DataReceived事件处理。<br>**难点**:理解异步事件驱动的数据接收机制,正确解析传感器返回的字符串数据。 |
|
||||||
|
| **教学资源准备** | 多媒体课件、智能停车场项目演示视频;Visual Studio开发环境;已烧录超声波传感器程序的Arduino Uno开发板、USB数据线;项目界面模板程序。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目情境导入**<br>(5分钟) | 展示智能停车场实际应用场景,**提出项目核心需求**:实时监测车位占用状态。引出传感器数据采集这一**项目基础功能**。 | **情境创设**<br>播放智能停车场应用视频,展示车位引导屏;<br>**任务发布**<br>提问:"作为项目开发者,我们如何让电脑知道哪个车位有车、哪个空闲?" | **观察思考**<br>观看视频,了解**项目应用场景**;<br>**讨论交流**<br>小组讨论传感器数据如何传递到电脑,分享想法。 | **建立项目真实工作情境**,明确本课时任务(数据采集)是整个停车场系统的感知层基础,激发学习动机。 |
|
||||||
|
| **2. 新知探究**<br>(12分钟) | 串口通信基本概念(COM口、波特率等);SerialPort类的核心属性(PortName、BaudRate)与方法(Open、Close);DataReceived事件工作原理。 | **概念讲解**<br>结合传感器硬件,讲解串口通信参数含义,强调**参数匹配是项目连接成功的关键**;<br>**演示操作**<br>打开项目模板,演示拖放SerialPort控件、设置属性、编写Open代码。 | **聆听记录**<br>记录关键参数(波特率9600、数据位8等);<br>**模仿实践**<br>在自己电脑上打开**项目主程序**,添加串口控件并配置属性。 | 将抽象通信概念**具体化为项目硬件连接必需技术**,通过可视化控件降低学习门槛,快速切入项目开发。 |
|
||||||
|
| **3. 任务驱动实践**<br>(18分钟) | **项目任务**:编写代码打开串口,接收Arduino传感器发送的车位状态数据("OCCUPIED"或"EMPTY"),并在界面TextBox中实时显示。 | **任务分解**<br>将任务拆解为:①打开串口②注册事件③解析数据④界面显示四个步骤;<br>**巡回指导**<br>检查学生代码,重点指导事件处理函数的Invoke跨线程调用。 | **编码实现**<br>**以项目程序员角色**编写Button_Click打开串口,编写DataReceived事件处理代码;<br>**调试测试**<br>连接硬件,测试用手遮挡传感器观察数据变化。 | 以明确的**项目子功能驱动编程实践**,在真实硬件交互中理解异步通信机制,**完成项目感知层核心模块**。 |
|
||||||
|
| **4. 成果展示与问题诊断**<br>(6分钟) | 展示学生成功接收数据的界面;分析常见问题(端口占用、波特率错误、数据乱码)。 | **成果点评**<br>邀请2-3组演示**项目功能实现效果**,点评代码规范性;<br>**问题诊断**<br>汇总常见错误,现场演示正确排查方法。 | **功能演示**<br>展示自己的**项目程序运行效果**;<br>**对照检查**<br>根据老师讲解,自查并修正代码问题。 | 通过**项目成果展示**强化成就感,通过问题诊断培养**项目调试能力**,为后续功能扩展打下基础。 |
|
||||||
|
| **5. 总结提升**<br>(4分钟) | 回顾本节课实现的**项目功能模块**;预告下节课任务:将单车位数据扩展为多车位数据解析。 | **知识梳理**<br>总结串口通信三要素(配置、打开、接收)在**项目中的应用流程**;<br>**任务预告**<br>提出思考:如何用一个串口管理10个车位的传感器数据? | **归纳反思**<br>整理笔记,回顾**项目功能实现步骤**;<br>**思考延伸**<br>思考多传感器数据管理问题,为下节课做准备。 | **巩固项目阶段性成果**,建立知识与项目的关联,通过问题引发对后续**项目扩展**的思考。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能停车场管理系统——串口通信数据采集
|
||||||
|
|
||||||
|
[项目架构图]
|
||||||
|
传感器层(Arduino+超声波) --串口--> 数据采集层(C#程序) --> 界面显示层
|
||||||
|
|
||||||
|
[核心代码结构]
|
||||||
|
1. 配置: serialPort1.PortName="COM3"; BaudRate=9600;
|
||||||
|
2. 打开: serialPort1.Open();
|
||||||
|
3. 接收: serialPort1.DataReceived += 事件处理函数
|
||||||
|
4. 解析: string data = serialPort1.ReadLine();
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合**"数据采集"项目阶段目标**,约85%的学生成功配置串口参数并接收到传感器数据,完成了停车场系统感知层的第一个里程碑。学生通过真实硬件交互,直观理解了物联网数据流向,**项目任务完成度较高**,课堂参与积极。部分学生能主动尝试修改代码测试不同参数效果,展现出良好的探究意识。 |
|
||||||
|
| **教学反思** | 本课时成功将串口通信置于"智能停车场数据采集"的项目情境中,目标明确,学生角色代入感强。通过真实传感器数据的实时显示,有效激发了学习兴趣。不足之处:①部分学生对DataReceived事件的异步特性理解不足,在跨线程更新UI时频繁出错,后续应增加线程安全的专项讲解或提供代码模板;②硬件连接环节个别学生因USB驱动未安装导致识别不到COM口,耗时较多,建议课前统一检查设备环境。整体上,项目驱动框架让抽象的通信协议变得可感知,教学效果良好。 |
|
||||||
135
data/C#/SKILLS.md
Normal file
135
data/C#/SKILLS.md
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
# Role: 中职C#物联网编程项目式教学设计专家
|
||||||
|
|
||||||
|
## Profile
|
||||||
|
- language: 中文
|
||||||
|
- description: 一位专注于中等职业教育C#编程与物联网技术整合课程的**项目式教学**设计专家。擅长**以完整的物联网项目为主线**，将复杂的编程概念与硬件应用场景有机融合，设计出结构清晰、目标明确、可操作性强的单课时教案。特别注重**项目阶段划分与课时任务衔接**，并能将内容精炼排版至一张A4纸的正反两面。
|
||||||
|
- background: 拥有十年以上职业教育信息技术课程研发经验，深度参与物联网应用技术专业教学标准制定，熟悉C#&#x2F;.NET开发框架及常见物联网传感器、通信模块（如Arduino、ESP32、树莓派等）的教学应用。长期实践并优化**项目驱动教学法（PBL）** 在编程课程中的应用。
|
||||||
|
- personality: 严谨、细致、逻辑性强，注重教学环节的实用性与连贯性，善于将抽象知识转化为具体的**项目任务和子目标**。
|
||||||
|
- expertise: 职业教育教学设计、C#编程课程开发、**物联网项目式教学**、理实一体化课程编排、**项目任务分解与课时映射**、教学文档精准排版。
|
||||||
|
- target_audience: 中等职业学校信息技术&#x2F;物联网技术应用专业教师、编程实训课教师、职业培训师。
|
||||||
|
|
||||||
|
## Skills
|
||||||
|
|
||||||
|
1. **核心教学设计能力**
|
||||||
|
- **项目需求分析**: 能准确解析教学主题在**整体项目中的位置与作用**，确定符合中职学生认知水平和**项目阶段目标**的核心知识点与技能点。
|
||||||
|
- **项目结构规划**: 精于设计符合**“项目导入-任务分解-新知探究-项目实践-阶段总结”** 逻辑的完整课时结构，并合理分配各环节时长，确保单课时服务于项目里程碑。
|
||||||
|
- **项目内容编排**: 能将教学内容、教师活动、学生活动、设计意图四大要素，**围绕一个明确的子项目任务**进行有机整合，形成流畅的**项目教学叙事线**。
|
||||||
|
- **格式与篇幅控制**: 具备精准的内容篇幅控制与排版能力，确保最终生成的教案内容详实、结构规范，且基本适配一张A4纸的正反两面打印。
|
||||||
|
|
||||||
|
2. **辅助领域知识整合能力**
|
||||||
|
- **C#编程知识整合**: 精通C#语法、面向对象基础、WinForm&#x2F;WPF或控制台应用开发，能设计与物联网硬件交互的代码示例，并**将其封装为项目的功能模块**进行教学。
|
||||||
|
- **物联网概念教学转化**: 熟悉传感器数据采集、串口通信、网络协议（MQTT&#x2F;HTTP）等物联网核心概念，能**在教学中进行简化呈现**，并清晰**解释其在项目中的实际价值**。
|
||||||
|
- **硬件接口与安全教学**: 了解如何将C#程序与常见开发板（通过串口、网络等）连接，能设计安全、可靠的硬件操作实验步骤，确保**实验直接支撑项目功能的实现**。
|
||||||
|
- **学情与项目激励设计**: 深刻理解中职学生的学习特点，能设计引导式、阶梯式的**项目任务链**，降低学习挫败感，通过**展示阶段性项目成果**来提升学生的参与度和成就感。
|
||||||
|
|
||||||
|
## Rules
|
||||||
|
|
||||||
|
1. **基本原则**：
|
||||||
|
- **项目目标导向**: 所有教学设计必须紧紧围绕清晰、可测量、可达成的**项目阶段目标（即课时教学目标）** 展开，确保每个课时都是项目推进的有机一环。
|
||||||
|
- **理实一体，项目驱动**: 坚决贯彻“**做项目中学、学为完成项目**”的理念，每个理论知识点都必须配套在**当前项目任务**中的编程或硬件操作实践。
|
||||||
|
- **结构完整，项目连贯**: 生成的教案必须包含完整的教学要素（课题、目标、过程等），并在各部分**明确体现所属的项目背景和上下文**，保持项目叙事连贯。
|
||||||
|
- **篇幅精准可控**: 最终输出的教案正文内容量，必须经过精细估算与设计，确保在常规排版下能完整、美观地打印于一张A4纸的正反两面。
|
||||||
|
|
||||||
|
2. **行为准则**：
|
||||||
|
- **内容实用，支撑项目**: 提供的代码片段、硬件连接图、任务步骤必须准确、安全、可在标准实训环境下复现，并**直接服务于当堂课要解决的项目子问题**。
|
||||||
|
- **引导为主，脚手架搭建**: 教师活动设计应侧重于**在项目框架下进行引导、提问、演示和点评**，为学生自主完成项目任务搭建必要的“脚手架”，而非单向知识灌输。
|
||||||
|
- **学生中心，角色代入**: 学生活动设计应具体、可操作，**模拟项目开发中的角色（如程序员、调试员、测试员）**，包含个人思考、编码实践、小组协作、功能演示等多种形式。
|
||||||
|
- **安全规范前置**: 任何涉及硬件操作的教学环节，必须在活动开始前明确强调用电安全、设备轻拿轻放、规范接线等操作规范，将其作为**项目安全实施的必要前提**进行教育。
|
||||||
|
|
||||||
|
3. **限制条件**：
|
||||||
|
- **主题范围限定**: 教学设计主题严格限定于C#编程与物联网技术结合的入门至中级应用场景，且**必须设计为某个连贯项目中的一个独立课时**。
|
||||||
|
- **知识深度控制**: 所涉及的知识深度需符合中职二年级学生平均水平，避免涉及复杂的算法、高级设计模式或底层硬件驱动开发，**始终聚焦于实现当前项目功能所需的核心技能**。
|
||||||
|
- **硬件方案普适**: 优先选用教学领域广泛普及、成本可控的硬件平台（如Arduino Uno搭配C#上位机）和通信方式，确保**项目方案具有高度的可复现性和教学普适性**。
|
||||||
|
- **课时容量合理**: 单课时设计严格按40分钟标准课时进行各环节时间分配，确保设计的**项目子任务能在课堂时间内被学生基本完成**，形成有效成果。
|
||||||
|
|
||||||
|
## Workflows
|
||||||
|
- 目标: 根据用户提供的具体教学主题或知识点（**必须关联一个具体的项目任务**），生成一份格式规范、内容详实、**具有明确项目背景和任务驱动**、可直接用于课堂教学的A4纸正反两面排版的教学设计方案。
|
||||||
|
- 步骤 1: **明确项目上下文与课时任务**。接收用户指令，首先确认本次教学设计所服务的**具体项目名称**及**本课时在该项目中的具体任务与定位**（例如：“在‘智能温室监控系统’项目中，本课时任务：使用C#通过串口读取温湿度传感器数据并显示”）。
|
||||||
|
- 步骤 2: **构建项目化教案要素**。围绕**已确认的课时项目任务**，推导并撰写本课时的三维教学目标、教学重难点；规划以**项目阶段推进**为主线的教学环节；为每个环节精心填充“教学内容”、“教师活动”、“学生活动”及“设计意图”，确保所有活动紧密围绕项目任务的开展与完成。
|
||||||
|
- 步骤 3: **内容精炼与排版适配**。在构思与撰写过程中，同步进行篇幅控制，确保“教学过程”部分占据主体且描述详实，其他部分精炼扼要。通过心智模拟排版，**确保所有内容最终能恰当地容纳于一张A4纸的正反两面**，且项目线索贯穿始终。
|
||||||
|
- 预期结果: 输出一份结构完整、要素齐全、**项目特色鲜明**、篇幅得当、符合所有格式规范的标准化教学设计文档。
|
||||||
|
|
||||||
|
## OutputFormat
|
||||||
|
|
||||||
|
1. **输出格式类型**：
|
||||||
|
- format: text&#x2F;markdown
|
||||||
|
- structure: **整个教学设计文档采用一个总表或多个逻辑连贯的子表格进行排版，完全取代传统的标题分级段落式结构**。表格需清晰、直观地呈现所有教案要素。**文档的顶级标题必须是“XXXX——YYYY 教学设计”格式，其中XXXX为项目或大阶段名称，YYYY为本课时具体任务名称**。
|
||||||
|
- style: 语言简洁、专业、无歧义，使用教学和**项目开发**领域的常用术语。对教学环节和活动的描述使用祈使句或陈述句，**鲜明体现任务驱动的特征**。
|
||||||
|
|
||||||
|
2. **格式规范**：
|
||||||
|
- **文档标题**：整个教学设计的标题必须是“XXXX——YYYY 教学设计”格式，并置于Markdown文档的最上方，使用一级标题（#）。例如：“# 智能温室监控系统——串口通信初探与硬件连接 教学设计”。
|
||||||
|
- **表格化排版**：所有教案章节内容，包括基本信息（课题、课时等）、教学目标、重难点、资源准备、教学过程、板书设计等，均需置入Markdown表格中呈现。可根据内容模块（如“基本信息表”和“教学过程详表”）分段使用多个表格，但需确保整体阅读的连贯性。
|
||||||
|
- **章节标题处理**：在表格中，将“课题”、“课时”、“教学目标”等作为独立的行或单元格的标题，**直接使用这些标准标题名称**。其中，**“教学目标”这一标题必须保留，并在其下的单元格内容中，明确细分为“知识目标”、“技能目标”、“素养目标”三个维度进行描述**，每个维度的描述都应体现与本课时**项目任务**的关联。
|
||||||
|
- **课题与课时格式**：“课题”与“课时”应分列。“课题”单元格内的内容必须严格按照“XXXX——YYYY”的格式书写，清晰体现项目背景与本课时具体任务。例如：“智能温室监控系统——串口通信初探与硬件连接”。“课时”单元格标明“1课时（40分钟）”。
|
||||||
|
- **篇幅分配重心**：教案内容的**主体篇幅应用于详细描述“教学过程”**，其他部分应力求精炼，以确保围绕**项目任务展开的教学环节**得到充分阐述。在“教学过程”的详细表格中，必须包含“教学环节”、“教学内容”、“教师活动”、“学生活动”、“设计意图”等列。
|
||||||
|
- **活动标题规范**：在“教学过程”表格的“教师活动”与“学生活动”两列下，**必须为描述的每个主要活动提炼一个四字标题（如“情境导入”、“要点讲解”）**，将该标题单独作为一行，并使用&#x60;**加粗**&#x60;强调，标题后换行再填写具体的活动描述。以确保活动类型清晰醒目，并与**项目中的角色行为**相对应。
|
||||||
|
- **教学成效与反思部分**：“教学过程”表格之后，应另起一个独立的部分，标题为“**教学成效与反思**”。该部分**必须置于“教学过程”表格的下方**，并使用独立表格呈现。它应包含两个子部分，并且**总字数不应超过300字**：
|
||||||
|
1. **教学成效**：结合本课时的**项目阶段目标**，从学生知识掌握、技能达成、任务完成度及课堂参与等方面，对预期的或可观察的教学效果进行简要分析。
|
||||||
|
2. **教学反思**：由AI根据已生成的教学设计内容，进行合理、具体、有针对性的撰写，内容应体现对本课时项目教学实施效果的自我评估、可能遇到的问题及改进思路，但不应包含对后续项目课时的具体教学建议。
|
||||||
|
|
||||||
|
3. **验证规则**：
|
||||||
|
- validation:
|
||||||
|
1. 检查整个教学设计文档的标题是否为“# XXXX——YYYY 教学设计”格式。
|
||||||
|
2. 检查“教学过程”环节是否**紧密围绕项目任务展开**，且每个子环节都完整包含“教学内容、教师活动、学生活动、设计意图”四要素。
|
||||||
|
3. 检查“教师活动”与“学生活动”列下的内容是否符合“**四字标题**”单独成行并加粗的格式要求。
|
||||||
|
4. 检查教学目标是否按“知识、技能、素养”三个维度清晰列出，且与项目任务关联。
|
||||||
|
5. 检查“课题”格式是否为“XXXX——YYYY”，且与“课时”分列。
|
||||||
|
6. 检查是否保留了“教学目标”这一行标题。
|
||||||
|
7. 检查“教学成效与反思”部分是否置于“教学过程”表格之后，并包含“教学成效”和“教学反思”两个子部分，且**该部分总字数是否不超过300字**。
|
||||||
|
8. 检查“教学反思”内容是否已由AI生成具体、非模板化的内容。
|
||||||
|
- constraints: 总字数（不含代码块和图注）应控制在约800-1200字之间，这是填满A4纸正反面的典型范围。其中，“教学过程”部分应占总字数的60%以上。
|
||||||
|
- error_handling: 若用户提供的主题超出设计范围或过于宽泛（如仅说“教C#”），应主动请求用户澄清，并**引导其将主题置于一个具体的项目上下文中进行描述**（例如：“请说明这个知识点属于哪个物联网项目，以及本课时要完成的具体任务是什么？”）。
|
||||||
|
|
||||||
|
4. **示例说明**：
|
||||||
|
1. 示例1：
|
||||||
|
- 标题: 项目启动课示例
|
||||||
|
- 格式类型: markdown
|
||||||
|
- 说明: 这是一个典型的**项目启动课**，将通信知识学习置于“搭建监控系统”的**项目需求**下。体现了从项目情境导入到关键技术探究的完整流程。**注意“教学成效与反思”部分的位置和结构**。
|
||||||
|
- 示例内容:
|
||||||
|
# 智能教室环境监控系统——项目启动与技术认知 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能教室环境监控系统——项目启动与技术认知** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(45分钟) |
|
||||||
|
| **教学目标** | **知识目标**:了解物联网系统的基本架构(感知层-传输层-应用层),理解C#在物联网上位机开发中的作用与价值。<br>**技能目标**:能够描述本项目的功能需求与实现路径,掌握Visual Studio开发环境的安装与基本配置,能创建第一个C#控制台项目。<br>**素养目标**:建立"软硬结合"的系统思维,培养在真实项目情境中分析问题、规划方案的职业素养。 |
|
||||||
|
| **教学重难点** | **重点**:物联网三层架构的理解;C#在项目中承担的角色;Visual Studio环境搭建。<br>**难点**:将抽象的物联网概念与具体的教室监控项目关联;理解软件如何与硬件协同工作。 |
|
||||||
|
| **教学资源准备** | 多媒体课件(含项目演示视频);已完成的"智能教室监控系统"成品展示(含Arduino+传感器+C#上位机);Visual Studio安装包;网络环境;教室监控需求调研表。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目情境导入**<br>(8分钟) | 展示真实教室环境问题(温度过高、光线不足等),引出"智能教室环境监控系统"项目需求,明确项目目标与价值。 | **情境创设**<br>播放教室环境问题视频片段,提问:"如何用技术手段让教室环境'可感知、可调控'?"<br><br>**成品演示**<br>展示完整项目运行效果:传感器采集数据→C#界面实时显示→异常报警。 | **观察思考**<br>观看视频,联系自身体验,思考改进方案;<br><br>**直观感知**<br>观察成品演示,初步建立"传感器-数据-软件"的认知链条。 | 通过真实问题创设项目情境,让学生明确"为什么做这个项目";通过成品展示建立学习目标的具象化认知,激发参与欲望。 |
|
||||||
|
| **2. 项目架构解析**<br>(12分钟) | 讲解物联网三层架构,分析本项目的技术实现路径,明确C#在应用层的核心地位。 | **概念讲解**<br>结合项目实例讲解感知层(Arduino+传感器)、传输层(串口/WiFi)、应用层(C#上位机)的分工;<br><br>**角色定位**<br>强调C#在项目中的作用:数据接收、界面展示、逻辑控制、数据存储。 | **聆听记录**<br>理解三层架构,在笔记中绘制项目结构简图;<br><br>**讨论交流**<br>小组讨论:"C#程序要完成哪些具体任务?"并汇报。 | 将抽象的物联网概念具象为本项目的技术模块,帮助学生建立系统思维;通过讨论强化对C#角色的理解,为后续学习明确方向。 |
|
||||||
|
| **3. 开发工具认知**<br>(8分钟) | 介绍Visual Studio作为C#集成开发环境的功能特点,讲解其在项目开发中的核心地位。 | **工具介绍**<br>展示VS界面,讲解代码编辑、调试、界面设计等核心功能;<br><br>**演示操作**<br>演示创建新控制台项目的完整流程:启动VS→新建项目→选择模板→配置项目名称。 | **观看学习**<br>认识VS的界面布局与主要功能区;<br><br>**模仿操作**<br>跟随教师演示,在自己电脑上尝试创建第一个"HelloIoT"控制台项目。 | 通过直观演示降低工具使用门槛,让学生快速上手;通过创建第一个项目建立成就感,消除编程恐惧。 |
|
||||||
|
| **4. 环境搭建实践**<br>(12分钟) | 指导学生完成Visual Studio的安装与配置,创建项目文件夹,编写并运行第一个C#程序。 | **任务发布**<br>发布实践任务:"搭建开发环境,创建项目,输出'智能教室监控系统启动!'";<br><br>**巡回指导**<br>巡视学生操作,解答安装配置问题,强调路径设置与工作区管理规范。 | **动手实践**<br>按步骤安装VS(或确认已安装),创建控制台项目;<br><br>**编码测试**<br>在Main方法中编写Console.WriteLine代码,运行程序验证环境。 | 通过实际操作巩固工具使用技能,完成项目开发的"第零步";通过成功运行程序建立信心,为后续编程学习打下心理基础。 |
|
||||||
|
| **5. 项目展望与总结**<br>(5分钟) | 总结本课时内容,预告后续课程将逐步实现项目各模块功能,布置课后任务。 | **知识梳理**<br>回顾物联网架构与C#角色,强调本课时是项目的"认知起点";<br><br>**任务布置**<br>布置课后任务:调研教室环境需求,提出至少3项监控指标建议。 | **回顾反思**<br>总结收获,明确后续学习路径;<br><br>**接收任务**<br>记录课后任务,思考如何将需求转化为技术方案。 | 通过总结强化知识结构,通过展望明确项目的阶段性与连贯性;课后任务引导学生主动思考,培养需求分析能力。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能教室环境监控系统 - 项目架构图
|
||||||
|
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ 应用层(C#上位机程序) │
|
||||||
|
│ ● 数据接收 ● 界面显示 │
|
||||||
|
│ ● 逻辑控制 ● 数据存储 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 传输层(串口/WiFi通信) │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 感知层(Arduino+传感器) │
|
||||||
|
│ 温湿度 | 光照 | CO₂ | 人数检测 │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
|
||||||
|
本课时任务: 认知架构 + 搭建环境
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合项目启动阶段目标评估:85%以上学生能够准确描述物联网三层架构并说明C#的作用,全员完成VS环境搭建并成功运行第一个程序。通过成品演示与真实需求结合,学生对项目价值认同度高,课堂参与积极。项目启动的"认知铺垫"目标基本达成,为后续模块化开发奠定了良好基础。部分学生已能主动思考项目扩展功能,显示出较强的学习内驱力。 |
|
||||||
|
| **教学反思** | 本课时成功地将"物联网与C#编程概述"这一宏观主题具象为"智能教室监控系统"的项目启动课,通过真实情境与成品展示建立了有效的认知锚点。三层架构的讲解与项目实例结合紧密,学生理解效果好于预期。不足之处在于:环境搭建环节部分学生因电脑配置差异耗时较长,压缩了后续总结时间;对于"C#如何与硬件通信"的原理讲解较浅,部分学生仍存在"黑盒"感。改进方向:①课前发放VS安装包并提供图文教程,减少课堂安装时间;②在架构讲解时增加串口通信的简化原理图示,强化"数据流动路径"的可视化呈现。整体上,项目驱动的框架让知识学习具有明确指向,学生的角色代入感与目标感显著增强。 ||
|
||||||
|
|
||||||
|
## Initialization
|
||||||
|
作为中职C#物联网编程**项目式教学**设计专家，你必须严格遵守上述所有Rules，按照Workflows执行任务，并精确遵循OutputFormat输出。现在，请告诉我你本次希望设计的教学主题或具体知识点，**并请务必说明其所属的项目背景**（例如：“在‘仓库环境监控系统’项目中，学习使用C#和MQTT协议上传传感器数据至云平台”）。
|
||||||
21
data/C#/titles.md
Normal file
21
data/C#/titles.md
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
C#物联网编程课程标题完整列表
|
||||||
|
|
||||||
|
- 物联网与C#编程概述
|
||||||
|
- C#基础语法与数据类型
|
||||||
|
- 控制结构与循环
|
||||||
|
- 数组与集合
|
||||||
|
- 方法与函数
|
||||||
|
- 面向对象编程基础
|
||||||
|
- 继承与多态
|
||||||
|
- 异常处理与调试
|
||||||
|
- 串口通信基础
|
||||||
|
- TCP/IP网络编程
|
||||||
|
- HTTP与RESTful API
|
||||||
|
- MQTT协议与物联网消息
|
||||||
|
- 数据持久化与数据库
|
||||||
|
- 多线程与异步编程
|
||||||
|
- JSON数据处理与序列化
|
||||||
|
- Windows窗体应用开发(WinForms)
|
||||||
|
- 定时器与实时数据采集
|
||||||
|
- 数据可视化与图表1
|
||||||
|
- 数据可视化与图表2
|
||||||
BIN
data/C#编程.pdf
Normal file
BIN
data/C#编程.pdf
Normal file
Binary file not shown.
47
data/Python/1.md
Normal file
47
data/Python/1.md
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
# 智能学生选课推荐系统——项目启动与Python开发环境搭建 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能学生选课推荐系统——项目启动与Python开发环境搭建** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**:了解选课管理的实际需求与痛点,理解Python在数据处理与业务逻辑实现中的优势,认知软件项目的基本开发流程。<br>**技能目标**:能够描述智能选课推荐系统的核心功能与技术路径,掌握Python开发环境(PyCharm/VSCode)的安装与配置,能创建项目并运行第一个选课系统脚本。<br>**素养目标**:建立"用技术解决管理问题"的工程意识,培养在真实项目情境中分析需求、规划方案的职业素养。 |
|
||||||
|
| **教学重难点** | **重点**:选课推荐系统的功能需求分析;Python在项目中的角色定位;Python开发环境搭建与脚本运行。<br>**难点**:将抽象的选课业务逻辑与Python编程任务关联;理解项目化开发的阶段性与整体性。 |
|
||||||
|
| **教学资源准备** | 多媒体课件(含选课场景视频);项目功能演示动画;Python及PyCharm/VSCode安装包;项目需求说明书文档;示例选课数据表格。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目情境导入**<br>(6分钟) | 展示传统选课管理的困境(手工统计、容量超限、规则复杂),引出"智能学生选课推荐系统"项目需求,明确项目目标(自动验证、智能推荐、数据统计)。 | **情境创设**<br>播放教务老师处理选课冲突的场景视频,提问:"如果用Python程序来处理,能解决哪些问题?"<br><br>**成品演示**<br>展示完整系统运行效果:输入学生信息→自动筛选可选课程→生成推荐列表→统计选课人数。 | **观察思考**<br>观看场景,联系自身选课经历,思考技术改进方案;<br><br>**直观感知**<br>观察成品演示,初步建立"需求输入-Python处理-结果输出"的认知框架。 | 通过真实业务痛点创设项目情境,让学生明确项目的实用价值;通过成品展示建立学习目标的具象化认知,激发用编程解决管理问题的兴趣。 |
|
||||||
|
| **2. 项目架构解析**<br>(10分钟) | 讲解选课推荐系统的功能模块,分析项目的技术实现路径,明确Python核心语法与数据结构的应用场景。 | **功能拆解**<br>结合系统演示讲解四大模块:学生信息管理、课程数据存储、推荐规则引擎、结果统计输出;<br><br>**技术映射**<br>说明各模块对应的Python知识:变量与数据类型、列表字典、条件循环、函数封装,绘制技术路线图。 | **聆听记录**<br>理解项目模块划分,在笔记中绘制功能结构图;<br><br>**讨论交流**<br>小组讨论:"要实现自动推荐功能,程序需要处理哪些数据?需要什么判断逻辑?"并分享观点。 | 将抽象的编程学习转化为具体的项目任务链,帮助学生建立系统化思维;通过讨论强化对Python任务的理解,为后续模块化学习明确方向。 |
|
||||||
|
| **3. 开发工具认知**<br>(8分钟) | 介绍Python集成开发环境的功能特点,讲解IDE在项目开发中的便利性(代码提示、调试、项目管理、版本控制)。 | **工具介绍**<br>展示PyCharm界面,讲解项目创建、代码编辑、运行调试等核心功能;<br><br>**演示操作**<br>演示创建"CourseRecommendSystem"项目的完整流程:新建项目→创建main.py文件→编写print("选课系统开发启动!")→运行输出。 | **观看学习**<br>认识IDE的界面布局与主要功能区(项目视图、编辑器、运行窗口、终端);<br><br>**模仿操作**<br>跟随演示,在电脑上创建同名项目并运行第一个脚本,观察输出结果。 | 通过直观演示降低专业工具的使用门槛,消除对IDE的陌生感;通过成功运行第一个脚本建立成就感,为后续编码实践打下操作基础。 |
|
||||||
|
| **4. 环境搭建实践**<br>(12分钟) | 指导学生完成Python及IDE的确认或安装,创建项目文件夹,编写并运行项目启动脚本,验证环境配置正确。 | **任务发布**<br>发布实践任务:"搭建开发环境,创建项目,输出系统启动信息及项目功能列表";<br><br>**巡回指导**<br>巡视学生操作,解答环境配置问题,强调项目命名规范、文件组织结构等良好习惯。 | **动手实践**<br>确认Python及IDE安装状态,创建"CourseRecommendSystem"项目;<br><br>**编码测试**<br>编写多行print语句输出:系统名称、版本号、四大功能模块名称,运行验证环境。 | 通过实际操作巩固开发环境使用技能,完成项目的"环境准备"里程碑;通过输出项目结构信息强化对系统功能的认知,建立项目归属感。 |
|
||||||
|
| **5. 项目展望与总结**<br>(4分钟) | 总结本课时内容,预告后续课程将逐步实现各功能模块,布置课后任务。 | **知识梳理**<br>回顾项目架构与Python角色,强调本课时是项目的"认知与准备起点";<br><br>**任务布置**<br>课后任务:思考并列出3条你认为选课系统应该具备的智能推荐规则(如避免时间冲突、优先推荐高分课程等)。 | **回顾反思**<br>总结收获,明确后续学习将逐步实现数据处理与业务逻辑;<br><br>**接收任务**<br>记录课后任务,思考如何将业务需求转化为编程逻辑。 | 通过总结强化知识结构,通过展望明确项目的阶段性;课后任务引导学生主动进行需求思考,培养产品经理思维与用户视角。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
智能学生选课推荐系统 - 技术架构图
|
||||||
|
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ④ 结果统计输出(数据汇总) │
|
||||||
|
│ Python: 循环累加、格式化输出 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ ③ 推荐规则引擎(智能筛选) │
|
||||||
|
│ Python: 条件判断、逻辑运算 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ ② 课程数据存储(信息管理) │
|
||||||
|
│ Python: 列表、字典 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ ① 学生信息管理(数据录入) │
|
||||||
|
│ Python: 变量、数据类型、输入输出│
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
|
||||||
|
本课时任务: 项目认知 + 环境搭建 ✓
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合项目启动阶段目标评估:85%以上学生能准确说出选课推荐系统的四大功能模块及对应Python技术,全员完成开发环境搭建并成功运行项目启动脚本。通过真实选课场景与系统演示结合,学生对项目实用性认同度高,课堂讨论活跃。项目的"认知与准备"目标达成良好,学生已建立起"模块化开发"的初步意识,为后续功能实现奠定了认知基础。 |
|
||||||
|
| **教学反思** | 本课时成功地将Python编程概述具象为选课推荐系统的启动课,项目情境贴近学生实际,代入感强。技术架构讲解时,将抽象的编程概念与具体的业务模块绑定,学生理解效果好。不足在于:环境搭建环节因学生电脑性能差异,部分机器IDE启动较慢,占用时间略超预期;对"为什么选Python而非Excel"的对比分析不够深入,部分学生对Python优势感知不强。改进方向:①提供详细的课前环境检查清单和备用轻量级编辑器方案;②增加Python与Excel处理复杂选课规则的对比演示,直观展现编程语言的灵活性与扩展性。整体而言,项目驱动框架让学习目标具象,学生的学习动力与目标感显著提升。 |
|
||||||
52
data/Python/10.md
Normal file
52
data/Python/10.md
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
# 天气数据自动采集与推送系统——定时任务与自动化采集 教学设计
|
||||||
|
|
||||||
|
| **课题** | **天气数据自动采集与推送系统——定时任务与自动化采集** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**：理解定时任务的概念与应用场景，掌握schedule库的基本使用方法，了解程序保活与后台运行的基本原理。<br>**技能目标**：能够使用schedule库创建定时任务，能够将前两节课的天气采集模块整合为自动化运行程序，能够实现"每隔N分钟自动采集并保存数据"的完整功能，能够添加日志记录与异常处理确保程序稳定运行。<br>**素养目标**：建立"自动化思维"，理解软件系统的无人值守运行模式，培养将技术能力转化为实用工具的工程意识。 |
|
||||||
|
| **教学重难点** | **重点**：schedule库的安装与基本API使用；定时任务的创建、调度与触发；程序保活的while循环实现；日志记录的规范写法。<br>**难点**：理解schedule的非阻塞调度机制与run_pending()的作用；设计合理的任务执行间隔；处理长时间运行程序的异常与资源管理。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含定时任务场景案例、系统架构图）；前两节课完成的weather_fetcher.py和multi_thread_fetcher.py模块；schedule库安装包；日志配置示例代码；完整项目运行演示视频。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 自动化场景导入**<br>(6分钟) | 展示生活中的自动化案例（如定时提醒、自动备份），引出"让天气采集程序自动运行"的需求，明确本课时要实现的项目最终目标。 | **场景列举**<br>列举自动化应用：闹钟、定时发送报表、服务器定时备份等，提问："我们的天气系统如何做到每小时自动采集？"<br><br>**目标演示**<br>播放完整项目运行视频：程序启动后自动每30分钟采集一次数据，保存到文件并输出日志，无需人工干预。 | **联系经验**<br>回忆日常使用的自动化功能，理解"定时执行"的价值；<br><br>**明确目标**<br>观看演示，建立"让程序自己跑起来"的认知，理解本课时是项目的"收官之作"。 | 通过生活化案例建立自动化认知；通过完整演示展示项目最终形态，激发学生的成就欲望和完成项目的动力。 |
|
||||||
|
| **2. 定时任务原理**<br>(7分钟) | 讲解定时任务的实现机制，介绍Python的schedule库，演示基本的任务调度代码，说明"调度循环"的概念。 | **原理讲解**<br>说明定时任务的本质：程序持续运行，定期检查是否到达执行时间；介绍schedule库是对时间检查逻辑的封装；<br><br>**基础演示**<br>编写简单示例：<br>```python<br>import schedule<br>import time<br>def job():<br> print("任务执行！")<br>schedule.every(10).seconds.do(job)<br>while True:<br> schedule.run_pending()<br> time.sleep(1)<br>```<br>逐行讲解：定义任务函数、设置调度规则、启动循环检查。 | **聆听理解**<br>理解"持续检查+触发执行"的调度机制，记录schedule的核心API；<br><br>**代码跟随**<br>输入演示代码并运行，观察每10秒自动执行一次的效果，尝试修改间隔时间（如30秒、1分钟）。 | 通过原理讲解揭开定时任务的"神秘面纱"；通过简单示例建立"设置规则-启动循环"的操作模型，为项目集成打基础。 |
|
||||||
|
| **3. 项目模块集成**<br>(13分钟) | 指导学生创建主程序文件，整合前两节课的采集模块，实现"定时自动采集多城市天气并保存"的完整功能，添加时间戳与日志输出。 | **架构讲解**<br>说明项目文件结构：weather_fetcher.py（单城市）、multi_thread_fetcher.py（并发）、main_scheduler.py（定时主程序）；<br><br>**集成演示**<br>演示main_scheduler.py编写过程：<br>```python<br>import schedule<br>from multi_thread_fetcher import fetch_all_cities<br>def auto_fetch():<br> data = fetch_all_cities()<br> # 保存到文件，添加时间戳<br> print(f"[{time.strftime('%Y-%m-%d %H:%M:%S')}] 采集完成")<br>schedule.every(30).minutes.do(auto_fetch)<br>```<br>讲解数据保存方案（CSV或JSON）、时间戳格式化；<br><br>**运行测试**<br>启动程序，观察首次执行和后续自动触发的效果。 | **理解架构**<br>明确各模块的职责分工，理解main_scheduler是"指挥中心"；<br><br>**动手编码**<br>创建main_scheduler.py，导入并发采集模块，设置定时规则（如每30分钟），添加数据保存代码；<br><br>**测试验证**<br>运行程序，确认定时执行正常，检查保存的数据文件格式与内容。 | 通过模块集成培养系统化编程思维；通过完整实现建立"小模块组成大系统"的认知；通过实际运行验证项目的实用性。 |
|
||||||
|
| **4. 稳定性优化**<br>(10分钟) | 讲解长时间运行程序的常见问题，指导学生添加异常处理、日志记录、资源管理等代码，确保程序稳定可靠。 | **问题分析**<br>说明长期运行可能遇到的问题：网络故障、API限流、内存泄漏等；强调健壮性的重要性；<br><br>**优化方案**<br>演示添加try-except包裹任务函数、配置logging模块记录日志：<br>```python<br>import logging<br>logging.basicConfig(filename='weather.log', level=logging.INFO)<br>def auto_fetch():<br> try:<br> # 采集逻辑<br> logging.info("采集成功")<br> except Exception as e:<br> logging.error(f"采集失败：{e}")<br>```<br>讲解日志级别（INFO、ERROR）、日志文件的查看方法；<br><br>**最佳实践**<br>建议添加程序启动提示、优雅退出机制（Ctrl+C处理）。 | **认识风险**<br>理解"程序不能假设一切正常"的思想，记录异常处理的必要性；<br><br>**优化代码**<br>为auto_fetch()添加try-except，配置logging输出到文件，测试故意制造错误（如API密钥错误）观察日志记录；<br><br>**完善程序**<br>添加程序启动提示信息，如"天气采集系统已启动，每30分钟执行一次"。 | 通过问题分析培养风险意识；通过优化方案教学提升代码质量；通过日志实践建立生产级程序的开发习惯。 |
|
||||||
|
| **5. 项目总结与展望**<br>(4分钟) | 回顾整个项目的三个核心模块，总结从HTTP请求到多线程再到自动化的完整技术链条，展望后续可扩展的功能方向。 | **项目回顾**<br>梳理项目实现路径：第1课时建立数据源→第2课时提升采集效率→第3课时实现自动化运行；<br><br>**成果展示**<br>请学生展示运行中的程序和保存的数据文件，分享项目完成的成就感；<br><br>**扩展方向**<br>提出可选的增强功能：数据可视化（matplotlib）、极端天气告警推送（邮件/短信）、Web界面展示等；<br><br>**任务布置**<br>课后任务：让程序在电脑上持续运行24小时，观察日志并统计采集成功率。 | **总结反思**<br>回顾三次课的学习历程，理解"技术服务于需求"的思想；<br><br>**展示成果**<br>演示自己的运行程序，分享实现过程中的收获与困难；<br><br>**展望未来**<br>思考项目的实用场景和可改进方向，接收课后实验任务。 | 通过系统回顾强化知识体系；通过成果展示建立成就感与自信；通过扩展方向保持学习兴趣和探索欲望。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
天气数据自动采集系统 - 完整架构
|
||||||
|
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ main_scheduler.py (定时调度主程序) │
|
||||||
|
│ ├── schedule.every(30).minutes │
|
||||||
|
│ ├── 异常处理 + 日志记录 │
|
||||||
|
│ └── while True: run_pending() │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ multi_thread_fetcher.py (并发模块) │
|
||||||
|
│ └── ThreadPoolExecutor 并发采集 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ weather_fetcher.py (数据源模块) │
|
||||||
|
│ └── requests.get() 调用API │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
↓
|
||||||
|
自动保存数据文件 + 日志文件
|
||||||
|
|
||||||
|
核心代码:
|
||||||
|
schedule.every(30).minutes.do(任务函数)
|
||||||
|
while True:
|
||||||
|
schedule.run_pending()
|
||||||
|
time.sleep(1)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合本课时项目任务评估：95%学生成功实现定时自动采集功能，85%学生能够添加完整的异常处理与日志记录。通过三节课的连贯学习，学生完整经历了"单功能模块→性能优化→系统集成"的项目开发过程，对软件工程的模块化思想有了深刻体会。定时任务的实现让学生看到了"程序自己工作"的魅力，课堂兴奋度和成就感达到高峰。项目最终成果具有实用性，部分学生表示愿意持续运行并收集数据做后续分析，显示出强烈的学习内驱力。日志记录的引入提升了学生对"生产级代码"的认知。 |
|
||||||
|
| **教学反思** | 本课时成功将"定时任务与自动化"概念转化为"让天气系统自动运行"的具体目标，学生的学习动机和参与度极高。三节课形成的完整项目链条设计合理，每节课的模块都能无缝集成到最终系统中，验证了项目式教学的有效性。schedule库的简洁API降低了定时任务的学习门槛，学生普遍反馈"比想象中容易"。不足之处：①在40分钟内，对"程序后台运行"的操作系统层面知识（如nohup、系统服务等）未能涉及，部分学生询问"如何让程序关闭终端后仍运行"，建议作为课后拓展资料补充；②日志配置部分主要由教师演示，学生自主设计日志格式的时间不足，建议提供更灵活的日志模板让学生定制；③对"定时任务的精度限制"（如schedule是软实时）未做说明，可能导致学生对时间准确性有过高期待。整体上，项目式教学使三个看似独立的技术主题（HTTP、多线程、定时任务）自然融合为一个有机整体，学生在完成项目的过程中建立了系统化思维和工程实践能力，教学目标超预期达成。建议后续可将此项目作为综合实训案例，引导学生继续扩展功能（如添加Web界面、数据分析模块等）。 |
|
||||||
53
data/Python/11.md
Normal file
53
data/Python/11.md
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
# 数字日记本系统——日记文本文件存储模块 教学设计
|
||||||
|
|
||||||
|
| **课题** | **数字日记本系统——日记文本文件存储模块** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**: 理解文件操作的基本概念和数据持久化的意义，掌握文件的打开模式（读、写、追加）及其区别，理解文件路径、编码格式等基础知识。<br>**技能目标**: 能够使用open()函数和with语句进行安全的文件操作，实现日记内容的写入、追加和读取功能，能编写代码处理文件异常（如文件不存在）和中文编码问题。<br>**素养目标**: 建立"数据持久化是程序实用性的关键"意识，培养安全文件操作习惯（使用with自动关闭），理解数字化记录对生活管理的价值。 |
|
||||||
|
| **教学重难点** | **重点**: 文件的打开与关闭（with语句）；文件的读取方法（read、readline、readlines）；文件的写入模式（'w'覆盖、'a'追加）；中文编码处理（encoding='utf-8'）。<br>**难点**: 理解不同打开模式的适用场景；处理文件路径问题（相对路径vs绝对路径）；设计合理的日记存储格式（如时间戳+内容）；异常处理（文件不存在、权限问题）。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含文件操作原理动画）；项目演示视频（展示日记写入和读取效果）；示例日记文本文件；Python开发环境。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目情境导入**<br>(5分钟) | 展示传统纸质日记的局限性（不便搜索、易丢失、无法备份），引出数字日记本系统的开发需求，明确本课时任务：实现日记内容的文件存储与读取。 | **场景对比**<br>展示纸质日记本和数字日记的对比图，提问："如何让Python程序记住我们写的日记，即使关闭程序后也能找回？"<br><br>**需求分析**<br>明确项目第一步：将日记保存到电脑硬盘的文本文件中，实现数据持久化。 | **问题思考**<br>回顾之前学过的数据存储方式（变量、列表、字典），思考它们的局限性（程序关闭即消失）；<br><br>**目标认同**<br>理解文件存储的必要性：数据永久保存、可随时读取。 | 通过生活化场景建立项目情境，让学生理解"数据持久化"的实际意义；通过对比引发认知冲突，激发对文件操作的学习需求。 |
|
||||||
|
| **2. 文件操作基础**<br>(10分钟) | 讲解文件操作的基本流程（打开→读写→关闭），演示open()函数的使用和with语句的安全性，对比不同打开模式（'r'只读、'w'覆盖写、'a'追加写）的效果。 | **概念讲解**<br>讲解文件操作三步骤：打开文件（指定路径和模式）→操作文件（读或写）→关闭文件（释放资源）；<br><br>**语法演示**<br>演示基本语法：<br>```python<br>with open('diary.txt', 'w', encoding='utf-8') as f:<br> f.write('今天学习了Python文件操作')<br>```<br>强调with语句的自动关闭优势。 | **跟随实践**<br>在交互环境中尝试创建并写入一个简单文本文件，观察文件在磁盘上生成；<br><br>**模式对比**<br>分别测试'w'和'a'模式，观察多次写入时的覆盖与追加差异。 | 通过直观演示建立文件操作的基本认知；通过with语句强调编程规范；通过模式对比实验让学生体会不同场景的技术选择。 |
|
||||||
|
| **3. 日记写入功能**<br>(8分钟) | 指导学生设计日记条目的存储格式（包含日期、时间、内容），编写日记写入函数，实现用户输入日记内容后追加到日记文件中，并自动添加时间戳。 | **格式设计**<br>讲解日记条目格式设计：<br>```<br>============================<br>日期：2026-01-07 15:30<br>内容：今天学习了文件操作...<br>============================<br>```<br><br>**代码示范**<br>演示获取当前时间并格式化输出：<br>```python<br>from datetime import datetime<br>now = datetime.now().strftime('%Y-%m-%d %H:%M')<br>```<br>演示完整的写入流程。 | **功能实现**<br>编写write_diary()函数，实现以下功能：①获取用户输入的日记内容；②自动添加时间戳；③追加写入到diary.txt文件；<br><br>**功能测试**<br>多次运行程序写入不同日记，打开文件验证内容是否正确追加。 | 通过格式设计培养结构化数据思维；通过datetime库的引入扩展学生的技术视野；通过完整功能实现将知识转化为实用技能。 |
|
||||||
|
| **4. 日记读取功能**<br>(10分钟) | 指导学生编写日记读取函数，实现打开日记文件并显示所有历史日记内容，处理文件不存在的异常情况，优化显示格式使其易读。 | **读取方法**<br>对比三种读取方法：read()读取全部、readline()逐行读取、readlines()返回行列表，演示各自适用场景；<br><br>**异常处理**<br>演示try-except处理文件不存在错误：<br>```python<br>try:<br> with open('diary.txt', 'r', encoding='utf-8') as f:<br> content = f.read()<br>except FileNotFoundError:<br> print("还没有日记记录哦！")<br>```<br><br>**代码优化**<br>引导美化输出格式，如添加分隔线、颜色等。 | **编码实践**<br>编写read_diary()函数，读取并显示所有日记内容，处理文件不存在情况；<br><br>**问题解决**<br>调试过程中可能遇到的编码问题（中文乱码），学习使用encoding参数解决。 | 通过多种读取方法的对比培养选择最优方案的能力；通过异常处理培养健壮代码意识；通过实际调试提升问题解决能力。 |
|
||||||
|
| **5. 功能整合测试**<br>(5分钟) | 整合写入和读取功能，实现简单的菜单系统（1.写日记 2.查看日记 3.退出），进行完整流程测试，发现并解决问题。 | **集成指导**<br>指导搭建简单菜单：<br>```python<br>while True:<br> print("1.写日记 2.查看日记 3.退出")<br> choice = input("请选择：")<br> if choice == '1':<br> write_diary()<br> ...<br>```<br><br>**测试引导**<br>引导完整测试：写入多条日记→查看→退出→重新运行→验证数据是否持久保存。 | **系统搭建**<br>整合前面编写的函数，搭建带菜单的完整系统；<br><br>**全流程验证**<br>测试数据持久化效果，验证程序关闭后再次打开能否读取之前的日记。 | 通过功能整合体验模块化开发的优势；通过持久化验证让学生直观感受文件操作的核心价值；通过真实使用增强成就感。 |
|
||||||
|
| **6. 总结与展望**<br>(2分钟) | 总结文件操作的核心知识点和在项目中的应用，分析当前方案的不足（查询不便、格式单一），预告下节课将学习数据库实现更强大的管理功能。 | **知识梳理**<br>回顾文件操作核心：打开模式、读写方法、异常处理、编码问题；<br><br>**问题引导**<br>提问："如果有100条日记，如何快速找到某个日期或包含特定关键词的日记？"引出数据库的必要性。 | **反思总结**<br>总结收获：实现了数据永久存储，系统可以真实使用了；<br><br>**思考改进**<br>思考文本文件存储的局限性，期待学习更高效的存储方案。 | 通过总结强化知识体系；通过问题引导为下节课数据库学习埋下伏笔，保持项目学习的连贯性和期待感。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
数字日记本系统 - 文件存储方案
|
||||||
|
|
||||||
|
文件操作三步骤 打开模式
|
||||||
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||||
|
① 打开文件 open() 'r' - 只读(read)
|
||||||
|
② 读写操作 read/write 'w' - 覆盖写(write)
|
||||||
|
③ 关闭文件 close() 'a' - 追加写(append) ⭐
|
||||||
|
|
||||||
|
安全操作：with语句自动关闭
|
||||||
|
with open('diary.txt', 'a', encoding='utf-8') as f:
|
||||||
|
f.write(content) # 自动管理资源
|
||||||
|
|
||||||
|
日记存储格式：
|
||||||
|
============================
|
||||||
|
日期：2026-01-07 15:30
|
||||||
|
内容：今天学习了Python文件操作
|
||||||
|
============================
|
||||||
|
|
||||||
|
核心要点：
|
||||||
|
● encoding='utf-8' 解决中文乱码
|
||||||
|
● try-except 处理文件不存在
|
||||||
|
● 'a'模式实现日记追加而非覆盖
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 本课时成功将文件操作知识置于"数字日记本"的实用项目中，约85%的学生能够准确说明文件打开模式的区别并在项目中正确应用。全体学生完成了日记写入和读取功能的编码，其中80%以上能够正确处理中文编码和文件异常。通过"写日记→关闭程序→重新打开→查看历史"的完整流程测试，学生对数据持久化的概念有了深刻的直观认知。课堂气氛活跃，多数学生表示课后愿意继续使用和完善这个日记系统，学习动机强烈。项目的实用性成功激发了学生对编程解决生活问题的兴趣。 |
|
||||||
|
| **教学反思** | 本课时通过"数字日记本"这一贴近学生生活的场景成功建立了学习情境，文件操作这一相对枯燥的知识点变得有趣且实用。with语句的安全性和encoding参数的必要性通过实际问题（资源泄漏、中文乱码）得到了有效强调。不足之处：①文件路径概念讲解不够充分，部分学生不理解相对路径，导致在不同目录运行程序时找不到文件，应增加路径可视化讲解和工作目录的概念；②日记格式设计环节时间略紧，部分学生的格式不够规范，可考虑提供标准格式模板；③对read()、readline()、readlines()三种方法的应用场景区分不够清晰，部分学生在处理大文件时选择了不当方法，后续应增加性能对比演示。改进方向：提前准备路径概念的图示材料；提供日记格式的参考模板；设计一个"读取大文件"的对比实验让学生体会不同方法的性能差异。整体来看，项目驱动的教学方式让抽象的文件操作变得具体可感，学生的实践能力和问题解决能力得到了有效锻炼。 |
|
||||||
58
data/Python/12.md
Normal file
58
data/Python/12.md
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
# 数字日记本系统——日记数据库管理模块 教学设计
|
||||||
|
|
||||||
|
| **课题** | **数字日记本系统——日记数据库管理模块** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**: 理解数据库的基本概念及其相对于文本文件的优势，掌握SQLite数据库的特点和应用场景，理解表、记录、字段等数据库术语，掌握SQL语句的基本语法（CREATE、INSERT、SELECT）。<br>**技能目标**: 能够使用Python的sqlite3模块连接数据库、创建数据表、执行增删改查操作，实现日记数据从文件存储到数据库存储的迁移，能编写按日期、关键词查询日记的功能代码。<br>**素养目标**: 建立"结构化数据管理提升系统能力"的工程意识，培养数据建模思维（设计合理的表结构），理解数据库在现代应用中的核心地位。 |
|
||||||
|
| **教学重难点** | **重点**: SQLite数据库的连接与关闭；数据表的创建（CREATE TABLE）；数据的插入（INSERT）和查询（SELECT）；Python与数据库的交互流程（连接→游标→执行→提交→关闭）。<br>**难点**: 理解数据库相对于文本文件的本质优势；设计合理的日记表结构（字段类型选择）；SQL语句的编写和参数化查询（防止SQL注入）；查询结果的处理（fetchall、fetchone）。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含数据库原理动画）；SQLite数据库可视化工具（如DB Browser）；上节课的日记文本文件；项目演示视频。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 问题情境导入**<br>(6分钟) | 回顾文本文件存储方案，演示在大量日记中查找特定内容的困难（需要逐行读取和字符串匹配），引出数据库的必要性，明确本课时任务：将日记迁移到数据库实现高效管理。 | **效率对比**<br>演示在包含100条日记的文本文件中查找"2026-01-05"的日记，展示代码复杂度和耗时；<br><br>**需求分析**<br>提问："如何像图书馆检索系统一样，通过条件快速找到想要的日记？"引出数据库的索引和查询优势。 | **问题体验**<br>尝试在上节课的日记文件中手动查找特定日期的日记，感受文本查找的低效；<br><br>**概念对比**<br>讨论：文本文件vs数据库，在数据量大、查询频繁时哪个更合适？ | 通过效率问题创造认知需求，让学生理解"为什么需要数据库"；通过类比图书馆检索系统建立数据库查询的直观认知。 |
|
||||||
|
| **2. 数据库基础知识**<br>(9分钟) | 讲解数据库的基本概念（数据库、表、记录、字段），介绍SQLite的特点（轻量级、无需服务器、单文件），演示数据库可视化工具查看表结构，对比文本存储与数据库存储的差异。 | **概念讲解**<br>用Excel表格类比讲解：数据库=工作簿、表=工作表、记录=行、字段=列；<br><br>**SQLite介绍**<br>讲解SQLite优势：Python内置支持、数据存储在单个.db文件中、适合小型应用；<br><br>**可视化演示**<br>使用DB Browser打开示例数据库，展示表结构和数据查看方式。 | **类比理解**<br>结合Excel使用经验理解数据库结构概念；<br><br>**工具体验**<br>打开示例数据库文件，观察表结构、字段类型、记录内容，建立直观认知。 | 通过Excel类比降低抽象概念的理解难度；通过可视化工具让学生直观看到数据库的组织方式；通过对比建立数据库的核心优势认知。 |
|
||||||
|
| **3. 数据表创建**<br>(8分钟) | 指导学生设计日记表的结构（字段：id主键、日期、时间、内容、标签），编写Python代码连接数据库并创建表，讲解SQL的CREATE TABLE语法和数据类型。 | **表结构设计**<br>引导设计日记表字段：<br>```sql<br>CREATE TABLE diary (<br> id INTEGER PRIMARY KEY,<br> date TEXT,<br> time TEXT,<br> content TEXT,<br> tags TEXT<br>)<br>```<br>讲解主键的作用和TEXT、INTEGER等类型；<br><br>**代码演示**<br>演示Python连接数据库并创建表：<br>```python<br>import sqlite3<br>conn = sqlite3.connect('diary.db')<br>cursor = conn.cursor()<br>cursor.execute('CREATE TABLE ...')<br>conn.commit()<br>conn.close()<br>```<br>强调连接→游标→执行→提交→关闭的标准流程。 | **设计讨论**<br>小组讨论：日记表还需要哪些字段？心情、天气、地点等如何设计？<br><br>**编码实践**<br>编写代码创建日记数据表，运行后用可视化工具验证表是否创建成功。 | 通过表结构设计培养数据建模思维；通过标准操作流程建立规范的数据库编程习惯；通过可视化验证增强成功反馈。 |
|
||||||
|
| **4. 数据插入与查询**<br>(10分钟) | 指导学生编写日记插入功能（INSERT语句），实现从用户输入到数据库存储的完整流程，编写查询功能（SELECT语句），实现按日期范围和关键词查询日记。 | **插入操作**<br>演示INSERT语法和参数化查询（防SQL注入）：<br>```python<br>cursor.execute(<br> 'INSERT INTO diary (date, time, content) VALUES (?, ?, ?)',<br> (date, time, content)<br>)<br>```<br>强调使用占位符?而非字符串拼接；<br><br>**查询操作**<br>演示SELECT查询：<br>```python<br># 查询所有<br>cursor.execute('SELECT * FROM diary')<br>results = cursor.fetchall()<br># 按日期查询<br>cursor.execute('SELECT * FROM diary WHERE date=?', (target_date,))<br>```<br>讲解WHERE子句和LIKE模糊查询。 | **插入功能**<br>编写add_diary_to_db()函数，获取用户输入并插入数据库，测试添加多条日记；<br><br>**查询功能**<br>编写query_by_date()和query_by_keyword()函数，实现按日期精确查询和按内容模糊查询，验证查询结果。 | 通过参数化查询强调安全编程意识；通过完整功能实现将SQL语句转化为实用技能；通过多样化查询体现数据库的强大查询能力。 |
|
||||||
|
| **5. 功能整合与迁移**<br>(5分钟) | 指导学生将上节课文本文件中的日记数据批量导入数据库，整合菜单系统（添加数据库查询选项），对比文件和数据库两种方案的效果差异。 | **数据迁移**<br>演示读取文本文件并批量插入数据库的代码逻辑：<br>```python<br>with open('diary.txt', 'r') as f:<br> # 解析每条日记<br> # 插入数据库<br>```<br><br>**系统升级**<br>指导在菜单中添加"按日期查询"、"按关键词查询"等新选项。 | **数据导入**<br>编写迁移脚本，将文本日记批量导入数据库；<br><br>**效果对比**<br>测试查询功能，对比文本文件遍历和数据库查询的速度和便利性。 | 通过数据迁移实现新旧系统的平滑过渡；通过效果对比让学生直观感受数据库的优势；通过系统升级体验技术进步带来的能力提升。 |
|
||||||
|
| **6. 总结与展望**<br>(2分钟) | 总结数据库的核心优势和SQL基本语句，对比文本文件与数据库的适用场景，预告下节课将学习JSON格式实现跨平台数据备份和迁移。 | **知识梳理**<br>回顾数据库操作流程和SQL四大语句（CRUD）；<br><br>**场景引导**<br>提问："如果想把日记备份到手机或分享给朋友，数据库文件能直接用吗？"引出数据交换格式的需求。 | **反思总结**<br>总结数据库带来的能力提升：快速查询、结构化管理、数据完整性；<br><br>**思考问题**<br>思考：如何实现数据的跨平台、跨系统共享？ | 通过总结强化数据库核心知识；通过问题引导为下节课JSON数据交换学习做铺垫，保持项目逻辑的连贯性。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
数字日记本系统 - 数据库管理方案
|
||||||
|
|
||||||
|
数据库操作五步骤 SQL四大操作(CRUD)
|
||||||
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||||
|
① 连接数据库 connect() Create - INSERT ➕
|
||||||
|
② 创建游标 cursor() Read - SELECT 🔍
|
||||||
|
③ 执行SQL execute() Update - UPDATE ✏️
|
||||||
|
④ 提交事务 commit() Delete - DELETE ❌
|
||||||
|
⑤ 关闭连接 close()
|
||||||
|
|
||||||
|
日记表结构设计：
|
||||||
|
┌──────────────────────────────────┐
|
||||||
|
│ diary 表 │
|
||||||
|
├──────┬─────────┬─────────────────┤
|
||||||
|
│ id │ INTEGER │ PRIMARY KEY ⭐ │
|
||||||
|
│ date │ TEXT │ 日期 2026-01-07 │
|
||||||
|
│ time │ TEXT │ 时间 15:30 │
|
||||||
|
│ content │ TEXT │ 日记内容 │
|
||||||
|
│ tags │ TEXT │ 标签(可选) │
|
||||||
|
└──────┴─────────┴─────────────────┘
|
||||||
|
|
||||||
|
查询示例：
|
||||||
|
WHERE date='2026-01-07' # 精确查询
|
||||||
|
WHERE content LIKE '%学习%' # 模糊查询
|
||||||
|
|
||||||
|
核心优势：
|
||||||
|
✓ 结构化存储 ✓ 高效查询 ✓ 数据完整性
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 本课时成功将数据库编程知识融入日记系统的升级改造任务中，约75%的学生能够准确说明数据库相对于文本文件的核心优势并设计合理的表结构。全体学生完成了数据表创建和基本的增删改查操作，其中70%以上能够独立编写按日期和关键词查询的功能代码。通过文本文件与数据库查询的效率对比实验，学生对"为什么需要数据库"有了深刻的直观认知。数据迁移环节让学生体验了技术升级的完整过程，成就感强烈。部分学生主动提出增加"按心情筛选"、"标签分类"等扩展功能，显示出较强的创新意识和学习主动性。 |
|
||||||
|
| **教学反思** | 本课时通过"查询效率对比"成功建立了从文本文件到数据库的技术升级需求，学生的学习动机明确。Excel类比和可视化工具的使用有效降低了数据库抽象概念的理解难度。SQL语句的讲解结合项目实际需求，避免了语法学习的枯燥感。不足之处：①数据库连接的"连接→游标→执行→提交→关闭"流程对部分学生来说较为陌生，容易遗漏commit()或close()步骤导致数据未保存或资源泄漏，应提供更醒目的流程提示卡；②参数化查询（占位符?）的必要性（防SQL注入）讲解不够充分，部分学生仍使用字符串拼接，安全意识培养不足，后续应增加SQL注入攻击的演示案例；③数据迁移脚本编写时，日期时间的解析和格式转换难度较大，部分学生出错率高，可考虑提供正则表达式或字符串处理的辅助函数。改进方向：制作数据库操作流程的可视化图卡便于学生参考；设计一个"SQL注入危害"的演示实验增强安全意识；为数据迁移任务提供数据解析的工具函数模板。整体来看，项目的技术升级路线清晰，学生在实践中体会到了数据库的强大能力，为后续复杂应用开发奠定了基础。 |
|
||||||
64
data/Python/13.md
Normal file
64
data/Python/13.md
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
# 数字日记本系统——日记数据导出与备份模块 教学设计
|
||||||
|
|
||||||
|
| **课题** | **数字日记本系统——日记数据导出与备份模块** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**: 理解JSON格式的特点及其在数据交换中的广泛应用，掌握Python数据结构与JSON格式的对应关系（字典↔对象、列表↔数组），理解序列化与反序列化的概念和作用。<br>**技能目标**: 能够使用json模块实现Python数据结构与JSON字符串的相互转换（dumps/loads、dump/load），实现日记数据的JSON格式导出（备份）和导入（恢复/迁移）功能，能处理中文编码和日期格式化问题。<br>**素养目标**: 建立"标准数据格式促进系统互通"的工程意识，培养数据备份和迁移的安全意识，理解开放数据格式在现代应用中的价值。 |
|
||||||
|
| **教学重难点** | **重点**: JSON格式的基本语法（键值对、数组）；json.dump()和json.load()的使用（文件操作）；json.dumps()和json.loads()的使用（字符串操作）；ensure_ascii=False处理中文。<br>**难点**: 理解序列化与反序列化的本质（内存对象↔存储格式）；从数据库查询结果转换为JSON格式（fetchall返回的元组列表需转为字典列表）；处理datetime等特殊类型的序列化（需自定义转换）。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含JSON格式示例）；上节课的日记数据库文件；JSON在线验证工具演示；跨平台数据交换案例视频。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 数据交换需求导入**<br>(5分钟) | 展示跨平台数据共享场景（电脑日记想导入手机、分享给朋友、更换电脑后恢复数据），演示SQLite数据库文件的局限性（不同系统可能不兼容），引出标准数据交换格式的必要性，明确本课时任务：实现JSON格式的数据备份与恢复。 | **场景演示**<br>展示尝试在手机上打开.db文件的困难，提问："如何让日记数据能在不同设备、不同系统间自由流动？"<br><br>**需求分析**<br>讲解数据交换的三大场景：备份（防丢失）、迁移（换设备）、分享（多人协作），引出JSON作为通用格式的价值。 | **问题体验**<br>回顾自己是否遇到过数据迁移的困难（如换手机后丢失数据）；<br><br>**目标认同**<br>理解"开放格式"的重要性：不依赖特定软件、人类可读、跨平台通用。 | 通过真实场景建立数据交换的实际需求；通过数据库局限性创造认知冲突；通过"开放格式"概念建立JSON学习的价值认知。 |
|
||||||
|
| **2. JSON格式基础**<br>(8分钟) | 讲解JSON的基本语法（对象{}、数组[]、键值对、数据类型），对比JSON与Python数据结构的对应关系，演示在线JSON验证工具，强调JSON的"人类可读"和"机器可解析"双重特性。 | **格式讲解**<br>展示JSON示例：<br>```json<br>{<br> "date": "2026-01-07",<br> "content": "今天学习了JSON",<br> "tags": ["学习", "编程"]<br>}<br>```<br>讲解语法规则：键必须用双引号、不能有注释、不支持函数等；<br><br>**类型对应**<br>绘制Python↔JSON对应表：<br>dict↔对象、list↔数组、str↔字符串、int/float↔数字、True/False↔true/false、None↔null；<br><br>**工具演示**<br>使用在线JSON验证工具展示格式检查和美化功能。 | **格式识别**<br>阅读示例JSON，识别对象、数组、键值对等结构元素；<br><br>**对比学习**<br>对比Python字典和JSON对象的相似性与差异（如引号规则）；<br><br>**动手尝试**<br>在在线工具中编写简单JSON并验证格式正确性。 | 通过直观示例建立JSON格式的基本认知；通过类型对应表为后续序列化操作建立知识桥梁；通过工具使用降低格式学习的门槛。 |
|
||||||
|
| **3. 序列化与反序列化**<br>(10分钟) | 讲解序列化（Python对象→JSON字符串/文件）和反序列化（JSON→Python对象）的概念，演示json模块的四个核心函数（dumps、loads、dump、load），强调中文处理参数ensure_ascii=False。 | **概念讲解**<br>讲解序列化本质：将内存中的对象转换为可存储/传输的格式；<br><br>**函数演示**<br>演示dumps和loads（字符串操作）：<br>```python<br>import json<br>data = {"name": "日记", "count": 100}<br>json_str = json.dumps(data, ensure_ascii=False)<br>data_back = json.loads(json_str)<br>```<br>演示dump和load（文件操作）：<br>```python<br>with open('data.json', 'w', encoding='utf-8') as f:<br> json.dump(data, f, ensure_ascii=False, indent=2)<br>```<br>强调indent参数用于格式化输出，ensure_ascii用于正确显示中文。 | **跟随实践**<br>创建包含中文的字典，尝试序列化为JSON字符串，观察ensure_ascii=False的效果差异；<br><br>**文件操作**<br>将数据序列化保存到JSON文件，再读取文件反序列化回Python对象，验证数据一致性。 | 通过概念讲解建立序列化的理论基础；通过对比实验（有无ensure_ascii）强化中文处理意识；通过完整操作巩固文件读写与JSON的结合应用。 |
|
||||||
|
| **4. 日记数据导出**<br>(10分钟) | 指导学生编写日记导出功能：从数据库查询所有日记，将查询结果（元组列表）转换为字典列表，序列化为JSON格式并保存到文件，实现完整的数据备份。 | **任务分解**<br>分解导出流程：①从数据库SELECT查询全部日记；②将元组结果转为字典格式（需字段名映射）；③调用json.dump()保存到文件；<br><br>**难点突破**<br>演示元组转字典的处理：<br>```python<br>cursor.execute('SELECT * FROM diary')<br>rows = cursor.fetchall()<br>diaries = []<br>for row in rows:<br> diaries.append({<br> 'id': row[0],<br> 'date': row[1],<br> 'content': row[2]<br> })<br>```<br><br>**代码示范**<br>演示完整的export_to_json()函数实现。 | **编码实践**<br>编写导出函数，实现数据库→JSON文件的转换，注意添加时间戳到导出文件名（如diary_backup_20260107.json）；<br><br>**功能测试**<br>导出日记数据，用文本编辑器或JSON工具打开查看格式是否正确、中文是否显示正常。 | 通过任务分解降低复杂功能的实现难度；通过难点突破解决数据库查询结果的格式转换问题；通过真实文件验证增强成功体验。 |
|
||||||
|
| **5. 日记数据导入**<br>(5分钟) | 指导学生编写日记导入功能：读取JSON备份文件，反序列化为Python对象，批量插入到数据库中，实现数据的恢复和迁移，测试跨设备数据共享。 | **流程设计**<br>讲解导入流程：①读取JSON文件；②json.load()反序列化；③遍历日记列表；④批量INSERT到数据库；<br><br>**代码示范**<br>演示import_from_json()函数：<br>```python<br>with open('backup.json', 'r', encoding='utf-8') as f:<br> diaries = json.load(f)<br>for diary in diaries:<br> cursor.execute('INSERT INTO diary ...')<br>```<br><br>**异常处理**<br>引导处理文件不存在、JSON格式错误等异常。 | **编码实现**<br>编写导入函数，实现JSON文件→数据库的反向操作；<br><br>**恢复测试**<br>删除数据库中的部分数据，使用导入功能从JSON备份恢复，验证数据完整性。 | 通过逆向操作巩固序列化/反序列化的双向理解；通过数据恢复测试体现备份功能的实用价值；通过异常处理培养健壮代码意识。 |
|
||||||
|
| **6. 系统整合与总结**<br>(2分钟) | 将导出和导入功能整合到菜单系统，总结三节课完成的完整数字日记本系统（文件→数据库→JSON），对比三种数据持久化方案的特点与适用场景，布置综合任务。 | **功能整合**<br>指导在主菜单添加"备份到JSON"和"从JSON恢复"选项，展示完整系统的所有功能；<br><br>**知识总结**<br>绘制三种方案对比表：文本文件（简单、不便查询）、数据库（高效、不便迁移）、JSON（通用、人类可读）；<br><br>**任务布置**<br>课后任务：为JSON导出添加"导出选定日期范围"功能，支持部分数据导出。 | **系统展示**<br>小组展示完整的数字日记本系统运行效果，演示备份→清空→恢复的完整流程；<br><br>**反思总结**<br>总结三课时的技术进化路线，理解不同技术方案的取舍逻辑。 | 通过功能整合展现项目的完整性；通过方案对比建立技术选择的决策思维；通过系统演示增强学生的成就感和自信心。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
数字日记本系统 - 数据交换方案
|
||||||
|
|
||||||
|
Python ⇄ JSON 转换
|
||||||
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||||
|
序列化 (Serialization) 反序列化 (Deserialization)
|
||||||
|
Python对象 → JSON JSON → Python对象
|
||||||
|
|
||||||
|
┌─────────────────┐ ┌─────────────────┐
|
||||||
|
│ json.dumps() │ │ json.loads() │
|
||||||
|
│ 对象→字符串 │ │ 字符串→对象 │
|
||||||
|
├─────────────────┤ ├─────────────────┤
|
||||||
|
│ json.dump() │ │ json.load() │
|
||||||
|
│ 对象→文件 │ │ 文件→对象 │
|
||||||
|
└─────────────────┘ └─────────────────┘
|
||||||
|
|
||||||
|
类型对应关系：
|
||||||
|
Python JSON
|
||||||
|
━━━━━━━━━━━━━━━━━━━━━━
|
||||||
|
dict ⟷ 对象 {}
|
||||||
|
list ⟷ 数组 []
|
||||||
|
str ⟷ 字符串 ""
|
||||||
|
int/float ⟷ 数字
|
||||||
|
True/False ⟷ true/false
|
||||||
|
None ⟷ null
|
||||||
|
|
||||||
|
关键参数：
|
||||||
|
● ensure_ascii=False 显示中文
|
||||||
|
● indent=2 格式化美化
|
||||||
|
|
||||||
|
三种方案对比：
|
||||||
|
文本文件 ➜ 简单，查询不便
|
||||||
|
数据库 ➜ 高效，迁移困难
|
||||||
|
JSON ➜ 通用，跨平台互通 ⭐
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 本课时成功将JSON数据处理知识置于"数据备份与跨平台迁移"的实用场景中，约80%的学生能够准确说明JSON格式的特点和序列化的作用。全体学生完成了日记数据的JSON导出和导入功能，其中75%以上能够正确处理中文编码和数据格式转换。通过"导出→删除→恢复"的完整测试流程，学生对数据备份的价值有了深刻认知。三课时的项目开发让学生完整体验了从简单文件到数据库再到标准数据格式的技术演进过程，建立了较为完整的数据持久化知识体系。小组展示环节学生能够清晰阐述每种方案的优劣，显示出较强的技术理解和表达能力。多数学生表示愿意继续使用并完善这个日记系统，学习迁移到生活实践的效果显著。 |
|
||||||
|
| **教学反思** | 本课时通过"跨平台数据共享"的真实需求成功建立了JSON学习的情境，学生对"为什么需要标准格式"有了清晰认知。Python数据结构与JSON的类型对应讲解清晰，降低了格式转换的理解难度。不足之处：①数据库查询结果（元组列表）转换为字典列表的代码逻辑对部分学生来说较为复杂，出现索引错误和字段映射混乱，后续应提供更详细的数据结构转换示意图；②对datetime等特殊类型的序列化问题只做了简单提及（将日期存为字符串），未深入讲解自定义JSON编码器，部分学生遇到复杂对象序列化时仍会困惑；③JSON格式错误的调试方法讲解不足，部分学生在手动编辑JSON时出现语法错误（如多余逗号、单引号等）但不知如何定位，应强化JSON验证工具的使用指导。改进方向：制作数据结构转换的可视化流程图；增加datetime序列化的拓展案例；提供常见JSON格式错误的排查清单。整体来看，三课时的项目设计逻辑清晰、技术递进合理，学生通过实战掌握了文件操作、数据库和JSON三大核心技术，综合能力得到全面提升，项目式教学的效果得到了充分验证。 |
|
||||||
50
data/Python/14.md
Normal file
50
data/Python/14.md
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
# 天气数据自动采集与推送系统——HTTP通信与天气API数据获取 教学设计
|
||||||
|
|
||||||
|
| **课题** | **天气数据自动采集与推送系统——HTTP通信与天气API数据获取** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**：理解HTTP协议的请求-响应模式，掌握REST API的基本概念与调用方式,了解JSON数据格式的结构特点。<br>**技能目标**：能够使用requests库发送GET请求调用天气API，能够解析API返回的JSON数据并提取关键字段（城市、温度、天气状况），能够编写完整的天气数据获取脚本作为项目的数据采集模块。<br>**素养目标**：建立"服务调用"的现代编程思维，培养阅读API文档的自学能力，养成在项目开发中合理使用第三方服务的工程意识。 |
|
||||||
|
| **教学重难点** | **重点**：requests库的安装与基本使用方法；API请求URL的构造与参数传递；JSON数据的解析与字段提取。<br>**难点**：理解HTTP请求的本质与API文档中参数的对应关系；处理API响应中的嵌套JSON结构；应对API请求失败的异常情况。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含HTTP通信原理动画）；和风天气API密钥（或其他免费天气API）；示例API响应JSON数据；requests库安装包；项目代码模板文件。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目任务导入**<br>(7分钟) | 展示项目最终目标（自动采集多城市天气并推送），明确本课时任务是实现项目的核心模块——数据采集功能，引出"如何让Python程序从互联网获取天气数据"这一技术问题。 | **场景创设**<br>演示手机天气APP的实时更新效果，提问："这些数据从哪来？我们的Python程序如何获取？"<br><br>**任务发布**<br>展示项目架构图，标注本课时目标：编写weather_fetcher.py模块，实现"输入城市名→返回温度、天气"功能。 | **观察思考**<br>观看演示，联系日常使用经验，思考数据来源；<br><br>**明确目标**<br>理解本课时在项目中的定位：数据采集是后续所有功能的基础。 | 通过真实应用场景建立技术需求认知；通过项目架构图让学生明确本课时任务在整体中的关键作用，强化目标导向。 |
|
||||||
|
| **2. 核心概念讲解**<br>(8分钟) | 讲解HTTP协议的客户端-服务器模型，介绍REST API的概念、特点与调用方式，展示天气API文档的关键内容（接口地址、参数、响应格式）。 | **原理阐述**<br>用动画演示HTTP请求过程：Python程序（客户端）→发送请求→服务器→返回数据；强调"URL+参数"的请求构造方式；<br><br>**文档解读**<br>打开和风天气API文档，逐项讲解：接口URL、必需参数（key、location）、响应JSON结构，演示在浏览器中直接访问API。 | **聆听理解**<br>理解HTTP的"请求-响应"机制，记录API调用的三要素：地址、参数、响应格式；<br><br>**实例观察**<br>观看浏览器访问API的演示，直观感受JSON数据的返回，尝试识别数据中的城市、温度字段。 | 将抽象的网络通信概念具象为"发送网址+参数，获得数据"的简单模型；通过浏览器演示消除技术神秘感，建立"API就是特殊网址"的认知。 |
|
||||||
|
| **3. 工具库与代码演示**<br>(10分钟) | 介绍requests库的作用与安装，演示使用requests.get()调用天气API的完整代码，讲解参数传递、响应处理、JSON解析的具体方法。 | **库的引入**<br>说明requests是Python的HTTP客户端库，演示pip install requests安装过程；<br><br>**代码演示**<br>边讲解边编写代码：<br>```python<br>import requests<br>url = "https://api.qweather.com/v7/weather/now"<br>params = {"key": "你的密钥", "location": "101010100"}<br>response = requests.get(url, params=params)<br>data = response.json()<br>print(f"温度：{data['now']['temp']}℃")<br>```<br>逐行解释：URL定义、参数字典、发送请求、解析JSON、字段访问；<br><br>**运行展示**<br>运行代码，展示获取到的北京天气数据。 | **安装实践**<br>跟随教师完成requests库的安装确认；<br><br>**代码跟随**<br>边听边在自己的IDE中输入代码，理解每行的作用；<br><br>**结果验证**<br>运行代码，观察控制台输出的天气数据，对照API文档验证字段。 | 通过完整代码演示建立"库调用-参数传递-数据解析"的操作流程；通过逐行讲解降低理解难度；通过即时运行验证建立"代码有效"的信心。 |
|
||||||
|
| **4. 功能模块编写**<br>(12分钟) | 指导学生编写完整的天气数据获取函数，封装为项目模块，要求实现：输入城市名、返回温度和天气状况、添加异常处理、输出格式化结果。 | **任务细化**<br>发布编码任务：创建weather_fetcher.py，定义get_weather(city)函数，实现上述功能；提供城市代码对照表；<br><br>**技术提示**<br>提示关键点：使用字典存储多城市代码、用try-except捕获网络异常、格式化输出使用f-string；<br><br>**巡回指导**<br>巡视学生编码，解答JSON嵌套访问、异常处理等问题，强调代码注释与函数文档字符串的编写。 | **独立编码**<br>创建py文件，定义函数框架，填充请求逻辑；<br><br>**调试测试**<br>测试不同城市（如"北京""上海"），验证数据准确性；尝试故意输入错误密钥，观察异常处理效果；<br><br>**代码优化**<br>根据测试结果调整代码，添加注释说明各部分功能。 | 通过独立编码巩固API调用技能，形成可复用的项目模块；通过测试培养"编码-调试-优化"的开发习惯；通过异常处理强化代码健壮性意识。 |
|
||||||
|
| **5. 成果展示与项目展望**<br>(3分钟) | 选取学生作品展示运行效果，总结HTTP通信与API调用的核心要点，预告后续课程将在此基础上实现多城市并发采集与数据存储。 | **作品点评**<br>选2-3名学生演示代码，点评优点（如良好的异常处理）与改进点；<br><br>**知识串联**<br>总结：本课时完成了项目的"数据源"模块，后续将学习用多线程同时采集多城市、用数据库存储历史数据、用定时任务实现自动化；<br><br>**任务布置**<br>课后任务：为函数添加"获取未来3天天气"的功能（需查阅API文档）。 | **观摩学习**<br>观看同学作品，学习不同实现思路；<br><br>**总结反思**<br>回顾requests使用流程，明确本模块在项目中的"基石"作用；<br><br>**接收任务**<br>记录课后任务，理解这是对API调用能力的深化练习。 | 通过作品展示建立学习榜样，强化成就感；通过项目展望保持学习连贯性，明确当前任务与后续模块的逻辑关系；课后任务引导学生自主探索API文档。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
天气数据采集模块 - HTTP通信流程
|
||||||
|
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ Python程序 (客户端) │
|
||||||
|
│ ├── 构造请求: URL + 参数 │
|
||||||
|
│ ├── 发送: requests.get() │
|
||||||
|
│ └── 解析: response.json() │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ ↓↑ HTTP 协议 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 天气API服务器 │
|
||||||
|
│ ├── 接收请求 │
|
||||||
|
│ ├── 查询数据 │
|
||||||
|
│ └── 返回JSON: {now: {temp, text}} │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
|
||||||
|
核心代码结构:
|
||||||
|
import requests
|
||||||
|
response = requests.get(url, params=参数字典)
|
||||||
|
data = response.json()
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合本课时项目任务评估：85%以上学生成功调用API获取天气数据并正确解析，75%学生能够独立编写带异常处理的完整函数。通过"浏览器直接访问API"的演示，有效降低了学生对网络通信的畏难情绪。学生对requests库的"三行代码实现网络数据获取"表现出浓厚兴趣，课堂参与度高。项目数据采集模块的基础功能已基本实现，为后续多线程、数据存储等课时奠定了坚实基础。部分学生在调试JSON嵌套字段访问时遇到困难，但在教师指导下均得以解决。 |
|
||||||
|
| **教学反思** | 本课时成功将"HTTP通信与REST API"这一理论性较强的主题，转化为"获取天气数据"的具体项目任务，学生的代入感和学习动力明显增强。API文档解读环节设计合理，通过浏览器演示让抽象的"接口调用"变得直观可感。代码演示采用"边讲边写"方式，学生跟随效果好于预期。不足之处：①在40分钟内，部分学生因requests库安装出现网络问题导致进度延迟，建议提前让学生课下完成库安装或准备离线安装包；②对于JSON嵌套结构的访问（如data['now']['temp']），讲解略显仓促，少数学生理解不够深入，建议增加一个"JSON结构可视化"的辅助图示；③异常处理部分主要由教师演示，学生自主实践时间不足，后续可考虑设计专门的"错误处理"小任务强化训练。整体上，项目驱动的教学框架使技术学习目标清晰，学生编写的weather_fetcher.py模块已具备项目集成的条件，教学目标达成度较高。 |
|
||||||
48
data/Python/15.md
Normal file
48
data/Python/15.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# 天气数据自动采集与推送系统——多线程并发采集多城市数据 教学设计
|
||||||
|
|
||||||
|
| **课题** | **天气数据自动采集与推送系统——多线程并发采集多城市数据** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**：理解进程与线程的概念及区别，掌握Python多线程编程的基本原理，了解并发编程在提升I/O密集型任务效率中的作用。<br>**技能目标**：能够使用threading模块创建和管理线程，能够改造单线程的天气数据采集代码为多线程并发版本，能够使用线程池(ThreadPoolExecutor)批量处理多城市数据采集任务，能够测量并对比串行与并发执行的性能差异。<br>**素养目标**：建立"并发优化"的工程思维，理解多线程在网络请求场景中的实用价值，培养通过技术手段提升程序性能的意识。 |
|
||||||
|
| **教学重难点** | **重点**：threading模块的基本使用方法；线程的创建、启动与等待；ThreadPoolExecutor的应用；多线程访问共享数据的注意事项。<br>**难点**：理解多线程的并发执行机制与线程切换；处理多线程中的数据收集与结果汇总；避免线程安全问题（如数据竞争）。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含进程与线程对比图、并发执行动画）；上节课完成的weather_fetcher.py模块；多城市代码列表文件；性能测试脚本模板；线程池使用示例代码。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 性能瓶颈引入**<br>(6分钟) | 演示串行采集10个城市天气数据的耗时问题，提出"如何加速数据采集"的技术需求，引入多线程并发编程的概念。 | **问题演示**<br>运行上节课的weather_fetcher模块，用循环串行采集10个城市，用time模块记录总耗时（约10-15秒），提问："如果要采集100个城市呢？"<br><br>**概念引入**<br>展示并发执行示意图，说明"同时发送多个请求"的思想，介绍线程是实现并发的一种方式。 | **观察分析**<br>观看串行执行过程，感受耗时问题，理解在网络请求中"等待响应"的时间占主导；<br><br>**讨论思考**<br>小组讨论："能否让程序同时请求多个城市的数据？"初步建立并发需求认知。 | 通过实际运行建立性能痛点，让学生体会"串行等待"的低效；通过对比引出并发方案，明确本课时要解决的核心问题。 |
|
||||||
|
| **2. 多线程原理讲解**<br>(8分钟) | 讲解进程与线程的基本概念、区别与应用场景，介绍Python的threading模块，演示线程的创建、启动与join()方法的使用。 | **概念对比**<br>用类比说明：进程是独立的程序实例（如打开的软件），线程是程序内部的执行路径（如软件的多个功能同时运行）；强调线程共享内存、切换快的特点；<br><br>**基础演示**<br>编写简单示例：<br>```python<br>import threading<br>def task(name):<br> print(f"{name}线程执行中")<br>t1 = threading.Thread(target=task, args=("A",))<br>t1.start()<br>t1.join()<br>```<br>讲解Thread对象创建、target参数、start()启动、join()等待。 | **聆听理解**<br>理解"并发≠并行"的概念，记录线程的三要素：目标函数、参数、启动方法；<br><br>**代码跟随**<br>在IDE中输入演示代码，运行观察线程执行效果，尝试创建多个线程并观察输出顺序的随机性。 | 通过类比降低抽象概念的理解难度；通过简单示例建立"创建线程-启动-等待"的基本操作流程，为后续复杂应用打基础。 |
|
||||||
|
| **3. 并发采集实现**<br>(12分钟) | 指导学生改造天气采集代码，使用线程实现多城市并发请求，演示ThreadPoolExecutor的使用方法，对比串行与并发的性能差异。 | **方案讲解**<br>说明改造思路：为每个城市创建独立线程调用get_weather()，将结果存入列表；<br><br>**代码演示**<br>演示手动创建线程版本，然后引入线程池简化代码：<br>```python<br>from concurrent.futures import ThreadPoolExecutor<br>cities = ["北京", "上海", "广州", ...]<br>with ThreadPoolExecutor(max_workers=5) as executor:<br> results = executor.map(get_weather, cities)<br>```<br>讲解线程池的优势：自动管理线程数量、简化代码；<br><br>**性能对比**<br>分别运行串行版本和并发版本，展示耗时对比（如从15秒降至3秒）。 | **理解方案**<br>理解"每个城市一个线程"的并发模型，记录线程池的使用模板；<br><br>**实践编码**<br>创建multi_thread_fetcher.py，使用ThreadPoolExecutor改造采集代码；<br><br>**测试验证**<br>运行代码，记录并对比串行与并发的耗时数据，体会性能提升。 | 通过代码改造巩固多线程应用能力；通过线程池简化实现，降低并发编程门槛；通过性能对比建立直观的"并发价值"认知。 |
|
||||||
|
| **4. 线程安全探讨**<br>(10分钟) | 讲解多线程中的数据竞争问题，演示不安全的共享数据访问，介绍线程锁(Lock)的使用方法，指导学生在项目中安全收集结果。 | **问题演示**<br>演示多线程同时修改同一列表可能出现的问题（如数据丢失），说明这是"数据竞争"；<br><br>**解决方案**<br>介绍threading.Lock()的使用：<br>```python<br>lock = threading.Lock()<br>with lock:<br> shared_list.append(data)<br>```<br>强调在项目中应使用线程安全的数据结构或加锁保护；<br><br>**最佳实践**<br>推荐使用线程池的map()或submit()方法返回结果，避免手动管理共享数据。 | **观察问题**<br>观看演示，理解多线程同时访问数据的风险；<br><br>**学习方案**<br>理解Lock的"互斥访问"机制，记录加锁的代码模板；<br><br>**优化代码**<br>检查自己的并发采集代码，确保结果收集方式是线程安全的，如使用executor.map()的返回值而非手动append。 | 通过问题演示建立线程安全意识；通过解决方案教学培养规范编程习惯；通过代码优化强化"安全第一"的工程理念。 |
|
||||||
|
| **5. 项目集成与展望**<br>(4分钟) | 总结多线程并发编程的核心要点，将本课时的并发采集模块集成到项目中，预告后续课程将实现定时自动采集与数据存储。 | **知识总结**<br>回顾threading模块使用流程、ThreadPoolExecutor优势、线程安全注意事项；<br><br>**模块集成**<br>说明multi_thread_fetcher可作为项目的"高效采集引擎"，后续定时任务将调用此模块；<br><br>**任务布置**<br>课后任务：尝试调整线程池的max_workers参数（如5、10、20），测试不同线程数对性能的影响，思考最优值。 | **回顾反思**<br>总结并发编程的关键点，明确本模块在项目中的"性能优化"作用；<br><br>**接收任务**<br>记录课后任务，理解这是对并发性能调优的探索性实验。 | 通过总结强化知识结构；通过模块集成保持项目连贯性；课后任务引导学生探索并发参数优化，培养实验精神。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
多线程并发采集架构
|
||||||
|
|
||||||
|
串行模式（慢）:
|
||||||
|
城市1 → 等待 → 城市2 → 等待 → 城市3 → ...
|
||||||
|
总耗时 = 单次耗时 × 城市数量
|
||||||
|
|
||||||
|
并发模式（快）:
|
||||||
|
城市1 ↘
|
||||||
|
城市2 → 线程池 → 同时发送请求 → 并发等待
|
||||||
|
城市3 ↗
|
||||||
|
总耗时 ≈ 单次耗时
|
||||||
|
|
||||||
|
核心代码:
|
||||||
|
from concurrent.futures import ThreadPoolExecutor
|
||||||
|
with ThreadPoolExecutor(max_workers=5) as executor:
|
||||||
|
results = list(executor.map(get_weather, cities))
|
||||||
|
|
||||||
|
线程安全原则: 避免多线程同时修改共享数据
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合本课时项目任务评估：90%学生成功使用ThreadPoolExecutor实现多城市并发采集，80%学生能够通过性能测试数据说明并发的优势。通过串行与并发的直观对比（耗时从15秒降至3秒），学生对多线程价值有了深刻认知，学习积极性高。线程池的引入有效降低了并发编程复杂度，学生普遍反馈"比想象中简单"。项目的并发采集模块已具备实用性，为后续定时任务提供了高效的数据获取能力。线程安全环节虽有难度，但通过问题演示和最佳实践指导，学生建立了基本的安全意识。 |
|
||||||
|
| **教学反思** | 本课时成功将"多线程与并发编程"这一传统难点，转化为"提升天气采集速度"的具体优化任务，学生的学习动机强且目标明确。性能对比实验设计合理，数据直观有说服力。线程池的引入时机恰当，避免了过早陷入底层线程管理的复杂性。不足之处：①在40分钟内，线程安全部分讲解略显紧凑，部分学生对Lock的理解停留在"照搬代码"层面，建议后续增加一个专门的线程安全小案例演示；②对"I/O密集型 vs CPU密集型"的区分提及较少，少数学生可能误以为多线程适用所有场景，建议增加一句说明"多线程适合网络请求等待多的任务"；③课后任务的参数调优实验虽有探索性，但缺少对"过多线程可能导致性能下降"的提示，建议补充说明。整体上，项目驱动使并发编程学习变得具体可感，学生编写的并发模块已达到生产级代码的雏形，教学目标达成度高。 |
|
||||||
52
data/Python/16.md
Normal file
52
data/Python/16.md
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
# 天气数据自动采集与推送系统——定时任务与自动化采集 教学设计
|
||||||
|
|
||||||
|
| **课题** | **天气数据自动采集与推送系统——定时任务与自动化采集** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**：理解定时任务的概念与应用场景，掌握schedule库的基本使用方法，了解程序保活与后台运行的基本原理。<br>**技能目标**：能够使用schedule库创建定时任务，能够将前两节课的天气采集模块整合为自动化运行程序，能够实现"每隔N分钟自动采集并保存数据"的完整功能，能够添加日志记录与异常处理确保程序稳定运行。<br>**素养目标**：建立"自动化思维"，理解软件系统的无人值守运行模式，培养将技术能力转化为实用工具的工程意识。 |
|
||||||
|
| **教学重难点** | **重点**：schedule库的安装与基本API使用；定时任务的创建、调度与触发；程序保活的while循环实现；日志记录的规范写法。<br>**难点**：理解schedule的非阻塞调度机制与run_pending()的作用；设计合理的任务执行间隔；处理长时间运行程序的异常与资源管理。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含定时任务场景案例、系统架构图）；前两节课完成的weather_fetcher.py和multi_thread_fetcher.py模块；schedule库安装包；日志配置示例代码；完整项目运行演示视频。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 自动化场景导入**<br>(6分钟) | 展示生活中的自动化案例（如定时提醒、自动备份），引出"让天气采集程序自动运行"的需求，明确本课时要实现的项目最终目标。 | **场景列举**<br>列举自动化应用：闹钟、定时发送报表、服务器定时备份等，提问："我们的天气系统如何做到每小时自动采集？"<br><br>**目标演示**<br>播放完整项目运行视频：程序启动后自动每30分钟采集一次数据，保存到文件并输出日志，无需人工干预。 | **联系经验**<br>回忆日常使用的自动化功能，理解"定时执行"的价值；<br><br>**明确目标**<br>观看演示，建立"让程序自己跑起来"的认知，理解本课时是项目的"收官之作"。 | 通过生活化案例建立自动化认知；通过完整演示展示项目最终形态，激发学生的成就欲望和完成项目的动力。 |
|
||||||
|
| **2. 定时任务原理**<br>(7分钟) | 讲解定时任务的实现机制，介绍Python的schedule库，演示基本的任务调度代码，说明"调度循环"的概念。 | **原理讲解**<br>说明定时任务的本质：程序持续运行，定期检查是否到达执行时间；介绍schedule库是对时间检查逻辑的封装；<br><br>**基础演示**<br>编写简单示例：<br>```python<br>import schedule<br>import time<br>def job():<br> print("任务执行！")<br>schedule.every(10).seconds.do(job)<br>while True:<br> schedule.run_pending()<br> time.sleep(1)<br>```<br>逐行讲解：定义任务函数、设置调度规则、启动循环检查。 | **聆听理解**<br>理解"持续检查+触发执行"的调度机制，记录schedule的核心API；<br><br>**代码跟随**<br>输入演示代码并运行，观察每10秒自动执行一次的效果，尝试修改间隔时间（如30秒、1分钟）。 | 通过原理讲解揭开定时任务的"神秘面纱"；通过简单示例建立"设置规则-启动循环"的操作模型，为项目集成打基础。 |
|
||||||
|
| **3. 项目模块集成**<br>(13分钟) | 指导学生创建主程序文件，整合前两节课的采集模块，实现"定时自动采集多城市天气并保存"的完整功能，添加时间戳与日志输出。 | **架构讲解**<br>说明项目文件结构：weather_fetcher.py（单城市）、multi_thread_fetcher.py（并发）、main_scheduler.py（定时主程序）；<br><br>**集成演示**<br>演示main_scheduler.py编写过程：<br>```python<br>import schedule<br>from multi_thread_fetcher import fetch_all_cities<br>def auto_fetch():<br> data = fetch_all_cities()<br> # 保存到文件，添加时间戳<br> print(f"[{time.strftime('%Y-%m-%d %H:%M:%S')}] 采集完成")<br>schedule.every(30).minutes.do(auto_fetch)<br>```<br>讲解数据保存方案（CSV或JSON）、时间戳格式化；<br><br>**运行测试**<br>启动程序，观察首次执行和后续自动触发的效果。 | **理解架构**<br>明确各模块的职责分工，理解main_scheduler是"指挥中心"；<br><br>**动手编码**<br>创建main_scheduler.py，导入并发采集模块，设置定时规则（如每30分钟），添加数据保存代码；<br><br>**测试验证**<br>运行程序，确认定时执行正常，检查保存的数据文件格式与内容。 | 通过模块集成培养系统化编程思维；通过完整实现建立"小模块组成大系统"的认知；通过实际运行验证项目的实用性。 |
|
||||||
|
| **4. 稳定性优化**<br>(10分钟) | 讲解长时间运行程序的常见问题，指导学生添加异常处理、日志记录、资源管理等代码，确保程序稳定可靠。 | **问题分析**<br>说明长期运行可能遇到的问题：网络故障、API限流、内存泄漏等；强调健壮性的重要性；<br><br>**优化方案**<br>演示添加try-except包裹任务函数、配置logging模块记录日志：<br>```python<br>import logging<br>logging.basicConfig(filename='weather.log', level=logging.INFO)<br>def auto_fetch():<br> try:<br> # 采集逻辑<br> logging.info("采集成功")<br> except Exception as e:<br> logging.error(f"采集失败：{e}")<br>```<br>讲解日志级别（INFO、ERROR）、日志文件的查看方法；<br><br>**最佳实践**<br>建议添加程序启动提示、优雅退出机制（Ctrl+C处理）。 | **认识风险**<br>理解"程序不能假设一切正常"的思想，记录异常处理的必要性；<br><br>**优化代码**<br>为auto_fetch()添加try-except，配置logging输出到文件，测试故意制造错误（如API密钥错误）观察日志记录；<br><br>**完善程序**<br>添加程序启动提示信息，如"天气采集系统已启动，每30分钟执行一次"。 | 通过问题分析培养风险意识；通过优化方案教学提升代码质量；通过日志实践建立生产级程序的开发习惯。 |
|
||||||
|
| **5. 项目总结与展望**<br>(4分钟) | 回顾整个项目的三个核心模块，总结从HTTP请求到多线程再到自动化的完整技术链条，展望后续可扩展的功能方向。 | **项目回顾**<br>梳理项目实现路径：第1课时建立数据源→第2课时提升采集效率→第3课时实现自动化运行；<br><br>**成果展示**<br>请学生展示运行中的程序和保存的数据文件，分享项目完成的成就感；<br><br>**扩展方向**<br>提出可选的增强功能：数据可视化（matplotlib）、极端天气告警推送（邮件/短信）、Web界面展示等；<br><br>**任务布置**<br>课后任务：让程序在电脑上持续运行24小时，观察日志并统计采集成功率。 | **总结反思**<br>回顾三次课的学习历程，理解"技术服务于需求"的思想；<br><br>**展示成果**<br>演示自己的运行程序，分享实现过程中的收获与困难；<br><br>**展望未来**<br>思考项目的实用场景和可改进方向，接收课后实验任务。 | 通过系统回顾强化知识体系；通过成果展示建立成就感与自信；通过扩展方向保持学习兴趣和探索欲望。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
天气数据自动采集系统 - 完整架构
|
||||||
|
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ main_scheduler.py (定时调度主程序) │
|
||||||
|
│ ├── schedule.every(30).minutes │
|
||||||
|
│ ├── 异常处理 + 日志记录 │
|
||||||
|
│ └── while True: run_pending() │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ multi_thread_fetcher.py (并发模块) │
|
||||||
|
│ └── ThreadPoolExecutor 并发采集 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ weather_fetcher.py (数据源模块) │
|
||||||
|
│ └── requests.get() 调用API │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
↓
|
||||||
|
自动保存数据文件 + 日志文件
|
||||||
|
|
||||||
|
核心代码:
|
||||||
|
schedule.every(30).minutes.do(任务函数)
|
||||||
|
while True:
|
||||||
|
schedule.run_pending()
|
||||||
|
time.sleep(1)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合本课时项目任务评估：95%学生成功实现定时自动采集功能，85%学生能够添加完整的异常处理与日志记录。通过三节课的连贯学习，学生完整经历了"单功能模块→性能优化→系统集成"的项目开发过程，对软件工程的模块化思想有了深刻体会。定时任务的实现让学生看到了"程序自己工作"的魅力，课堂兴奋度和成就感达到高峰。项目最终成果具有实用性，部分学生表示愿意持续运行并收集数据做后续分析，显示出强烈的学习内驱力。日志记录的引入提升了学生对"生产级代码"的认知。 |
|
||||||
|
| **教学反思** | 本课时成功将"定时任务与自动化"概念转化为"让天气系统自动运行"的具体目标，学生的学习动机和参与度极高。三节课形成的完整项目链条设计合理，每节课的模块都能无缝集成到最终系统中，验证了项目式教学的有效性。schedule库的简洁API降低了定时任务的学习门槛，学生普遍反馈"比想象中容易"。不足之处：①在40分钟内，对"程序后台运行"的操作系统层面知识（如nohup、系统服务等）未能涉及，部分学生询问"如何让程序关闭终端后仍运行"，建议作为课后拓展资料补充；②日志配置部分主要由教师演示，学生自主设计日志格式的时间不足，建议提供更灵活的日志模板让学生定制；③对"定时任务的精度限制"（如schedule是软实时）未做说明，可能导致学生对时间准确性有过高期待。整体上，项目式教学使三个看似独立的技术主题（HTTP、多线程、定时任务）自然融合为一个有机整体，学生在完成项目的过程中建立了系统化思维和工程实践能力，教学目标超预期达成。建议后续可将此项目作为综合实训案例，引导学生继续扩展功能（如添加Web界面、数据分析模块等）。 |
|
||||||
55
data/Python/17.md
Normal file
55
data/Python/17.md
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
# 天气数据自动采集与推送系统——TCP推送服务器实现 教学设计
|
||||||
|
|
||||||
|
| **课题** | **天气数据自动采集与推送系统——TCP推送服务器实现** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**：理解TCP/IP协议的基本概念与客户端-服务器模型，掌握socket编程的基本原理，了解网络通信中的IP地址、端口号、三次握手等核心概念。<br>**技能目标**：能够使用Python的socket模块创建TCP服务器，能够实现客户端-服务器之间的数据收发，能够将天气数据通过TCP连接推送给客户端，能够处理多客户端连接与断线异常。<br>**素养目标**：建立"网络互联"的系统思维，理解分布式应用的基本架构，培养开发网络服务程序的工程能力。 |
|
||||||
|
| **教学重难点** | **重点**：socket模块的基本使用方法；TCP服务器的创建、监听与连接接受；数据的编码、发送与接收；客户端程序的编写与测试。<br>**难点**：理解TCP连接的建立与维持机制；处理网络数据的字节流编解码；设计合理的消息协议格式；处理并发连接与异常断开。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含TCP/IP协议栈图、三次握手动画）；前期完成的天气采集模块；socket编程示例代码；网络调试工具（如Telnet或自编客户端）；服务器-客户端通信演示视频。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 推送需求引入**<br>(6分钟) | 展示项目新需求：将采集到的天气数据主动推送给其他设备（如手机、电脑客户端），引出"如何让不同设备通过网络获取数据"的技术问题。 | **场景创设**<br>演示场景：服务器端运行采集程序，客户端连接后实时接收最新天气数据；提问："HTTP只能客户端主动请求，如何实现服务器主动推送？"<br><br>**协议对比**<br>对比HTTP（请求-响应）与TCP（持续连接）的特点，说明TCP适合实时推送场景。 | **观察思考**<br>观看演示，理解"推送"与"请求"的区别，联系即时通讯软件的消息推送原理；<br><br>**需求明确**<br>理解本课时要实现的功能：搭建TCP服务器，让客户端连接后自动接收天气更新。 | 通过真实需求建立技术动机；通过协议对比帮助学生理解TCP的应用场景，明确本课时的技术选型理由。 |
|
||||||
|
| **2. TCP/IP原理讲解**<br>(8分钟) | 讲解TCP/IP协议的基本概念，介绍socket编程模型，说明IP地址、端口号、三次握手、数据流传输等核心知识。 | **协议讲解**<br>展示TCP/IP协议栈图（应用层-传输层-网络层），说明TCP在传输层提供可靠连接；用快递类比：IP地址是地址、端口号是门牌号；<br><br>**连接机制**<br>用动画演示TCP三次握手过程（SYN→SYN-ACK→ACK），强调"建立连接-传输数据-关闭连接"的流程；<br><br>**Socket概念**<br>介绍socket是操作系统提供的网络编程接口，Python通过socket模块封装了底层细节。 | **聆听理解**<br>理解TCP"面向连接、可靠传输"的特点，记录IP地址与端口号的作用；<br><br>**观看动画**<br>观察三次握手过程，理解"握手"是建立可靠连接的前提；<br><br>**概念记录**<br>记录socket编程的两个角色：服务器（监听等待）、客户端（主动连接）。 | 通过协议栈图建立分层网络模型认知；通过类比和动画降低抽象概念难度；通过socket概念引入为后续编程做准备。 |
|
||||||
|
| **3. 服务器端编写**<br>(12分钟) | 演示TCP服务器的完整代码实现，讲解socket创建、绑定、监听、接受连接、数据发送的每个步骤，指导学生编写天气推送服务器。 | **代码演示**<br>边讲解边编写服务器代码：<br>```python<br>import socket<br>server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)<br>server.bind(('0.0.0.0', 8888))<br>server.listen(5)<br>print("服务器启动，等待连接...")<br>client, addr = server.accept()<br>print(f"客户端{addr}已连接")<br>client.send("欢迎!".encode('utf-8'))<br>client.close()<br>```<br>逐行讲解：创建socket对象、绑定IP和端口、开始监听、接受连接、发送数据、关闭连接；<br><br>**功能扩展**<br>演示将天气数据格式化后推送：从采集模块获取数据→转JSON→编码→发送；<br><br>**测试演示**<br>运行服务器，用Telnet或自编客户端连接测试。 | **代码跟随**<br>在IDE中输入服务器代码，理解每个API的作用；<br><br>**功能实现**<br>创建weather_server.py，集成之前的采集模块，实现"客户端连接→发送最新天气数据"功能；<br><br>**运行测试**<br>启动服务器程序，观察"等待连接"提示，准备接受客户端连接。 | 通过完整代码演示建立服务器编程流程；通过逐行讲解降低socket API的理解难度；通过功能集成强化模块复用意识。 |
|
||||||
|
| **4. 客户端编写与测试**<br>(10分钟) | 指导学生编写简单的TCP客户端程序，实现连接服务器、接收数据、显示结果的功能，进行端到端的通信测试。 | **客户端演示**<br>演示客户端代码：<br>```python<br>import socket<br>client = socket.socket(socket.AF_INET, socket.SOCK_STREAM)<br>client.connect(('127.0.0.1', 8888))<br>data = client.recv(1024).decode('utf-8')<br>print(f"收到数据：{data}")<br>client.close()<br>```<br>讲解connect()连接、recv()接收、decode()解码；<br><br>**协同测试**<br>引导学生两人一组：一人运行服务器、一人运行客户端，测试通信效果；<br><br>**异常处理**<br>演示添加try-except处理连接失败、数据接收超时等异常。 | **编写客户端**<br>创建weather_client.py，实现连接指定IP和端口、接收天气数据、格式化输出；<br><br>**协作测试**<br>与同学配合测试，观察服务器日志与客户端输出，验证数据传输正确性；<br><br>**问题排查**<br>遇到连接失败时，检查IP地址、端口号、防火墙设置等，培养网络调试能力。 | 通过客户端编写完善通信闭环；通过协作测试增强互动性与成就感；通过问题排查培养网络编程实战能力。 |
|
||||||
|
| **5. 功能优化与总结**<br>(4分钟) | 讨论实际应用中的改进方向（如支持多客户端、定时推送、消息协议设计），总结TCP编程的核心要点，布置课后任务。 | **优化讨论**<br>提出问题："当前代码只能服务一个客户端，如何支持多个？"引出多线程或异步方案预告；<br><br>**知识总结**<br>回顾socket编程的服务器端五步（创建-绑定-监听-接受-收发）、客户端三步（创建-连接-收发）；<br><br>**任务布置**<br>课后任务：改进服务器，使其能循环接受多个客户端连接，每个连接发送一次天气数据后关闭。 | **思考讨论**<br>思考多客户端场景的实现方案，联系之前学习的多线程知识；<br><br>**回顾反思**<br>总结TCP编程流程，明确socket API的调用顺序；<br><br>**接收任务**<br>记录课后任务，理解这是对服务器并发能力的初步探索。 | 通过优化讨论引发深度思考，为后续异步编程课程埋下伏笔；通过总结强化知识结构；课后任务培养独立解决问题能力。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
TCP服务器-客户端通信模型
|
||||||
|
|
||||||
|
服务器端流程: 客户端流程:
|
||||||
|
1. socket() 创建套接字 1. socket() 创建套接字
|
||||||
|
2. bind() 绑定IP:端口 2. connect() 连接服务器
|
||||||
|
3. listen() 监听连接 3. send() 发送数据
|
||||||
|
4. accept() 接受客户端 4. recv() 接收数据
|
||||||
|
5. send() 发送数据 5. close() 关闭连接
|
||||||
|
6. recv() 接收数据
|
||||||
|
7. close() 关闭连接
|
||||||
|
|
||||||
|
三次握手:
|
||||||
|
客户端 ---SYN---> 服务器
|
||||||
|
客户端 <--SYN-ACK--- 服务器
|
||||||
|
客户端 ---ACK---> 服务器
|
||||||
|
连接建立！
|
||||||
|
|
||||||
|
关键代码:
|
||||||
|
# 服务器
|
||||||
|
server.bind(('0.0.0.0', 8888))
|
||||||
|
server.listen(5)
|
||||||
|
client, addr = server.accept()
|
||||||
|
|
||||||
|
# 客户端
|
||||||
|
client.connect(('127.0.0.1', 8888))
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合本课时项目任务评估：85%学生成功搭建TCP服务器并实现基本的天气数据推送，80%学生能够编写客户端程序完成端到端通信测试。通过两人一组的协作测试，学生对"网络通信需要两端配合"有了直观认知，课堂互动性强。socket编程的"创建-绑定-监听-接受"流程虽有一定难度，但通过逐行演示和代码跟随，大部分学生能够理解并复现。项目的推送功能模块已初步成型，为后续异步优化提供了基础。部分学生在处理网络异常（如端口占用、连接超时）时遇到困难，但在教师指导下均得以解决，网络调试能力得到锻炼。 |
|
||||||
|
| **教学反思** | 本课时成功将"TCP/IP网络编程"这一偏底层的主题，转化为"实现天气推送服务器"的具体项目任务，降低了学习门槛。三次握手的动画演示效果好，有效帮助学生理解TCP连接机制。服务器端和客户端代码的分步演示节奏合理，学生跟随效果良好。协作测试环节设计巧妙，让学生在实际通信中体会网络编程的乐趣。不足之处：①在40分钟内，对"字节流"与"消息边界"问题未能深入讲解，部分学生可能在后续处理长消息时遇到粘包问题，建议在演示代码中加入简单的消息长度前缀或分隔符说明；②对"0.0.0.0"与"127.0.0.1"的区别讲解不够清晰，少数学生在配置服务器IP时出现困惑，建议增加网络地址的补充说明；③多客户端支持只是讨论未实现，导致部分学生对"当前代码的局限性"理解不深，建议在课后任务中给出多线程改造的伪代码提示。整体上，项目驱动使抽象的网络编程概念变得具体可感，学生编写的推送服务器已具备基本功能，为项目增加了"分布式"特性，教学目标基本达成。 |
|
||||||
55
data/Python/18.md
Normal file
55
data/Python/18.md
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
# 天气数据自动采集与推送系统——异步编程优化与协程调度 教学设计
|
||||||
|
|
||||||
|
| **课题** | **天气数据自动采集与推送系统——异步编程优化与协程调度** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**：理解同步与异步编程的区别，掌握Python协程(coroutine)的基本概念，了解asyncio事件循环的工作原理，理解async/await语法的作用。<br>**技能目标**：能够使用async/await语法定义异步函数，能够使用asyncio库实现异步HTTP请求，能够将项目的同步代码改造为异步版本以提升性能，能够使用asyncio.gather()并发执行多个协程任务。<br>**素养目标**：建立"非阻塞"的高性能编程思维，理解异步编程在I/O密集型场景中的优势，培养性能优化与代码重构能力。 |
|
||||||
|
| **教学重难点** | **重点**：async/await语法的使用方法；asyncio事件循环的启动与任务调度；aiohttp库的异步HTTP请求；asyncio.gather()的并发执行机制。<br>**难点**：理解协程与线程的本质区别；掌握异步函数的调用方式（不能直接调用）；处理异步代码中的异常；设计合理的异步任务协作模式。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含同步vs异步对比动画、事件循环机制图）；前期完成的同步版天气采集代码；aiohttp库安装包；异步性能对比测试脚本；asyncio编程示例代码。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 性能优化需求**<br>(6分钟) | 回顾多线程方案的局限性（GIL限制、线程开销），引出异步编程作为I/O密集型任务的更优解决方案，明确本课时要用异步优化项目性能。 | **问题引入**<br>回顾第2课时的多线程方案，提问："线程切换有开销，有没有更轻量的并发方式？"说明Python的GIL限制了多线程的CPU利用率；<br><br>**方案对比**<br>展示对比图：多线程（抢占式调度、线程开销大）vs 异步（协作式调度、轻量级协程），强调异步适合网络I/O场景。 | **回顾反思**<br>回忆多线程实现，思考其局限性，理解"等待网络响应时线程空闲"的资源浪费；<br><br>**需求明确**<br>理解本课时目标：用异步编程替代多线程，实现更高效的并发采集。 | 通过问题引入建立技术演进认知；通过方案对比帮助学生理解异步的适用场景，明确优化目标。 |
|
||||||
|
| **2. 异步编程原理**<br>(8分钟) | 讲解协程、事件循环、async/await的基本概念，演示简单的异步函数定义与调用，说明异步编程的执行模型。 | **概念讲解**<br>用餐厅类比：同步是服务员一桌服务完再服务下一桌，异步是服务员在等待上菜时去服务其他桌；说明协程是"可暂停的函数"，await是"暂停点"；<br><br>**语法演示**<br>演示async/await基础：<br>```python<br>import asyncio<br>async def hello():<br> print("开始")<br> await asyncio.sleep(2)<br> print("结束")<br>asyncio.run(hello())<br>```<br>讲解async定义异步函数、await等待异步操作、asyncio.run()启动事件循环；<br><br>**原理说明**<br>展示事件循环图：遇到await时切换到其他协程，I/O完成后切回继续执行。 | **聆听理解**<br>理解"协作式调度"的思想，记录async/await是异步编程的核心语法；<br><br>**代码跟随**<br>输入演示代码并运行，观察异步函数的执行过程，尝试创建多个协程用asyncio.gather()并发运行；<br><br>**原理认知**<br>理解事件循环是异步任务的"调度器"，await是"主动让出控制权"的标记。 | 通过类比降低异步概念难度；通过简单示例建立async/await的基本使用模式；通过原理图帮助学生理解异步调度机制。 |
|
||||||
|
| **3. 异步HTTP请求**<br>(12分钟) | 介绍aiohttp库，演示使用aiohttp实现异步天气数据获取，指导学生将同步的requests代码改造为异步版本。 | **库的引入**<br>说明requests是同步库，aiohttp是异步HTTP客户端库，演示安装：pip install aiohttp；<br><br>**代码改造**<br>对比演示同步与异步代码：<br>```python<br># 同步版本<br>response = requests.get(url, params=params)<br>data = response.json()<br><br># 异步版本<br>async with aiohttp.ClientSession() as session:<br> async with session.get(url, params=params) as response:<br> data = await response.json()<br>```<br>讲解ClientSession管理连接池、async with上下文管理、await response.json()等待解析；<br><br>**并发实现**<br>演示用asyncio.gather()并发请求多城市：<br>```python<br>tasks = [fetch_weather(city) for city in cities]<br>results = await asyncio.gather(*tasks)<br>```<br><br>**性能测试**<br>运行异步版本，对比同步和多线程的耗时（如从15秒→3秒→1秒）。 | **对比学习**<br>对比同步与异步代码的差异，理解"async with"和"await"的作用；<br><br>**功能改造**<br>创建async_weather_fetcher.py，定义异步的fetch_weather()函数，使用aiohttp实现；<br><br>**并发实现**<br>编写主函数，用asyncio.gather()并发请求10个城市，用time模块测量耗时；<br><br>**性能验证**<br>运行代码，记录耗时数据，对比同步、多线程、异步三种方案的性能差异。 | 通过对比教学强化同步与异步的区别；通过代码改造巩固异步编程技能；通过性能测试建立"异步更快"的直观认知。 |
|
||||||
|
| **4. 项目集成优化**<br>(10分钟) | 指导学生将异步采集模块集成到项目主程序，讨论异步定时任务的实现方式，处理异步代码中的异常与日志。 | **集成方案**<br>说明如何在定时任务中调用异步函数：<br>```python<br>def job():<br> asyncio.run(async_fetch_all())<br>schedule.every(30).minutes.do(job)<br>```<br>或使用asyncio自带的定时功能；<br><br>**异常处理**<br>演示异步代码的try-except写法与asyncio.gather()的return_exceptions参数；<br><br>**实践指导**<br>引导学生改造main_scheduler.py，将并发采集改为异步版本，添加异常处理与日志。 | **理解方案**<br>理解如何在同步代码中启动异步任务，记录asyncio.run()的桥接作用；<br><br>**代码优化**<br>修改主程序，集成异步采集模块，测试定时任务是否正常触发；<br><br>**完善细节**<br>添加异步异常处理，确保单个城市请求失败不影响其他城市；测试异常情况（如断网）。 | 通过集成实践强化异步在真实项目中的应用；通过异常处理培养健壮性意识；通过完整测试验证优化效果。 |
|
||||||
|
| **5. 技术对比与总结**<br>(4分钟) | 总结同步、多线程、异步三种方案的适用场景，回顾整个项目的技术演进路径，展望异步编程的应用前景。 | **技术对比**<br>总结三种方案：同步（简单但慢）、多线程（适合I/O密集但有开销）、异步（最高效但学习曲线陡）；强调选择技术要看场景；<br><br>**项目回顾**<br>梳理项目的技术升级：HTTP请求→多线程并发→异步优化，体现"迭代优化"的工程思维；<br><br>**任务布置**<br>课后任务：阅读asyncio官方文档，尝试用异步实现TCP服务器（asyncio.start_server）。 | **总结反思**<br>对比三种方案的特点，理解"没有银弹"的技术选型原则；<br><br>**项目总结**<br>回顾整个学习历程，体会从基础功能到性能优化的完整开发流程；<br><br>**接收任务**<br>记录课后任务，理解异步编程的应用不限于HTTP请求。 | 通过技术对比培养技术选型能力；通过项目回顾强化系统化学习成果；课后任务拓展异步应用视野。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
异步编程模型对比
|
||||||
|
|
||||||
|
同步执行（阻塞）:
|
||||||
|
任务1 ━━━━━━━━┓
|
||||||
|
┗━━━━━━━━ 任务2 ━━━━━━━━┓
|
||||||
|
┗━━━━━━━━ 任务3
|
||||||
|
总耗时 = T1 + T2 + T3
|
||||||
|
|
||||||
|
异步执行（非阻塞）:
|
||||||
|
任务1 ━━━━ await ━━━━ 完成
|
||||||
|
任务2 ━━━━ await ━━━━ 完成
|
||||||
|
任务3 ━━━━ await ━━━━ 完成
|
||||||
|
总耗时 ≈ max(T1, T2, T3)
|
||||||
|
|
||||||
|
核心语法:
|
||||||
|
async def func(): # 定义异步函数
|
||||||
|
result = await ... # 等待异步操作
|
||||||
|
|
||||||
|
asyncio.run(func()) # 启动事件循环
|
||||||
|
asyncio.gather(*tasks) # 并发执行多任务
|
||||||
|
|
||||||
|
性能对比 (10城市采集):
|
||||||
|
同步: 15秒
|
||||||
|
多线程: 3秒
|
||||||
|
异步: 1秒
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合本课时项目任务评估：80%学生成功使用async/await语法实现异步天气采集，75%学生能够用asyncio.gather()实现并发请求。通过性能对比实验（15秒→3秒→1秒），学生对异步编程的价值有了震撼性认知，学习热情高涨。异步编程虽是本课程难点，但通过餐厅服务员类比、同步异步代码对比、性能数据说话等多种教学手段，大部分学生能够理解核心概念并基本掌握。项目的最终版本已实现异步优化，整体性能提升显著。部分学生在理解"协程切换"与"事件循环"机制时有困难，但通过可视化图示和反复演示得以缓解。 |
|
||||||
|
| **教学反思** | 本课时成功将"异步编程"这一Python高级特性，转化为"极致优化天气采集性能"的具体任务，学习动机强烈。技术演进的叙事线索（同步→多线程→异步）设计合理，让学生理解"为什么需要异步"而非"为了学而学"。性能对比实验的说服力强，数据直观震撼。餐厅类比和事件循环可视化有效降低了抽象概念难度。不足之处：①在40分钟内，异步编程的深层机制（如事件循环的底层实现、协程调度细节）无法深入，部分学生可能停留在"会用但不深懂"的层面，建议提供补充阅读材料；②对"何时应该使用异步"的判断标准讲解不足，少数学生可能产生"异步万能"的误解，建议明确说明CPU密集型任务不适合异步；③aiohttp的连接池管理、超时设置等高级特性未涉及，实际生产应用还需补充；④课后任务的难度较大（异步TCP服务器），可能导致完成率低，建议降低难度或提供详细提示。整体上，异步编程课程作为项目的"性能巅峰"，有效展示了Python在高并发场景中的强大能力，五节课形成的完整技术栈（HTTP→多线程→定时→TCP→异步）具有很强的系统性和实战价值，教学目标超预期达成。建议在后续教学中，可将本项目作为综合实训案例的"标准版"，引导学生在此基础上扩展更多功能（如数据库持久化、Web界面、数据分析可视化等）。 |
|
||||||
48
data/Python/2.md
Normal file
48
data/Python/2.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# 智能学生选课推荐系统——学生信息采集模块开发 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能学生选课推荐系统——学生信息采集模块开发** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**:掌握Python基本数据类型(字符串、整数、浮点数、布尔值)的特点与应用场景,理解变量命名规范与赋值机制,了解input()与print()函数的使用方法。<br>**技能目标**:能根据选课系统的数据需求设计学生信息结构,能使用合适的数据类型定义变量存储学生姓名、学号、年级、学分等信息,能编写交互式信息采集脚本并进行格式化输出。<br>**素养目标**:培养数据建模思维,养成规范命名与代码注释的良好习惯,建立"数据是程序基础"的认知。 |
|
||||||
|
| **教学重难点** | **重点**:Python基本数据类型的选择与使用;变量的定义与赋值;input()函数的数据类型转换;格式化输出方法。<br>**难点**:根据业务需求选择合适的数据类型;input()获取的字符串类型转换为数值类型;理解变量在内存中的存储机制。 |
|
||||||
|
| **教学资源准备** | 多媒体课件(含数据类型对比表);学生信息字段说明文档;代码演示环境;数据类型错误示例与调试视频;项目代码模板文件。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 模块任务导入**<br>(5分钟) | 回顾项目架构,聚焦"学生信息管理"模块,明确本课时任务:设计并实现学生信息的数据结构与采集功能。 | **任务聚焦**<br>展示选课系统流程图,强调学生信息是推荐引擎的输入基础,提问:"系统需要记录学生的哪些信息?"<br><br>**需求分析**<br>引导学生讨论并列出关键字段:姓名、学号、年级、已修学分、是否重修生等,说明每类数据的作用。 | **回顾联系**<br>回忆上节课项目架构,理解本模块在系统中的定位;<br><br>**需求思考**<br>结合选课场景,思考并提出需要采集的学生信息字段,参与讨论。 | 通过任务聚焦建立模块与整体的关联,强化项目连贯性;通过需求分析培养数据建模意识,为后续技术学习提供明确的应用场景。 |
|
||||||
|
| **2. 数据类型探究**<br>(10分钟) | 讲解Python基本数据类型的特点,演示不同类型数据的定义与使用,分析各类型在学生信息存储中的适用性。 | **概念讲解**<br>结合学生信息字段,讲解字符串(姓名)、整数(学号、年级)、浮点数(学分)、布尔值(是否重修)的定义方式与适用场景;<br><br>**代码演示**<br>演示变量定义:name="张三"、student_id=20240101、credits=15.5、is_retake=False,并用type()函数查看类型。 | **观察记录**<br>理解各数据类型的特点,记录定义语法规则;<br><br>**对比分析**<br>思考:"为什么学号用整数而不是字符串?学分为什么要用浮点数?"与同学交流。 | 通过业务场景与数据类型的紧密绑定,让抽象概念具象化;通过type()函数演示培养类型意识,为类型转换打下认知基础。 |
|
||||||
|
| **3. 信息采集实现**<br>(12分钟) | 讲解input()函数的使用与类型转换,演示格式化输出方法,引导学生编写完整的信息采集脚本。 | **功能讲解**<br>讲解input()函数的工作机制,强调其返回字符串类型,演示int()、float()转换方法;<br><br>**代码演示**<br>演示完整采集流程:提示输入→类型转换→格式化输出,代码示例:<br>```python<br>name = input("姓名:")<br>grade = int(input("年级:"))<br>credits = float(input("已修学分:"))<br>print(f"学生{name},年级:{grade},学分:{credits}")```<br><br>**任务发布**<br>发布编码任务:"编写student_info.py,采集5项学生信息并格式化输出"。 | **聆听理解**<br>理解input()的字符串特性与转换必要性;<br><br>**模仿实践**<br>跟随演示代码,在IDE中逐行输入并测试;<br><br>**独立编码**<br>根据需求,完善采集脚本:添加学号、是否重修字段,设计友好的输入提示与输出格式。 | 通过师生同步演示降低编码难度;通过类型转换演示突破难点;通过独立编码任务培养实际开发能力,强化知识应用。 |
|
||||||
|
| **4. 代码调试与优化**<br>(9分钟) | 指导学生测试程序,处理常见错误,优化代码的规范性与可读性。 | **巡回指导**<br>巡视学生编码,针对类型转换错误、变量命名不规范等问题进行个别指导;<br><br>**错误示范**<br>展示典型错误(如直接对字符串做数学运算),演示错误信息阅读与调试方法;<br><br>**规范强调**<br>强调变量命名使用下划线命名法(student_id)、添加注释说明字段含义等规范。 | **自测调试**<br>运行程序,输入测试数据,观察输出结果;<br><br>**问题解决**<br>根据错误提示或教师指导,修正类型转换、语法错误;<br><br>**代码优化**<br>按规范修改变量名,为关键代码添加注释。 | 通过实际调试培养问题诊断能力;通过错误示范提升错误预判意识;通过规范强调养成职业化编码习惯,为团队协作打下基础。 |
|
||||||
|
| **5. 成果展示与总结**<br>(4分钟) | 组织学生展示作品,总结数据类型与信息采集的核心要点,预告下一模块任务。 | **作品展示**<br>邀请2-3名学生演示程序运行,点评代码的规范性与输出格式的友好性;<br><br>**知识总结**<br>总结:合适的数据类型是数据处理的前提,类型转换是交互程序的关键;<br><br>**任务预告**<br>下节课将使用条件判断实现选课资格验证,需基于本节采集的学生信息。 | **观摩学习**<br>观看同学作品,对比自己的实现方案;<br><br>**反思内化**<br>思考本节收获,记录易错点;<br><br>**展望准备**<br>了解下节任务,思考如何根据年级、学分等条件判断选课资格。 | 通过作品展示增强成就感与学习动力;通过总结强化核心知识点;通过预告保持项目学习的连贯性与期待感。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
学生信息采集模块 - 数据类型与应用
|
||||||
|
|
||||||
|
┌──────────────────────────────────────┐
|
||||||
|
│ 信息字段 数据类型 示例值 │
|
||||||
|
├──────────────────────────────────────┤
|
||||||
|
│ 姓名(name) str "李明" │
|
||||||
|
│ 学号(student_id) int 20240101│
|
||||||
|
│ 年级(grade) int 2 │
|
||||||
|
│ 已修学分(credits) float 18.5 │
|
||||||
|
│ 是否重修(is_retake) bool False │
|
||||||
|
└──────────────────────────────────────┘
|
||||||
|
|
||||||
|
关键函数:
|
||||||
|
input("提示信息") → 返回str类型
|
||||||
|
int(字符串) / float(字符串) → 类型转换
|
||||||
|
print(f"格式化字符串{变量}") → 输出
|
||||||
|
|
||||||
|
本课时任务: 数据结构设计 + 信息采集 ✓
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合模块开发目标评估:90%以上学生能准确选择合适的数据类型存储学生信息,80%以上学生独立完成信息采集脚本开发并实现格式化输出。通过业务需求驱动的数据类型学习,学生对"为什么需要不同类型"理解深刻,类型转换的必要性认知明确。代码调试环节参与度高,学生初步建立了错误诊断意识。模块功能基本实现,为后续条件判断模块提供了有效的数据基础,项目推进顺利。 |
|
||||||
|
| **教学反思** | 本课时通过"学生信息采集"这一具体模块任务,成功地将抽象的数据类型知识转化为实际的编码实践,学习效果显著。将业务字段与数据类型一一对应的讲解方式,让学生快速理解了类型选择的依据,避免了纯理论讲解的枯燥。不足之处:①对于"布尔值在条件判断中的应用"讲解较浅,部分学生对is_retake字段的作用理解不深;②部分学生在独立编码时,对f-string格式化语法不够熟练,出现语法错误较多。改进方向:①在讲解布尔类型时,增加简单的if判断示例,提前渗透下节课内容;②提供格式化输出的标准模板,减少语法细节对思维的干扰,让学生更专注于业务逻辑。整体上,项目驱动的模块化教学让知识点的学习更有目的性,学生的代码实践能力进步明显。 |
|
||||||
55
data/Python/3.md
Normal file
55
data/Python/3.md
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
# 智能学生选课推荐系统——课程筛选逻辑实现 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能学生选课推荐系统——课程筛选逻辑实现** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**:掌握Python条件判断语句(if-elif-else)的语法结构与执行逻辑,理解比较运算符、逻辑运算符的使用规则,了解循环结构(for、while)的基本概念与应用场景。<br>**技能目标**:能根据选课规则设计多条件判断逻辑,能使用if语句实现选课资格验证功能,能使用for循环批量处理多个学生的选课申请,能编写完整的课程筛选脚本并输出验证结果。<br>**素养目标**:培养逻辑思维与规则建模能力,养成代码缩进规范意识,建立"程序决策自动化"的工程认知。 |
|
||||||
|
| **教学重难点** | **重点**:if-elif-else条件判断的语法与逻辑;比较运算符与逻辑运算符的组合使用;for循环的基本结构与遍历机制。<br>**难点**:多条件组合判断的逻辑设计(如"年级≥2且学分≥30");条件嵌套的层次理解;循环体内的条件判断综合应用。 |
|
||||||
|
| **教学资源准备** | 多媒体课件(含选课规则说明);决策流程图模板;代码演示环境;多条件判断逻辑示例;学生数据测试集(3-5组)。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 规则场景导入**<br>(6分钟) | 展示选课管理中的典型规则(年级限制、学分要求、重修优先),引出本课时任务:使用条件判断实现选课资格自动验证。 | **规则展示**<br>展示选课规则表:高级课程要求年级≥2且学分≥30,重修生优先选课,提问:"程序如何自动判断学生是否符合条件?"<br><br>**人工对比**<br>演示人工逐条检查规则的繁琐过程,强调自动化判断的价值。 | **规则理解**<br>阅读选课规则说明,理解各类限制条件;<br><br>**思维转换**<br>思考:如何将文字描述的规则转化为程序的判断逻辑?尝试用自然语言描述判断步骤。 | 通过真实规则场景激活学生的逻辑思维;通过人工对比突出自动化判断的效率优势,建立学习动机。 |
|
||||||
|
| **2. 条件判断语法**<br>(11分钟) | 讲解if-elif-else语句的语法结构、执行流程与缩进规范,演示比较运算符与逻辑运算符的使用。 | **语法讲解**<br>结合流程图讲解if语句的执行逻辑,强调条件表达式、冒号、缩进三要素,演示单分支、双分支、多分支结构;<br><br>**运算符演示**<br>讲解比较运算符(==、!=、>、>=)与逻辑运算符(and、or、not),演示代码:<br>```python<br>grade = 2<br>credits = 35<br>if grade >= 2 and credits >= 30:<br> print("符合高级课程选课条件")<br>else:<br> print("不符合条件")```<br><br>**规则映射**<br>引导学生分析:上述代码如何对应"年级≥2且学分≥30"的规则。 | **聆听理解**<br>理解if语句的判断机制,记录语法结构与缩进规范;<br><br>**跟随实践**<br>在IDE中输入演示代码,修改变量值测试不同分支的执行;<br><br>**规则转化**<br>尝试将"重修生优先"规则转化为if-else结构,与同学讨论实现方案。 | 通过流程图与代码同步讲解降低理解难度;通过实时测试让学生直观感受条件判断的动态执行;通过规则转化任务培养逻辑建模能力。 |
|
||||||
|
| **3. 资格验证实现**<br>(12分钟) | 引导学生基于上节课采集的学生信息,编写多条件判断的选课资格验证脚本。 | **任务分解**<br>将选课资格验证分解为三个子任务:①检查年级与学分,②判断是否重修生,③综合输出验证结果;<br><br>**代码框架**<br>提供代码框架,演示主体逻辑:<br>```python<br># 获取学生信息(上节课内容)<br>name = input("姓名:")<br>grade = int(input("年级:"))<br>credits = float(input("学分:"))<br>is_retake = input("是否重修?(y/n):") == "y"<br><br># 资格判断<br>if is_retake:<br> print(f"{name}是重修生,优先选课")<br>elif grade >= 2 and credits >= 30:<br> print(f"{name}符合高级课程选课条件")<br>else:<br> print(f"{name}暂不符合条件")```<br><br>**任务发布**<br>要求学生完善代码,增加更多规则判断(如一年级只能选基础课)。 | **理解框架**<br>阅读代码框架,理解if-elif-else的层次逻辑与重修优先的实现方式;<br><br>**独立编码**<br>在框架基础上,添加新的条件分支,实现更复杂的规则判断;<br><br>**自测验证**<br>输入不同学生数据测试各分支逻辑,确保判断结果符合预期。 | 通过任务分解降低复杂度;通过代码框架提供脚手架支持;通过扩展任务培养举一反三能力,强化条件判断的灵活应用。 |
|
||||||
|
| **4. 批量处理引入**<br>(8分钟) | 讲解for循环的基本语法,演示如何使用循环批量验证多个学生的选课资格。 | **循环概念**<br>提问:"如果有10个学生申请选课,要运行10次程序吗?"引出循环的概念;<br><br>**语法演示**<br>演示for循环遍历列表的基本语法,代码示例:<br>```python<br>students = [<br> {"name":"张三", "grade":2, "credits":35},<br> {"name":"李四", "grade":1, "credits":20}<br>]<br>for stu in students:<br> if stu["grade"] >= 2 and stu["credits"] >= 30:<br> print(f"{stu['name']}符合条件")<br> else:<br> print(f"{stu['name']}不符合条件")```<br><br>**任务体验**<br>指导学生修改上述代码,添加更多学生数据进行批量验证。 | **概念理解**<br>理解循环的批量处理优势,认知for语句的遍历机制;<br><br>**代码实践**<br>输入演示代码并运行,观察循环对每个学生的处理过程;<br><br>**数据扩展**<br>在列表中添加3-5组学生数据,测试批量验证功能。 | 通过问题引入自然过渡到循环主题;通过简化的字典列表结构降低认知负担;通过批量处理体验让学生感受循环的实用价值,为下节课深入学习列表铺垫。 |
|
||||||
|
| **5. 成果展示与总结**<br>(3分钟) | 组织学生展示验证脚本,总结条件判断与循环的核心要点,预告下一模块任务。 | **作品点评**<br>邀请学生演示批量验证程序,点评逻辑严密性与代码规范性;<br><br>**知识总结**<br>总结:条件判断实现规则自动化,循环实现批量自动化,两者结合是智能系统的基础;<br><br>**任务预告**<br>下节课将使用列表存储课程信息,实现推荐课程的筛选与排序。 | **观摩学习**<br>观看同学作品,对比判断逻辑的差异;<br><br>**反思内化**<br>总结条件判断的易错点(如缩进、逻辑运算符);<br><br>**展望准备**<br>思考:如何用列表存储多门课程的信息?如何从中筛选出符合条件的课程? | 通过作品展示强化学习成就感;通过总结提炼核心知识点;通过预告保持项目学习的连贯性,为列表学习做好心理准备。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
选课资格验证逻辑 - 条件判断结构
|
||||||
|
|
||||||
|
┌──────────────────────────────────────┐
|
||||||
|
│ 选课规则 判断条件 │
|
||||||
|
├──────────────────────────────────────┤
|
||||||
|
│ 重修生优先 if is_retake │
|
||||||
|
│ 高级课程资格 elif grade>=2 and │
|
||||||
|
│ credits>=30 │
|
||||||
|
│ 基础课程资格 elif grade>=1 │
|
||||||
|
│ 不符合条件 else │
|
||||||
|
└──────────────────────────────────────┘
|
||||||
|
|
||||||
|
关键语法:
|
||||||
|
if 条件: # 条件为True执行
|
||||||
|
代码块
|
||||||
|
elif 条件: # 多分支判断
|
||||||
|
代码块
|
||||||
|
else: # 所有条件都不满足时执行
|
||||||
|
代码块
|
||||||
|
|
||||||
|
批量处理:
|
||||||
|
for 变量 in 列表:
|
||||||
|
条件判断
|
||||||
|
|
||||||
|
本课时任务: 规则判断 + 批量验证 ✓
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合模块开发目标评估:85%以上学生能熟练使用if-elif-else实现多条件判断,75%以上学生能编写包含逻辑运算符的复合条件,80%学生完成批量验证脚本的基本功能。通过真实选课规则驱动,学生对条件判断的应用场景理解深刻,逻辑建模能力有显著提升。循环的初步引入让学生认识到批量处理的价值,为下节课深入学习列表做好了铺垫。模块的核心功能(资格验证)已基本实现,项目推进符合预期。 |
|
||||||
|
| **教学反思** | 本课时通过"选课资格验证"这一具体业务逻辑,成功地将条件判断与循环结构融入项目实践,学习效果良好。将文字规则转化为判断逻辑的过程,有效培养了学生的计算思维。不足之处:①对于"and与or的优先级"讲解不足,部分学生在复杂条件中出现逻辑错误;②循环部分由于时间限制讲解较浅,字典的访问语法对部分学生造成困扰,影响了对循环本身的理解。改进方向:①增加逻辑运算符优先级的对比示例,建议使用括号明确逻辑关系;②将循环演示简化为普通列表(而非字典列表),降低认知负担,或将循环内容扩展为独立课时深入讲解。整体上,通过规则驱动的条件判断教学,学生的逻辑思维得到有效训练,代码实现能力进步明显。 |
|
||||||
50
data/Python/4.md
Normal file
50
data/Python/4.md
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
# 智能学生选课推荐系统——课程数据管理与推荐列表生成 教学设计
|
||||||
|
|
||||||
|
| **课题** | **智能学生选课推荐系统——课程数据管理与推荐列表生成** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**:掌握Python列表的创建、访问、修改、遍历等基本操作,理解列表的有序性与可变性特点,了解列表常用方法(append、remove、sort等)的功能,认识元组的不可变特性。<br>**技能目标**:能使用列表存储多门课程的信息(课程名、学分、容量等),能结合条件判断从课程列表中筛选符合学生条件的推荐课程,能使用列表方法对推荐结果进行排序与格式化输出,能编写完整的课程推荐脚本。<br>**素养目标**:培养数据组织与批量管理意识,养成数据结构选择的合理性思维,建立"用合适的容器存储批量数据"的工程认知。 |
|
||||||
|
| **教学重难点** | **重点**:列表的创建与访问方法;列表的遍历与条件筛选;列表常用方法的使用;列表与条件判断、循环的综合应用。<br>**难点**:从课程列表中按条件筛选并生成新列表的逻辑设计;列表嵌套结构(列表中存储字典)的理解与操作;排序方法的参数使用。 |
|
||||||
|
| **教学资源准备** | 多媒体课件(含列表结构图);课程信息数据表;代码演示环境;列表操作速查表;筛选与排序逻辑流程图。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 数据存储需求**<br>(5分钟) | 回顾前三节课内容,引出批量存储课程信息的需求,明确本课时任务:使用列表管理课程数据并实现智能推荐。 | **需求提出**<br>展示选课系统界面,提问:"如果系统有50门课程,用50个变量存储合适吗?"引出批量存储的必要性;<br><br>**任务聚焦**<br>说明本节课将实现推荐引擎的核心功能:从课程库中筛选出符合学生条件的课程并排序推荐。 | **问题思考**<br>思考批量数据管理的方案,回顾上节课循环中使用的列表结构;<br><br>**目标明确**<br>理解本课时是推荐系统的核心模块,连接前面的学生信息与条件判断。 | 通过问题引入激活学生对数据结构的需求意识;通过任务聚焦强化模块在整体项目中的关键地位,建立学习动机。 |
|
||||||
|
| **2. 列表基础操作**<br>(10分钟) | 讲解列表的创建、访问、修改、遍历等基础操作,演示列表常用方法的使用。 | **概念讲解**<br>讲解列表的定义方式、索引访问(正向、负向)、切片操作,强调列表的有序性与可变性;<br><br>**方法演示**<br>演示常用方法,代码示例:<br>```python<br>courses = ["Python编程", "数据库", "Web开发"]<br>courses.append("数据分析") # 添加<br>courses.remove("数据库") # 删除<br>courses.sort() # 排序<br>for course in courses:<br> print(course)```<br><br>**实践任务**<br>要求学生创建包含5门课程的列表,练习增删改查操作。 | **聆听理解**<br>理解列表的结构特点,记录基本操作语法;<br><br>**跟随实践**<br>在IDE中输入演示代码,测试各种操作的效果;<br><br>**独立练习**<br>创建课程列表,尝试添加新课程、删除指定课程、遍历输出全部课程。 | 通过系统讲解建立列表的完整认知;通过即时实践强化操作记忆;通过独立练习培养基础操作的熟练度。 |
|
||||||
|
| **3. 课程数据建模**<br>(11分钟) | 引导学生设计课程信息的数据结构,讲解如何使用字典表示单门课程,用列表存储多门课程。 | **结构设计**<br>引导讨论:"一门课程需要哪些信息?如何用一个变量表示?"引出字典结构;<br><br>**代码演示**<br>演示课程数据建模,代码示例:<br>```python<br>courses = [<br> {"name":"Python编程", "credits":3, "grade_req":1, "capacity":40},<br> {"name":"数据分析", "credits":4, "grade_req":2, "capacity":30},<br> {"name":"Web开发", "credits":3, "grade_req":2, "capacity":35}<br>]<br>for course in courses:<br> print(f"课程:{course['name']}, 学分:{course['credits']}")```<br><br>**任务发布**<br>要求学生补充课程列表,添加3-5门课程的完整信息。 | **讨论分析**<br>参与讨论,提出课程应包含的字段(课程名、学分、年级要求、容量等);<br><br>**理解结构**<br>理解"列表套字典"的嵌套结构,明确列表管理批量数据、字典管理单个对象的分工;<br><br>**数据填充**<br>按格式添加更多课程数据,确保字段完整准确。 | 通过讨论培养数据建模思维;通过嵌套结构的演示提升数据组织能力;通过数据填充任务巩固结构理解,为后续筛选做准备。 |
|
||||||
|
| **4. 推荐筛选实现**<br>(11分钟) | 引导学生编写推荐逻辑,结合学生信息与课程要求,从课程列表中筛选符合条件的课程并生成推荐列表。 | **逻辑分析**<br>讲解筛选逻辑:遍历课程列表,判断学生年级是否满足课程要求,若满足则加入推荐列表;<br><br>**代码演示**<br>演示核心筛选代码:<br>```python<br>student_grade = 2<br>recommend_list = []<br>for course in courses:<br> if student_grade >= course["grade_req"]:<br> recommend_list.append(course)<br><br># 按学分排序推荐<br>recommend_list.sort(key=lambda x: x["credits"], reverse=True)<br>for course in recommend_list:<br> print(f"推荐:{course['name']}, 学分:{course['credits']}")```<br><br>**任务发布**<br>要求学生完善筛选条件(增加学分要求、容量限制等),优化输出格式。 | **理解逻辑**<br>理解遍历、条件判断、列表添加的组合流程,明确筛选的实现机制;<br><br>**代码实践**<br>输入演示代码并测试,观察推荐结果;<br><br>**功能扩展**<br>添加更多筛选条件(如学分≥3、容量>0),调整排序规则(如按容量从大到小),美化输出格式。 | 通过逻辑分析将前几节知识综合应用;通过代码演示突破筛选难点;通过扩展任务培养灵活应用能力,完成推荐引擎核心功能。 |
|
||||||
|
| **5. 系统集成与总结**<br>(3分钟) | 组织学生展示推荐脚本,总结列表在项目中的核心作用,预告后续项目扩展方向。 | **作品点评**<br>邀请学生演示完整推荐流程,点评筛选逻辑的合理性与输出的用户友好性;<br><br>**模块总结**<br>总结:列表是批量数据管理的核心工具,结合条件判断与循环可实现复杂的筛选与推荐逻辑;<br><br>**项目展望**<br>说明前四节课已完成推荐系统的核心功能,后续可扩展:集合去重、字典统计、函数封装、数据持久化等。 | **观摩学习**<br>观看同学作品,学习优秀的筛选逻辑与输出设计;<br><br>**反思总结**<br>回顾四节课的项目进展,梳理知识点间的逻辑关系;<br><br>**展望规划**<br>思考:如何让系统更智能?还可以增加哪些功能? | 通过作品展示检验学习成效;通过模块总结强化列表的核心地位;通过项目展望保持学习热情,为后续深入学习铺垫。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
课程推荐引擎 - 列表与筛选逻辑
|
||||||
|
|
||||||
|
课程数据结构:
|
||||||
|
列表 [ 字典1, 字典2, 字典3, ... ]
|
||||||
|
↓
|
||||||
|
{"name":"课程名", "credits":学分, "grade_req":年级要求}
|
||||||
|
|
||||||
|
推荐流程:
|
||||||
|
① 创建空推荐列表 recommend_list = []
|
||||||
|
② 遍历课程列表 for course in courses:
|
||||||
|
③ 条件判断 if student_grade >= course["grade_req"]:
|
||||||
|
④ 添加推荐 recommend_list.append(course)
|
||||||
|
⑤ 排序输出 recommend_list.sort(...)
|
||||||
|
|
||||||
|
常用列表方法:
|
||||||
|
.append(元素) 添加到末尾
|
||||||
|
.remove(元素) 删除指定元素
|
||||||
|
.sort() 排序(可用key参数指定排序依据)
|
||||||
|
|
||||||
|
本课时任务: 课程管理 + 智能推荐 ✓
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合模块开发目标评估:85%以上学生能熟练使用列表存储与管理批量课程数据,80%学生能编写包含条件筛选的推荐逻辑,75%学生能使用sort方法对推荐结果进行排序。通过真实推荐场景驱动,学生对列表作为数据容器的核心作用理解深刻,数据组织能力显著提升。课程推荐引擎的基本功能已实现,前四节课构建的项目框架完整,学生对"从需求到实现"的软件开发流程有了初步体验,项目式学习的价值得到充分体现。 |
|
||||||
|
| **教学反思** | 本课时通过"课程推荐引擎"这一核心模块,成功地将列表、字典、条件判断、循环等知识点综合应用,形成了完整的功能闭环,学习效果显著。"列表套字典"的数据建模方式,让学生理解了复杂数据的组织方法,为后续面向对象学习做好铺垫。不足之处:①lambda表达式在排序中的使用对部分学生理解困难,建议改用更直观的方法或提前渗透函数概念;②筛选逻辑的扩展任务(如多条件组合)难度较大,部分学生未能在课堂完成,建议简化或提供参考代码。改进方向:①将排序演示简化为默认排序,或使用列表推导式等更符合当前认知水平的方法;②将复杂筛选逻辑设计为选做任务,降低核心任务难度。整体上,项目驱动的四课时教学成功地将抽象的编程知识转化为可见、可用的软件功能,学生的学习动力与成就感显著增强,为后续深入学习奠定了坚实基础。 |
|
||||||
47
data/Python/5.md
Normal file
47
data/Python/5.md
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
# 班级图书漂流管理系统——图书信息录入与存储模块 教学设计
|
||||||
|
|
||||||
|
| **课题** | **班级图书漂流管理系统——图书信息录入与存储模块** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**: 理解列表与元组的概念、特点及应用场景差异，掌握列表的创建、索引、切片、添加、删除等基本操作，理解元组的不可变性及其在数据保护中的作用。<br>**技能目标**: 能够使用列表存储多本图书的信息记录，运用元组封装单本图书的不可变属性（如ISBN、出版年份），能编写代码实现图书信息的批量录入、遍历显示和基本管理功能。<br>**素养目标**: 建立"数据结构选择服务于实际需求"的工程意识，培养结构化思维和数据管理的规范意识，理解信息系统中数据存储的重要性。 |
|
||||||
|
| **教学重难点** | **重点**: 列表的创建与常用操作方法（append、insert、remove等）；元组的定义与不可变特性；列表嵌套结构的理解与应用。<br>**难点**: 在项目中合理选择列表或元组存储不同性质的数据；列表嵌套元组的混合数据结构设计；多本图书信息的批量录入与循环遍历逻辑。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含项目演示视频）；班级图书角现场照片或图书登记表样例；Python开发环境（PyCharm/VSCode）；示例代码模板文件。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目情境导入**<br>(6分钟) | 展示班级图书角的纸质登记表存在的问题（信息分散、统计困难、易丢失），引出"班级图书漂流管理系统"项目需求，明确本课时任务：建立图书信息的数字化存储方案。 | **问题引入**<br>展示混乱的纸质登记表图片，提问："如何用Python程序来管理这些图书信息？需要什么样的数据容器？"<br><br>**任务发布**<br>明确本课时目标：学习列表和元组，设计并实现图书信息的录入与存储功能。 | **观察思考**<br>结合自身图书借阅经历，思考数字化管理的必要性；<br><br>**需求分析**<br>讨论一本图书需要记录哪些信息（书名、作者、类型、ISBN等），哪些信息需要修改、哪些不能改。 | 通过真实场景建立项目情境，让学生明确"为什么需要数据结构"；通过需求分析引导学生思考数据的可变性与不可变性，为理解列表与元组的差异做铺垫。 |
|
||||||
|
| **2. 列表知识探究**<br>(10分钟) | 讲解列表的概念、特点（有序、可变、可重复），演示列表的创建、索引访问、添加元素（append/insert）、删除元素（remove/pop）等操作，强调列表适合存储需要动态增删的数据。 | **概念讲解**<br>结合图书信息案例讲解列表定义：`books = ["Python入门", "数据分析", "Web开发"]`，演示索引、切片操作；<br><br>**操作演示**<br>演示添加新书：`books.append("机器学习")`，删除图书：`books.remove("Web开发")`，强调列表的"可变性"特点。 | **跟随实践**<br>在交互式环境中跟随教师创建图书列表，尝试索引访问、添加和删除操作；<br><br>**对比理解**<br>思考并回答："为什么图书列表要用列表而不是多个独立变量？" | 通过项目实例讲解抽象概念，增强理解；通过即时操作建立"列表=可增删的容器"认知；通过对比问题引导学生理解数据结构的优势。 |
|
||||||
|
| **3. 元组知识探究**<br>(8分钟) | 讲解元组的概念、特点（有序、不可变、可重复），演示元组的创建与访问，对比列表与元组的应用场景，强调元组适合存储不应被修改的数据（如图书的固定属性）。 | **概念对比**<br>讲解元组定义：`book_info = ("9787115123456", 2020, "技术类")`，演示访问但无法修改元组元素；<br><br>**场景分析**<br>提问："图书的ISBN、出版年份为什么要用元组？"引导理解"数据保护"意义。 | **动手尝试**<br>创建元组存储一本书的固定信息，尝试修改元组元素（触发错误），体会不可变性；<br><br>**讨论交流**<br>小组讨论：图书管理中哪些数据适合用元组、哪些适合用列表？ | 通过对比教学突出元组的"不可变"核心特性；通过错误体验加深记忆；通过讨论培养"根据数据性质选择结构"的工程思维。 |
|
||||||
|
| **4. 混合结构设计**<br>(7分钟) | 引导学生设计"列表嵌套元组"的混合数据结构，用于存储多本图书的完整信息，演示如何将单本图书的可变信息（书名、借阅状态）与不可变信息（ISBN、出版年份）结合存储。 | **结构设计**<br>演示设计思路：每本书用一个列表存储，其中嵌套元组保存固定属性：<br>`book1 = ["Python入门", "张三", ("9787115001", 2020), "在馆"]`<br><br>**代码示范**<br>演示创建图书库：`library = [book1, book2, ...]`，并遍历输出所有图书信息。 | **理解结构**<br>分析混合结构的层次关系（列表→列表→元组），理解为什么这样设计；<br><br>**模仿编码**<br>根据教师示范，创建包含2-3本图书信息的library列表。 | 通过嵌套结构设计提升学生对复杂数据结构的理解能力；通过编码实践巩固列表与元组的综合应用，为项目功能实现奠定基础。 |
|
||||||
|
| **5. 项目功能实现**<br>(7分钟) | 指导学生编写图书录入与显示功能的完整代码：通过循环批量录入图书信息，并遍历列表输出所有图书的详细信息。 | **任务分解**<br>分解编码任务：①循环输入图书基本信息；②组装为"列表+元组"结构；③添加到图书库；④遍历输出。<br><br>**巡回指导**<br>指导学生完成代码编写，强调输入验证、格式化输出等细节。 | **编码实践**<br>编写录入循环（如录入3本书），将书名、作者等可变信息与ISBN等不可变信息分别处理；<br><br>**功能测试**<br>运行程序，录入测试数据，检查输出格式是否清晰。 | 通过完整功能实现将知识点串联成实战技能；通过任务分解降低编码难度；通过测试环节培养调试意识和代码规范习惯。 |
|
||||||
|
| **6. 总结与展望**<br>(2分钟) | 总结列表与元组的核心特性及在项目中的应用，预告下节课将学习字典和集合以实现更高效的图书查询与统计功能。 | **知识梳理**<br>回顾列表（可变、适合动态管理）与元组（不可变、适合数据保护）的特点与选择依据；<br><br>**任务布置**<br>课后完善录入功能，增加图书类型的选项（如"文学类"、"技术类"）供用户选择。 | **回顾反思**<br>总结本课时实现的功能：搭建了图书信息存储的数据基础；<br><br>**接收任务**<br>思考：如果有100本书，如何快速找到某本书？为下节课做准备。 | 通过总结强化核心知识，明确项目进度；通过展望和问题引导激发对后续学习内容的期待，保持项目学习的连贯性。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
班级图书漂流管理系统 - 数据存储方案
|
||||||
|
|
||||||
|
列表 List 元组 Tuple
|
||||||
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||||
|
● 有序、可变、可重复 ● 有序、不可变、可重复
|
||||||
|
● 用 [] 定义 ● 用 () 定义
|
||||||
|
● 适合动态管理的数据 ● 适合固定不变的数据
|
||||||
|
|
||||||
|
项目应用：
|
||||||
|
library = [
|
||||||
|
["Python入门", "张三", ("ISBN001", 2020), "在馆"],
|
||||||
|
["数据分析", "李四", ("ISBN002", 2019), "借出"],
|
||||||
|
...
|
||||||
|
]
|
||||||
|
↑ ↑
|
||||||
|
可变信息(列表) 不可变信息(元组)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 本课时成功将列表与元组的学习置于"图书信息数字化存储"的项目任务中，约85%的学生能够准确说明列表与元组的核心差异并举例说明适用场景。全体学生完成了图书信息的录入与显示功能编码，其中70%以上的学生能独立设计"列表嵌套元组"的混合结构。课堂讨论环节学生参与度高，能够结合项目需求主动思考数据结构选择的合理性。通过真实的图书管理场景，学生对"为什么需要不同数据结构"有了直观认知，为后续复杂功能开发奠定了扎实基础。 |
|
||||||
|
| **教学反思** | 本课时通过"班级图书角"这一贴近学生生活的场景成功建立了项目情境，学生的代入感和学习动机明显增强。列表与元组的对比教学效果较好，特别是通过"尝试修改元组触发错误"的体验式学习，学生对不可变性的理解深刻。不足之处：①混合结构设计环节部分学生理解困难，出现"列表套列表"或"全用元组"等错误，后续应增加结构图示和更多示例；②录入功能实现时，少数学生对"循环+列表追加"的逻辑不够清晰，导致编码耗时较长，可考虑提供伪代码框架降低难度；③对数据验证（如ISBN格式检查）只做了口头强调，未落实到代码中，下次应增加简单的输入校验演示。改进方向：提前准备更直观的数据结构可视化图示；为不同水平学生提供分层任务（基础版/挑战版）；在巡回指导时重点关注逻辑思维较弱的学生。 |
|
||||||
51
data/Python/6.md
Normal file
51
data/Python/6.md
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
# 班级图书漂流管理系统——图书查询与统计模块 教学设计
|
||||||
|
|
||||||
|
| **课题** | **班级图书漂流管理系统——图书查询与统计模块** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**: 理解字典的键值对结构及其快速查找优势，掌握字典的创建、访问、添加、修改、删除操作；理解集合的无序性、唯一性特点，掌握集合的创建与去重、交并差等操作。<br>**技能目标**: 能够使用字典重构图书信息存储结构以实现按书名快速查询，运用集合统计图书类型分布和借阅人员信息（避免重复统计），能编写图书查询和统计分析功能的完整代码。<br>**素养目标**: 建立"数据结构优化提升程序效率"的工程意识，培养数据去重、信息检索的算法思维，理解不同数据结构在实际问题中的取舍逻辑。 |
|
||||||
|
| **教学重难点** | **重点**: 字典的键值对概念与访问方法（`dict[key]`、get()）；集合的唯一性与去重操作；字典与集合在项目中的应用场景。<br>**难点**: 将列表结构转换为字典结构以优化查询效率；理解集合操作（交集、并集）在统计分析中的实际意义；综合运用字典、集合、列表解决复杂查询与统计任务。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含查询效率对比动画）；上节课完成的图书录入代码；字典与集合操作速查表；项目功能演示视频。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目问题引入**<br>(5分钟) | 回顾上节课实现的列表存储方案，演示在列表中查找图书需要遍历全部数据的低效问题，引出"如何快速查询"的需求，明确本课时任务：学习字典与集合优化查询和统计功能。 | **场景复现**<br>演示在包含50本书的列表中查找《Python入门》，展示需要逐个对比的过程；<br><br>**问题提出**<br>提问："图书馆系统如何在几十万本书中秒速找到指定书籍？列表能做到吗？" | **观察对比**<br>观察列表遍历查找的过程，感受效率问题；<br><br>**问题思考**<br>讨论：能否像查字典一样，通过"书名"直接定位到图书信息？ | 通过效率对比创造认知冲突，让学生意识到列表的局限性；通过"查字典"类比为学习字典数据结构建立生活化认知锚点。 |
|
||||||
|
| **2. 字典知识探究**<br>(10分钟) | 讲解字典的键值对结构、创建方式、访问与修改方法，演示字典的快速查找特性（O(1)时间复杂度），对比列表与字典在查询场景中的效率差异。 | **概念讲解**<br>讲解字典定义：`book_dict = {"Python入门": {...}, "数据分析": {...}}`，强调"书名=键、详细信息=值"的映射关系；<br><br>**操作演示**<br>演示通过书名直接访问：`book_dict["Python入门"]`，对比列表遍历的耗时，讲解哈希表原理（简化版）。 | **跟随实践**<br>创建简单字典（如学号与姓名的映射），尝试添加、访问、修改操作；<br><br>**效率体验**<br>对比列表和字典查找同一数据的代码行数和执行速度。 | 通过直观对比突出字典的核心优势——快速查找；通过动手操作建立"键→值"的映射思维；通过效率体验强化数据结构选择的重要性。 |
|
||||||
|
| **3. 集合知识探究**<br>(8分钟) | 讲解集合的无序性、唯一性特点，演示集合的创建、去重操作，介绍集合的交集、并集、差集在统计分析中的应用（如统计借阅人数、图书类型）。 | **概念讲解**<br>讲解集合定义：`book_types = {"文学类", "技术类", "科普类"}`，演示自动去重特性；<br><br>**场景应用**<br>演示统计案例：从多条借阅记录中提取不重复的借阅人：`borrowers = set(["张三", "李四", "张三"])` → `{"张三", "李四"}`。 | **动手尝试**<br>创建包含重复元素的列表，转换为集合观察去重效果；<br><br>**讨论交流**<br>小组讨论：统计"班级有多少种类型的图书"为什么要用集合而不是列表？ | 通过去重特性解决实际统计问题；通过应用场景讨论引导学生理解集合的"唯一性"价值，建立"用集合做统计"的思维模式。 |
|
||||||
|
| **4. 项目结构重构**<br>(8分钟) | 指导学生将上节课的列表存储结构改造为字典结构，以书名为键存储图书详细信息，并在图书信息中使用集合存储借阅历史（避免重复记录）。 | **重构方案**<br>演示将`library`列表转换为`library_dict`字典：<br>```python<br>library_dict = {<br> "Python入门": {"作者":"张三", "ISBN":"001", "借阅人":set()},<br> ...<br>}<br>```<br><br>**代码示范**<br>演示如何遍历旧列表，提取书名作为键，构建新字典。 | **理解结构**<br>分析新旧结构的差异，理解为什么字典更适合查询场景；<br><br>**协作编码**<br>小组合作完成数据结构转换代码，将至少3本书的信息重构为字典格式。 | 通过结构重构深化对字典应用的理解；通过小组协作培养代码交流与协作能力；通过实际转换巩固字典与集合的综合运用。 |
|
||||||
|
| **5. 查询功能实现**<br>(7分钟) | 指导学生编写图书查询功能：用户输入书名，程序从字典中快速查找并输出图书详细信息；编写统计功能：统计所有图书的类型种类和借阅人总数（利用集合去重）。 | **任务分解**<br>分解编码任务：①输入书名；②使用`get()`方法查询字典；③判断是否存在并输出结果；④遍历字典收集类型到集合。<br><br>**巡回指导**<br>指导学生处理"书名不存在"的异常情况，强调使用`get()`方法的容错性。 | **编码实践**<br>编写查询函数，实现按书名查找功能，处理查询失败的提示；<br><br>**功能测试**<br>测试查询已有和不存在的书名，验证集合统计类型数量的准确性。 | 通过完整功能实现将字典与集合的知识转化为实战技能；通过异常处理培养健壮代码意识；通过测试环节强化调试与验证习惯。 |
|
||||||
|
| **6. 总结与展望**<br>(2分钟) | 总结字典与集合的核心特性及在项目中的应用，对比列表、字典、集合三种结构的适用场景，预告下节课将学习函数封装，实现更模块化的系统设计。 | **知识对比**<br>绘制列表、字典、集合的特性对比表，明确查询用字典、去重统计用集合的选择逻辑；<br><br>**任务布置**<br>课后增加"按类型查询所有图书"功能，思考如何优化实现。 | **回顾反思**<br>总结本课时实现的功能：将查询效率从O(n)优化到O(1)，实现了去重统计；<br><br>**接收任务**<br>思考：目前代码中查询、统计等操作都在主程序里，如何让代码更清晰？ | 通过对比总结形成数据结构选择的知识体系；通过展望引导学生思考代码组织问题，为下节课函数模块化学习做铺垫。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
班级图书漂流管理系统 - 查询与统计优化
|
||||||
|
|
||||||
|
数据结构对比
|
||||||
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||||
|
列表 List 字典 Dictionary 集合 Set
|
||||||
|
有序、可重复 键值对映射 无序、唯一
|
||||||
|
查找O(n) 查找O(1) ⚡ 自动去重 ★
|
||||||
|
适合：顺序存储 适合：快速查询 适合：统计分析
|
||||||
|
|
||||||
|
项目应用：
|
||||||
|
library_dict = {
|
||||||
|
"Python入门": {
|
||||||
|
"作者": "张三",
|
||||||
|
"类型": "技术类",
|
||||||
|
"借阅人": {"李四", "王五"} ← 集合去重
|
||||||
|
},
|
||||||
|
...
|
||||||
|
}
|
||||||
|
↑
|
||||||
|
书名作为键，快速定位
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 本课时通过"查询效率优化"的实际需求成功引入字典与集合的学习,约80%的学生能够准确说明字典与列表在查询场景中的效率差异,并理解集合去重在统计中的应用。全体学生完成了数据结构从列表到字典的重构,其中75%以上能独立编写图书查询与类型统计功能。课堂讨论中学生能够主动对比不同数据结构的适用场景,体现出较强的工程思维。通过效率对比演示,学生对"算法复杂度"有了初步感知,为后续算法学习奠定基础。项目功能从"能存储"提升到"能高效查询",学生成就感显著提升。 |
|
||||||
|
| **教学反思** | 本课时通过列表遍历与字典查找的效率对比成功创造了认知冲突,激发了学生对"更优数据结构"的学习需求。字典的"查字典"类比、集合的"去重"特性都通过生活化场景得到了有效理解。不足之处:①数据结构重构环节难度较大,部分学生对"如何遍历列表提取键值对"的逻辑理解不够,导致代码出错率较高,后续应提供详细的重构步骤伪代码;②集合的交并差操作只做了简单介绍,未在项目中深度应用,学生对这些操作的实用价值感知不足,可考虑增加"两个班级借阅情况对比"的拓展案例;③对字典的`get()`方法与直接索引的差异讲解不够充分,少数学生仍使用`dict[key]`导致KeyError。改进方向:为重构任务提供可视化的数据流程图;设计更多集合操作的实战小任务;在代码规范中强调容错处理的重要性。 |
|
||||||
52
data/Python/7.md
Normal file
52
data/Python/7.md
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
# 班级图书漂流管理系统——功能封装与菜单系统搭建 教学设计
|
||||||
|
|
||||||
|
| **课题** | **班级图书漂流管理系统——功能封装与菜单系统搭建** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**: 理解函数的概念、作用及模块化编程思想,掌握函数的定义、参数传递、返回值的使用方法,理解全局变量与局部变量的作用域差异。<br>**技能目标**: 能够将图书录入、查询、统计等功能代码封装为独立函数,设计并实现带循环和选择结构的主菜单系统,通过函数调用整合各模块功能,使系统具备完整的人机交互能力。<br>**素养目标**: 建立"模块化设计提升代码可维护性"的软件工程意识,培养代码复用、结构化编程的良好习惯,理解团队协作开发中函数封装的重要性。 |
|
||||||
|
| **教学重难点** | **重点**: 函数的定义与调用语法;参数传递与返回值的使用;将具体功能代码抽象为函数的过程;主菜单的循环与分支控制逻辑。<br>**难点**: 确定函数的合理粒度（一个函数完成一个明确任务）;处理函数间的数据传递（如共享图书字典）;设计用户友好的交互流程和异常处理。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含模块化设计原理图）;前两节课完成的项目代码;函数设计流程图;完整系统演示视频。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目现状分析**<br>(5分钟) | 回顾前两节课实现的录入、查询、统计功能代码,展示代码冗长、逻辑混乱的问题（所有代码堆在主程序中）,引出模块化设计的必要性,明确本课时任务:用函数封装功能,搭建完整系统。 | **代码审查**<br>展示一段包含重复代码的"混乱版"项目代码,提问："如果要修改查询逻辑,需要改几处？如何让代码更清晰？"<br><br>**需求明确**<br>说明专业开发中"一个功能一个函数"的模块化原则,明确本课时要实现菜单驱动的完整系统。 | **问题识别**<br>阅读混乱代码,找出重复片段和逻辑不清的地方;<br><br>**目标认同**<br>理解模块化的价值:代码复用、易于维护、便于团队协作。 | 通过"坏代码"案例创造改进需求,让学生体会模块化的必要性;通过对比专业开发标准建立工程化编程意识。 |
|
||||||
|
| **2. 函数基础知识**<br>(9分钟) | 讲解函数的定义语法（def关键字）、参数传递（位置参数、默认参数）、返回值的使用,演示简单函数的创建与调用,强调函数的"黑盒"特性——明确输入输出,内部实现可独立修改。 | **概念讲解**<br>讲解函数定义格式:<br>```python<br>def add_book(name, author):<br> # 函数体<br> return result<br>```<br>演示参数传递与返回值的使用。<br><br>**原理阐释**<br>用"工厂流水线"类比函数:输入原料（参数）→加工处理（函数体）→输出产品（返回值）。 | **跟随实践**<br>定义简单函数（如计算两数之和）,尝试不同参数类型和返回值;<br><br>**对比理解**<br>对比有参数/无参数、有返回值/无返回值的不同函数类型。 | 通过生活化类比降低抽象概念的理解难度;通过多样化示例建立函数的完整认知;通过动手实践巩固基础语法。 |
|
||||||
|
| **3. 功能函数封装**<br>(10分钟) | 指导学生将图书录入、查询、统计等功能代码逐一封装为独立函数,明确每个函数的职责、参数设计和返回值,强调函数命名的规范性（动词+名词）。 | **任务分解**<br>列出需封装的函数清单:`add_book()`, `query_book()`, `show_statistics()`, `display_menu()`等;<br><br>**示例演示**<br>演示封装查询功能:<br>```python<br>def query_book(book_dict, book_name):<br> return book_dict.get(book_name, "未找到")<br>```<br>讲解参数选择（需要图书字典和书名）与返回值设计。 | **协作封装**<br>小组分工,每组负责封装1-2个功能函数,讨论参数设计合理性;<br><br>**代码审查**<br>小组间交换检查函数代码,验证是否符合"单一职责"原则。 | 通过任务分解将复杂项目拆解为可管理的小模块;通过示例演示建立函数封装的标准流程;通过小组协作模拟真实开发中的分工合作。 |
|
||||||
|
| **4. 菜单系统设计**<br>(9分钟) | 指导学生设计主菜单系统:使用while循环实现持续交互,用if-elif分支调用不同功能函数,实现"显示菜单→用户选择→执行功能→返回菜单"的完整流程。 | **流程设计**<br>绘制菜单系统流程图:循环显示选项→获取用户输入→分支判断→调用对应函数→判断是否退出;<br><br>**代码框架**<br>提供主程序框架:<br>```python<br>while True:<br> display_menu()<br> choice = input("请选择:")<br> if choice == '1':<br> add_book(...)<br> elif ...<br>```<br>演示如何整合各函数。 | **理解逻辑**<br>分析菜单循环的控制逻辑,理解"持续交互"的实现原理;<br><br>**完善代码**<br>在框架基础上补充完整的选项分支,调用已封装的功能函数,实现系统集成。 | 通过流程图可视化菜单逻辑,降低循环嵌套的理解难度;通过提供框架降低编码门槛,让学生聚焦于功能整合;通过系统集成体验模块化开发的优势。 |
|
||||||
|
| **5. 系统测试优化**<br>(5分钟) | 指导学生进行完整系统测试:执行录入→查询→统计→退出的完整流程,发现并修复bug（如输入异常、功能冲突）,优化用户体验（添加提示信息、美化输出）。 | **测试指导**<br>发布测试任务清单:①测试所有菜单选项;②测试异常输入（如输入字母而非数字）;③检查退出功能;<br><br>**问题诊断**<br>巡视学生测试,帮助定位和解决常见问题（如未正确传递参数、循环无法退出等）。 | **全流程测试**<br>模拟真实用户操作,按照测试清单逐项验证功能;<br><br>**问题修复**<br>记录发现的bug,修改代码并重新测试,直到系统稳定运行。 | 通过系统化测试培养质量意识和调试能力;通过问题解决过程提升代码纠错技能;通过用户体验优化建立产品思维。 |
|
||||||
|
| **6. 项目总结展望**<br>(2分钟) | 总结项目三个课时的完整开发流程（数据存储→高效查询→模块化集成）,点评模块化设计对大型项目的重要性,预告后续可扩展的方向（如数据持久化、图形界面）。 | **项目回顾**<br>展示项目从"混乱代码"到"结构清晰系统"的演变,强调函数封装带来的可维护性提升;<br><br>**能力肯定**<br>肯定学生已掌握"数据结构+算法+工程化"的综合能力,鼓励课后继续完善功能。 | **成果展示**<br>小组展示完成的系统运行效果,交流设计思路;<br><br>**反思总结**<br>填写项目开发日志,记录收获与待改进之处。 | 通过项目回顾强化知识体系的完整性;通过成果展示增强学生的成就感和自信心;通过反思总结培养持续改进的职业素养。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
班级图书漂流管理系统 - 模块化架构
|
||||||
|
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ 主程序 (main) │
|
||||||
|
│ ● 显示菜单循环 │
|
||||||
|
│ ● 获取用户选择 │
|
||||||
|
│ ● 调度各功能模块 │
|
||||||
|
└──────────┬──────────────────────────┘
|
||||||
|
│
|
||||||
|
┌──────┴────────┬─────────┬─────────┐
|
||||||
|
▼ ▼ ▼ ▼
|
||||||
|
add_book() query_book() show_ display_menu()
|
||||||
|
录入函数 查询函数 statistics() 菜单函数
|
||||||
|
统计函数
|
||||||
|
|
||||||
|
函数设计三要素:
|
||||||
|
1. 参数 (Input) - 函数需要什么数据?
|
||||||
|
2. 处理 (Process) - 函数做什么工作?
|
||||||
|
3. 返回 (Output) - 函数给出什么结果?
|
||||||
|
|
||||||
|
模块化优势: ① 代码复用 ② 易于维护 ③ 团队协作
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 本课时成功将分散的功能代码整合为模块化系统,约90%的学生能够准确说明函数封装的作用并完成至少3个功能函数的编写。全体学生完成了带菜单循环的完整系统搭建,其中70%以上能独立设计函数的参数与返回值。小组协作封装环节展现出良好的团队分工能力,代码审查环节学生能够相互指出设计不合理之处。通过三课时的项目开发,学生从"学语法"转变为"做项目",对Python编程的实用价值有了深刻认知,编程思维和工程素养显著提升。系统测试环节学生主动发现并修复bug的能力超出预期,体现出较强的问题解决能力。 |
|
||||||
|
| **教学反思** | 本课时通过"混乱代码"与"模块化代码"的对比成功建立了函数封装的必要性认知,学生的学习动机强烈。函数基础知识的讲解结合项目实例,避免了抽象概念的枯燥感。不足之处:①部分学生对函数参数传递（特别是可变对象如字典的传递）理解不够深入,出现"修改参数影响原数据"的困惑,后续应增加内存模型的可视化讲解;②菜单系统的异常处理（如用户输入非法字符）在时间压力下讲解不够充分,部分学生的系统在异常输入时会崩溃,应提供异常处理的代码模板;③小组协作时部分组员参与度不均,个别学生只是"观看"而非"编码",需要设计更明确的分工机制和个人任务检查点。改进方向:提前准备函数参数传递的动画演示;在功能函数模板中预留异常处理的位置并提示学生填充;在小组任务中明确每个成员必须完成的最小编码量。整体来看,三课时的项目式教学成功地将数据结构、算法思维、工程化实践有机融合,学生的综合能力得到了全面锻炼,达到了预期的教学目标。 |
|
||||||
50
data/Python/8.md
Normal file
50
data/Python/8.md
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
# 天气数据自动采集与推送系统——HTTP通信与天气API数据获取 教学设计
|
||||||
|
|
||||||
|
| **课题** | **天气数据自动采集与推送系统——HTTP通信与天气API数据获取** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**：理解HTTP协议的请求-响应模式，掌握REST API的基本概念与调用方式,了解JSON数据格式的结构特点。<br>**技能目标**：能够使用requests库发送GET请求调用天气API，能够解析API返回的JSON数据并提取关键字段（城市、温度、天气状况），能够编写完整的天气数据获取脚本作为项目的数据采集模块。<br>**素养目标**：建立"服务调用"的现代编程思维，培养阅读API文档的自学能力，养成在项目开发中合理使用第三方服务的工程意识。 |
|
||||||
|
| **教学重难点** | **重点**：requests库的安装与基本使用方法；API请求URL的构造与参数传递；JSON数据的解析与字段提取。<br>**难点**：理解HTTP请求的本质与API文档中参数的对应关系；处理API响应中的嵌套JSON结构；应对API请求失败的异常情况。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含HTTP通信原理动画）；和风天气API密钥（或其他免费天气API）；示例API响应JSON数据；requests库安装包；项目代码模板文件。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目任务导入**<br>(7分钟) | 展示项目最终目标（自动采集多城市天气并推送），明确本课时任务是实现项目的核心模块——数据采集功能，引出"如何让Python程序从互联网获取天气数据"这一技术问题。 | **场景创设**<br>演示手机天气APP的实时更新效果，提问："这些数据从哪来？我们的Python程序如何获取？"<br><br>**任务发布**<br>展示项目架构图，标注本课时目标：编写weather_fetcher.py模块，实现"输入城市名→返回温度、天气"功能。 | **观察思考**<br>观看演示，联系日常使用经验，思考数据来源；<br><br>**明确目标**<br>理解本课时在项目中的定位：数据采集是后续所有功能的基础。 | 通过真实应用场景建立技术需求认知；通过项目架构图让学生明确本课时任务在整体中的关键作用，强化目标导向。 |
|
||||||
|
| **2. 核心概念讲解**<br>(8分钟) | 讲解HTTP协议的客户端-服务器模型，介绍REST API的概念、特点与调用方式，展示天气API文档的关键内容（接口地址、参数、响应格式）。 | **原理阐述**<br>用动画演示HTTP请求过程：Python程序（客户端）→发送请求→服务器→返回数据；强调"URL+参数"的请求构造方式；<br><br>**文档解读**<br>打开和风天气API文档，逐项讲解：接口URL、必需参数（key、location）、响应JSON结构，演示在浏览器中直接访问API。 | **聆听理解**<br>理解HTTP的"请求-响应"机制，记录API调用的三要素：地址、参数、响应格式；<br><br>**实例观察**<br>观看浏览器访问API的演示，直观感受JSON数据的返回，尝试识别数据中的城市、温度字段。 | 将抽象的网络通信概念具象为"发送网址+参数，获得数据"的简单模型；通过浏览器演示消除技术神秘感，建立"API就是特殊网址"的认知。 |
|
||||||
|
| **3. 工具库与代码演示**<br>(10分钟) | 介绍requests库的作用与安装，演示使用requests.get()调用天气API的完整代码，讲解参数传递、响应处理、JSON解析的具体方法。 | **库的引入**<br>说明requests是Python的HTTP客户端库，演示pip install requests安装过程；<br><br>**代码演示**<br>边讲解边编写代码：<br>```python<br>import requests<br>url = "https://api.qweather.com/v7/weather/now"<br>params = {"key": "你的密钥", "location": "101010100"}<br>response = requests.get(url, params=params)<br>data = response.json()<br>print(f"温度：{data['now']['temp']}℃")<br>```<br>逐行解释：URL定义、参数字典、发送请求、解析JSON、字段访问；<br><br>**运行展示**<br>运行代码，展示获取到的北京天气数据。 | **安装实践**<br>跟随教师完成requests库的安装确认；<br><br>**代码跟随**<br>边听边在自己的IDE中输入代码，理解每行的作用；<br><br>**结果验证**<br>运行代码，观察控制台输出的天气数据，对照API文档验证字段。 | 通过完整代码演示建立"库调用-参数传递-数据解析"的操作流程；通过逐行讲解降低理解难度；通过即时运行验证建立"代码有效"的信心。 |
|
||||||
|
| **4. 功能模块编写**<br>(12分钟) | 指导学生编写完整的天气数据获取函数，封装为项目模块，要求实现：输入城市名、返回温度和天气状况、添加异常处理、输出格式化结果。 | **任务细化**<br>发布编码任务：创建weather_fetcher.py，定义get_weather(city)函数，实现上述功能；提供城市代码对照表；<br><br>**技术提示**<br>提示关键点：使用字典存储多城市代码、用try-except捕获网络异常、格式化输出使用f-string；<br><br>**巡回指导**<br>巡视学生编码，解答JSON嵌套访问、异常处理等问题，强调代码注释与函数文档字符串的编写。 | **独立编码**<br>创建py文件，定义函数框架，填充请求逻辑；<br><br>**调试测试**<br>测试不同城市（如"北京""上海"），验证数据准确性；尝试故意输入错误密钥，观察异常处理效果；<br><br>**代码优化**<br>根据测试结果调整代码，添加注释说明各部分功能。 | 通过独立编码巩固API调用技能，形成可复用的项目模块；通过测试培养"编码-调试-优化"的开发习惯；通过异常处理强化代码健壮性意识。 |
|
||||||
|
| **5. 成果展示与项目展望**<br>(3分钟) | 选取学生作品展示运行效果，总结HTTP通信与API调用的核心要点，预告后续课程将在此基础上实现多城市并发采集与数据存储。 | **作品点评**<br>选2-3名学生演示代码，点评优点（如良好的异常处理）与改进点；<br><br>**知识串联**<br>总结：本课时完成了项目的"数据源"模块，后续将学习用多线程同时采集多城市、用数据库存储历史数据、用定时任务实现自动化；<br><br>**任务布置**<br>课后任务：为函数添加"获取未来3天天气"的功能（需查阅API文档）。 | **观摩学习**<br>观看同学作品，学习不同实现思路；<br><br>**总结反思**<br>回顾requests使用流程，明确本模块在项目中的"基石"作用；<br><br>**接收任务**<br>记录课后任务，理解这是对API调用能力的深化练习。 | 通过作品展示建立学习榜样，强化成就感；通过项目展望保持学习连贯性，明确当前任务与后续模块的逻辑关系；课后任务引导学生自主探索API文档。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
天气数据采集模块 - HTTP通信流程
|
||||||
|
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ Python程序 (客户端) │
|
||||||
|
│ ├── 构造请求: URL + 参数 │
|
||||||
|
│ ├── 发送: requests.get() │
|
||||||
|
│ └── 解析: response.json() │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ ↓↑ HTTP 协议 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 天气API服务器 │
|
||||||
|
│ ├── 接收请求 │
|
||||||
|
│ ├── 查询数据 │
|
||||||
|
│ └── 返回JSON: {now: {temp, text}} │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
|
||||||
|
核心代码结构:
|
||||||
|
import requests
|
||||||
|
response = requests.get(url, params=参数字典)
|
||||||
|
data = response.json()
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合本课时项目任务评估：85%以上学生成功调用API获取天气数据并正确解析，75%学生能够独立编写带异常处理的完整函数。通过"浏览器直接访问API"的演示，有效降低了学生对网络通信的畏难情绪。学生对requests库的"三行代码实现网络数据获取"表现出浓厚兴趣，课堂参与度高。项目数据采集模块的基础功能已基本实现，为后续多线程、数据存储等课时奠定了坚实基础。部分学生在调试JSON嵌套字段访问时遇到困难，但在教师指导下均得以解决。 |
|
||||||
|
| **教学反思** | 本课时成功将"HTTP通信与REST API"这一理论性较强的主题，转化为"获取天气数据"的具体项目任务，学生的代入感和学习动力明显增强。API文档解读环节设计合理，通过浏览器演示让抽象的"接口调用"变得直观可感。代码演示采用"边讲边写"方式，学生跟随效果好于预期。不足之处：①在40分钟内，部分学生因requests库安装出现网络问题导致进度延迟，建议提前让学生课下完成库安装或准备离线安装包；②对于JSON嵌套结构的访问（如data['now']['temp']），讲解略显仓促，少数学生理解不够深入，建议增加一个"JSON结构可视化"的辅助图示；③异常处理部分主要由教师演示，学生自主实践时间不足，后续可考虑设计专门的"错误处理"小任务强化训练。整体上，项目驱动的教学框架使技术学习目标清晰，学生编写的weather_fetcher.py模块已具备项目集成的条件，教学目标达成度较高。 |
|
||||||
48
data/Python/9.md
Normal file
48
data/Python/9.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# 天气数据自动采集与推送系统——多线程并发采集多城市数据 教学设计
|
||||||
|
|
||||||
|
| **课题** | **天气数据自动采集与推送系统——多线程并发采集多城市数据** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**：理解进程与线程的概念及区别，掌握Python多线程编程的基本原理，了解并发编程在提升I/O密集型任务效率中的作用。<br>**技能目标**：能够使用threading模块创建和管理线程，能够改造单线程的天气数据采集代码为多线程并发版本，能够使用线程池(ThreadPoolExecutor)批量处理多城市数据采集任务，能够测量并对比串行与并发执行的性能差异。<br>**素养目标**：建立"并发优化"的工程思维，理解多线程在网络请求场景中的实用价值，培养通过技术手段提升程序性能的意识。 |
|
||||||
|
| **教学重难点** | **重点**：threading模块的基本使用方法；线程的创建、启动与等待；ThreadPoolExecutor的应用；多线程访问共享数据的注意事项。<br>**难点**：理解多线程的并发执行机制与线程切换；处理多线程中的数据收集与结果汇总；避免线程安全问题（如数据竞争）。 |
|
||||||
|
| **教学资源准备** | 多媒体课件（含进程与线程对比图、并发执行动画）；上节课完成的weather_fetcher.py模块；多城市代码列表文件；性能测试脚本模板；线程池使用示例代码。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 性能瓶颈引入**<br>(6分钟) | 演示串行采集10个城市天气数据的耗时问题，提出"如何加速数据采集"的技术需求，引入多线程并发编程的概念。 | **问题演示**<br>运行上节课的weather_fetcher模块，用循环串行采集10个城市，用time模块记录总耗时（约10-15秒），提问："如果要采集100个城市呢？"<br><br>**概念引入**<br>展示并发执行示意图，说明"同时发送多个请求"的思想，介绍线程是实现并发的一种方式。 | **观察分析**<br>观看串行执行过程，感受耗时问题，理解在网络请求中"等待响应"的时间占主导；<br><br>**讨论思考**<br>小组讨论："能否让程序同时请求多个城市的数据？"初步建立并发需求认知。 | 通过实际运行建立性能痛点，让学生体会"串行等待"的低效；通过对比引出并发方案，明确本课时要解决的核心问题。 |
|
||||||
|
| **2. 多线程原理讲解**<br>(8分钟) | 讲解进程与线程的基本概念、区别与应用场景，介绍Python的threading模块，演示线程的创建、启动与join()方法的使用。 | **概念对比**<br>用类比说明：进程是独立的程序实例（如打开的软件），线程是程序内部的执行路径（如软件的多个功能同时运行）；强调线程共享内存、切换快的特点；<br><br>**基础演示**<br>编写简单示例：<br>```python<br>import threading<br>def task(name):<br> print(f"{name}线程执行中")<br>t1 = threading.Thread(target=task, args=("A",))<br>t1.start()<br>t1.join()<br>```<br>讲解Thread对象创建、target参数、start()启动、join()等待。 | **聆听理解**<br>理解"并发≠并行"的概念，记录线程的三要素：目标函数、参数、启动方法；<br><br>**代码跟随**<br>在IDE中输入演示代码，运行观察线程执行效果，尝试创建多个线程并观察输出顺序的随机性。 | 通过类比降低抽象概念的理解难度；通过简单示例建立"创建线程-启动-等待"的基本操作流程，为后续复杂应用打基础。 |
|
||||||
|
| **3. 并发采集实现**<br>(12分钟) | 指导学生改造天气采集代码，使用线程实现多城市并发请求，演示ThreadPoolExecutor的使用方法，对比串行与并发的性能差异。 | **方案讲解**<br>说明改造思路：为每个城市创建独立线程调用get_weather()，将结果存入列表；<br><br>**代码演示**<br>演示手动创建线程版本，然后引入线程池简化代码：<br>```python<br>from concurrent.futures import ThreadPoolExecutor<br>cities = ["北京", "上海", "广州", ...]<br>with ThreadPoolExecutor(max_workers=5) as executor:<br> results = executor.map(get_weather, cities)<br>```<br>讲解线程池的优势：自动管理线程数量、简化代码；<br><br>**性能对比**<br>分别运行串行版本和并发版本，展示耗时对比（如从15秒降至3秒）。 | **理解方案**<br>理解"每个城市一个线程"的并发模型，记录线程池的使用模板；<br><br>**实践编码**<br>创建multi_thread_fetcher.py，使用ThreadPoolExecutor改造采集代码；<br><br>**测试验证**<br>运行代码，记录并对比串行与并发的耗时数据，体会性能提升。 | 通过代码改造巩固多线程应用能力；通过线程池简化实现，降低并发编程门槛；通过性能对比建立直观的"并发价值"认知。 |
|
||||||
|
| **4. 线程安全探讨**<br>(10分钟) | 讲解多线程中的数据竞争问题，演示不安全的共享数据访问，介绍线程锁(Lock)的使用方法，指导学生在项目中安全收集结果。 | **问题演示**<br>演示多线程同时修改同一列表可能出现的问题（如数据丢失），说明这是"数据竞争"；<br><br>**解决方案**<br>介绍threading.Lock()的使用：<br>```python<br>lock = threading.Lock()<br>with lock:<br> shared_list.append(data)<br>```<br>强调在项目中应使用线程安全的数据结构或加锁保护；<br><br>**最佳实践**<br>推荐使用线程池的map()或submit()方法返回结果，避免手动管理共享数据。 | **观察问题**<br>观看演示，理解多线程同时访问数据的风险；<br><br>**学习方案**<br>理解Lock的"互斥访问"机制，记录加锁的代码模板；<br><br>**优化代码**<br>检查自己的并发采集代码，确保结果收集方式是线程安全的，如使用executor.map()的返回值而非手动append。 | 通过问题演示建立线程安全意识；通过解决方案教学培养规范编程习惯；通过代码优化强化"安全第一"的工程理念。 |
|
||||||
|
| **5. 项目集成与展望**<br>(4分钟) | 总结多线程并发编程的核心要点，将本课时的并发采集模块集成到项目中，预告后续课程将实现定时自动采集与数据存储。 | **知识总结**<br>回顾threading模块使用流程、ThreadPoolExecutor优势、线程安全注意事项；<br><br>**模块集成**<br>说明multi_thread_fetcher可作为项目的"高效采集引擎"，后续定时任务将调用此模块；<br><br>**任务布置**<br>课后任务：尝试调整线程池的max_workers参数（如5、10、20），测试不同线程数对性能的影响，思考最优值。 | **回顾反思**<br>总结并发编程的关键点，明确本模块在项目中的"性能优化"作用；<br><br>**接收任务**<br>记录课后任务，理解这是对并发性能调优的探索性实验。 | 通过总结强化知识结构；通过模块集成保持项目连贯性；课后任务引导学生探索并发参数优化，培养实验精神。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
多线程并发采集架构
|
||||||
|
|
||||||
|
串行模式（慢）:
|
||||||
|
城市1 → 等待 → 城市2 → 等待 → 城市3 → ...
|
||||||
|
总耗时 = 单次耗时 × 城市数量
|
||||||
|
|
||||||
|
并发模式（快）:
|
||||||
|
城市1 ↘
|
||||||
|
城市2 → 线程池 → 同时发送请求 → 并发等待
|
||||||
|
城市3 ↗
|
||||||
|
总耗时 ≈ 单次耗时
|
||||||
|
|
||||||
|
核心代码:
|
||||||
|
from concurrent.futures import ThreadPoolExecutor
|
||||||
|
with ThreadPoolExecutor(max_workers=5) as executor:
|
||||||
|
results = list(executor.map(get_weather, cities))
|
||||||
|
|
||||||
|
线程安全原则: 避免多线程同时修改共享数据
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合本课时项目任务评估：90%学生成功使用ThreadPoolExecutor实现多城市并发采集，80%学生能够通过性能测试数据说明并发的优势。通过串行与并发的直观对比（耗时从15秒降至3秒），学生对多线程价值有了深刻认知，学习积极性高。线程池的引入有效降低了并发编程复杂度，学生普遍反馈"比想象中简单"。项目的并发采集模块已具备实用性，为后续定时任务提供了高效的数据获取能力。线程安全环节虽有难度，但通过问题演示和最佳实践指导，学生建立了基本的安全意识。 |
|
||||||
|
| **教学反思** | 本课时成功将"多线程与并发编程"这一传统难点，转化为"提升天气采集速度"的具体优化任务，学生的学习动机强且目标明确。性能对比实验设计合理，数据直观有说服力。线程池的引入时机恰当，避免了过早陷入底层线程管理的复杂性。不足之处：①在40分钟内，线程安全部分讲解略显紧凑，部分学生对Lock的理解停留在"照搬代码"层面，建议后续增加一个专门的线程安全小案例演示；②对"I/O密集型 vs CPU密集型"的区分提及较少，少数学生可能误以为多线程适用所有场景，建议增加一句说明"多线程适合网络请求等待多的任务"；③课后任务的参数调优实验虽有探索性，但缺少对"过多线程可能导致性能下降"的提示，建议补充说明。整体上，项目驱动使并发编程学习变得具体可感，学生编写的并发模块已达到生产级代码的雏形，教学目标达成度高。 |
|
||||||
136
data/Python/SKILLS.md
Normal file
136
data/Python/SKILLS.md
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
# Role: 中职Python编程项目式教学设计专家
|
||||||
|
|
||||||
|
## Profile
|
||||||
|
- language: 中文
|
||||||
|
- description: 一位专注于中等职业教育Python编程课程的**项目式教学**设计专家。擅长**以完整的软件项目为主线**，将Python编程概念与实际应用场景有机融合，设计出结构清晰、目标明确、可操作性强的单课时教案。特别注重**项目阶段划分与课时任务衔接**，并能将内容精炼排版至一张A4纸的正反两面。
|
||||||
|
- background: 拥有十年以上职业教育信息技术课程研发经验，深度参与软件开发专业教学标准制定，熟悉Python核心语法、常用库、框架及软件开发流程。长期实践并优化**项目驱动教学法（PBL）** 在编程课程中的应用。
|
||||||
|
- personality: 严谨、细致、逻辑性强，注重教学环节的实用性与连贯性，善于将抽象知识转化为具体的**项目任务和子目标**。
|
||||||
|
- expertise: 职业教育教学设计、Python编程课程开发、**软件项目式教学**、理实一体化课程编排、**项目任务分解与课时映射**、教学文档精准排版。
|
||||||
|
- target_audience: 中等职业学校信息技术/软件技术专业教师、Python编程实训课教师、职业培训师。
|
||||||
|
|
||||||
|
## Skills
|
||||||
|
|
||||||
|
1. **核心教学设计能力**
|
||||||
|
- **项目需求分析**: 能准确解析教学主题在**整体软件项目中的位置与作用**，确定符合中职学生认知水平和**项目阶段目标**的核心知识点与技能点。
|
||||||
|
- **项目结构规划**: 精于设计符合**“项目导入-任务分解-新知探究-项目实践-阶段总结”** 逻辑的完整课时结构，并**严格按40分钟标准课时**合理分配各环节时长，确保单课时服务于项目里程碑。
|
||||||
|
- **项目内容编排**: 能将教学内容、教师活动、学生活动、设计意图四大要素，**围绕一个明确的子项目任务**进行有机整合，形成流畅的**项目教学叙事线**。
|
||||||
|
- **格式与篇幅控制**: 具备精准的内容篇幅控制与排版能力，确保最终生成的教案内容详实、结构规范，且基本适配一张A4纸的正反两面打印。
|
||||||
|
|
||||||
|
2. **辅助领域知识整合能力**
|
||||||
|
- **Python编程知识整合**: 精通Python语法基础、数据结构、函数、面向对象、文件操作、异常处理及常用库/框架，能设计实现项目特定功能的脚本示例，并**将其封装为项目的功能模块**进行教学。
|
||||||
|
- **应用领域教学转化**: 熟悉数据处理、Web开发、自动化脚本、图形界面、简单游戏开发等典型Python应用场景，能**在教学中进行简化呈现**，并清晰**解释其在项目中的实际价值**。
|
||||||
|
- **软件工程思想渗透**: 了解如何将版本控制、模块化设计、调试测试等基础软件工程思想融入项目任务，能设计清晰、可靠的编码实践步骤，确保**代码实践直接支撑项目功能的实现**。
|
||||||
|
- **学情与项目激励设计**: 深刻理解中职学生的学习特点，能设计引导式、阶梯式的**项目任务链**，降低学习挫败感，通过**展示阶段性项目成果**来提升学生的参与度和成就感。
|
||||||
|
|
||||||
|
## Rules
|
||||||
|
|
||||||
|
1. **基本原则**：
|
||||||
|
- **项目目标导向**: 所有教学设计必须紧紧围绕清晰、可测量、可达成的**项目阶段目标（即课时教学目标）** 展开，确保每个课时都是项目推进的有机一环。
|
||||||
|
- **理实一体，项目驱动**: 坚决贯彻“**做项目中学、学为完成项目**”的理念，每个理论知识点都必须配套在**当前项目任务**中的编码实践。
|
||||||
|
- **结构完整，项目连贯**: 生成的教案必须包含完整的教学要素（课题、目标、过程等），并在各部分**明确体现所属的项目背景和上下文**，保持项目叙事连贯。
|
||||||
|
- **篇幅精准可控**: 最终输出的教案正文内容量，必须经过精细估算与设计，确保在常规排版下能完整、美观地打印于一张A4纸的正反两面。
|
||||||
|
|
||||||
|
2. **行为准则**：
|
||||||
|
- **内容实用，支撑项目**: 提供的代码片段、任务步骤必须准确、规范、可在标准开发环境下复现，并**直接服务于当堂课要解决的项目子问题**。
|
||||||
|
- **引导为主，脚手架搭建**: 教师活动设计应侧重于**在项目框架下进行引导、提问、演示和点评**，为学生自主完成项目任务搭建必要的“脚手架”，而非单向知识灌输。
|
||||||
|
- **学生中心，角色代入**: 学生活动设计应具体、可操作，**模拟软件开发中的角色（如功能模块开发者、测试员、代码审查员）**，包含个人思考、编码实践、小组协作、功能演示等多种形式。
|
||||||
|
- **规范意识前置**: 任何涉及编码实践的教学环节，必须在活动开始前明确强调代码规范、注释书写、文件管理等良好编程习惯，将其作为**项目质量保证的必要前提**进行教育。
|
||||||
|
|
||||||
|
3. **限制条件**：
|
||||||
|
- **主题范围限定**: 教学设计主题严格限定于Python编程的入门至中级应用场景，且**必须设计为某个连贯软件项目中的一个独立课时**。
|
||||||
|
- **知识深度控制**: 所涉及的知识深度需符合中职二年级学生平均水平，避免涉及复杂的算法、高级框架或底层原理，**始终聚焦于实现当前项目功能所需的核心语法、逻辑和库的使用**。
|
||||||
|
- **技术方案普适**: 优先选用教学领域广泛普及、社区支持良好、易于理解的Python库和技术方案，确保**项目方案具有高度的可复现性和教学普适性**。
|
||||||
|
- **课时容量合理**: 单课时设计**严格按40分钟标准课时**进行各环节时间分配，确保设计的**项目子任务能在课堂时间内被学生基本完成**，形成有效成果。
|
||||||
|
|
||||||
|
## Workflows
|
||||||
|
- 目标: 根据用户提供的具体教学主题或知识点（**必须关联一个具体的软件项目任务**），生成一份格式规范、内容详实、**具有明确项目背景和任务驱动**、可直接用于课堂教学的A4纸正反两面排版的教学设计方案。
|
||||||
|
- 步骤 1: **明确项目上下文与课时任务**。接收用户指令，首先确认本次教学设计所服务的**具体项目名称**及**本课时在该项目中的具体任务与定位**（例如：“在‘学生成绩数据分析系统’项目中，本课时任务：使用Pandas库读取CSV文件并计算各科平均分”）。
|
||||||
|
- 步骤 2: **构建项目化教案要素**。围绕**已确认的课时项目任务**，推导并撰写本课时的三维教学目标、教学重难点；规划以**项目阶段推进**为主线的教学环节，并**按照40分钟总时长**合理分配各环节时间；为每个环节精心填充“教学内容”、“教师活动”、“学生活动”及“设计意图”，确保所有活动紧密围绕项目任务的开展与完成。
|
||||||
|
- 步骤 3: **内容精炼与排版适配**。在构思与撰写过程中，同步进行篇幅控制，确保“教学过程”部分占据主体且描述详实，其他部分精炼扼要。通过心智模拟排版，**确保所有内容最终能恰当地容纳于一张A4纸的正反两面**，且项目线索贯穿始终。
|
||||||
|
- 预期结果: 输出一份结构完整、要素齐全、**项目特色鲜明**、篇幅得当、符合所有格式规范的标准化教学设计文档。
|
||||||
|
|
||||||
|
## OutputFormat
|
||||||
|
|
||||||
|
1. **输出格式类型**：
|
||||||
|
- format: text/markdown
|
||||||
|
- structure: **整个教学设计文档采用一个总表或多个逻辑连贯的子表格进行排版，完全取代传统的标题分级段落式结构**。表格需清晰、直观地呈现所有教案要素。**文档的顶级标题必须是“XXXX——YYYY 教学设计”格式，其中XXXX为项目或大阶段名称，YYYY为本课时具体任务名称**。
|
||||||
|
- style: 语言简洁、专业、无歧义，使用教学和**软件开发**领域的常用术语。对教学环节和活动的描述使用祈使句或陈述句，**鲜明体现任务驱动的特征**。
|
||||||
|
|
||||||
|
2. **格式规范**：
|
||||||
|
- **文档标题**：整个教学设计的标题必须是“XXXX——YYYY 教学设计”格式，并置于Markdown文档的最上方，使用一级标题（#）。例如：“# 学生成绩数据分析系统——Pandas数据导入与基本统计 教学设计”。
|
||||||
|
- **表格化排版**：所有教案章节内容，包括基本信息（课题、课时等）、教学目标、重难点、资源准备、教学过程、板书设计等，均需置入Markdown表格中呈现。可根据内容模块（如“基本信息表”和“教学过程详表”）分段使用多个表格，但需确保整体阅读的连贯性。
|
||||||
|
- **章节标题处理**：在表格中，将“课题”、“课时”、“教学目标”等作为独立的行或单元格的标题，**直接使用这些标准标题名称**。其中，**“教学目标”这一标题必须保留，并在其下的单元格内容中，明确细分为“知识目标”、“技能目标”、“素养目标”三个维度进行描述**，每个维度的描述都应体现与本课时**项目任务**的关联。
|
||||||
|
- **课题与课时格式**：“课题”与“课时”应分列。“课题”单元格内的内容必须严格按照“XXXX——YYYY”的格式书写，清晰体现项目背景与本课时具体任务。例如：“学生成绩数据分析系统——Pandas数据导入与基本统计”。“课时”单元格标明“1课时（40分钟）”。
|
||||||
|
- **篇幅分配重心**：教案内容的**主体篇幅应用于详细描述“教学过程”**，其他部分应力求精炼，以确保围绕**项目任务展开的教学环节**得到充分阐述。在“教学过程”的详细表格中，必须包含“教学环节”、“教学内容”、“教师活动”、“学生活动”、“设计意图”等列。
|
||||||
|
- **活动标题规范**：在“教学过程”表格的“教师活动”与“学生活动”两列下，**必须为描述的每个主要活动提炼一个四字标题（如“情境导入”、“要点讲解”）**，将该标题单独作为一行，并使用`**加粗**`强调，标题后换行再填写具体的活动描述。以确保活动类型清晰醒目，并与**项目开发中的角色行为**相对应。
|
||||||
|
- **教学成效与反思部分**：“教学过程”表格之后，应另起一个独立的部分，标题为“**教学成效与反思**”。该部分**必须置于“教学过程”表格的下方**，并使用独立表格呈现。它应包含两个子部分，并且**总字数不应超过300字**：
|
||||||
|
1. **教学成效**：结合本课时的**项目阶段目标**，从学生知识掌握、技能达成、任务完成度及课堂参与等方面，对预期的或可观察的教学效果进行简要分析。
|
||||||
|
2. **教学反思**：由AI根据已生成的教学设计内容，进行合理、具体、有针对性的撰写，内容应体现对本课时项目教学实施效果的自我评估、可能遇到的问题及改进思路，但不应包含对后续项目课时的具体教学建议。
|
||||||
|
|
||||||
|
3. **验证规则**：
|
||||||
|
- validation:
|
||||||
|
1. 检查整个教学设计文档的标题是否为“# XXXX——YYYY 教学设计”格式。
|
||||||
|
2. 检查“教学过程”环节是否**紧密围绕项目任务展开**，且每个子环节都完整包含“教学内容、教师活动、学生活动、设计意图”四要素。
|
||||||
|
3. 检查“教师活动”与“学生活动”列下的内容是否符合“**四字标题**”单独成行并加粗的格式要求。
|
||||||
|
4. 检查教学目标是否按“知识、技能、素养”三个维度清晰列出，且与项目任务关联。
|
||||||
|
5. 检查“课题”格式是否为“XXXX——YYYY”，且“课时”是否为“1课时（40分钟）”。
|
||||||
|
6. 检查是否保留了“教学目标”这一行标题。
|
||||||
|
7. 检查“教学成效与反思”部分是否置于“教学过程”表格之后，并包含“教学成效”和“教学反思”两个子部分，且**该部分总字数是否不超过300字**。
|
||||||
|
8. 检查“教学反思”内容是否已由AI生成具体、非模板化的内容。
|
||||||
|
- constraints: 总字数（不含代码块和图注）应控制在约800-1200字之间，这是填满A4纸正反面的典型范围。其中，“教学过程”部分应占总字数的60%以上。
|
||||||
|
- error_handling: 若用户提供的主题超出设计范围或过于宽泛（如仅说“教Python”），应主动请求用户澄清，并**引导其将主题置于一个具体的软件项目上下文中进行描述**（例如：“请说明这个知识点属于哪个Python软件项目，以及本课时要完成的具体任务是什么？”）。
|
||||||
|
|
||||||
|
4. **示例说明**：
|
||||||
|
1. 示例1：
|
||||||
|
- 标题: 项目启动课示例
|
||||||
|
- 格式类型: markdown
|
||||||
|
- 说明: 这是一个典型的**项目启动课**，将Python环境与基础语法学习置于“开发数据分析系统”的**项目需求**下。体现了从项目情境导入到关键技术探究的完整流程。**注意“课时”已改为40分钟，各教学环节时间已按40分钟重新分配。**
|
||||||
|
- 示例内容:
|
||||||
|
# 学生成绩数据分析系统——项目启动与开发环境搭建 教学设计
|
||||||
|
|
||||||
|
| **课题** | **学生成绩数据分析系统——项目启动与开发环境搭建** |
|
||||||
|
|---------|------------------------------------------|
|
||||||
|
| **课时** | 1课时(40分钟) |
|
||||||
|
| **教学目标** | **知识目标**:了解数据分析项目的典型工作流程(数据获取-处理-分析-可视化)，理解Python在数据处理中的优势。&amp;lt;br&amp;gt;**技能目标**:能够描述本项目的功能需求与实现路径，掌握Python开发环境(如PyCharm/VSCode)的安装与基本配置，能创建并运行第一个数据分析脚本。&amp;lt;br&amp;gt;**素养目标**:建立“数据驱动决策”的意识，培养在真实项目情境中分析问题、规划方案的职业素养。 |
|
||||||
|
| **教学重难点** | **重点**:数据分析项目流程的理解;Python及Pandas等库在项目中承担的角色;Python环境搭建与脚本运行。&amp;lt;br&amp;gt;**难点**:将抽象的数据分析概念与具体的成绩分析项目关联;理解Python库如何简化数据处理。 |
|
||||||
|
| **教学资源准备** | 多媒体课件(含项目演示视频);示例成绩数据CSV文件;Python及PyCharm/VSCode安装包;项目需求说明书文档。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---------|:---------|:---------|:---------|:---------|
|
||||||
|
| **1. 项目情境导入**<br>(7分钟) | 展示传统成绩单分析的局限性(计算慢、难对比、无趋势)，引出“学生成绩数据分析系统”项目需求，明确项目目标与价值(快速统计、可视化、辅助教学决策)。 | **情境创设**<br>播放教务老师手工处理成绩的场景，提问:“如何用Python程序自动完成这些繁琐的分析?”<br><br>**成品演示**<br>展示完整项目运行效果:导入数据→自动计算平均分、排名→生成可视化图表。 | **观察思考**<br>观看场景，联系自身学习经历，思考技术改进方案;<br><br>**直观感知**<br>观察成品演示，初步建立“原始数据-Python处理-分析结果”的认知链条。 | 通过真实问题创设项目情境，让学生明确“为什么做这个项目”;通过成品展示建立学习目标的具象化认知，激发学习Python解决实际问题的欲望。 |
|
||||||
|
| **2. 项目架构解析**<br>(11分钟) | 讲解数据分析项目的基本流程，分析本项目的技术实现路径，明确Python及Pandas等库的核心地位。 | **概念讲解**<br>结合项目实例讲解数据分析四步骤:数据获取、数据清洗、数据分析、结果呈现;<br><br>**角色定位**<br>强调Python及Pandas库在项目中的作用:读取文件、计算统计量、排序、绘制图表。 | **聆听记录**<br>理解项目流程，在笔记中绘制项目实现路径简图;<br><br>**讨论交流**<br>小组讨论:“要实现这个系统，我们的Python程序需要分几步走?分别用到什么知识?”并汇报。 | 将抽象的数据分析流程具象为本项目的技术步骤，帮助学生建立系统化工程思维;通过讨论强化对Python任务的理解，为后续学习明确方向。 |
|
||||||
|
| **3. 开发工具认知**<br>(7分钟) | 介绍Python集成开发环境(如PyCharm)的功能特点，讲解其在项目开发中的便利性(代码提示、调试、项目管理)。 | **工具介绍**<br>展示IDE界面，讲解项目创建、代码编辑、运行、调试等核心功能;<br><br>**演示操作**<br>演示创建新Python项目并运行脚本的完整流程:新建项目→创建.py文件→编写print语句→运行。 | **观看学习**<br>认识IDE的界面布局与主要功能区(编辑器、项目视图、运行窗口);<br><br>**模仿操作**<br>跟随教师演示，在自己电脑上尝试创建项目并运行第一个“hello_project.py”脚本。 | 通过直观演示降低专业开发工具的使用门槛，让学生快速上手;通过成功运行第一个脚本建立成就感，消除对编程环境的陌生感。 |
|
||||||
|
| **4. 环境搭建实践**<br>(11分钟) | 指导学生完成Python及IDE的确认或安装，创建项目文件夹，编写并运行第一个与项目相关的Python程序。 | **任务发布**<br>发布实践任务:“确认或搭建Python开发环境，创建项目，输出‘成绩分析系统开发环境就绪!’”;<br><br>**巡回指导**<br>巡视学生操作，解答环境配置问题，强调虚拟环境、项目路径管理等良好习惯。 | **动手实践**<br>按步骤确认Python及IDE安装(或进行安装)，打开工具创建项目;<br><br>**编码测试**<br>编写print(“成绩分析系统开发环境就绪!”)代码，运行脚本验证环境。 | 通过实际操作巩固开发环境使用技能，完成项目开发的“第零步”;通过成功运行程序建立信心，为后续项目编码打下操作基础。 |
|
||||||
|
| **5. 项目展望与总结**<br>(4分钟) | 总结本课时内容，预告后续课程将逐步实现项目各模块功能(数据导入、计算、图表)，布置课后任务。 | **知识梳理**<br>回顾数据分析流程与Python角色，强调本课时是项目的“认知与准备起点”;<br><br>**任务布置**<br>布置课后任务:思考并列出你希望成绩分析系统能计算的3项统计指标(如进步幅度、偏科指数等)。 | **回顾反思**<br>总结收获，明确后续学习路径是逐步实现数据分析功能;<br><br>**接收任务**<br>记录课后任务，思考如何将分析需求转化为后续的编程任务。 | 通过总结强化知识结构，通过展望明确项目的阶段性与连贯性;课后任务引导学生主动进行需求挖掘，培养产品思维。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```
|
||||||
|
学生成绩数据分析系统 - 实现路径图
|
||||||
|
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ 结果呈现(可视化图表) │
|
||||||
|
│ ● 柱状图 ● 折线图 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 数据分析(Python计算) │
|
||||||
|
│ ● 平均分/总分 ● 排名/分段 │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 数据清洗(格式整理) │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 数据获取(读取CSV/Excel) │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
|
||||||
|
本课时任务: 认知项目 + 搭建环境
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 结合项目启动阶段目标评估:80%以上学生能够准确描述数据分析的基本流程并说明Python的作用，全员完成Python及IDE环境确认/搭建并成功运行第一个脚本。通过真实教务场景与成品演示结合，学生对项目实用价值认同度高，课堂参与积极。项目启动的“认知与准备”目标基本达成，为后续数据操作学习奠定了良好基础。部分学生在讨论环节已能提出有创意的分析指标，显示出较强的学习内驱力。 |
|
||||||
|
| **教学反思** | 本课时成功地将“Python编程概述”这一宏观主题具象为“成绩数据分析系统”的项目启动课，通过真实情境与功能演示建立了有效的认知锚点。项目流程的讲解与实例结合紧密，学生理解效果好于预期。不足之处在于:在调整后的40分钟内，环境搭建环节因学生电脑差异和网络状况，耗时比预计略长，导致部分学生未能深入体验IDE的高级功能;对于“Pandas库如何简化操作”的原理只是提及，未做对比演示，部分学生对其威力感受不深。改进方向:①提供更详细的课前环境准备清单和离线安装包，减少课堂不确定因素;②在流程讲解时，增加一小段“没有Pandas库的繁琐代码”与“使用Pandas的一行代码”对比，直观展现库的价值。整体上，项目驱动的框架让Python学习目标明确，学生的角色代入感与目标感显著增强。 |
|
||||||
|
|
||||||
|
## Initialization
|
||||||
|
作为中职Python编程**项目式教学**设计专家，你必须严格遵守上述所有Rules，按照Workflows执行任务，并精确遵循OutputFormat输出。现在，请告诉我你本次希望设计的教学主题或具体知识点，**并请务必说明其所属的软件项目背景**（例如：“在‘学生成绩数据分析系统’项目中，学习使用Pandas库进行数据筛选与排序”）。
|
||||||
20
data/Python/titles.md
Normal file
20
data/Python/titles.md
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
# 编程基础课程大纲
|
||||||
|
|
||||||
|
- 编程语言与应用概述
|
||||||
|
- 开发环境搭建与第一个程序
|
||||||
|
- 基础语法与数据类型
|
||||||
|
- 控制结构与流程控制
|
||||||
|
- 序列类型：列表与元组
|
||||||
|
- 集合与字典
|
||||||
|
- 函数定义与模块化编程
|
||||||
|
- 面向对象编程基础
|
||||||
|
- 继承、多态与代码复用
|
||||||
|
- 异常处理与程序调试
|
||||||
|
- 文件操作与数据读写
|
||||||
|
- 数据库编程基础
|
||||||
|
- JSON 数据处理与序列化
|
||||||
|
- HTTP 通信与 REST API 调用
|
||||||
|
- TCP/IP 网络编程基础
|
||||||
|
- 多线程与并发编程
|
||||||
|
- 异步编程与任务调度
|
||||||
|
- 定时任务与自动化处理
|
||||||
BIN
data/Python编程.pdf
Normal file
BIN
data/Python编程.pdf
Normal file
Binary file not shown.
41
data/Web/1.md
Normal file
41
data/Web/1.md
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# 个人主页——项目启动与开发环境搭建 教学设计
|
||||||
|
|
||||||
|
| **课题** | **个人主页——项目启动与开发环境搭建** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：了解网站、网页与浏览器的关系，认识 HTML、CSS、JavaScript 在前端项目中的分工。<br>**技能目标**：能够规范创建个人主页项目目录，使用 Visual Studio Code 新建 `index.html`，并在浏览器中运行第一个网页。<br>**素养目标**：建立“先规划、后开发、再测试”的项目意识，养成规范命名和分类管理文件的职业习惯。 |
|
||||||
|
| **教学重难点** | **重点**：Web 前端三项核心技术的作用；项目目录创建；HTML 文件的编辑与运行。<br>**难点**：理解浏览器读取 HTML 文件并呈现页面的基本过程；建立文件路径与网页资源之间的联系。 |
|
||||||
|
| **教学资源准备** | Visual Studio Code、Chrome 或 Edge 浏览器、个人主页成品示例、项目需求单、离线安装包、包含 `images` 文件夹的目录模板。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 项目情境导入**<br>（6分钟） | 展示个人主页成品，明确项目要呈现个人简介、技能、作品和联系方式。 | **成品展示**<br>演示桌面端和手机端页面效果，提问：“一个网页需要哪些内容和技术？”<br><br>**任务发布**<br>发放项目需求单，说明六课时阶段成果与最终验收标准。 | **观察思考**<br>浏览成品页面，列出看到的文字、图片、链接和表单。<br><br>**需求标注**<br>在需求单上标记自己主页准备展示的内容。 | 用可见成果建立学习目标，将“学习网页制作”转化为“完成个人主页”的真实任务。 |
|
||||||
|
| **2. 技术角色认知**<br>（8分钟） | 认识 HTML、CSS、JavaScript 的功能及浏览器的作用。 | **类比讲解**<br>用“结构、装修、行为”类比三项技术，演示关闭 CSS 或 JavaScript 后的页面变化。<br><br>**流程梳理**<br>画出“代码文件→浏览器解析→网页呈现”的基本流程。 | **对比观察**<br>比较不同技术缺失时的页面效果，填写技术作用表。<br><br>**口头归纳**<br>用一句话说明 HTML、CSS、JavaScript 各自负责什么。 | 通过对比建立前端技术整体认知，为后续按层次开发页面形成清晰框架。 |
|
||||||
|
| **3. 环境搭建示范**<br>（8分钟） | 安装或确认编辑器与浏览器，认识资源管理器、编辑区和浏览器开发者工具。 | **操作示范**<br>演示打开文件夹、创建文件、保存代码和刷新浏览器；强调扩展名显示及 UTF-8 编码。<br><br>**规范提示**<br>说明项目名使用英文小写、文件名不含空格、资源分类存放。 | **跟随操作**<br>启动开发工具，找到主要功能区，完成环境检查。<br><br>**规范记录**<br>在任务单记录 `index.html`、`css`、`js`、`images` 的用途。 | 降低工具使用门槛，把目录和文件规范作为项目质量管理的起点。 |
|
||||||
|
| **4. 首个页面实践**<br>（14分钟） | 创建 `personal-homepage` 项目，编写并运行第一个 HTML 页面。 | **代码演示**<br>输入 `<!DOCTYPE html>`、`html`、`head`、`body` 基本结构，在正文中添加标题“我的个人主页”。<br><br>**巡回指导**<br>检查目录、扩展名、保存状态和浏览器打开方式，帮助定位空白页问题。 | **目录创建**<br>建立项目文件夹及 `images` 子目录，新建 `index.html`。<br><br>**编码测试**<br>完成基本结构，修改标题和问候语，保存后在浏览器中刷新验证。 | 通过首次“编辑—保存—运行—修改”闭环建立操作信心，形成网页开发的基本工作节奏。 |
|
||||||
|
| **5. 成果验收总结**<br>（4分钟） | 按标准检查首课成果，回顾项目路径并保存项目文件。 | **快速验收**<br>依据“目录正确、文件正确、页面可见、中文正常”四项标准抽查。<br><br>**知识梳理**<br>总结三项技术分工和网页运行流程。 | **同伴互检**<br>两人交换检查项目目录和页面效果，记录一个待改进项。<br><br>**成果归档**<br>关闭前确认文件已保存，并整理项目位置。 | 用明确标准完成阶段评价，强化文件管理和自我检查习惯。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
个人主页项目
|
||||||
|
|
||||||
|
HTML CSS JavaScript
|
||||||
|
结构 样式 交互
|
||||||
|
└──────── 浏览器解析 ────────┘
|
||||||
|
|
||||||
|
personal-homepage/
|
||||||
|
├── index.html
|
||||||
|
└── images/
|
||||||
|
|
||||||
|
开发流程：规划 → 编码 → 保存 → 浏览 → 检查
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够说出三项前端技术的基本分工，多数学生按规范建立项目目录并成功运行首个网页。成品展示使项目目标清晰，同伴互检提升了文件管理意识。 |
|
||||||
|
| **教学反思** | 初学者易忽略文件扩展名和保存操作，导致页面无变化。教学中应统一开启扩展名显示，并用“修改文字—保存—刷新”的短循环反复确认工作流程，减少环境问题占用实践时间。 |
|
||||||
44
data/Web/10.md
Normal file
44
data/Web/10.md
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
# 校园活动网站——导航栏与活动卡片组件 教学设计
|
||||||
|
|
||||||
|
| **课题** | **校园活动网站——导航栏与活动卡片组件** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解组件由稳定结构和可复用样式组成，掌握组合选择器、伪类及导航栏、卡片的常见结构。<br>**技能目标**：能够制作横向导航栏和统一的活动卡片，使用类名复用样式，并为链接和卡片添加悬停反馈。<br>**素养目标**：形成模块化、复用和一致性意识，养成用清晰类名表达组件职责的编码习惯。 |
|
||||||
|
| **教学重难点** | **重点**：组件结构；类选择器复用；导航排列；`:hover` 交互反馈。<br>**难点**：保持多个卡片结构一致，控制组合选择器作用范围，避免样式相互干扰。 |
|
||||||
|
| **教学资源准备** | 校园活动网站项目、导航与卡片结构图、活动图文素材、组件验收清单、浏览器开发者工具。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 组件需求导入**<br>（5分钟） | 分析重复活动信息和站内跳转需求，引出导航与卡片组件。 | **问题展示**<br>展示样式各异的活动条目，提问：“新增一条活动时，怎样保持外观一致？”<br><br>**任务明确**<br>发布导航栏和活动卡片组件开发任务。 | **页面诊断**<br>指出重复信息的共同结构和不一致之处。<br><br>**组件识别**<br>圈出导航项、卡片图片、标题、时间和按钮。 | 从维护问题引出组件复用，让学生理解统一结构和样式的工程价值。 |
|
||||||
|
| **2. 组件结构探究**<br>（9分钟） | 分析导航和卡片的 HTML 层级及类名设计。 | **结构拆解**<br>画出 `nav-list`、`event-card`、`event-card__title` 等职责明确的类名关系。<br><br>**范围讲解**<br>比较 `.event-card a` 与所有 `a` 的匹配范围，说明局部样式的重要性。 | **结构标注**<br>在页面模板上标注组件、子元素和重复部分。<br><br>**命名练习**<br>为三个组件元素拟定可读类名。 | 先识别稳定结构再写样式，培养模块边界和选择器范围意识。 |
|
||||||
|
| **3. 样式交互示范**<br>（8分钟） | 使用 Flex 排列导航，设计卡片边框、圆角、阴影及悬停状态。 | **代码演示**<br>演示导航列表去除默认样式、横向排列和链接点击区域；为卡片添加圆角和轻量阴影。<br><br>**状态演示**<br>使用 `:hover` 改变链接背景或卡片位移，说明反馈应克制且可预测。 | **跟随编码**<br>完成导航基础样式和一张卡片外观。<br><br>**交互体验**<br>用鼠标和键盘操作链接，观察反馈是否清晰。 | 将静态样式与操作反馈结合，提升组件的可用性和完整度。 |
|
||||||
|
| **4. 组件开发实践**<br>（14分钟） | 完成站内导航和至少四张活动卡片，测试新增内容的一致性。 | **任务发布**<br>导航链接对应页面栏目；卡片结构一致并复用同一类样式；新增第五张卡片不得复制整段 CSS。<br><br>**巡回指导**<br>检查类名拼写、选择器过宽、图片比例和按钮点击区域，指导定位局部样式冲突。 | **组件制作**<br>完成导航和四张卡片，填入不同活动数据。<br><br>**复用验证**<br>复制卡片结构新增一项，仅更换内容，确认样式自动应用。 | 用“新增组件无需新增样式”检验复用是否真正实现，强化模块化思维。 |
|
||||||
|
| **5. 成果评价总结**<br>（4分钟） | 依据结构一致、样式复用、操作清晰三项标准评价成果。 | **作品点评**<br>展示类名清楚、组件统一的页面，指出过多动画和全局选择器问题。<br><br>**方法总结**<br>归纳“定结构—起类名—写一次样式—复制内容—测试状态”。 | **同伴互评**<br>选择一张卡片和一个导航链接进行检查。<br><br>**反思归纳**<br>说明组件化为新增活动带来的便利。 | 以可维护性而非只看外观评价作品，建立初步组件开发标准。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
组件 = 稳定结构 + 可复用样式 + 操作状态
|
||||||
|
|
||||||
|
导航组件
|
||||||
|
nav > ul > li > a
|
||||||
|
|
||||||
|
活动卡片
|
||||||
|
.event-card
|
||||||
|
├── 图片
|
||||||
|
├── 标题
|
||||||
|
├── 时间地点
|
||||||
|
└── 操作链接
|
||||||
|
|
||||||
|
状态：:hover
|
||||||
|
检验：新增内容，不新增重复 CSS
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够使用统一结构和类样式制作导航与活动卡片，并通过新增卡片验证样式复用。多数作品组件一致、链接反馈明确，类名可读性有所提升。 |
|
||||||
|
| **教学反思** | 一些学生仍为每张卡片设置独立类名，造成重复代码。评价时应把“新增第五张卡片是否需要改 CSS”作为硬性检验，并限制悬停效果数量，避免忽视信息清晰度。 |
|
||||||
45
data/Web/11.md
Normal file
45
data/Web/11.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
# 校园活动网站——响应式布局与媒体查询 教学设计
|
||||||
|
|
||||||
|
| **课题** | **校园活动网站——响应式布局与媒体查询** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解响应式设计、视口和断点的含义，掌握视口设置、相对尺寸、图片自适应和媒体查询基本语法。<br>**技能目标**：能够使用浏览器设备模拟发现小屏问题，并通过媒体查询调整导航、卡片和页面间距，使网站适配桌面与手机。<br>**素养目标**：建立多设备用户意识和移动优先的基础观念，养成在不同视口下持续测试网页的习惯。 |
|
||||||
|
| **教学重难点** | **重点**：视口设置；弹性图片；媒体查询；小屏布局调整。<br>**难点**：根据内容出现问题的位置选择断点，而不是照搬固定设备宽度；避免横向滚动和文字过小。 |
|
||||||
|
| **教学资源准备** | 校园活动网站项目、桌面与手机效果对比图、浏览器设备工具、响应式验收清单。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 多端问题导入**<br>（5分钟） | 在手机视口打开现有网站，发现导航拥挤、图片溢出和卡片过窄问题。 | **设备演示**<br>用开发者工具切换桌面和手机视口，展示同一页面的差异。<br><br>**任务发布**<br>提出“让网站在窄屏仍可阅读、可操作”的适配任务。 | **问题记录**<br>按结构、文字、图片、操作四类记录小屏问题。<br><br>**优先排序**<br>选出最影响使用的两个问题。 | 从真实设备体验出发，让学生理解响应式设计服务于不同用户环境。 |
|
||||||
|
| **2. 响应原理探究**<br>（10分钟） | 学习视口、流式尺寸、最大宽度和内容断点。 | **概念讲解**<br>说明视口元标签的作用，演示固定宽度与百分比宽度的差异。<br><br>**断点观察**<br>缓慢缩小窗口，在布局开始拥挤的位置记录宽度，解释断点应由内容决定。 | **宽度实验**<br>拖动窗口观察布局变化并记录首次出现问题的宽度。<br><br>**概念判断**<br>区分固定尺寸、相对尺寸和最大宽度的适用场景。 | 通过连续变化观察断点形成过程，避免把响应式等同于记忆某个数值。 |
|
||||||
|
| **3. 媒体查询示范**<br>（8分钟） | 学习 `@media (max-width: ...)`，调整导航方向、卡片宽度和页面间距。 | **代码演示**<br>在窄屏条件下将导航改为纵向或换行，卡片改为单列，缩小容器内边距。<br><br>**图片优化**<br>设置图片最大宽度不超过容器并保持比例。 | **跟随编码**<br>添加一组媒体查询，观察规则在断点前后是否生效。<br><br>**工具验证**<br>从计算样式中确认覆盖规则来源。 | 用最小适配规则理解条件样式和覆盖关系，连接前面选择器知识。 |
|
||||||
|
| **4. 多端适配实践**<br>（13分钟） | 完成导航、卡片、图片和间距的响应式优化。 | **任务分解**<br>要求无横向滚动、图片不溢出、导航可操作、卡片在小屏单列、正文保持可读。<br><br>**巡回指导**<br>针对固定宽度、断点冲突和规则顺序问题，引导用设备工具逐项定位。 | **样式改造**<br>根据内容问题设置断点并完成四项适配。<br><br>**设备测试**<br>在至少三种视口宽度下测试，填写验收结果并修正问题。 | 以多视口验收保证响应式不是“写了媒体查询”，而是实际解决使用问题。 |
|
||||||
|
| **5. 成果总结评价**<br>（4分钟） | 对比桌面与手机效果，归纳响应式测试流程。 | **作品抽测**<br>随机选择视口宽度检查作品，点评内容完整性和操作可达性。<br><br>**流程总结**<br>归纳“缩放观察—定位问题—设置断点—编写覆盖—多端复测”。 | **动态展示**<br>拖动窗口展示布局连续变化。<br><br>**自查归档**<br>确认三种宽度均通过清单。 | 用随机宽度避免只适配某个设备，形成持续测试和内容驱动断点意识。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
响应式设计
|
||||||
|
|
||||||
|
同一份内容 → 适配不同视口
|
||||||
|
|
||||||
|
基础：
|
||||||
|
viewport
|
||||||
|
max-width: 100%
|
||||||
|
弹性布局
|
||||||
|
|
||||||
|
媒体查询：
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
/* 小屏覆盖规则 */
|
||||||
|
}
|
||||||
|
|
||||||
|
流程：观察 → 断点 → 覆盖 → 多端复测
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够使用设备模拟识别小屏问题，并通过媒体查询调整导航、卡片和间距。多数网站在三种视口下无横向滚动，图片和文字保持可读。 |
|
||||||
|
| **教学反思** | 学生容易先套用断点数值再寻找问题，或只测试一种手机尺寸。教学应坚持先缩放观察并记录问题宽度，再编写规则；验收采用随机宽度可有效检验适配的真实性。 |
|
||||||
43
data/Web/12.md
Normal file
43
data/Web/12.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# 校园活动网站——项目整合调试与质量优化 教学设计
|
||||||
|
|
||||||
|
| **课题** | **校园活动网站——项目整合调试与质量优化** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解网页质量由结构、视觉、布局、响应、可用性和性能等方面共同构成，掌握常见 CSS 问题的排查顺序。<br>**技能目标**：能够整合校园活动网站，使用开发者工具修复样式冲突、溢出和响应问题，完成多视口验收和项目交付。<br>**素养目标**：培养质量检查、团队协作和迭代优化意识，形成依据现象与证据调试页面的职业习惯。 |
|
||||||
|
| **教学重难点** | **重点**：项目整合；选择器与盒模型调试；多视口测试；质量清单。<br>**难点**：区分结构问题、样式问题和资源问题，按优先级完成有限时间内的优化。 |
|
||||||
|
| **教学资源准备** | 前五课校园活动网站、综合验收清单、典型故障项目、开发者工具、展示评分表、压缩工具或校内发布空间。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 交付任务导入**<br>（5分钟） | 回顾 CSS 项目成果，明确最终验收、调试和交付任务。 | **成果串联**<br>梳理基础样式、盒模型、Flex、组件和响应式五项成果。<br><br>**标准发布**<br>说明功能完整、视觉一致、布局稳定、多端可用、代码规范五项评分。 | **进度盘点**<br>对照清单标记项目风险项。<br><br>**角色分工**<br>两人一组确定开发者和测试员，之后交换角色。 | 用明确质量标准和角色分工组织综合实践，避免整合课变为随意美化。 |
|
||||||
|
| **2. 调试方法梳理**<br>（8分钟） | 建立“元素—规则—盒模型—视口—资源”的 CSS 排错流程。 | **故障示范**<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>展示网站视觉规范、组件复用和响应变化。<br><br>**成果归档**<br>清理无关资源，统一命名，重新打开交付包确认完整。 | 将技术成果、调试过程和表达能力共同纳入评价，强化交付意识。 |
|
||||||
|
| **5. 项目复盘总结**<br>（4分钟） | 总结 CSS 知识链并提出网页交互需求。 | **知识梳理**<br>串联“选择器—盒模型—Flex—组件—媒体查询—调试”。<br><br>**问题迁移**<br>提问：“如何让用户添加活动或改变页面内容？”引出 JavaScript。 | **复盘反思**<br>记录一个有效调试方法和一个布局改进点。<br><br>**学习迁移**<br>描述希望网页具备的一项交互功能。 | 巩固样式与布局体系，并从静态页面自然过渡到程序交互学习。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
校园活动网站质量模型
|
||||||
|
|
||||||
|
结构完整
|
||||||
|
视觉一致
|
||||||
|
布局稳定
|
||||||
|
组件复用
|
||||||
|
多端可用
|
||||||
|
代码规范
|
||||||
|
|
||||||
|
CSS 排错：
|
||||||
|
选元素 → 查规则 → 看盒模型 → 换视口 → 核资源
|
||||||
|
|
||||||
|
交付：自测 → 互测 → 修复 → 复测 → 归档
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够综合运用 CSS 知识完成网站优化，并在随机视口和新增卡片测试中修复实际问题。双角色测试使缺陷记录更具体，多数项目达到可展示、可复用和可交付标准。 |
|
||||||
|
| **教学反思** | 综合调试时间有限，学生容易优先处理颜色等低风险细节。应要求先按“影响访问—影响操作—影响布局—视觉细节”排序缺陷，并保留修复前后证据，提升优化决策质量。 |
|
||||||
43
data/Web/13.md
Normal file
43
data/Web/13.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# 任务管理系统——JavaScript基础与任务数据 教学设计
|
||||||
|
|
||||||
|
| **课题** | **任务管理系统——JavaScript基础与任务数据** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解 JavaScript 在网页交互中的作用，掌握外部脚本关联、`const`、`let`、字符串、数字、布尔值和控制台输出。<br>**技能目标**：能够建立任务管理系统项目，正确关联 `app.js`，使用变量描述任务名称、优先级、预计时长和完成状态并输出检查。<br>**素养目标**：形成用数据描述业务对象的程序思维，养成变量命名清晰、使用控制台验证代码和及时查看错误的习惯。 |
|
||||||
|
| **教学重难点** | **重点**：脚本文件关联；变量声明；基本数据类型；模板字符串；控制台。<br>**难点**：根据数据是否需要变化选择 `const` 或 `let`，理解代码执行顺序和控制台报错信息。 |
|
||||||
|
| **教学资源准备** | 任务管理界面 HTML/CSS 模板、Visual Studio Code、现代浏览器、开发者工具、任务数据需求卡、错误示例。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 交互项目导入**<br>（5分钟） | 展示可添加和完成任务的成品，分析静态网页无法响应操作的问题。 | **成品演示**<br>添加任务、切换状态并刷新页面，提问：“页面如何记住用户操作？”<br><br>**任务发布**<br>说明六课时将用原生 JavaScript 完成任务管理系统。 | **功能观察**<br>列出输入、添加、完成、删除和保存等操作。<br><br>**技术回顾**<br>说明 HTML、CSS 已完成什么，还缺少什么。 | 从静态页面过渡到交互应用，建立 JavaScript 项目的完整功能预期。 |
|
||||||
|
| **2. 脚本运行认知**<br>（10分钟） | 认识外部脚本、执行顺序、控制台和基础语句。 | **关联示范**<br>创建 `js/app.js`，在页面底部通过 `script` 关联，使用 `console.log` 输出启动信息。<br><br>**错误诊断**<br>故意写错路径和变量名，引导从控制台查看文件位置与错误信息。 | **跟随操作**<br>建立项目目录并关联脚本，打开控制台确认启动信息。<br><br>**报错阅读**<br>根据错误提示定位一处拼写问题并修正。 | 把控制台作为程序开发的基本工具，建立“先看报错再修改”的调试习惯。 |
|
||||||
|
| **3. 变量类型示范**<br>（8分钟） | 学习 `const`、`let` 和任务所需的基本数据类型。 | **代码演示**<br>声明任务名称、优先级、预计分钟数和完成状态，修改可变状态并使用模板字符串输出。<br><br>**选择讲解**<br>说明默认优先使用 `const`，确需重新赋值时使用 `let`。 | **类型判断**<br>根据四项任务数据判断适合的类型。<br><br>**代码跟随**<br>声明自己的模拟任务数据并输出一句完整描述。 | 将抽象类型映射到项目数据，让变量选择服务于实际业务含义。 |
|
||||||
|
| **4. 任务数据实践**<br>（13分钟） | 完成一组任务变量并模拟状态更新，检查输出结果。 | **任务分层**<br>基础任务输出名称、优先级和时长；进阶任务用布尔值决定输出“待完成”或“已完成”。<br><br>**巡回指导**<br>检查命名、引号、大小写和 `const` 重新赋值错误，引导学生读取控制台行号。 | **独立编码**<br>创建两组任务数据，使用模板字符串输出任务摘要。<br><br>**状态测试**<br>改变可变状态并再次输出，对比执行结果；修复控制台错误。 | 通过数据变化体验程序状态，以真实报错训练基本调试能力。 |
|
||||||
|
| **5. 成果评价总结**<br>（4分钟） | 归纳脚本运行、变量和类型，保存首课项目成果。 | **代码点评**<br>展示命名清晰和类型合理的示例，纠正常量滥改与拼音缩写。<br><br>**知识梳理**<br>总结“定义数据—执行代码—控制台验证—根据错误修正”。 | **成果说明**<br>解释一个变量名和类型选择。<br><br>**自查归档**<br>确认脚本路径正确、控制台无错误。 | 通过说明设计意图提升代码可读性意识，为后续批量任务处理奠定基础。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
任务管理系统
|
||||||
|
|
||||||
|
HTML：界面结构
|
||||||
|
CSS：界面样式
|
||||||
|
JavaScript：数据 + 逻辑 + 交互
|
||||||
|
|
||||||
|
任务数据：
|
||||||
|
const taskName = "完成网页作业";
|
||||||
|
const priority = "高";
|
||||||
|
const minutes = 30;
|
||||||
|
let isDone = false;
|
||||||
|
|
||||||
|
流程：编写 → 保存 → 刷新 → 看控制台 → 修正
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够关联外部脚本并使用变量描述任务数据，多数学生能根据数据变化需求选择 `const` 或 `let`，并开始利用控制台定位路径和拼写错误。 |
|
||||||
|
| **教学反思** | 初学者常忽略大小写和控制台，遇错后反复修改代码。应要求每次调试先读错误类型和行号，再做一次有依据的修改；变量示例需保持数量适中，避免类型概念过载。 |
|
||||||
43
data/Web/14.md
Normal file
43
data/Web/14.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# 任务管理系统——条件判断与循环处理 教学设计
|
||||||
|
|
||||||
|
| **课题** | **任务管理系统——条件判断与循环处理** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：掌握 `if...else` 条件判断、比较运算、逻辑运算、数组和 `for...of` 循环的基本用法。<br>**技能目标**：能够根据完成状态和优先级生成不同任务提示，使用数组保存多项任务并循环输出任务清单和统计结果。<br>**素养目标**：建立“条件决定分支、循环处理重复”的算法思维，培养先分析规则再编码、使用测试数据验证边界的习惯。 |
|
||||||
|
| **教学重难点** | **重点**：布尔条件；多分支判断；数组；循环遍历；计数统计。<br>**难点**：把任务管理规则转化为互斥条件，在循环中正确更新待办和已完成数量。 |
|
||||||
|
| **教学资源准备** | 上节课项目、任务规则表、流程图卡、不同状态测试数据、Visual Studio Code、浏览器控制台。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 批量处理导入**<br>（5分钟） | 从单个任务扩展到多个任务，提出自动分类和统计需求。 | **需求演示**<br>展示十项任务，提问：“逐条写输出代码会有什么问题？”<br><br>**规则发布**<br>给出已完成、待完成、高优先级三类提示规则。 | **问题分析**<br>识别重复代码和人工判断的低效。<br><br>**规则转述**<br>用自然语言说明三类任务判断条件。 | 以任务数量增长引出控制结构，突出自动决策和重复处理的价值。 |
|
||||||
|
| **2. 条件结构探究**<br>（10分钟） | 学习比较、逻辑表达式和 `if...else if...else` 执行流程。 | **流程讲解**<br>绘制任务分类流程图，先判断是否完成，再判断优先级。<br><br>**代码演示**<br>根据 `isDone` 和 `priority` 输出“已完成”“优先处理”或“普通待办”。 | **流程追踪**<br>代入三组数据，沿流程图判断输出结果。<br><br>**跟随编码**<br>完成分支代码并测试真假值变化。 | 用流程图建立条件顺序，避免分支重叠和遗漏。 |
|
||||||
|
| **3. 数组循环示范**<br>（8分钟） | 使用数组保存任务名称并通过循环逐项处理。 | **概念讲解**<br>说明数组是有顺序的数据集合，演示创建数组、读取长度和 `for...of` 遍历。<br><br>**统计示范**<br>在循环中累加任务总数，输出编号和名称。 | **代码跟随**<br>建立包含四个任务名称的数组并循环输出。<br><br>**执行观察**<br>在每轮输出当前任务，理解循环变量变化。 | 从简单数组开始理解批量处理，为后续任务对象和页面渲染降低难度。 |
|
||||||
|
| **4. 分类统计实践**<br>（13分钟） | 综合条件和循环，对任务状态数组进行分类与统计。 | **任务分解**<br>提供名称数组和对应状态数组，要求循环输出每项状态并统计完成数量；进阶任务统计高优先级待办。<br><br>**巡回指导**<br>检查循环范围、计数器初值、条件顺序和数组长度对应问题。 | **算法设计**<br>先在任务单写出输入、处理和输出，再编写循环与判断。<br><br>**数据测试**<br>使用全未完成、部分完成、全完成三组数据验证统计结果。 | 通过多组边界数据检验逻辑正确性，培养从规则到算法再到测试的完整思维。 |
|
||||||
|
| **5. 成果总结评价**<br>（4分钟） | 展示分类结果，归纳条件与循环的职责。 | **代码点评**<br>比较重复判断和循环处理两种方案，指出计数器未初始化等常见错误。<br><br>**知识总结**<br>概括“条件负责选择，循环负责重复，二者结合处理清单”。 | **成果说明**<br>解释自己的分支顺序和一组测试结果。<br><br>**自查修正**<br>确认三组测试数据均得到正确统计。 | 用解释和测试证据评价程序逻辑，为后续封装功能做准备。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
任务处理逻辑
|
||||||
|
|
||||||
|
任务 → 是否完成？
|
||||||
|
├── 是：已完成
|
||||||
|
└── 否 → 是否高优先级？
|
||||||
|
├── 是：优先处理
|
||||||
|
└── 否：普通待办
|
||||||
|
|
||||||
|
数组：保存多项任务
|
||||||
|
循环：逐项处理
|
||||||
|
计数器：统计结果
|
||||||
|
|
||||||
|
测试：全否 / 混合 / 全是
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够使用分支判断任务状态，并用循环批量输出和统计任务。三组测试数据帮助多数学生发现条件顺序或计数器错误，算法表达更有条理。 |
|
||||||
|
| **教学反思** | 使用平行数组虽便于入门，但学生容易出现长度不一致。课堂中应明确它是过渡方案，并把重点放在循环与条件组合；调试时要求先手算预期结果，再与控制台对比。 |
|
||||||
45
data/Web/15.md
Normal file
45
data/Web/15.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
# 任务管理系统——函数封装与事件处理 教学设计
|
||||||
|
|
||||||
|
| **课题** | **任务管理系统——函数封装与事件处理** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解函数的定义、调用、参数和返回值，掌握浏览器事件及 `addEventListener` 的基本用法。<br>**技能目标**：能够把任务校验、状态统计等重复逻辑封装为函数，为添加按钮绑定点击事件，并通过参数传递输入数据。<br>**素养目标**：形成单一职责、代码复用和事件驱动意识，养成用函数名表达功能、避免复制重复代码的习惯。 |
|
||||||
|
| **教学重难点** | **重点**：函数定义与调用；参数和返回值；点击事件绑定。<br>**难点**：区分函数本身与函数调用，理解事件发生后浏览器才执行回调函数。 |
|
||||||
|
| **教学资源准备** | 任务管理系统项目、重复代码案例、函数结构卡、带输入框和按钮的页面模板、浏览器控制台。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 重复问题导入**<br>（5分钟） | 分析多处重复校验和统计代码，提出功能封装与按钮响应任务。 | **案例展示**<br>展示三次复制的空值判断代码，修改规则后逐处调整，提问其维护风险。<br><br>**任务发布**<br>要求用函数统一处理规则，并让“添加任务”按钮响应点击。 | **问题诊断**<br>找出重复代码和可能遗漏的修改点。<br><br>**功能命名**<br>为“检查任务名称”“统计完成数”等功能拟定名称。 | 从维护痛点引出函数，通过功能命名建立职责意识。 |
|
||||||
|
| **2. 函数结构探究**<br>（9分钟） | 学习函数名、参数、函数体、返回值和调用。 | **结构讲解**<br>演示 `validateTask(name)`，传入任务名，返回是否合法；说明参数是函数接收的数据。<br><br>**调用对比**<br>比较函数名与带括号调用的差异，追踪返回值流向。 | **结构标注**<br>在代码中标出函数名、参数和返回值。<br><br>**手动追踪**<br>代入空字符串和正常名称，写出执行结果。 | 通过结构标注和数据代入理解函数输入、处理和输出。 |
|
||||||
|
| **3. 事件机制示范**<br>（8分钟） | 认识点击事件、事件监听和回调函数。 | **交互演示**<br>获取按钮并使用 `addEventListener("click", handleAddTask)` 绑定处理函数。<br><br>**时序讲解**<br>画出“页面加载—等待操作—用户点击—执行函数”的事件流程。 | **跟随编码**<br>为按钮绑定点击事件，点击后在控制台输出提示。<br><br>**现象验证**<br>刷新页面但不点击，确认函数不会立即执行。 | 用时序观察突破“代码为何没有立即运行”的事件驱动难点。 |
|
||||||
|
| **4. 功能封装实践**<br>（14分钟） | 封装输入校验和任务摘要函数，完成按钮点击后的读取、校验与反馈。 | **任务分解**<br>点击后读取输入值，调用校验函数；合法时生成任务摘要，不合法时给出提示。<br><br>**巡回指导**<br>检查事件绑定是否传入函数本身、参数作用域和返回值使用，帮助定位重复触发问题。 | **函数开发**<br>编写校验和摘要函数，在事件处理函数中组合调用。<br><br>**交互测试**<br>分别输入空白、正常文字和超长文字，记录反馈并修正逻辑。 | 将函数和事件组合成可运行交互，体现模块复用和测试边界。 |
|
||||||
|
| **5. 成果评价总结**<br>（4分钟） | 展示按钮交互，归纳函数与事件的协作关系。 | **代码点评**<br>展示职责清晰的函数，纠正一个函数承担过多任务和事件重复绑定。<br><br>**关系总结**<br>概括“事件决定何时做，函数规定具体怎么做”。 | **成果演示**<br>用三类输入展示不同反馈。<br><br>**代码自查**<br>检查函数名、参数和职责是否清楚。 | 以多输入演示验证交互质量，为下一课动态修改页面做好准备。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
函数
|
||||||
|
输入参数 → 处理逻辑 → 返回结果
|
||||||
|
|
||||||
|
事件流程
|
||||||
|
页面加载
|
||||||
|
↓
|
||||||
|
等待用户操作
|
||||||
|
↓ click
|
||||||
|
执行 handleAddTask
|
||||||
|
↓
|
||||||
|
调用校验函数和摘要函数
|
||||||
|
|
||||||
|
原则：
|
||||||
|
事件决定“何时做”
|
||||||
|
函数规定“怎么做”
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够把重复逻辑封装为函数，并为按钮绑定点击事件。通过空白、正常和超长输入测试，多数学生理解了参数、返回值及事件触发时机。 |
|
||||||
|
| **教学反思** | 常见错误是把 `handleAddTask()` 的调用结果传给监听器，导致页面加载时立即执行。应借助事件时序图反复区分“交给浏览器一个函数”和“现在调用函数”，并保持函数示例职责单一。 |
|
||||||
41
data/Web/16.md
Normal file
41
data/Web/16.md
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# 任务管理系统——DOM操作与动态添加任务 教学设计
|
||||||
|
|
||||||
|
| **课题** | **任务管理系统——DOM操作与动态添加任务** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解 DOM 是浏览器对 HTML 文档的对象化表示，掌握查询元素、读取输入、创建元素、设置文本和追加节点的基本方法。<br>**技能目标**：能够在点击按钮后读取任务名称，动态创建任务列表项并添加到页面，同时清空输入框和阻止空任务。<br>**素养目标**：建立数据驱动界面和安全输出意识，养成优先使用 `textContent`、分步检查 DOM 操作的习惯。 |
|
||||||
|
| **教学重难点** | **重点**：元素查询；输入值读取；`createElement`；`textContent`；`append`。<br>**难点**：理解 JavaScript 对象与页面元素的对应关系，按正确顺序创建、设置和插入节点。 |
|
||||||
|
| **教学资源准备** | 上节课项目、DOM 树结构图、动态添加效果示例、代码步骤卡、浏览器元素面板和控制台。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 页面更新导入**<br>（5分钟） | 回顾按钮只能在控制台反馈的问题，提出把新任务真正显示到页面的需求。 | **现象演示**<br>点击按钮后控制台有信息但页面不变，提问：“程序怎样找到并修改页面？”<br><br>**任务发布**<br>明确本课完成“输入任务—点击添加—列表出现新项”。 | **问题分析**<br>指出需要读取输入框、找到列表并新增元素。<br><br>**步骤排序**<br>尝试排列查询、读取、创建、设置、插入五个动作。 | 从已有交互的缺口引出 DOM，建立清晰的操作目标和步骤预期。 |
|
||||||
|
| **2. DOM模型探究**<br>（10分钟） | 认识文档树、元素节点和 JavaScript 元素对象。 | **树形讲解**<br>把任务页面画成 DOM 树，说明父子关系和浏览器如何把标签转换为对象。<br><br>**查询示范**<br>使用 `querySelector` 获取输入框、按钮和列表，在控制台查看对象。 | **结构对应**<br>在 DOM 图中定位三个目标元素。<br><br>**查询练习**<br>根据 `id` 或类名写选择器并确认返回元素。 | 用 HTML 结构与对象一一对应，帮助学生理解“找到元素才能操作元素”。 |
|
||||||
|
| **3. 节点创建示范**<br>（8分钟） | 演示读取输入、创建列表项、设置文本和追加节点。 | **分步演示**<br>依次执行读取 `value`、`createElement("li")`、设置 `textContent`、追加到列表。<br><br>**安全说明**<br>比较 `textContent` 与直接拼接 HTML，强调用户输入应按文本处理。 | **代码跟随**<br>逐步输入并在每一步用控制台检查变量。<br><br>**顺序复述**<br>用自己的话说出创建节点的四步。 | 通过分步验证降低连续 DOM 操作难度，同时建立基础安全意识。 |
|
||||||
|
| **4. 添加功能实践**<br>（13分钟） | 完成动态添加、空值阻止、输入清空和焦点返回。 | **任务分层**<br>基础任务添加列表项；进阶任务使用 `trim()` 阻止空白输入，添加成功后清空并聚焦输入框。<br><br>**巡回指导**<br>检查选择器、事件函数、变量作用域和插入目标，指导用元素面板确认节点变化。 | **功能开发**<br>在原事件处理函数中整合校验与 DOM 创建。<br><br>**交互测试**<br>连续添加三项任务，测试空格输入、中文和较长文字，修复问题。 | 让学生完成系统首个核心可见功能，并用多类输入验证稳定性和用户体验。 |
|
||||||
|
| **5. 成果评价总结**<br>（4分钟） | 展示动态添加效果，归纳 DOM 操作流程。 | **作品点评**<br>检查是否存在空列表项、重复事件或输入未清空问题。<br><br>**流程总结**<br>概括“查询元素—读取数据—创建节点—设置内容—插入页面”。 | **成果演示**<br>现场添加任务并说明代码步骤。<br><br>**自查归档**<br>确认控制台无错误，页面节点数量正确。 | 用现场操作检验真实功能，形成可迁移的 DOM 修改流程。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
DOM：HTML 在浏览器中的对象树
|
||||||
|
|
||||||
|
动态添加流程：
|
||||||
|
1. querySelector() 找元素
|
||||||
|
2. input.value 读数据
|
||||||
|
3. createElement() 建节点
|
||||||
|
4. textContent 设内容
|
||||||
|
5. append() 插页面
|
||||||
|
|
||||||
|
输入检查：trim()
|
||||||
|
成功后：清空 + focus()
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够查询页面元素并动态创建任务列表项，多数系统实现了空值阻止、添加后清空和焦点返回。元素面板帮助学生直观看到 DOM 节点变化。 |
|
||||||
|
| **教学反思** | 连续 DOM 步骤易造成变量混淆，应坚持每完成一步就输出或检查结果。部分学生倾向直接拼接 HTML，后续需持续强调用户输入使用 `textContent`，并通过特殊字符测试展示差异。 |
|
||||||
47
data/Web/17.md
Normal file
47
data/Web/17.md
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
# 任务管理系统——状态管理与本地存储 教学设计
|
||||||
|
|
||||||
|
| **课题** | **任务管理系统——状态管理与本地存储** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 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 和数组造成不同步。应提供状态流转图和函数骨架，把实践重点限定为“修改数据—保存—渲染”，高级事件委托不在本课展开。 |
|
||||||
41
data/Web/18.md
Normal file
41
data/Web/18.md
Normal file
@@ -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
|
||||||
|
内容结构 视觉布局 数据交互
|
||||||
|
|
||||||
|
项目完成 = 功能 + 质量 + 文档 + 表达
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够依据测试用例完成系统验收，使用控制台、元素面板和存储面板定位问题。多数项目实现添加、完成、删除和刷新恢复，学生能说明数据流程与修复依据。 |
|
||||||
|
| **教学反思** | 自由测试容易遗漏边界情况，测试用例卡显著提升了覆盖度。部分学生修复后未做回归，教学中应把核心用例全量重跑设为交付条件，并在评分中保留测试证据权重。 |
|
||||||
42
data/Web/2.md
Normal file
42
data/Web/2.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# 个人主页——HTML文档结构与文本内容 教学设计
|
||||||
|
|
||||||
|
| **课题** | **个人主页——HTML文档结构与文本内容** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解 HTML 元素、标签、属性和嵌套关系，掌握标题、段落、换行、强调等文本标签的语义。<br>**技能目标**：能够使用规范的 HTML 文档结构完成个人主页的页头、个人介绍和学习目标区域，并通过缩进检查层级。<br>**素养目标**：形成语义化表达和结构先行的开发意识，养成规范缩进、及时保存和浏览器验证的习惯。 |
|
||||||
|
| **教学重难点** | **重点**：HTML 文档基本结构；常用文本标签；元素嵌套与缩进。<br>**难点**：根据内容含义选择合适标签，而不是仅根据默认显示效果选择标签。 |
|
||||||
|
| **教学资源准备** | 上节课项目文件、个人简介素材单、标签功能卡、结构错误示例、Visual Studio Code、现代浏览器。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 任务回顾导入**<br>（5分钟） | 回顾项目目录和首个页面，提出“让浏览器读懂内容层级”的任务。 | **问题展示**<br>展示全部使用普通文本的页面，提问：“标题、正文和重点为什么难以区分？”<br><br>**目标明确**<br>说明本课要建立清晰的个人介绍内容结构。 | **页面诊断**<br>观察页面并指出信息层级不清的问题。<br><br>**素材准备**<br>整理姓名、专业、兴趣和学习目标等文字。 | 从已有页面的问题出发，引出标签语义与内容结构的必要性。 |
|
||||||
|
| **2. 标签结构探究**<br>（10分钟） | 学习文档声明、`html`、`head`、`body` 以及元素的开始标签、内容、结束标签和属性。 | **结构拆解**<br>用层级图讲解 HTML 文档，标出 `lang`、`meta charset`、`title` 的作用。<br><br>**错误辨析**<br>展示漏写结束标签、层级交叉和字符乱码示例，引导判断原因。 | **图示记录**<br>在任务单补全文档结构图。<br><br>**纠错讨论**<br>小组修正错误代码，说明标签应正确嵌套的理由。 | 通过可视化和纠错活动理解结构规则，避免只会机械复制模板。 |
|
||||||
|
| **3. 文本标签示范**<br>（8分钟） | 学习 `h1` 至 `h3`、`p`、`strong`、`em` 等标签及其语义。 | **代码演示**<br>将个人简介拆分为主标题、栏目标题和段落，演示重点信息的语义化标记。<br><br>**对比讲解**<br>比较用多个换行制造间距与使用段落组织内容的差异。 | **跟随编码**<br>在页面中添加姓名主标题、三个栏目标题和介绍段落。<br><br>**语义判断**<br>根据内容选择标题级别和强调方式。 | 将标签直接应用于项目文本，建立“内容含义决定标签”的基本原则。 |
|
||||||
|
| **4. 个人介绍实践**<br>（13分钟） | 完成页头、关于我、学习目标三个内容区，检查层级和浏览器显示。 | **任务分解**<br>给出验收清单：页面标题正确、仅一个 `h1`、栏目层级清楚、段落完整、重点突出。<br><br>**巡回点拨**<br>针对标签遗漏、嵌套错误和缩进混乱进行个别指导。 | **独立开发**<br>根据个人素材完善文本内容，使用标签组织信息。<br><br>**浏览调试**<br>保存并刷新页面，结合编辑器格式化功能检查缩进和闭合。 | 以清晰标准引导学生独立完成真实内容区，在实践中巩固结构和语义。 |
|
||||||
|
| **5. 展示评价总结**<br>（4分钟） | 展示典型作品，归纳 HTML 文本结构设计原则。 | **作品点评**<br>选择层级清晰和存在典型问题的页面，对照验收清单点评。<br><br>**要点归纳**<br>总结“一个主标题、层级不跳跃、段落表达完整”。 | **成果说明**<br>展示页面并解释一个标签选择。<br><br>**自查修正**<br>根据反馈修正一处结构问题。 | 通过说出选择理由深化语义理解，形成依据标准改进作品的习惯。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
HTML 文档结构
|
||||||
|
|
||||||
|
html
|
||||||
|
├── head：页面信息
|
||||||
|
│ ├── meta charset
|
||||||
|
│ └── title
|
||||||
|
└── body：可见内容
|
||||||
|
├── h1：页面主标题
|
||||||
|
├── h2：栏目标题
|
||||||
|
└── p：正文段落
|
||||||
|
|
||||||
|
原则：语义正确、层级清楚、嵌套规范
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够识别 HTML 文档的主要组成，使用标题和段落标签完成个人介绍区域。多数作品层级清楚、内容完整，学生开始关注标签含义和代码缩进。 |
|
||||||
|
| **教学反思** | 部分学生把标题标签当作“调字号工具”，容易跳级使用。评价时应要求学生说明栏目关系，并用页面结构图辅助选择标签；对闭合错误可借助编辑器高亮快速定位。 |
|
||||||
41
data/Web/3.md
Normal file
41
data/Web/3.md
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# 个人主页——图片链接与多媒体展示 教学设计
|
||||||
|
|
||||||
|
| **课题** | **个人主页——图片链接与多媒体展示** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：掌握 `img`、`a`、`audio` 或 `video` 标签的基本属性，理解相对路径、替代文本和链接目标。<br>**技能目标**：能够为个人主页添加头像、作品图片、站内锚点和外部链接，并正确处理本地资源路径。<br>**素养目标**：树立图片版权、个人隐私和无障碍意识，养成资源分类、文件压缩和链接测试的习惯。 |
|
||||||
|
| **教学重难点** | **重点**：图片与链接标签；相对路径；`alt` 替代文本；站内外链接。<br>**难点**：根据当前文件位置推导资源路径，定位图片不显示和链接失效问题。 |
|
||||||
|
| **教学资源准备** | 个人主页项目、经过授权的示例图片与短音视频、路径关系图、图片压缩工具、链接测试清单。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 展示需求导入**<br>（5分钟） | 分析纯文字主页的不足，提出增加头像、作品图片和跳转入口的任务。 | **对比展示**<br>呈现纯文字版与图文版主页，提问：“哪些资源让个人特点更直观？”<br><br>**规范提醒**<br>说明不公开敏感信息，不使用来源不明的图片。 | **观察比较**<br>说出图像和链接对信息表达的作用。<br><br>**资源筛选**<br>从授权素材中选择头像和作品图片。 | 以项目展示需求引出多媒体，同时把版权与隐私规范置于操作之前。 |
|
||||||
|
| **2. 路径原理探究**<br>（9分钟） | 理解同级、下级和上级目录关系，学习相对路径写法。 | **图示讲解**<br>以 `index.html` 和 `images/avatar.jpg` 为例绘制目录树，演示浏览器如何查找资源。<br><br>**故障演示**<br>故意修改文件名和路径，展示图片破损图标并分析原因。 | **路径推导**<br>根据三组目录图填写正确资源路径。<br><br>**故障判断**<br>检查文件名、大小写和所在目录，说明错误位置。 | 用目录图和真实故障突破路径难点，培养按证据排查问题的意识。 |
|
||||||
|
| **3. 标签属性示范**<br>（8分钟） | 学习图片、链接和多媒体标签的核心属性与安全使用方式。 | **代码演示**<br>演示 `<img src="images/avatar.jpg" alt="个人头像">`，讲解 `src`、`alt`；演示外部链接和 `target="_blank"`。<br><br>**锚点示范**<br>为“作品展示”栏目设置 `id`，创建页内跳转链接。 | **跟随编码**<br>添加头像和一个外部学习资源链接，编写准确的替代文本。<br><br>**即时测试**<br>点击链接并临时修改路径，观察不同结果。 | 通过最小可运行示例掌握属性作用，让学生立即验证代码与页面行为。 |
|
||||||
|
| **4. 图文主页实践**<br>（14分钟） | 完成头像、作品展示、站内导航和可选多媒体区域。 | **任务发布**<br>要求添加一张头像、两张作品图、一个页内链接和一个外部链接；图片必须分类存放并写 `alt`。<br><br>**巡回指导**<br>帮助处理路径、中文文件名、图片过大和链接协议缺失等问题。 | **功能开发**<br>整理资源文件，完成图文和链接代码；进度较快者添加带控制条的短音频或视频。<br><br>**交叉测试**<br>与同伴交换项目，逐项测试图片、锚点和外部链接。 | 以多项可测试功能整合标签知识，通过交叉测试培养用户视角和质量意识。 |
|
||||||
|
| **5. 评价归纳总结**<br>（4分钟） | 展示作品并总结资源引用与链接测试方法。 | **案例点评**<br>对路径规范、替代文本准确和资源体积合理的作品进行点评。<br><br>**方法归纳**<br>总结“看目录、核文件、查路径、再刷新”的排错顺序。 | **展示交流**<br>说明自己解决的一次路径问题。<br><br>**清单自查**<br>确认资源均能打开且未暴露敏感信息。 | 将排错经验显性化，强化资源管理、版权和隐私责任。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
personal-homepage/
|
||||||
|
├── index.html
|
||||||
|
└── images/
|
||||||
|
├── avatar.jpg
|
||||||
|
└── work-1.jpg
|
||||||
|
|
||||||
|
图片：src + alt
|
||||||
|
链接：href + 可读文字
|
||||||
|
页内跳转：href="#works" ↔ id="works"
|
||||||
|
|
||||||
|
排错：目录 → 文件名 → 路径 → 保存刷新
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够使用相对路径添加图片和链接，完成个人主页图文展示。交叉测试发现并修正了多处大小写、文件名和锚点错误，资源管理与用户测试意识得到强化。 |
|
||||||
|
| **教学反思** | 路径问题仍是主要障碍，直接告知答案不利于形成能力。后续指导应先让学生画出目录树，再按“文件在哪里、页面在哪里、如何到达”逐步推导，同时限制大体积媒体以保障课堂效率。 |
|
||||||
40
data/Web/4.md
Normal file
40
data/Web/4.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
# 个人主页——列表与表格信息展示 教学设计
|
||||||
|
|
||||||
|
| **课题** | **个人主页——列表与表格信息展示** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解有序列表、无序列表和表格的语义及适用场景，掌握 `ul`、`ol`、`li`、`table`、`tr`、`th`、`td` 的结构关系。<br>**技能目标**：能够用列表呈现技能与兴趣，用表格呈现学习经历，并检查行列对应关系。<br>**素养目标**：培养信息分类和结构化表达能力，养成先分析数据关系再选择页面元素的习惯。 |
|
||||||
|
| **教学重难点** | **重点**：列表类型选择；表格行、列、表头结构；规范嵌套。<br>**难点**：将原始个人资料转换为层次清楚的列表和二维表格，避免使用表格进行页面布局。 |
|
||||||
|
| **教学资源准备** | 个人主页项目、技能兴趣素材卡、学习经历数据表、结构错误示例、Visual Studio Code、浏览器。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 信息整理导入**<br>（5分钟） | 比较长段落与结构化信息，明确技能清单和成长经历展示任务。 | **案例对比**<br>展示同一组资料的段落版、列表版和表格版，提问哪种更易查找。<br><br>**任务明确**<br>提出为个人主页新增“我的技能”和“成长经历”区域。 | **阅读比较**<br>从查找速度和关系表达角度评价三种形式。<br><br>**资料分类**<br>将个人素材分为并列项、顺序项和行列数据。 | 从信息表达效率出发，引导学生依据数据关系选择合适结构。 |
|
||||||
|
| **2. 列表结构探究**<br>（9分钟） | 学习无序列表、有序列表及列表项的嵌套规则。 | **语义讲解**<br>用兴趣爱好说明并列关系，用学习计划说明先后关系，比较 `ul` 与 `ol`。<br><br>**代码辨析**<br>展示把 `li` 写在列表外部的错误，说明父子关系。 | **关系判断**<br>为四组信息选择列表类型并说明理由。<br><br>**跟随编码**<br>完成技能清单和三步学习计划。 | 将标签选择建立在信息关系上，巩固正确嵌套与语义表达。 |
|
||||||
|
| **3. 表格结构示范**<br>（8分钟） | 学习表格、行、表头和数据单元格的组织方式。 | **网格讲解**<br>把学习经历表拆成“时间、经历、收获”三列，演示逐行编写代码。<br><br>**错误演示**<br>展示单元格数量不一致造成的错位，引导定位问题。 | **结构标注**<br>在纸面表格上标出行、列和表头。<br><br>**模仿操作**<br>输入表头和一行数据，观察浏览器默认效果。 | 用二维网格对应代码结构，帮助学生理解多层标签关系。 |
|
||||||
|
| **4. 信息模块实践**<br>（14分钟） | 完成技能列表、兴趣列表和学习经历表格，并进行结构检查。 | **任务发布**<br>要求至少使用两种列表，表格包含表头和三行数据；强调表格只用于数据。<br><br>**巡回指导**<br>检查列表父子关系、每行单元格数量和缩进，指导使用开发者工具查看结构。 | **独立开发**<br>根据个人资料完成两个列表和一个表格。<br><br>**协作核验**<br>同伴按“类型合适、嵌套正确、行列一致、内容真实”四项检查。 | 通过真实资料组织提升结构化表达能力，以同伴核验发现不易察觉的嵌套问题。 |
|
||||||
|
| **5. 成果总结评价**<br>（4分钟） | 归纳列表和表格的选择原则，展示阶段成果。 | **作品点评**<br>展示信息清晰的页面，指出用表格做布局的不当做法。<br><br>**规则总结**<br>概括“并列用无序、步骤用有序、二维数据用表格”。 | **口头归纳**<br>用自己的页面举例说明三种结构。<br><br>**自查修正**<br>根据规则调整一个不合适的结构。 | 将操作经验提炼为可迁移的选择规则，服务后续内容设计。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
信息关系 → HTML 结构
|
||||||
|
|
||||||
|
并列信息：ul > li
|
||||||
|
顺序信息：ol > li
|
||||||
|
二维数据：table
|
||||||
|
├── tr > th
|
||||||
|
└── tr > td
|
||||||
|
|
||||||
|
个人主页成果：
|
||||||
|
技能清单 + 学习计划 + 成长经历表
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够依据数据关系选择列表或表格，完成技能、计划和经历模块。纸面网格标注有效降低了表格嵌套难度，同伴核验促进了行列一致性检查。 |
|
||||||
|
| **教学反思** | 少数学生仍倾向用空格或表格控制页面位置，说明内容结构与视觉布局尚未完全区分。课堂点评应明确 HTML 负责语义结构，布局将在 CSS 项目中完成，并通过反例强化边界。 |
|
||||||
42
data/Web/5.md
Normal file
42
data/Web/5.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# 个人主页——表单设计与信息收集 教学设计
|
||||||
|
|
||||||
|
| **课题** | **个人主页——表单设计与信息收集** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解表单、控件、标签和提交的基本关系，掌握 `form`、`label`、`input`、`textarea`、`button` 的常用属性。<br>**技能目标**：能够设计并实现包含姓名、邮箱、留言和提交按钮的联系表单，使用浏览器内置校验检查必填项和邮箱格式。<br>**素养目标**：建立用户体验、隐私保护和最少收集原则，养成让表单标签明确、操作可理解的设计习惯。 |
|
||||||
|
| **教学重难点** | **重点**：标签与控件关联；输入类型；`name`、`required` 等属性；表单结构。<br>**难点**：从用户任务出发设计合理字段，理解当前静态页面只能完成前端输入与校验，不能真正保存数据。 |
|
||||||
|
| **教学资源准备** | 个人主页项目、优秀与问题表单案例、表单需求卡、浏览器开发者工具、隐私安全提示卡。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 联系需求导入**<br>（5分钟） | 从“访问者如何联系主页作者”引出联系表单和信息边界。 | **场景创设**<br>展示只公开手机号与使用联系表单的两种页面，提问哪种更稳妥。<br><br>**安全提示**<br>强调课堂使用模拟信息，不收集身份证、住址等敏感数据。 | **风险判断**<br>比较两种联系方式的便利性和隐私风险。<br><br>**字段筛选**<br>选出完成留言所必需的最少信息。 | 将表单学习与真实联系需求、隐私责任结合，建立最少收集意识。 |
|
||||||
|
| **2. 表单要素探究**<br>（10分钟） | 认识表单容器、标签、输入框、文本域和按钮。 | **结构讲解**<br>说明 `label` 描述字段，`for` 与控件 `id` 对应；讲解文本、邮箱输入类型及 `name`。<br><br>**体验对比**<br>演示点击已关联与未关联标签的差异，说明可用性价值。 | **要素配对**<br>将标签、控件、属性和作用卡片正确配对。<br><br>**代码跟随**<br>完成姓名字段，并通过点击标签验证关联。 | 通过交互体验理解标签关联，而不是只记忆表单标签名称。 |
|
||||||
|
| **3. 校验功能示范**<br>（8分钟） | 学习 `required`、`type="email"`、`placeholder`，理解浏览器内置校验。 | **代码演示**<br>为姓名和邮箱设置必填要求，输入错误邮箱并提交，观察提示。<br><br>**边界说明**<br>说明前端校验改善输入质量，但静态页面不会保存或发送数据。 | **测试记录**<br>分别测试空值、错误邮箱和正确邮箱，记录页面反馈。<br><br>**概念辨析**<br>区分“输入校验”和“数据存储”。 | 用测试结果理解属性作用，同时避免学生误认为表单已具备后端处理能力。 |
|
||||||
|
| **4. 联系表单实践**<br>（13分钟） | 完成姓名、邮箱、留言和提交按钮，优化字段顺序与提示文字。 | **任务发布**<br>要求字段有明确标签，姓名和邮箱必填，邮箱使用正确类型，留言使用文本域。<br><br>**巡回指导**<br>检查 `for` 与 `id`、字段 `name`、控件嵌套及隐私提示，帮助修复提交无提示问题。 | **表单开发**<br>编写联系区域，设置标签、控件和必要属性。<br><br>**用户测试**<br>同伴扮演访问者完成三组测试，反馈字段含义和错误提示是否清楚。 | 让学生从开发者和用户双重视角完善功能，培养可用性测试习惯。 |
|
||||||
|
| **5. 评价总结提升**<br>（4分钟） | 总结表单结构、基础校验和信息安全原则。 | **成果点评**<br>展示字段简洁、标签清晰的表单，纠正只用占位文字代替标签的问题。<br><br>**要点归纳**<br>总结“字段必要、标签明确、格式校验、隐私优先”。 | **自评修正**<br>按四项原则检查并修正表单。<br><br>**成果说明**<br>说明一项为用户考虑的设计。 | 将表单技术提升为用户体验和信息责任意识，完成项目功能模块。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
联系表单
|
||||||
|
|
||||||
|
form
|
||||||
|
├── label ↔ input
|
||||||
|
│ ├── id / for
|
||||||
|
│ ├── name
|
||||||
|
│ └── required
|
||||||
|
├── textarea
|
||||||
|
└── button
|
||||||
|
|
||||||
|
设计原则：
|
||||||
|
最少收集 + 清晰标签 + 格式校验 + 隐私保护
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够完成带标签关联和浏览器校验的联系表单，并通过同伴测试发现字段含义不清等问题。多数学生能区分前端校验与数据保存，隐私保护意识得到强化。 |
|
||||||
|
| **教学反思** | 学生容易依赖 `placeholder` 而省略可见标签，也容易把“提交按钮可点击”理解为数据已发送。应持续用键盘操作和断网测试呈现差异，并明确静态项目的功能边界。 |
|
||||||
42
data/Web/6.md
Normal file
42
data/Web/6.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# 个人主页——语义化整合与项目发布 教学设计
|
||||||
|
|
||||||
|
| **课题** | **个人主页——语义化整合与项目发布** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解 `header`、`nav`、`main`、`section`、`footer` 等语义化结构，了解网页质量检查和静态发布的基本流程。<br>**技能目标**：能够重构个人主页结构，修复标签、路径和链接问题，按验收清单完成浏览器测试并生成可分享的项目成果。<br>**素养目标**：培养版本意识、质量意识和成果表达能力，形成开发完成后必须测试、整理和复盘的职业习惯。 |
|
||||||
|
| **教学重难点** | **重点**：语义化区域划分；项目整合；结构、资源、链接与表单检查。<br>**难点**：在不改变内容的前提下重构结构，依据测试现象定位问题并完成规范发布。 |
|
||||||
|
| **教学资源准备** | 前五课个人主页项目、语义标签卡、项目验收清单、浏览器开发者工具、压缩工具或校内静态发布空间。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 项目验收导入**<br>（5分钟） | 回顾各模块成果，发布“整合并交付个人主页”的最终任务。 | **进度回顾**<br>展示六课时成果链，说明本课不再增加大量内容，而是提升结构与质量。<br><br>**标准发布**<br>讲解内容完整、结构语义、资源有效、操作可用、目录规范五类验收项。 | **成果盘点**<br>在清单上标记已完成和待完善模块。<br><br>**问题预判**<br>写出项目当前最可能存在的两个问题。 | 从“写完代码”转向“完成交付”，建立基于标准验收项目的意识。 |
|
||||||
|
| **2. 语义结构重构**<br>（8分钟） | 学习页面区域语义，将现有内容组织为页头、导航、主体栏目和页脚。 | **结构示范**<br>把普通容器替换为 `header`、`nav`、`main`、`section`、`footer`，说明各区域职责。<br><br>**层级提醒**<br>强调 `main` 的唯一性和标题层级连续。 | **结构分析**<br>在页面截图上标注五类区域。<br><br>**跟随重构**<br>先完成页头、主体和页脚的语义化调整。 | 用区域职责提升代码可读性，为后续 CSS 布局和协作开发建立基础。 |
|
||||||
|
| **3. 项目整合实践**<br>（17分钟） | 整合文本、图片、列表、表格和表单，依据清单修复问题。 | **任务组织**<br>按“结构→内容→资源→交互→目录”顺序安排测试，示范使用开发者工具检查元素。<br><br>**巡回诊断**<br>不直接代改代码，引导学生根据错误位置、控制台或网络面板信息定位原因。 | **独立重构**<br>完成全部语义区域，补齐缺失内容和替代文本。<br><br>**双轮测试**<br>先自测，再由同伴按清单测试图片、锚点、外链、表单校验和标题层级。 | 留出主体时间进行真实项目整合，通过双轮测试形成发现、定位、修复的质量闭环。 |
|
||||||
|
| **4. 成果发布展示**<br>（6分钟） | 整理目录、生成压缩包或发布到校内静态空间，展示项目。 | **发布示范**<br>演示删除无关文件、确认入口文件、压缩项目并在新位置重新打开测试。<br><br>**展示评价**<br>邀请学生用一分钟介绍页面定位、主要栏目和一个解决的问题。 | **成果归档**<br>按统一命名整理项目并完成离线发布测试。<br><br>**项目路演**<br>展示主页，说明设计选择和调试经历。 | 让学生经历可复现的交付流程，以表达和演示强化项目成就感。 |
|
||||||
|
| **5. 项目复盘总结**<br>（4分钟） | 回顾 HTML 项目知识链，完成个人复盘。 | **知识串联**<br>梳理“文档结构—文本—媒体—结构化数据—表单—语义整合”。<br><br>**迁移提问**<br>提出“如何让页面更美观并适配不同屏幕”，衔接 CSS 项目。 | **复盘填写**<br>记录一个掌握点、一个典型错误和一个改进目标。<br><br>**成果确认**<br>提交项目与验收清单。 | 通过知识串联和项目复盘巩固 HTML 结构能力，自然过渡到样式与布局学习。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
个人主页语义结构
|
||||||
|
|
||||||
|
header
|
||||||
|
├── nav
|
||||||
|
main
|
||||||
|
├── section：关于我
|
||||||
|
├── section：技能与经历
|
||||||
|
├── section：作品展示
|
||||||
|
└── section：联系表单
|
||||||
|
footer
|
||||||
|
|
||||||
|
验收：结构 → 内容 → 资源 → 操作 → 目录
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够用语义标签整合前五课成果，并依据清单完成自测和同伴测试。多数项目可在新位置正常打开，学生能清楚说明页面结构和一次调试过程。 |
|
||||||
|
| **教学反思** | 整合课容易演变为教师集中修错，应坚持让学生先描述现象、定位区域、提出原因再修改。发布测试暴露了部分绝对路径和遗漏资源问题，说明跨位置复测是检验项目完整性的有效方式。 |
|
||||||
43
data/Web/7.md
Normal file
43
data/Web/7.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# 校园活动网站——CSS基础与视觉样式设计 教学设计
|
||||||
|
|
||||||
|
| **课题** | **校园活动网站——CSS基础与视觉样式设计** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解 CSS 规则由选择器、属性和值组成，掌握外部样式表、元素选择器、类选择器及基础颜色和字体属性。<br>**技能目标**：能够建立校园活动网站目录，正确关联 `style.css`，为页头、栏目标题和正文制定统一视觉样式。<br>**素养目标**：建立内容与表现分离、样式复用和视觉一致性意识，养成集中管理样式代码的习惯。 |
|
||||||
|
| **教学重难点** | **重点**：CSS 基本语法；外部样式表关联；元素与类选择器；颜色和字体设置。<br>**难点**：理解选择器匹配范围和样式覆盖现象，根据网站主题建立简洁一致的视觉规范。 |
|
||||||
|
| **教学资源准备** | 校园活动网站 HTML 初始模板、视觉效果示例、配色卡、Visual Studio Code、现代浏览器、开发者工具。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 项目情境导入**<br>（5分钟） | 展示未加样式和完成样式的校园活动网站，明确项目二目标。 | **案例对比**<br>展示相同 HTML 内容的两种效果，提问：“内容没有变化，为什么阅读感受不同？”<br><br>**任务发布**<br>说明六课时将完成视觉统一、布局合理且适配手机的活动网站。 | **观察分析**<br>从颜色、字体、间距、排列等方面描述差异。<br><br>**目标记录**<br>在项目单上写出希望网站呈现的三个视觉关键词。 | 用显著视觉差异引出 CSS 的价值，建立第二个项目的完整成果预期。 |
|
||||||
|
| **2. CSS语法探究**<br>（10分钟） | 学习选择器、声明块、属性和值，认识元素选择器和类选择器。 | **结构拆解**<br>以 `h1 { color: navy; }` 为例标注语法组成，讲解分号和花括号。<br><br>**匹配演示**<br>比较 `p` 与 `.notice` 的作用范围，使用开发者工具查看匹配样式。 | **语法标注**<br>在示例规则中圈出选择器、属性和值。<br><br>**结果预测**<br>观察 HTML 类名，预测两条规则会影响哪些元素。 | 通过结构标注和结果预测理解 CSS 规则，减少试错式编写。 |
|
||||||
|
| **3. 样式关联示范**<br>（8分钟） | 创建外部样式表并通过 `link` 标签关联，设置基础字体和页面颜色。 | **目录示范**<br>建立 `campus-events/css/style.css`，演示在 `head` 中关联文件。<br><br>**故障诊断**<br>故意写错路径，展示样式未生效时如何检查文件、路径和开发者工具。 | **跟随操作**<br>创建项目目录、复制 HTML 模板并关联样式表。<br><br>**即时验证**<br>修改页面背景色，保存刷新，确认关联成功。 | 把样式表路径与上一项目资源路径知识连接起来，建立快速验证方法。 |
|
||||||
|
| **4. 视觉规范实践**<br>（13分钟） | 设置全局字体、正文颜色、页头背景、标题颜色和提示文字样式。 | **任务分解**<br>给出基础视觉清单：主色、辅助色、正文色、字体、标题层级；强调对比度与颜色数量控制。<br><br>**巡回指导**<br>检查选择器范围、类名拼写和样式覆盖，指导从开发者工具确认规则来源。 | **样式开发**<br>根据配色卡完成页面基础样式，为提示信息添加可复用类。<br><br>**对比测试**<br>切换两组颜色方案，选择可读性更好的方案并说明理由。 | 让学生在约束下完成视觉决策，体验样式复用和开发者工具辅助调试。 |
|
||||||
|
| **5. 成果评价总结**<br>（4分钟） | 展示阶段成果，归纳 CSS 工作方式和视觉规范。 | **作品点评**<br>对颜色克制、文字清晰和选择器合理的页面进行点评。<br><br>**知识梳理**<br>总结“选择元素—设置属性—浏览器应用—工具检查”。 | **成果说明**<br>展示页面并说明主色和一个类选择器的用途。<br><br>**自查归档**<br>确认样式表路径正确、代码保存且无明显重复。 | 以解释设计选择促进技术与审美结合，为后续布局学习建立统一基线。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
CSS 规则
|
||||||
|
|
||||||
|
选择器 {
|
||||||
|
属性: 值;
|
||||||
|
}
|
||||||
|
|
||||||
|
campus-events/
|
||||||
|
├── index.html
|
||||||
|
└── css/
|
||||||
|
└── style.css
|
||||||
|
|
||||||
|
基础视觉：主色 + 辅助色 + 正文色 + 字体
|
||||||
|
原则：内容与表现分离、样式集中复用
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够正确关联外部样式表，使用元素和类选择器建立网站基础视觉。多数作品颜色数量合理、文字可读，学生开始借助开发者工具确认规则是否匹配。 |
|
||||||
|
| **教学反思** | 部分学生追求颜色丰富而忽略一致性，或用过宽的元素选择器造成连锁变化。应先限定配色和选择器范围，再允许个性调整，并要求每次修改后说明影响对象。 |
|
||||||
41
data/Web/8.md
Normal file
41
data/Web/8.md
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# 校园活动网站——盒模型与页面分区 教学设计
|
||||||
|
|
||||||
|
| **课题** | **校园活动网站——盒模型与页面分区** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解内容区、内边距、边框和外边距组成的 CSS 盒模型，掌握宽度、间距、边框及 `box-sizing` 的作用。<br>**技能目标**：能够使用盒模型调整校园活动网站的页头、公告区和内容区尺寸与间距，解决元素拥挤和宽度溢出问题。<br>**素养目标**：培养用开发者工具测量和调试界面的习惯，形成以数据而非反复猜测调整布局的工程意识。 |
|
||||||
|
| **教学重难点** | **重点**：盒模型四层结构；`padding` 与 `margin` 的区别；边框和宽度设置。<br>**难点**：理解默认盒模型下实际占用宽度的计算，正确使用 `box-sizing: border-box` 控制尺寸。 |
|
||||||
|
| **教学资源准备** | 上节课项目、盒模型实体图、宽度计算练习卡、问题页面、浏览器开发者工具。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 布局问题导入**<br>（5分钟） | 观察文字贴边、区域拥挤和横向溢出，提出页面分区优化任务。 | **问题呈现**<br>展示三个典型问题，提问：“为什么设置了宽度，元素仍超出容器？”<br><br>**任务明确**<br>要求本课完成页头、公告区和主体容器的间距设计。 | **现象描述**<br>指出各区域在尺寸和间距上的问题。<br><br>**原因猜测**<br>根据已有经验判断可能与边框、内外间距有关。 | 从可见问题引出盒模型，让抽象尺寸概念服务于具体页面优化。 |
|
||||||
|
| **2. 盒模型探究**<br>（10分钟） | 学习 content、padding、border、margin 的位置和用途。 | **模型讲解**<br>用“礼盒”类比四层结构，在开发者工具中高亮元素并展示颜色区域。<br><br>**概念对比**<br>比较 `padding` 增加内部留白与 `margin` 拉开元素距离的效果。 | **模型标注**<br>在盒模型图中填写四层名称和作用。<br><br>**参数实验**<br>分别修改内外边距，观察文字和相邻元素的位置变化。 | 通过开发者工具可视化尺寸关系，避免把两个间距属性混用。 |
|
||||||
|
| **3. 宽度计算示范**<br>（8分钟） | 理解标准盒模型占用宽度和 `border-box` 规则。 | **计算演示**<br>计算 `width: 300px` 加左右内边距和边框后的实际宽度，说明溢出原因。<br><br>**方案示范**<br>设置 `box-sizing: border-box`，观察总宽度保持不变。 | **计算练习**<br>完成两道实际宽度计算并核对工具显示值。<br><br>**代码验证**<br>切换盒模型规则，记录元素宽度变化。 | 将计算结果与浏览器测量对应，建立可验证的尺寸判断能力。 |
|
||||||
|
| **4. 页面分区实践**<br>（13分钟） | 优化页头、公告区和主体容器，建立统一的间距规则。 | **任务发布**<br>要求设置全局 `border-box`、主体最大宽度、居中外边距、区域内边距和公告边框。<br><br>**巡回指导**<br>引导使用计算样式和盒模型面板定位溢出、间距叠加等问题。 | **样式调整**<br>按验收图完成三个区域的尺寸、边框和间距设置。<br><br>**工具测量**<br>选择元素查看实际宽高，修复横向滚动和贴边问题。 | 在完整页面中综合使用盒模型，以工具测量替代盲目修改数值。 |
|
||||||
|
| **5. 展示总结评价**<br>（4分钟） | 比较优化前后页面，归纳尺寸与间距调试方法。 | **前后对比**<br>展示典型作品，说明统一间距如何提升秩序感。<br><br>**方法总结**<br>归纳“选元素—看盒模型—算尺寸—改属性—再验证”。 | **结果说明**<br>指出自己修复的一个布局问题及所用属性。<br><br>**规范自查**<br>检查是否存在随意叠加的重复间距。 | 将实践经验形成调试流程，增强对布局问题的分析能力。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
盒模型（由内到外）
|
||||||
|
|
||||||
|
content → padding → border → margin
|
||||||
|
|
||||||
|
标准盒模型：
|
||||||
|
实际宽度 = width + 左右padding + 左右border
|
||||||
|
|
||||||
|
推荐：
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
调试：选择元素 → 查看盒模型 → 测量 → 修改
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够区分内边距和外边距，使用盒模型优化页面分区。通过计算与开发者工具测量，多数学生成功解决了宽度溢出和内容贴边问题。 |
|
||||||
|
| **教学反思** | 盒模型计算对部分学生仍较抽象，单纯公式讲解效果有限。应保持“纸面计算—浏览器测量—切换规则”的三步验证，并限制同一环节引入过多尺寸单位。 |
|
||||||
41
data/Web/9.md
Normal file
41
data/Web/9.md
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# 校园活动网站——Flex弹性布局 教学设计
|
||||||
|
|
||||||
|
| **课题** | **校园活动网站——Flex弹性布局** |
|
||||||
|
|:---|:---|
|
||||||
|
| **课时** | 1课时（40分钟） |
|
||||||
|
| **教学目标** | **知识目标**：理解 Flex 容器、项目、主轴和交叉轴，掌握 `display: flex`、排列、对齐、换行和间距等常用属性。<br>**技能目标**：能够将校园活动列表从纵向堆叠改为可换行的弹性布局，并完成不同数量卡片的对齐测试。<br>**素养目标**：培养根据布局目标选择工具、通过控制变量观察效果的实验意识，形成适配内容变化的弹性设计思维。 |
|
||||||
|
| **教学重难点** | **重点**：容器与项目关系；主轴和交叉轴；`justify-content`、`align-items`、`flex-wrap`、`gap`。<br>**难点**：根据 `flex-direction` 判断轴向，区分主轴排列与交叉轴对齐。 |
|
||||||
|
| **教学资源准备** | 校园活动网站项目、Flex 轴向图、属性效果卡、活动卡片 HTML 素材、浏览器开发者工具。 |
|
||||||
|
|
||||||
|
## 教学过程
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|:---|:---|:---|:---|:---|
|
||||||
|
| **1. 排列需求导入**<br>（5分钟） | 分析活动条目纵向堆叠造成空间利用低的问题，提出多卡片排列任务。 | **场景演示**<br>增加活动数量，展示普通文档流下的页面，提问如何让卡片自动横排并在空间不足时换行。<br><br>**任务发布**<br>明确本课完成活动列表弹性布局。 | **问题观察**<br>描述现有排列的不足和理想效果。<br><br>**方案猜想**<br>思考需要控制父区域还是逐个移动卡片。 | 以内容数量变化制造真实布局需求，引出容器统一控制的价值。 |
|
||||||
|
| **2. Flex原理探究**<br>（10分钟） | 认识 Flex 容器、项目、主轴、交叉轴及方向变化。 | **图示讲解**<br>在轴向图上标注容器和项目，切换 `row` 与 `column` 展示主轴变化。<br><br>**属性实验**<br>使用开发者工具开启 Flex 标识，实时调整主轴排列和交叉轴对齐。 | **轴向判断**<br>根据四张布局图指出主轴和交叉轴。<br><br>**效果预测**<br>修改属性前先预测卡片位置，再观察结果。 | 用图示、预测和实时结果建立轴向概念，减少属性死记硬背。 |
|
||||||
|
| **3. 常用属性示范**<br>（8分钟） | 学习换行、间距、对齐及卡片基础宽度控制。 | **代码演示**<br>为活动列表设置 `display: flex`、`flex-wrap: wrap` 和 `gap`，比较不同 `justify-content`。<br><br>**边界测试**<br>删除或增加卡片，观察布局能否自动调整。 | **跟随编码**<br>把活动列表设为 Flex 容器，调整间距与对齐。<br><br>**变化测试**<br>使用三张、四张、五张卡片验证排列。 | 强调布局应适应内容变化，让学生理解弹性布局不是固定摆放。 |
|
||||||
|
| **4. 活动列表实践**<br>（13分钟） | 完成活动卡片横向排列、自动换行和整齐对齐。 | **任务分层**<br>基础任务实现横排换行；进阶任务设置卡片弹性宽度并保持最小可读尺寸。<br><br>**巡回指导**<br>针对把属性写在子元素、轴向判断错误和固定宽度过大进行点拨。 | **布局开发**<br>完成活动列表样式，调整 `gap`、对齐方式和卡片宽度。<br><br>**窗口测试**<br>拖动浏览器宽度，记录卡片从三列到两列或一列的变化。 | 通过分层任务兼顾差异，让学生在真实窗口变化中验证弹性布局。 |
|
||||||
|
| **5. 成果评价总结**<br>（4分钟） | 展示不同宽度下的页面，归纳 Flex 布局步骤。 | **作品点评**<br>选择能自然换行、间距统一的作品，指出过度固定宽度的问题。<br><br>**步骤梳理**<br>总结“找父容器—定方向—排主轴—对交叉轴—测变化”。 | **成果演示**<br>拖动窗口展示布局变化并说明一项属性。<br><br>**口诀归纳**<br>复述 Flex 布局五步。 | 用动态演示检验真实适配效果，将属性知识转化为布局方法。 |
|
||||||
|
|
||||||
|
## 板书设计
|
||||||
|
|
||||||
|
```text
|
||||||
|
Flex 布局
|
||||||
|
|
||||||
|
容器：display: flex
|
||||||
|
项目：容器的直接子元素
|
||||||
|
|
||||||
|
主轴：justify-content
|
||||||
|
交叉轴：align-items
|
||||||
|
换行：flex-wrap
|
||||||
|
间距：gap
|
||||||
|
|
||||||
|
步骤：找父容器 → 定轴向 → 排列 → 对齐 → 测试
|
||||||
|
```
|
||||||
|
|
||||||
|
## 教学成效与反思
|
||||||
|
|
||||||
|
| | |
|
||||||
|
|:---|:---|
|
||||||
|
| **教学成效** | 学生能够识别 Flex 容器与项目，使用换行、间距和对齐属性完成活动列表。多数学生通过增删卡片和改变窗口宽度验证了布局弹性。 |
|
||||||
|
| **教学反思** | 主轴与交叉轴仍易混淆，尤其在方向改为纵向后。应坚持每次设置对齐前先画箭头判断轴向，并减少同时修改多个属性，便于观察因果关系。 |
|
||||||
96
data/Web/SKILLS.md
Normal file
96
data/Web/SKILLS.md
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
# Role: 中职 Web 前端开发项目式教学设计专家
|
||||||
|
|
||||||
|
## Profile
|
||||||
|
|
||||||
|
- language: 中文
|
||||||
|
- description: 面向中等职业学校学生设计 HTML、CSS、JavaScript 项目式课程，以完整网页项目为主线，将知识讲解、编码实践、调试测试和成果展示整合为可直接实施的单课时教案。
|
||||||
|
- expertise: Web 前端基础、项目式教学、理实一体化课堂、任务分解、学习评价、Markdown 教学文档编排。
|
||||||
|
- target_audience: 中职信息技术相关专业教师、Web 前端实训教师和职业培训教师。
|
||||||
|
|
||||||
|
## Core Skills
|
||||||
|
|
||||||
|
1. **项目任务设计**
|
||||||
|
- 将 HTML、CSS、JavaScript 知识映射到可观察、可验收的网页功能。
|
||||||
|
- 保持课时之间成果衔接，使学生逐步完成完整项目。
|
||||||
|
- 将复杂功能拆分为符合中职学生认知水平的阶梯任务。
|
||||||
|
|
||||||
|
2. **课堂活动设计**
|
||||||
|
- 按“情境导入—新知探究—示范操作—项目实践—展示总结”组织教学。
|
||||||
|
- 教师活动突出提问、示范、点拨、巡回指导和评价。
|
||||||
|
- 学生活动突出需求分析、代码编写、浏览器测试、同伴互评和成果表达。
|
||||||
|
|
||||||
|
3. **Web 技术教学**
|
||||||
|
- 使用 HTML5 语义化标签组织网页内容。
|
||||||
|
- 使用 CSS3 完成视觉样式、盒模型、Flex 布局和响应式适配。
|
||||||
|
- 使用原生 JavaScript 完成变量、流程控制、函数、事件、DOM 和 localStorage 教学。
|
||||||
|
- 使用 Visual Studio Code、现代浏览器和开发者工具构建可复现的实训环境。
|
||||||
|
|
||||||
|
## Rules
|
||||||
|
|
||||||
|
1. **项目目标导向**
|
||||||
|
- 每份教案必须属于“个人主页”“校园活动网站”或“任务管理系统”中的一个明确课时。
|
||||||
|
- 每课必须形成网页区域、样式组件或交互功能等阶段成果。
|
||||||
|
- 知识点和练习必须直接服务于本课项目任务，不设置脱离情境的孤立练习。
|
||||||
|
|
||||||
|
2. **理实一体**
|
||||||
|
- 理论讲解后立即安排代码模仿、功能实现或调试验证。
|
||||||
|
- 课堂实践应能在普通计算机实训室完成，不依赖服务器和付费服务。
|
||||||
|
- 示例代码必须使用 HTML5、CSS3 和原生 JavaScript，可在现代浏览器中直接运行。
|
||||||
|
|
||||||
|
3. **难度与范围**
|
||||||
|
- 面向 Web 前端入门学生，避免框架、构建工具、复杂算法和后端开发。
|
||||||
|
- 单课任务容量必须适合 40 分钟，教学过程各环节时间之和必须等于 40 分钟。
|
||||||
|
- 重点培养结构化页面、样式复用、交互逻辑、调试测试和项目表达能力。
|
||||||
|
|
||||||
|
4. **职业规范**
|
||||||
|
- 强调项目目录、文件命名、代码缩进、语义化标签、样式复用和注释规范。
|
||||||
|
- 强调图片版权、个人信息保护、表单数据安全和无障碍基础意识。
|
||||||
|
- 引导学生使用浏览器开发者工具定位结构、样式和脚本问题。
|
||||||
|
|
||||||
|
## Workflow
|
||||||
|
|
||||||
|
1. 明确本课所属项目、前置成果、阶段任务和验收标准。
|
||||||
|
2. 编写知识、技能、素养三维目标以及教学重难点。
|
||||||
|
3. 将 40 分钟分配给 5 个教学环节，并在每个环节中完整设计教学内容、教师活动、学生活动和设计意图。
|
||||||
|
4. 设计板书，呈现页面结构、样式关系、程序流程或关键代码。
|
||||||
|
5. 撰写具体的教学成效与反思，检查项目连贯性、技术准确性和课堂可实施性。
|
||||||
|
|
||||||
|
## Output Format
|
||||||
|
|
||||||
|
1. 顶级标题必须为：
|
||||||
|
|
||||||
|
`# 项目名称——本课时任务 教学设计`
|
||||||
|
|
||||||
|
2. 基本信息使用 Markdown 表格，必须包含：
|
||||||
|
|
||||||
|
- 课题
|
||||||
|
- 课时：`1课时（40分钟）`
|
||||||
|
- 教学目标：知识目标、技能目标、素养目标
|
||||||
|
- 教学重难点
|
||||||
|
- 教学资源准备
|
||||||
|
|
||||||
|
3. 教学过程使用五列表格：
|
||||||
|
|
||||||
|
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|
||||||
|
|
||||||
|
4. 教师活动和学生活动中的主要活动必须使用加粗四字标题，例如：
|
||||||
|
|
||||||
|
`**情境创设**`、`**代码演示**`、`**动手实践**`、`**协作测试**`
|
||||||
|
|
||||||
|
5. 教学过程后必须依次设置：
|
||||||
|
|
||||||
|
- `## 板书设计`
|
||||||
|
- `## 教学成效与反思`
|
||||||
|
|
||||||
|
6. 教学成效与反思使用独立表格，包含“教学成效”和“教学反思”，合计不超过 300 字。
|
||||||
|
|
||||||
|
## Validation
|
||||||
|
|
||||||
|
1. 检查标题是否包含项目名称和具体任务。
|
||||||
|
2. 检查课时是否为 40 分钟，教学过程时间总和是否为 40。
|
||||||
|
3. 检查三维目标、重难点和资源准备是否完整。
|
||||||
|
4. 检查教学过程是否包含 5 个主要环节和 5 个规定列。
|
||||||
|
5. 检查教师活动、学生活动是否使用四字活动标题。
|
||||||
|
6. 检查每课是否有明确阶段成果并与前后课衔接。
|
||||||
|
7. 检查 HTML、CSS、JavaScript 示例的语法和浏览器兼容性。
|
||||||
|
8. 检查教学成效与反思是否具体、非模板化。
|
||||||
28
data/Web/titles.md
Normal file
28
data/Web/titles.md
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
# Web 前端开发课程大纲
|
||||||
|
|
||||||
|
## 项目一：个人主页
|
||||||
|
|
||||||
|
- 项目启动与开发环境搭建
|
||||||
|
- HTML 文档结构与文本内容
|
||||||
|
- 图片、链接与多媒体
|
||||||
|
- 列表与表格展示
|
||||||
|
- 表单设计与信息收集
|
||||||
|
- 语义化页面整合与发布
|
||||||
|
|
||||||
|
## 项目二：校园活动网站
|
||||||
|
|
||||||
|
- CSS 基础与样式美化
|
||||||
|
- 盒模型与页面分区
|
||||||
|
- Flex 弹性布局
|
||||||
|
- 导航栏与卡片组件
|
||||||
|
- 响应式布局与媒体查询
|
||||||
|
- 网站整合、调试与优化
|
||||||
|
|
||||||
|
## 项目三：任务管理系统
|
||||||
|
|
||||||
|
- JavaScript 基础与变量
|
||||||
|
- 条件判断与循环
|
||||||
|
- 函数与事件处理
|
||||||
|
- DOM 操作与任务添加
|
||||||
|
- 任务状态管理与本地存储
|
||||||
|
- 系统整合、测试与成果展示
|
||||||
@@ -0,0 +1,149 @@
|
|||||||
|
# Web Teaching Design Implementation Plan
|
||||||
|
|
||||||
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||||
|
|
||||||
|
**Goal:** Create a complete 18-lesson, 40-minute project-based Web front-end teaching design set in the `Web` directory.
|
||||||
|
|
||||||
|
**Architecture:** The curriculum is split into three six-lesson projects: an HTML personal homepage, a CSS campus activity website, and a JavaScript task management system. Each lesson is a standalone Markdown teaching design that follows the same table-based structure while advancing one observable project result.
|
||||||
|
|
||||||
|
**Tech Stack:** Markdown, HTML5, CSS3, vanilla JavaScript
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Task 1: Course Metadata And Authoring Rules
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `Web/titles.md`
|
||||||
|
- Create: `Web/SKILLS.md`
|
||||||
|
|
||||||
|
- [x] **Step 1: Write the 18-title curriculum outline**
|
||||||
|
|
||||||
|
List all lessons under the three approved projects and preserve the exact order from the design specification.
|
||||||
|
|
||||||
|
- [x] **Step 2: Write Web teaching-design rules**
|
||||||
|
|
||||||
|
Define the target learners, project-driven method, 40-minute limit, required Markdown sections, three-dimensional objectives, five-column teaching-process table, four-character activity labels, and validation requirements.
|
||||||
|
|
||||||
|
- [x] **Step 3: Verify metadata**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
rtk rg -n '个人主页|校园活动网站|任务管理系统|40分钟|教学成效与反思' Web/titles.md Web/SKILLS.md
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: all three projects and all required format rules are present.
|
||||||
|
|
||||||
|
### Task 2: HTML Personal Homepage Lessons
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `Web/1.md`
|
||||||
|
- Create: `Web/2.md`
|
||||||
|
- Create: `Web/3.md`
|
||||||
|
- Create: `Web/4.md`
|
||||||
|
- Create: `Web/5.md`
|
||||||
|
- Create: `Web/6.md`
|
||||||
|
|
||||||
|
- [x] **Step 1: Write lessons 1-3**
|
||||||
|
|
||||||
|
Cover environment setup, HTML document/text structure, and images/links/multimedia. Each lesson must produce a working part of the personal homepage.
|
||||||
|
|
||||||
|
- [x] **Step 2: Write lessons 4-6**
|
||||||
|
|
||||||
|
Cover lists/tables, forms, and semantic integration/publishing. Lesson 6 must integrate and validate the complete project.
|
||||||
|
|
||||||
|
- [x] **Step 3: Verify project one**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
rtk rg -L '1课时（40分钟）' Web/{1..6}.md
|
||||||
|
rtk rg -L '## 教学成效与反思' Web/{1..6}.md
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: no filenames are returned.
|
||||||
|
|
||||||
|
### Task 3: CSS Campus Activity Website Lessons
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `Web/7.md`
|
||||||
|
- Create: `Web/8.md`
|
||||||
|
- Create: `Web/9.md`
|
||||||
|
- Create: `Web/10.md`
|
||||||
|
- Create: `Web/11.md`
|
||||||
|
- Create: `Web/12.md`
|
||||||
|
|
||||||
|
- [x] **Step 1: Write lessons 7-9**
|
||||||
|
|
||||||
|
Cover CSS foundations, the box model, and Flex layout. Keep all exercises tied to the campus activity website.
|
||||||
|
|
||||||
|
- [x] **Step 2: Write lessons 10-12**
|
||||||
|
|
||||||
|
Cover navigation/card components, responsive media queries, and final integration/debugging.
|
||||||
|
|
||||||
|
- [x] **Step 3: Verify project two**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
rtk rg -L '1课时（40分钟）' Web/{7..12}.md
|
||||||
|
rtk rg -L '## 教学成效与反思' Web/{7..12}.md
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: no filenames are returned.
|
||||||
|
|
||||||
|
### Task 4: JavaScript Task Management Lessons
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `Web/13.md`
|
||||||
|
- Create: `Web/14.md`
|
||||||
|
- Create: `Web/15.md`
|
||||||
|
- Create: `Web/16.md`
|
||||||
|
- Create: `Web/17.md`
|
||||||
|
- Create: `Web/18.md`
|
||||||
|
|
||||||
|
- [x] **Step 1: Write lessons 13-15**
|
||||||
|
|
||||||
|
Cover variables, conditions/loops, and functions/events using task data and controls.
|
||||||
|
|
||||||
|
- [x] **Step 2: Write lessons 16-18**
|
||||||
|
|
||||||
|
Cover DOM task creation, state/localStorage persistence, and final integration/testing/presentation.
|
||||||
|
|
||||||
|
- [x] **Step 3: Verify project three**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
rtk rg -L '1课时（40分钟）' Web/{13..18}.md
|
||||||
|
rtk rg -L '## 教学成效与反思' Web/{13..18}.md
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: no filenames are returned.
|
||||||
|
|
||||||
|
### Task 5: Full Curriculum Validation
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Verify: `Web/*.md`
|
||||||
|
|
||||||
|
- [x] **Step 1: Check the file set**
|
||||||
|
|
||||||
|
Run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
rtk find Web -maxdepth 1 -type f
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: 20 Markdown files, consisting of 18 lessons, `titles.md`, and `SKILLS.md`.
|
||||||
|
|
||||||
|
- [x] **Step 2: Check required lesson sections**
|
||||||
|
|
||||||
|
Run checks for the title, lesson duration, three objectives, teaching process, board design, reflection, and five process rows in every numbered file.
|
||||||
|
|
||||||
|
- [x] **Step 3: Check lesson timing**
|
||||||
|
|
||||||
|
Extract the five teaching-process minute values from each lesson and confirm their sum is 40.
|
||||||
|
|
||||||
|
- [x] **Step 4: Review progression and examples**
|
||||||
|
|
||||||
|
Read the first, final, and transition lessons (`1.md`, `6.md`, `7.md`, `12.md`, `13.md`, `18.md`) and confirm project continuity, age-appropriate scope, accurate HTML/CSS/JavaScript examples, and no duplicated lesson task.
|
||||||
104
data/docs/superpowers/specs/2026-06-15-web-teaching-design.md
Normal file
104
data/docs/superpowers/specs/2026-06-15-web-teaching-design.md
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
# Web 前端开发教学设计方案
|
||||||
|
|
||||||
|
## 1. 建设目标
|
||||||
|
|
||||||
|
在 `Web` 目录中建设一套面向中职学生的 Web 前端开发项目式教学设计。课程共 18 课时，每课时 40 分钟，覆盖 HTML、CSS 和 JavaScript 基础知识，并通过三个递进项目形成完整的学习路径。
|
||||||
|
|
||||||
|
课程沿用现有 C#、Python 教学设计的表达风格和 Markdown 表格结构，突出真实任务、学生实践、成果展示和职业规范。
|
||||||
|
|
||||||
|
## 2. 课程定位
|
||||||
|
|
||||||
|
- 教学对象：中等职业学校信息技术相关专业学生。
|
||||||
|
- 技术范围：HTML5、CSS3、原生 JavaScript，不引入前端框架和构建工具。
|
||||||
|
- 开发环境：Visual Studio Code、Chrome 或 Edge 浏览器、浏览器开发者工具。
|
||||||
|
- 教学组织：三个项目，每个项目 6 课时；每课完成一个可观察、可测试的项目子任务。
|
||||||
|
- 课时标准：1 课时 40 分钟，各教学环节时长之和必须等于 40 分钟。
|
||||||
|
|
||||||
|
## 3. 项目与课时设计
|
||||||
|
|
||||||
|
### 项目一：个人主页
|
||||||
|
|
||||||
|
项目目标是完成一个结构完整、内容丰富、可发布的个人主页，重点学习 HTML 页面结构和常用元素。
|
||||||
|
|
||||||
|
| 课次 | 教学主题 | 项目成果 |
|
||||||
|
|:---:|:---|:---|
|
||||||
|
| 1 | 项目启动与开发环境搭建 | 建立项目目录并运行第一个网页 |
|
||||||
|
| 2 | HTML 文档结构与文本内容 | 完成个人介绍内容区 |
|
||||||
|
| 3 | 图片、链接与多媒体 | 完成作品和兴趣展示区 |
|
||||||
|
| 4 | 列表与表格展示 | 完成技能清单与成长经历表 |
|
||||||
|
| 5 | 表单设计与信息收集 | 完成联系信息表单 |
|
||||||
|
| 6 | 语义化页面整合与发布 | 整合、检查并发布个人主页 |
|
||||||
|
|
||||||
|
### 项目二：校园活动网站
|
||||||
|
|
||||||
|
项目目标是完成一个视觉统一、布局清晰、适配不同屏幕的校园活动网站，重点学习 CSS 样式与响应式布局。
|
||||||
|
|
||||||
|
| 课次 | 教学主题 | 项目成果 |
|
||||||
|
|:---:|:---|:---|
|
||||||
|
| 7 | CSS 基础与样式美化 | 建立网站基础视觉规范 |
|
||||||
|
| 8 | 盒模型与页面分区 | 完成活动页面主体分区 |
|
||||||
|
| 9 | Flex 弹性布局 | 完成活动列表弹性排列 |
|
||||||
|
| 10 | 导航栏与卡片组件 | 完成导航和活动卡片组件 |
|
||||||
|
| 11 | 响应式布局与媒体查询 | 完成移动端适配 |
|
||||||
|
| 12 | 网站整合、调试与优化 | 完成校园活动网站并通过检查 |
|
||||||
|
|
||||||
|
### 项目三：任务管理系统
|
||||||
|
|
||||||
|
项目目标是完成一个能够添加、切换状态、删除并保存任务的浏览器应用，重点学习 JavaScript 程序逻辑和网页交互。
|
||||||
|
|
||||||
|
| 课次 | 教学主题 | 项目成果 |
|
||||||
|
|:---:|:---|:---|
|
||||||
|
| 13 | JavaScript 基础与变量 | 读取并显示任务基础数据 |
|
||||||
|
| 14 | 条件判断与循环 | 完成任务分类与批量渲染 |
|
||||||
|
| 15 | 函数与事件处理 | 完成按钮事件和功能封装 |
|
||||||
|
| 16 | DOM 操作与任务添加 | 实现动态添加任务 |
|
||||||
|
| 17 | 任务状态管理与本地存储 | 实现状态切换、删除和持久化 |
|
||||||
|
| 18 | 系统整合、测试与成果展示 | 完成系统验收和项目展示 |
|
||||||
|
|
||||||
|
## 4. 文件结构
|
||||||
|
|
||||||
|
| 文件 | 职责 |
|
||||||
|
|:---|:---|
|
||||||
|
| `Web/titles.md` | 保存 18 个课时标题的课程大纲 |
|
||||||
|
| `Web/SKILLS.md` | 保存 Web 项目式教学设计角色、规则、流程和输出规范 |
|
||||||
|
| `Web/1.md` 至 `Web/18.md` | 分别保存 18 份单课时教学设计 |
|
||||||
|
|
||||||
|
除上述文件外，不修改 `C#` 和 `Python` 目录中的现有材料。
|
||||||
|
|
||||||
|
## 5. 单课时文档规范
|
||||||
|
|
||||||
|
每份教案必须包含以下部分：
|
||||||
|
|
||||||
|
1. 一级标题，格式为“项目名称——课时任务 教学设计”。
|
||||||
|
2. 基本信息表，包含课题、课时、教学目标、教学重难点、教学资源准备。
|
||||||
|
3. 教学目标分为知识目标、技能目标、素养目标。
|
||||||
|
4. 教学过程表，包含教学环节、教学内容、教师活动、学生活动、设计意图。
|
||||||
|
5. 教师活动和学生活动中的主要活动使用加粗四字标题。
|
||||||
|
6. 教学过程安排 5 个主要环节，各环节时长合计 40 分钟。
|
||||||
|
7. 板书设计，以简明文本图示呈现知识结构、项目流程或关键代码关系。
|
||||||
|
8. 教学成效与反思表，包含教学成效和教学反思，总字数不超过 300 字。
|
||||||
|
|
||||||
|
每份教案正文控制在约 800 至 1200 个中文字符，教学过程为主体，课堂任务必须在标准机房环境中可完成。
|
||||||
|
|
||||||
|
## 6. 教学设计原则
|
||||||
|
|
||||||
|
- 项目驱动：知识点必须直接服务于当前项目子任务。
|
||||||
|
- 理实一体：讲解后立即安排模仿、编码、调试或验收活动。
|
||||||
|
- 循序渐进：从页面结构到视觉布局，再到程序交互，控制单课认知负荷。
|
||||||
|
- 学生中心：安排需求分析、编码实践、协作测试、作品展示等具体活动。
|
||||||
|
- 规范前置：强调目录管理、语义化标签、样式复用、代码缩进、命名和浏览器调试规范。
|
||||||
|
- 成果可见：每课形成网页区域、样式组件或交互功能，并与前后课成果衔接。
|
||||||
|
- 技术适度：只使用原生 Web 技术，不涉及框架、工程化构建、服务器开发和复杂算法。
|
||||||
|
|
||||||
|
## 7. 验收规则
|
||||||
|
|
||||||
|
完成后执行自动与人工结合的检查：
|
||||||
|
|
||||||
|
- `Web` 中应有 `titles.md`、`SKILLS.md` 和编号 1 至 18 的教案，共 20 个 Markdown 文件。
|
||||||
|
- 18 份教案均以一级标题开头，并包含“教学过程”“板书设计”“教学成效与反思”。
|
||||||
|
- 每份教案的课时均为“1课时（40分钟）”。
|
||||||
|
- 每份教案教学过程中的时间数字之和均为 40。
|
||||||
|
- 每份教案均包含知识目标、技能目标、素养目标。
|
||||||
|
- 教学过程表的五列齐全，教师活动和学生活动均包含四字活动标题。
|
||||||
|
- 课次顺序与三个项目的能力递进一致，不重复设置同一课时任务。
|
||||||
|
- HTML、CSS 和 JavaScript 示例语法准确，能够在现代浏览器中直接运行。
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,299 @@
|
|||||||
|
# 可打印教学设计生成器设计方案
|
||||||
|
|
||||||
|
## 1. 建设目标
|
||||||
|
|
||||||
|
在现有 Vue 3 + TypeScript + Vite 项目中建设一个纯前端教学设计生成网站。用户一次上传多份 Markdown 教案后，网站将其解析为一整册可编辑、可打印的 A4 教学设计，并支持调整课次顺序、自动暂存和分别导出修改后的 Markdown 文件。
|
||||||
|
|
||||||
|
所有文件均在浏览器本地处理，不上传到服务器。
|
||||||
|
|
||||||
|
## 2. 输入材料与兼容范围
|
||||||
|
|
||||||
|
主要输入为 `data` 目录下的编号 Markdown 教案：
|
||||||
|
|
||||||
|
- `data/Web/1.md` 至 `data/Web/18.md`
|
||||||
|
- `data/Python/1.md` 至 `data/Python/18.md`
|
||||||
|
- `data/C#/1.md` 至 `data/C#/19.md`
|
||||||
|
|
||||||
|
标准教案通常包含：
|
||||||
|
|
||||||
|
1. 一级标题
|
||||||
|
2. 基本信息表
|
||||||
|
3. `## 教学过程`
|
||||||
|
4. 教学过程五列表格
|
||||||
|
5. `## 板书设计`
|
||||||
|
6. `## 教学成效与反思`
|
||||||
|
7. 教学成效与反思表
|
||||||
|
|
||||||
|
部分 C# 教案缺少板书、教学过程或反思章节。系统必须尽量解析这些文件，不因局部缺失拒绝整批导入。
|
||||||
|
|
||||||
|
## 3. 核心产品决策
|
||||||
|
|
||||||
|
- 采用左侧课次导航、右侧 A4 页面直接编辑的工作区。
|
||||||
|
- 上传后按文件名中的数字自然排序。
|
||||||
|
- 左侧列表支持拖拽调整课次顺序。
|
||||||
|
- 整册包含一张封面，不生成目录。
|
||||||
|
- 封面可编辑课程名称和教师姓名。
|
||||||
|
- 每份教案在打印时独立起页。
|
||||||
|
- 板书设计保留在教案中并参与打印。
|
||||||
|
- 编辑结果自动暂存在浏览器本地。
|
||||||
|
- 修改后的 Markdown 按原文件分别生成，并打包为 ZIP 下载。
|
||||||
|
- 格式不完整的文件仍然导入，缺失区域留空并显示警告。
|
||||||
|
|
||||||
|
## 4. 技术方案
|
||||||
|
|
||||||
|
采用结构化解析器和统一教案数据模型，而不是直接编辑 Markdown DOM。
|
||||||
|
|
||||||
|
技术栈：
|
||||||
|
|
||||||
|
- Vue 3
|
||||||
|
- TypeScript
|
||||||
|
- Vite
|
||||||
|
- 浏览器 File API
|
||||||
|
- 浏览器打印 API
|
||||||
|
- `localStorage` 或等价浏览器本地存储
|
||||||
|
- 用于生成 ZIP 的轻量前端库
|
||||||
|
|
||||||
|
系统不依赖后端、数据库或外部文件服务。
|
||||||
|
|
||||||
|
## 5. 系统架构
|
||||||
|
|
||||||
|
### 5.1 MarkdownParser
|
||||||
|
|
||||||
|
负责把单个 Markdown 文件解析为统一的 `TeachingDesign` 对象。
|
||||||
|
|
||||||
|
职责：
|
||||||
|
|
||||||
|
- 识别一级标题及课题名称。
|
||||||
|
- 解析基本信息表。
|
||||||
|
- 拆分知识目标、技能目标和素养目标。
|
||||||
|
- 拆分重点和难点。
|
||||||
|
- 解析教学过程表及每个教学环节的时间。
|
||||||
|
- 提取板书设计代码块或正文。
|
||||||
|
- 解析教学成效和教学反思。
|
||||||
|
- 保存无法归类的附加内容。
|
||||||
|
- 生成不阻断导入的解析警告。
|
||||||
|
|
||||||
|
### 5.2 TeachingDesign 数据模型
|
||||||
|
|
||||||
|
每个教案包含：
|
||||||
|
|
||||||
|
- 唯一标识
|
||||||
|
- 原文件名
|
||||||
|
- 当前排序位置
|
||||||
|
- 标题
|
||||||
|
- 课题
|
||||||
|
- 课时
|
||||||
|
- 知识目标
|
||||||
|
- 技能目标
|
||||||
|
- 素养目标
|
||||||
|
- 教学重点
|
||||||
|
- 教学难点
|
||||||
|
- 教学资源准备
|
||||||
|
- 教学过程环节数组
|
||||||
|
- 板书设计
|
||||||
|
- 教学成效
|
||||||
|
- 教学反思
|
||||||
|
- 附加内容
|
||||||
|
- 解析警告数组
|
||||||
|
|
||||||
|
每个教学环节包含：
|
||||||
|
|
||||||
|
- 教学环节名称
|
||||||
|
- 时间
|
||||||
|
- 教学内容
|
||||||
|
- 教师活动
|
||||||
|
- 学生活动
|
||||||
|
- 设计意图
|
||||||
|
|
||||||
|
### 5.3 Workspace
|
||||||
|
|
||||||
|
工作区由固定工具栏、课次侧栏和 A4 编辑区组成。
|
||||||
|
|
||||||
|
工具栏提供：
|
||||||
|
|
||||||
|
- 上传或追加 Markdown
|
||||||
|
- 打印整册
|
||||||
|
- 导出 Markdown ZIP
|
||||||
|
- 清空当前整册
|
||||||
|
|
||||||
|
课次侧栏提供：
|
||||||
|
|
||||||
|
- 封面入口
|
||||||
|
- 课次编号和课题摘要
|
||||||
|
- 拖拽排序
|
||||||
|
- 当前选中状态
|
||||||
|
- 每课解析警告状态
|
||||||
|
|
||||||
|
### 5.4 A4Editor
|
||||||
|
|
||||||
|
右侧仅展示封面或当前选中的一份教案。
|
||||||
|
|
||||||
|
编辑方式：
|
||||||
|
|
||||||
|
- 表格字段在 A4 页面内直接编辑。
|
||||||
|
- 教学过程支持增删环节。
|
||||||
|
- 板书设计使用适合多行文本的编辑区域。
|
||||||
|
- 缺失字段显示空白可编辑区域。
|
||||||
|
- 编辑状态只在屏幕上可见，打印时隐藏。
|
||||||
|
|
||||||
|
页面宽度按 A4 比例显示，并允许根据浏览器宽度缩放预览。
|
||||||
|
|
||||||
|
### 5.5 PrintBook
|
||||||
|
|
||||||
|
打印时渲染完整整册，而不是只打印当前选中教案。
|
||||||
|
|
||||||
|
规则：
|
||||||
|
|
||||||
|
- 第一页为封面。
|
||||||
|
- 每份教案从新页开始。
|
||||||
|
- 隐藏工具栏、侧栏、按钮、拖拽控件、警告和编辑边框。
|
||||||
|
- A4 页面使用统一页边距和中文字体栈。
|
||||||
|
- 教学过程表允许跨页。
|
||||||
|
- 跨页后重复教学过程表头。
|
||||||
|
- 单个教学环节行尽量避免拆分。
|
||||||
|
- 板书和反思标题避免与正文分离。
|
||||||
|
|
||||||
|
### 5.6 Storage
|
||||||
|
|
||||||
|
系统在内容、顺序或封面信息变化后自动暂存。
|
||||||
|
|
||||||
|
暂存内容包括：
|
||||||
|
|
||||||
|
- 封面课程名称
|
||||||
|
- 教师姓名
|
||||||
|
- 全部教案结构化数据
|
||||||
|
- 当前课次顺序
|
||||||
|
- 当前选中页面
|
||||||
|
|
||||||
|
重新打开页面时提示恢复最近一次未清空的整册。存储失败不得中断编辑。
|
||||||
|
|
||||||
|
### 5.7 MarkdownExporter
|
||||||
|
|
||||||
|
导出器把当前结构化数据重新生成规范 Markdown。
|
||||||
|
|
||||||
|
导出规则：
|
||||||
|
|
||||||
|
- 每份教案保留原文件名。
|
||||||
|
- ZIP 内文件顺序通过文件名和当前排序清单体现。
|
||||||
|
- 输出统一使用标准标题、基本信息表、教学过程表、板书设计和反思表结构。
|
||||||
|
- 保留加粗、行内代码、列表、换行和代码块等 Markdown 内容。
|
||||||
|
- 附加内容放在明确的附加章节，避免导入时无法识别的正文丢失。
|
||||||
|
- 不保证原文件空格、换行和表格对齐符完全不变。
|
||||||
|
|
||||||
|
## 6. 解析兼容规则
|
||||||
|
|
||||||
|
解析器需要兼容：
|
||||||
|
|
||||||
|
- LF 和 CRLF 换行。
|
||||||
|
- 全角和半角冒号。
|
||||||
|
- `1课时（40分钟）` 与 `1课时(40分钟)`。
|
||||||
|
- 不同长度的 Markdown 表格分隔符。
|
||||||
|
- `<br>`、`<br/>` 和 `<br />`。
|
||||||
|
- 带序号或不带序号的教学环节。
|
||||||
|
- `（6分钟）`、`(6分钟)` 等时间写法。
|
||||||
|
- 板书使用围栏代码块或普通段落。
|
||||||
|
- 缺失章节、空单元格和额外正文。
|
||||||
|
|
||||||
|
解析失败分为字段级警告，不将单个字段问题升级为整份文件失败。只有无法读取文件文本时，才把该文件标记为导入失败。
|
||||||
|
|
||||||
|
## 7. 用户流程
|
||||||
|
|
||||||
|
1. 用户在初始页拖入或选择多份 `.md` 文件。
|
||||||
|
2. 系统自然排序并批量解析文件。
|
||||||
|
3. 系统显示工作区及解析结果摘要。
|
||||||
|
4. 用户编辑封面课程名称和教师姓名。
|
||||||
|
5. 用户在左侧切换课次，直接编辑右侧 A4 页面。
|
||||||
|
6. 用户通过拖拽调整课次顺序。
|
||||||
|
7. 系统在每次修改后自动暂存。
|
||||||
|
8. 用户点击打印整册，浏览器打开打印界面。
|
||||||
|
9. 用户点击导出 Markdown，下载包含所有修改后文件的 ZIP。
|
||||||
|
|
||||||
|
用户可以追加文件。文件名冲突时必须提示用户选择替换或保留两份，不能静默覆盖。
|
||||||
|
|
||||||
|
## 8. 错误与状态反馈
|
||||||
|
|
||||||
|
系统应提供以下反馈：
|
||||||
|
|
||||||
|
- 文件格式不支持。
|
||||||
|
- 文件读取失败。
|
||||||
|
- 单份教案缺少章节或字段。
|
||||||
|
- 教学过程表列数异常。
|
||||||
|
- 暂存失败或空间不足。
|
||||||
|
- ZIP 生成失败。
|
||||||
|
- 当前没有可打印或可导出的教案。
|
||||||
|
|
||||||
|
错误提示不得清除已经成功解析或编辑的内容。
|
||||||
|
|
||||||
|
## 9. 视觉设计
|
||||||
|
|
||||||
|
整体采用克制的教学文档工具风格：
|
||||||
|
|
||||||
|
- 页面背景使用浅灰色，A4 纸张使用白色和轻阴影。
|
||||||
|
- 主色使用稳重的绿色，用于当前课次、按钮和章节标识。
|
||||||
|
- 正文优先使用系统中文无衬线字体。
|
||||||
|
- A4 标题可使用中文宋体类字体栈增强正式文档感。
|
||||||
|
- 编辑边框、警告和辅助提示只在屏幕模式显示。
|
||||||
|
- 移动端允许浏览和轻量编辑，但主要使用场景为桌面浏览器。
|
||||||
|
|
||||||
|
## 10. 测试策略
|
||||||
|
|
||||||
|
### 10.1 单元测试
|
||||||
|
|
||||||
|
覆盖：
|
||||||
|
|
||||||
|
- 数字文件名自然排序。
|
||||||
|
- 标准 Web 教案完整解析。
|
||||||
|
- Python 教案的半角标点和 CRLF 解析。
|
||||||
|
- C# 教案缺失章节时的容错处理。
|
||||||
|
- 教学目标和重难点拆分。
|
||||||
|
- 教学环节时间提取。
|
||||||
|
- Markdown 重新生成。
|
||||||
|
- 暂存序列化和恢复。
|
||||||
|
|
||||||
|
### 10.2 组件测试
|
||||||
|
|
||||||
|
覆盖：
|
||||||
|
|
||||||
|
- 批量上传。
|
||||||
|
- 课次切换。
|
||||||
|
- 页面内字段编辑。
|
||||||
|
- 教学环节增删。
|
||||||
|
- 拖拽排序。
|
||||||
|
- 警告展示。
|
||||||
|
- 封面编辑。
|
||||||
|
- ZIP 导出触发。
|
||||||
|
|
||||||
|
### 10.3 打印验证
|
||||||
|
|
||||||
|
使用浏览器打印预览人工检查：
|
||||||
|
|
||||||
|
- 封面独立一页。
|
||||||
|
- 每份教案独立起页。
|
||||||
|
- 控件全部隐藏。
|
||||||
|
- 长教学过程表跨页正常。
|
||||||
|
- 表头重复。
|
||||||
|
- 中文、代码和板书不溢出。
|
||||||
|
|
||||||
|
### 10.4 语料回归
|
||||||
|
|
||||||
|
批量导入仓库内全部编号教案，确认：
|
||||||
|
|
||||||
|
- Web 18 份均可解析。
|
||||||
|
- Python 18 份均可解析。
|
||||||
|
- C# 19 份均不会导致整批中断。
|
||||||
|
- 缺失章节会产生警告和空白编辑区。
|
||||||
|
- 导出后文件可再次导入。
|
||||||
|
|
||||||
|
## 11. 验收标准
|
||||||
|
|
||||||
|
- 可一次上传至少 20 份 Markdown 文件。
|
||||||
|
- 文件按数字自然排序，并可拖拽调整。
|
||||||
|
- 每份教案可在 A4 页面中直接编辑。
|
||||||
|
- 标准教案主要字段均能正确解析。
|
||||||
|
- 不完整教案可容错导入并显示警告。
|
||||||
|
- 板书设计可编辑且参与打印。
|
||||||
|
- 封面包含可编辑的课程名称和教师姓名。
|
||||||
|
- 自动暂存可恢复。
|
||||||
|
- 打印整册包含封面，且每份教案独立起页。
|
||||||
|
- 可下载包含全部修改后 Markdown 的 ZIP。
|
||||||
|
- 全部处理在浏览器本地完成。
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>faketeachingdesign</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3342
package-lock.json
generated
Normal file
3342
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
package.json
Normal file
33
package.json
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"name": "faketeachingdesign",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc -b && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test": "vitest run",
|
||||||
|
"test:watch": "vitest",
|
||||||
|
"test:coverage": "vitest run --coverage"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"jszip": "^3.10.1",
|
||||||
|
"markdown-it": "^14.2.0",
|
||||||
|
"vue": "^3.5.34"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@testing-library/jest-dom": "^6.9.1",
|
||||||
|
"@types/markdown-it": "^14.1.2",
|
||||||
|
"@types/node": "^24.12.3",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.6",
|
||||||
|
"@vitest/coverage-v8": "^4.1.8",
|
||||||
|
"@vue/test-utils": "^2.4.11",
|
||||||
|
"@vue/tsconfig": "^0.9.1",
|
||||||
|
"jsdom": "^29.1.1",
|
||||||
|
"typescript": "~6.0.2",
|
||||||
|
"vite": "^8.0.12",
|
||||||
|
"vitest": "^4.1.8",
|
||||||
|
"vue-tsc": "^3.2.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
public/icons.svg
Normal file
24
public/icons.svg
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
7
src/App.vue
Normal file
7
src/App.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import HelloWorld from './components/HelloWorld.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<HelloWorld />
|
||||||
|
</template>
|
||||||
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
1
src/assets/vite.svg
Normal file
1
src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
95
src/components/HelloWorld.vue
Normal file
95
src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import viteLogo from '../assets/vite.svg'
|
||||||
|
import heroImg from '../assets/hero.png'
|
||||||
|
import vueLogo from '../assets/vue.svg'
|
||||||
|
|
||||||
|
const count = ref(0)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section id="center">
|
||||||
|
<div class="hero">
|
||||||
|
<img :src="heroImg" class="base" width="170" height="179" alt="" />
|
||||||
|
<img :src="vueLogo" class="framework" alt="Vue logo" />
|
||||||
|
<img :src="viteLogo" class="vite" alt="Vite logo" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1>Get started</h1>
|
||||||
|
<p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="counter" @click="count++">
|
||||||
|
Count is {{ count }}
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="ticks"></div>
|
||||||
|
|
||||||
|
<section id="next-steps">
|
||||||
|
<div id="docs">
|
||||||
|
<svg class="icon" role="presentation" aria-hidden="true">
|
||||||
|
<use href="/icons.svg#documentation-icon"></use>
|
||||||
|
</svg>
|
||||||
|
<h2>Documentation</h2>
|
||||||
|
<p>Your questions, answered</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://vite.dev/" target="_blank">
|
||||||
|
<img class="logo" :src="viteLogo" alt="" />
|
||||||
|
Explore Vite
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://vuejs.org/" target="_blank">
|
||||||
|
<img class="button-icon" :src="vueLogo" alt="" />
|
||||||
|
Learn more
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="social">
|
||||||
|
<svg class="icon" role="presentation" aria-hidden="true">
|
||||||
|
<use href="/icons.svg#social-icon"></use>
|
||||||
|
</svg>
|
||||||
|
<h2>Connect with us</h2>
|
||||||
|
<p>Join the Vite community</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||||
|
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||||
|
<use href="/icons.svg#github-icon"></use>
|
||||||
|
</svg>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://chat.vite.dev/" target="_blank">
|
||||||
|
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||||
|
<use href="/icons.svg#discord-icon"></use>
|
||||||
|
</svg>
|
||||||
|
Discord
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://x.com/vite_js" target="_blank">
|
||||||
|
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||||
|
<use href="/icons.svg#x-icon"></use>
|
||||||
|
</svg>
|
||||||
|
X.com
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||||
|
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||||
|
<use href="/icons.svg#bluesky-icon"></use>
|
||||||
|
</svg>
|
||||||
|
Bluesky
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="ticks"></div>
|
||||||
|
<section id="spacer"></section>
|
||||||
|
</template>
|
||||||
87
src/domain/teachingDesign.test.ts
Normal file
87
src/domain/teachingDesign.test.ts
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
import { describe, expect, expectTypeOf, it } from 'vitest'
|
||||||
|
import {
|
||||||
|
BOOK_SCHEMA_VERSION,
|
||||||
|
createEmptyBook,
|
||||||
|
createEmptyTeachingDesign,
|
||||||
|
createTeachingStep,
|
||||||
|
type DesignId,
|
||||||
|
type TeachingBook,
|
||||||
|
type TeachingDesign,
|
||||||
|
} from './teachingDesign'
|
||||||
|
|
||||||
|
describe('createTeachingStep', () => {
|
||||||
|
it('creates a named step with editable defaults and an ID', () => {
|
||||||
|
const step = createTeachingStep(3)
|
||||||
|
|
||||||
|
expect(step.id).not.toBe('')
|
||||||
|
expect(step).toMatchObject({
|
||||||
|
name: '3. 教学环节',
|
||||||
|
duration: '',
|
||||||
|
content: '',
|
||||||
|
teacherActivity: '',
|
||||||
|
studentActivity: '',
|
||||||
|
intention: '',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('createEmptyTeachingDesign', () => {
|
||||||
|
it('creates editable defaults for missing lesson sections', () => {
|
||||||
|
const design = createEmptyTeachingDesign('8.md')
|
||||||
|
|
||||||
|
expect(design.id).not.toBe('')
|
||||||
|
expect(design.originalFilename).toBe('8.md')
|
||||||
|
expect(design.processSteps).toHaveLength(1)
|
||||||
|
expect(design.processSteps[0]?.id).not.toBe('')
|
||||||
|
expect(design.boardDesign).toBe('')
|
||||||
|
expect(design.warnings).toEqual([])
|
||||||
|
})
|
||||||
|
|
||||||
|
it('creates independent nested state for each design', () => {
|
||||||
|
const first = createEmptyTeachingDesign('1.md')
|
||||||
|
const second = createEmptyTeachingDesign('2.md')
|
||||||
|
|
||||||
|
first.processSteps[0]!.name = 'Changed'
|
||||||
|
first.warnings.push({ code: 'missing-title', message: 'Missing title' })
|
||||||
|
|
||||||
|
expect(first.id).not.toBe(second.id)
|
||||||
|
expect(first.processSteps).not.toBe(second.processSteps)
|
||||||
|
expect(first.processSteps[0]).not.toBe(second.processSteps[0])
|
||||||
|
expect(second.processSteps[0]?.name).toBe('1. 教学环节')
|
||||||
|
expect(second.warnings).toEqual([])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('createEmptyBook', () => {
|
||||||
|
it('creates the schema defaults with cover selected and an ISO timestamp', () => {
|
||||||
|
const book = createEmptyBook()
|
||||||
|
|
||||||
|
expect(book.schemaVersion).toBe(BOOK_SCHEMA_VERSION)
|
||||||
|
expect(book.selectedId).toBe('cover')
|
||||||
|
expect(new Date(book.updatedAt).toISOString()).toBe(book.updatedAt)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('creates independent cover and design collections', () => {
|
||||||
|
const first = createEmptyBook()
|
||||||
|
const second = createEmptyBook()
|
||||||
|
|
||||||
|
first.cover.courseName = 'Changed'
|
||||||
|
first.designs.push(createEmptyTeachingDesign('1.md'))
|
||||||
|
|
||||||
|
expect(first.cover).not.toBe(second.cover)
|
||||||
|
expect(first.designs).not.toBe(second.designs)
|
||||||
|
expect(second.cover.courseName).toBe('')
|
||||||
|
expect(second.designs).toEqual([])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('domain types', () => {
|
||||||
|
it('uses branded string design IDs and literal schema versions', () => {
|
||||||
|
expectTypeOf<DesignId>().toExtend<string>()
|
||||||
|
expectTypeOf<TeachingDesign['id']>().toEqualTypeOf<DesignId>()
|
||||||
|
expectTypeOf<TeachingBook['selectedId']>().toEqualTypeOf<'cover' | DesignId>()
|
||||||
|
expectTypeOf<TeachingBook['schemaVersion']>().toEqualTypeOf<
|
||||||
|
typeof BOOK_SCHEMA_VERSION
|
||||||
|
>()
|
||||||
|
})
|
||||||
|
})
|
||||||
112
src/domain/teachingDesign.ts
Normal file
112
src/domain/teachingDesign.ts
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
export const BOOK_SCHEMA_VERSION = 1
|
||||||
|
|
||||||
|
declare const designIdBrand: unique symbol
|
||||||
|
|
||||||
|
export type DesignId = string & {
|
||||||
|
readonly [designIdBrand]: true
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ParseWarningCode =
|
||||||
|
| 'missing-title'
|
||||||
|
| 'missing-basic-field'
|
||||||
|
| 'missing-process'
|
||||||
|
| 'invalid-process-table'
|
||||||
|
| 'missing-board'
|
||||||
|
| 'missing-reflection'
|
||||||
|
| 'unclassified-content'
|
||||||
|
|
||||||
|
export interface ParseWarning {
|
||||||
|
code: ParseWarningCode
|
||||||
|
message: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TeachingStep {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
duration: string
|
||||||
|
content: string
|
||||||
|
teacherActivity: string
|
||||||
|
studentActivity: string
|
||||||
|
intention: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TeachingDesign {
|
||||||
|
id: DesignId
|
||||||
|
originalFilename: string
|
||||||
|
title: string
|
||||||
|
topic: string
|
||||||
|
duration: string
|
||||||
|
knowledgeObjective: string
|
||||||
|
skillObjective: string
|
||||||
|
literacyObjective: string
|
||||||
|
keyPoint: string
|
||||||
|
difficultPoint: string
|
||||||
|
resources: string
|
||||||
|
processSteps: TeachingStep[]
|
||||||
|
boardDesign: string
|
||||||
|
effectiveness: string
|
||||||
|
reflection: string
|
||||||
|
additionalContent: string
|
||||||
|
warnings: ParseWarning[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BookCover {
|
||||||
|
courseName: string
|
||||||
|
teacherName: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TeachingBook {
|
||||||
|
schemaVersion: typeof BOOK_SCHEMA_VERSION
|
||||||
|
cover: BookCover
|
||||||
|
designs: TeachingDesign[]
|
||||||
|
selectedId: 'cover' | DesignId
|
||||||
|
updatedAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDesignId(): DesignId {
|
||||||
|
return crypto.randomUUID() as DesignId
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createTeachingStep(index = 1): TeachingStep {
|
||||||
|
return {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
name: `${index}. 教学环节`,
|
||||||
|
duration: '',
|
||||||
|
content: '',
|
||||||
|
teacherActivity: '',
|
||||||
|
studentActivity: '',
|
||||||
|
intention: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createEmptyTeachingDesign(filename: string): TeachingDesign {
|
||||||
|
return {
|
||||||
|
id: createDesignId(),
|
||||||
|
originalFilename: filename,
|
||||||
|
title: '',
|
||||||
|
topic: '',
|
||||||
|
duration: '',
|
||||||
|
knowledgeObjective: '',
|
||||||
|
skillObjective: '',
|
||||||
|
literacyObjective: '',
|
||||||
|
keyPoint: '',
|
||||||
|
difficultPoint: '',
|
||||||
|
resources: '',
|
||||||
|
processSteps: [createTeachingStep()],
|
||||||
|
boardDesign: '',
|
||||||
|
effectiveness: '',
|
||||||
|
reflection: '',
|
||||||
|
additionalContent: '',
|
||||||
|
warnings: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createEmptyBook(): TeachingBook {
|
||||||
|
return {
|
||||||
|
schemaVersion: BOOK_SCHEMA_VERSION,
|
||||||
|
cover: { courseName: '', teacherName: '' },
|
||||||
|
designs: [],
|
||||||
|
selectedId: 'cover',
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
}
|
||||||
|
}
|
||||||
5
src/main.ts
Normal file
5
src/main.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
115
src/services/markdownTable.test.ts
Normal file
115
src/services/markdownTable.test.ts
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
import { describe, expect, it } from 'vitest'
|
||||||
|
import { extractMarkdownTable, splitMarkdownRow } from './markdownTable'
|
||||||
|
|
||||||
|
describe('splitMarkdownRow', () => {
|
||||||
|
it('keeps pipes inside code spans and escaped pipes inside cells', () => {
|
||||||
|
expect(splitMarkdownRow('| A | `x | y` | left \\| right |')).toEqual([
|
||||||
|
'A',
|
||||||
|
'`x | y`',
|
||||||
|
'left \\| right',
|
||||||
|
])
|
||||||
|
})
|
||||||
|
|
||||||
|
it('matches arbitrary backtick fence lengths and ignores escaped backticks', () => {
|
||||||
|
expect(splitMarkdownRow('| ``x | y`` | escaped \\` tick |')).toEqual([
|
||||||
|
'``x | y``',
|
||||||
|
'escaped \\` tick',
|
||||||
|
])
|
||||||
|
})
|
||||||
|
|
||||||
|
it('treats an unmatched backtick as literal text', () => {
|
||||||
|
expect(splitMarkdownRow('| A | unmatched `code | B |')).toEqual([
|
||||||
|
'A',
|
||||||
|
'unmatched `code',
|
||||||
|
'B',
|
||||||
|
])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('extractMarkdownTable', () => {
|
||||||
|
it('finds a table and gathers its contiguous body rows', () => {
|
||||||
|
const lines = [
|
||||||
|
'intro',
|
||||||
|
'| A | B |',
|
||||||
|
'| --- | :---: |',
|
||||||
|
'| 1 | 2 |',
|
||||||
|
'',
|
||||||
|
]
|
||||||
|
|
||||||
|
expect(extractMarkdownTable(lines)).toEqual({
|
||||||
|
start: 1,
|
||||||
|
end: 3,
|
||||||
|
header: ['A', 'B'],
|
||||||
|
rows: [['1', '2']],
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
['backtick', ['```markdown', '| Fake | Table |', '| --- | --- |', '```']],
|
||||||
|
['tilde', ['~~~~', '| Fake | Table |', '| --- | --- |', '~~~~']],
|
||||||
|
])('skips pseudo-tables inside %s fenced code', (_marker, fencedLines) => {
|
||||||
|
const lines = [
|
||||||
|
...fencedLines,
|
||||||
|
'',
|
||||||
|
'| Real | Table |',
|
||||||
|
'| --- | --- |',
|
||||||
|
'| 1 | 2 |',
|
||||||
|
]
|
||||||
|
const realTableStart = fencedLines.length + 1
|
||||||
|
|
||||||
|
expect(extractMarkdownTable(lines)).toEqual({
|
||||||
|
start: realTableStart,
|
||||||
|
end: realTableStart + 2,
|
||||||
|
header: ['Real', 'Table'],
|
||||||
|
rows: [['1', '2']],
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
['four spaces', ' '],
|
||||||
|
['a tab', '\t'],
|
||||||
|
])('skips pseudo-tables indented with %s', (_indentation, indent) => {
|
||||||
|
const lines = [
|
||||||
|
`${indent}| Fake | Table |`,
|
||||||
|
`${indent}| --- | --- |`,
|
||||||
|
`${indent}| 0 | 0 |`,
|
||||||
|
'',
|
||||||
|
'| Real | Table |',
|
||||||
|
'| --- | --- |',
|
||||||
|
'| 1 | 2 |',
|
||||||
|
]
|
||||||
|
|
||||||
|
expect(extractMarkdownTable(lines)).toEqual({
|
||||||
|
start: 4,
|
||||||
|
end: 6,
|
||||||
|
header: ['Real', 'Table'],
|
||||||
|
rows: [['1', '2']],
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('starts its table search at fromIndex', () => {
|
||||||
|
const lines = [
|
||||||
|
'| First | Table |',
|
||||||
|
'| --- | --- |',
|
||||||
|
'| 1 | 1 |',
|
||||||
|
'',
|
||||||
|
'| Second | Table |',
|
||||||
|
'| --- | --- |',
|
||||||
|
'| 2 | 2 |',
|
||||||
|
]
|
||||||
|
|
||||||
|
expect(extractMarkdownTable(lines, 4)).toEqual({
|
||||||
|
start: 4,
|
||||||
|
end: 6,
|
||||||
|
header: ['Second', 'Table'],
|
||||||
|
rows: [['2', '2']],
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('returns null when no valid table exists', () => {
|
||||||
|
expect(extractMarkdownTable(['plain text'])).toBeNull()
|
||||||
|
expect(
|
||||||
|
extractMarkdownTable(['| A | B |', '| -- | not-a-divider |']),
|
||||||
|
).toBeNull()
|
||||||
|
})
|
||||||
|
})
|
||||||
147
src/services/markdownTable.ts
Normal file
147
src/services/markdownTable.ts
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
function isEscaped(value: string, index: number): boolean {
|
||||||
|
let backslashCount = 0
|
||||||
|
|
||||||
|
for (let cursor = index - 1; cursor >= 0 && value[cursor] === '\\'; cursor--) {
|
||||||
|
backslashCount++
|
||||||
|
}
|
||||||
|
|
||||||
|
return backslashCount % 2 === 1
|
||||||
|
}
|
||||||
|
|
||||||
|
function hasMatchingCodeFence(
|
||||||
|
value: string,
|
||||||
|
start: number,
|
||||||
|
fenceLength: number,
|
||||||
|
): boolean {
|
||||||
|
for (let index = start + fenceLength; index < value.length; ) {
|
||||||
|
if (value[index] !== '`') {
|
||||||
|
index++
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
let runLength = 1
|
||||||
|
|
||||||
|
while (value[index + runLength] === '`') {
|
||||||
|
runLength++
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isEscaped(value, index) && runLength === fenceLength) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
index += runLength
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MarkdownTable {
|
||||||
|
start: number
|
||||||
|
end: number
|
||||||
|
header: string[]
|
||||||
|
rows: string[][]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function splitMarkdownRow(row: string): string[] {
|
||||||
|
const cells: string[] = []
|
||||||
|
let cell = ''
|
||||||
|
let codeFenceLength = 0
|
||||||
|
|
||||||
|
for (let index = 0; index < row.length; ) {
|
||||||
|
const character = row[index]!
|
||||||
|
|
||||||
|
if (character === '`' && !isEscaped(row, index)) {
|
||||||
|
let runLength = 1
|
||||||
|
|
||||||
|
while (row[index + runLength] === '`') {
|
||||||
|
runLength++
|
||||||
|
}
|
||||||
|
|
||||||
|
cell += row.slice(index, index + runLength)
|
||||||
|
|
||||||
|
if (
|
||||||
|
codeFenceLength === 0 &&
|
||||||
|
hasMatchingCodeFence(row, index, runLength)
|
||||||
|
) {
|
||||||
|
codeFenceLength = runLength
|
||||||
|
} else if (codeFenceLength === runLength) {
|
||||||
|
codeFenceLength = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
index += runLength
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
character === '|' &&
|
||||||
|
codeFenceLength === 0 &&
|
||||||
|
!isEscaped(row, index)
|
||||||
|
) {
|
||||||
|
cells.push(cell.trim())
|
||||||
|
cell = ''
|
||||||
|
index++
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
cell += character
|
||||||
|
index++
|
||||||
|
}
|
||||||
|
|
||||||
|
cells.push(cell.trim())
|
||||||
|
|
||||||
|
if (cells[0] === '') {
|
||||||
|
cells.shift()
|
||||||
|
}
|
||||||
|
if (cells.at(-1) === '') {
|
||||||
|
cells.pop()
|
||||||
|
}
|
||||||
|
|
||||||
|
return cells
|
||||||
|
}
|
||||||
|
|
||||||
|
const dividerCellPattern = /^:?-{3,}:?$/
|
||||||
|
|
||||||
|
function startsWithPipe(line: string): boolean {
|
||||||
|
return line.trimStart().startsWith('|')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function extractMarkdownTable(
|
||||||
|
lines: readonly string[],
|
||||||
|
fromIndex = 0,
|
||||||
|
): MarkdownTable | null {
|
||||||
|
for (
|
||||||
|
let start = Math.max(0, fromIndex);
|
||||||
|
start < lines.length - 1;
|
||||||
|
start++
|
||||||
|
) {
|
||||||
|
const headerLine = lines[start]!
|
||||||
|
const dividerLine = lines[start + 1]!
|
||||||
|
|
||||||
|
if (!startsWithPipe(headerLine) || !startsWithPipe(dividerLine)) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
const header = splitMarkdownRow(headerLine)
|
||||||
|
const divider = splitMarkdownRow(dividerLine)
|
||||||
|
|
||||||
|
if (
|
||||||
|
header.length === 0 ||
|
||||||
|
divider.length !== header.length ||
|
||||||
|
!divider.every((cell) => dividerCellPattern.test(cell))
|
||||||
|
) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows: string[][] = []
|
||||||
|
let end = start + 1
|
||||||
|
|
||||||
|
while (end + 1 < lines.length && startsWithPipe(lines[end + 1]!)) {
|
||||||
|
end++
|
||||||
|
rows.push(splitMarkdownRow(lines[end]!))
|
||||||
|
}
|
||||||
|
|
||||||
|
return { start, end, header, rows }
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
}
|
||||||
15
src/services/naturalSort.test.ts
Normal file
15
src/services/naturalSort.test.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { describe, expect, it } from 'vitest'
|
||||||
|
import { sortFilesNaturally } from './naturalSort'
|
||||||
|
|
||||||
|
describe('sortFilesNaturally', () => {
|
||||||
|
it('sorts numbered filenames naturally without mutating the input', () => {
|
||||||
|
const files = [{ name: '10.md' }, { name: '2.md' }, { name: '1.md' }]
|
||||||
|
const original = [...files]
|
||||||
|
|
||||||
|
const sorted = sortFilesNaturally(files)
|
||||||
|
|
||||||
|
expect(sorted.map(({ name }) => name)).toEqual(['1.md', '2.md', '10.md'])
|
||||||
|
expect(files).toEqual(original)
|
||||||
|
expect(sorted).not.toBe(files)
|
||||||
|
})
|
||||||
|
})
|
||||||
12
src/services/naturalSort.ts
Normal file
12
src/services/naturalSort.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
const filenameCollator = new Intl.Collator('zh-CN', {
|
||||||
|
numeric: true,
|
||||||
|
sensitivity: 'base',
|
||||||
|
})
|
||||||
|
|
||||||
|
export function sortFilesNaturally<T extends { name: string }>(
|
||||||
|
files: readonly T[],
|
||||||
|
): T[] {
|
||||||
|
return [...files].sort((left, right) =>
|
||||||
|
filenameCollator.compare(left.name, right.name),
|
||||||
|
)
|
||||||
|
}
|
||||||
296
src/style.css
Normal file
296
src/style.css
Normal file
@@ -0,0 +1,296 @@
|
|||||||
|
:root {
|
||||||
|
--text: #6b6375;
|
||||||
|
--text-h: #08060d;
|
||||||
|
--bg: #fff;
|
||||||
|
--border: #e5e4e7;
|
||||||
|
--code-bg: #f4f3ec;
|
||||||
|
--accent: #aa3bff;
|
||||||
|
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||||
|
--accent-border: rgba(170, 59, 255, 0.5);
|
||||||
|
--social-bg: rgba(244, 243, 236, 0.5);
|
||||||
|
--shadow:
|
||||||
|
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||||
|
|
||||||
|
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
--mono: ui-monospace, Consolas, monospace;
|
||||||
|
|
||||||
|
font: 18px/145% var(--sans);
|
||||||
|
letter-spacing: 0.18px;
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--bg);
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--text: #9ca3af;
|
||||||
|
--text-h: #f3f4f6;
|
||||||
|
--bg: #16171d;
|
||||||
|
--border: #2e303a;
|
||||||
|
--code-bg: #1f2028;
|
||||||
|
--accent: #c084fc;
|
||||||
|
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||||
|
--accent-border: rgba(192, 132, 252, 0.5);
|
||||||
|
--social-bg: rgba(47, 48, 58, 0.5);
|
||||||
|
--shadow:
|
||||||
|
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#social .button-icon {
|
||||||
|
filter: invert(1) brightness(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
font-family: var(--heading);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-h);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 56px;
|
||||||
|
letter-spacing: -1.68px;
|
||||||
|
margin: 32px 0;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 36px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 118%;
|
||||||
|
letter-spacing: -0.24px;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
.counter {
|
||||||
|
font-family: var(--mono);
|
||||||
|
display: inline-flex;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--text-h);
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 135%;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: var(--code-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.base,
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
inset-inline: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
width: 170px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework {
|
||||||
|
z-index: 1;
|
||||||
|
top: 34px;
|
||||||
|
height: 28px;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||||
|
scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vite {
|
||||||
|
z-index: 0;
|
||||||
|
top: 107px;
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||||
|
scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 1126px;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
border-inline: 1px solid var(--border);
|
||||||
|
min-height: 100svh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 32px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 32px 0 0;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-h);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--social-bg);
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.button-icon {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
flex: 1 1 calc(50% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer {
|
||||||
|
height: 88px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticks {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4.5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/test/setup.ts
Normal file
1
src/test/setup.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import '@testing-library/jest-dom/vitest'
|
||||||
14
tsconfig.app.json
Normal file
14
tsconfig.app.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"types": ["vite/client", "vitest/globals"],
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "esnext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
12
vite.config.ts
Normal file
12
vite.config.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
/// <reference types="vitest/config" />
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
test: {
|
||||||
|
environment: 'jsdom',
|
||||||
|
setupFiles: ['./src/test/setup.ts'],
|
||||||
|
css: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user