《Vue企业开发实战》电子教案4-Module与Promise

《网站开发技术（VUE）》·教案4第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目2大觅项目中ES6的使用授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目2的任务5、任务6。掌握export/import与exportdefault，理解Promise状态、then/catch及all/race，能把异步请求接到组件加载思路上。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务5Module语法模块概述；export与import；exportdefault；在.vue/路由文件中的应用教材2.5任务6Promise对象含义与三种状态；then链式；catch；resolve/reject/all/race；在Vue3中加载数据教材2.6三、学情分析学生已能写箭头函数和Map，但代码仍堆在一个文件里，异步习惯用层层回调。本课要求能拆模块，并能用Promise处理成功/失败，理解为何后面要用Axios。四、教学目标（一）知识目标1.掌握export、import和exportdefault的选用。2.理解Promise的pending/fulfilled/rejected及状态不可逆。3.熟悉then链式、catch以及all/race的含义。（二）能力目标1.能把工具函数拆到模块并在另一文件导入使用。2.能创建Promise并用then/catch处理结果。3.能说明在onMounted中用Promise加载数据的基本写法。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证的习惯。2.培养严谨的编码意识和精益求精的态度。3.在分组排错中培养沟通协作。五、教学重点与难点类型内容突破办法重点export与exportdefault的区别同一段代码两种导出，对照导入写法重点then链式与catch先成功再失败，看回调走哪条难点Promise状态不可逆先resolve再reject，观察只走成功六、教学方法与准备方法：任务驱动、拆文件演示、理实一体。导入用“一个js里全是函数不好维护”，新授按“模块→Promise”推进。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示单文件堆砌的函数列表。提问：在Vue工程里.vue、路由、工具函数如何互相引用？说明本课完成模块化与异步入门。回忆dm工程里的import。把语法接到学生已有的工程文件。明确学习目标出示目标：会拆模块、会写Promise。对照目标勾画。避免把本课上成纯语法课。任务5Module语法讲每个.vue都是模块。演示分别导出、统一导出、默认导出及对应import。强调default导入名可自定。跟做拆分，比较两种export。为组件化引用打基础。上机练习1把两个函数拆到module文件，在入口import后调用。思考用export还是exportdefault。独立拆分，运行无报错。用文件结构变化检验模块化。任务6Promise对象讲executor立即执行、resolve/reject、状态不可逆。演示then链式、catch、all/race。点明Vue3中常在onMounted里取数。画出三种状态；口述all与race差别。为项目5的Axios做铺垫。上机练习2写一个delay或模拟取数的Promise，成功走then，失败走catch。选做Promise.all。独立完成并解释输出顺序。把异步从概念变成可运行代码。小结与作业串线：模块让文件可维护，Promise让异步可编排。预告项目3路由。保存示例，记录作业。收束项目2并转向页面组织。课堂检测：①exportdefault导入时名称能否另取？②Promise在resolve之后再reject会怎样？③Promise.all与race的差别是什么？八、上机任务与评价练习任务要求合格标准常见问题上机1拆分模块并用import调用两个文件协同运行，导入路径正确扩展名遗漏、默认/命名导出混用上机2编写Promise，覆盖then与catch成功、失败两条路径都能演示executor未调用resolve、未处理错误过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述Module语法的应用场景。2.利用Map筛选JSON数组（教材作业1）。3.实现timeout方法，指定时间后Promise变为resolved（教材作业2）。书面作业：用自己的话说明Promise如何避免回调地狱；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：_____