《Vue企业开发实战》电子教案26-二维码插件

《网站开发技术（VUE）》·教案26第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目9大觅项目中插件的使用授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目9的任务3。掌握二维码插件生成方法，能在购票或支付成功场景生成二维码；达到地图可显示、Pinia可共享、二维码可生成。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务3二维码插件使用场景；QRCode插件使用；在支付/出票页生成教材9.3三、学情分析学生已接好地图和Pinia，支付成功后如何把订单号变成可扫码图还不清楚。本课要求能根据字符串生成二维码。四、教学目标（一）知识目标1.了解二维码在票务、支付中的用途。2.掌握选用与调用二维码库的基本方法。3.理解生成内容通常是订单号或校验地址。（二）能力目标1.能安装并在组件中生成二维码。2.能把订单号或模拟链接变成二维码图。3.能说明生成失败时的检查点。（三）素质目标1.按业务需要选型并接入插件。2.不把无意义的敏感信息编进码。3.规范操作。五、教学重点与难点类型内容突破办法重点根据文本生成二维码支付成功页展示订单码难点生成时机与容器有数据再生成，避免空字符串六、教学方法与准备方法：场景驱动、演示生成、理实一体。导入用“取票要扫码”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示支付成功/取票。提问：纸质票不方便，电子码怎么来？引出二维码插件。说出码里通常放什么。用出票场景定义本课。明确学习目标出示目标：输入字符串能出码。对照目标勾画。用可见码图当达标。任务3讲解讲使用场景与库的基本调用。演示把订单号交给组件生成。提醒空数据不要生成。可与Pinia中的订单号结合。记录调用步骤。接到上节的共享状态。上机练习在成功页根据模拟订单号生成二维码。巡视容器、依赖未装、在未挂载时调用。独立生成并可截图验收。项目9三件套收齐。小结与作业回扣三插件。预告项目10按页面把技能点串起来做综合。保存页面。进入总结与联调。课堂检测：①二维码内容一般是什么？②为什么要等有订单号再生成？③本项目三件插件分别解决什么问题？八、上机任务与评价练习任务要求合格标准常见问题上机1根据模拟订单号生成二维码页面出现可识别的码图空字符串生成、容器不存在、未装库过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.完成教材作业方向：综合地图等插件的多关键字检索（能说明思路即可）。2.说明二维码页与Pinia订单数据如何配合。书面作业：用表格列出地图、Pinia、二维码的场景与验收标准；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：_____________________________________________