《Vue企业开发实战》电子教案13-大觅服务端通信配置

《网站开发技术（VUE）》·教案13第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目5大觅项目中与服务端通信授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目5的任务5。完成大觅项目通信层基本配置，能按接口约定用Mock数据在页面展示，达到代理生效、数据可被Axios正确展示。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务5大觅服务端通信配置按接口约定整理请求；接入大觅页面；错误处理；联调检查清单教材5.5三、学情分析学生已能get通用模拟数据，但还没接到大觅具体页面和约定字段。本课要求列表或详情之一能展示mock数据，失败有提示。四、教学目标（一）知识目标1.理解大觅接口约定与页面字段的对应。2.掌握通信层配置要点（基地址、代理、封装）。3.知道联调失败时的检查顺序。（二）能力目标1.能把Axios调用接到大觅某一页。2.能展示列表或详情mock数据。3.能处理请求错误并给出提示。（三）素质目标1.依据接口约定先模拟、再联调。2.不篡改约定字段名。3.对数据安全负责。五、教学重点与难点类型内容突破办法重点页面字段与接口字段对齐对照约定表逐项勾难点联调失败定位代理/路径/方法/mock四步清单六、教学方法与准备方法：约定驱动、联调演示、理实一体。导入用接口文档或字段表。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入出示列表接口字段。提问：组件里写的movieName和接口的name不一致会怎样？对照自己页面的死数据字段。把规范意识放到取数之前。明确学习目标出示目标：大觅一页能展示mock，失败有提示。对照目标勾画。用可见列表当达标。任务5项目配置带学生把基地址、代理、封装接到大觅列表或详情。讲错误提示不要暴露堆栈。给出检查清单。勾选检查清单。把前两次课的零件装配进项目。上机练习完成大觅一页的mock展示；模拟失败看提示。对照教材作业中的API-Schema思路。页面出数，错误可复现提示。形成项目5的合格证据。小结与作业回扣调用链。预告用指令把数据真正“画”成列表和表单。保存工程。转入模板语法。课堂检测：①字段名与接口不一致会出现什么？②联调失败先查哪四步？③错误提示应避免什么？八、上机任务与评价练习任务要求合格标准常见问题上机1大觅列表或详情展示mock数据页面字段正确渲染未走封装、字段名写错上机2人为造错并给出友好提示catch中有提示，不影响整站白屏未处理reject、提示缺失过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.根据API-Schema思路整理一份大觅接口字段表。2.使用Axios的get调用本地模拟数据并在页面展示（教材作业2方向）。书面作业：写出本课联调检查清单；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：_________________________________________