《Vue企业开发实战》电子教案12-snail mock与Axios

《网站开发技术（VUE）》·教案12第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目5大觅项目中与服务端通信授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目5的任务3、任务4。了解snailmock工具，掌握Axios安装、实例、GET/POST、封装与拦截器，能用get获取接口数据。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务3snailmock工具定位与使用场景；与自建mock的关系教材5.3任务4Axios安装及配置安装；API方法；GET/POST；封装；拦截器；上机get取数教材5.4三、学情分析学生已能写出mockJSON，但组件里仍不会发请求，也不理解拦截器。本课要求装好Axios，get到本地模拟数据并在控制台或页面看到。四、教学目标（一）知识目标1.了解snailmock的作用。2.掌握Axios安装、get/post与实例封装。3.理解请求/响应拦截器的用途。（二）能力目标1.能安装Axios并发起get。2.能进行初步封装便于复用。3.能处理基本错误信息。（三）素质目标1.培养接口规范与数据安全意识。2.对错误信息不在页面上泄露敏感细节。3.规范操作。五、教学重点与难点类型内容突破办法重点Axiosget与封装从直接axios.get到抽实例难点拦截器何时执行在日志里看请求前后六、教学方法与准备方法：工具介绍、封装演示、理实一体。导入用“每个组件都写一长串fetch不好维护”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示组件内直接堆路径和headers。提问：换基地址要改几处？引出封装与拦截器。顺带介绍snailmock可辅助出数。回忆上次的mockJSON。从痛点进入工具层。明确学习目标出示目标：get成功、有初步封装。对照目标勾画。用拿到数据当达标。任务3–4讲解简介snailmock。演示npm安装Axios、get/post、创建实例、拦截器加日志或token位。强调错误进catch。跟看封装文件结构。把零散API收成可复用模块。上机练习安装Axios；get本地模拟的健康或票务数据；控制台或页面展示。巡视baseURL、代理未开。独立get成功。通信链路第一次闭环。小结与作业回扣：mock出数，Axios取数。预告把配置落到大觅通信层。保存封装文件。下次接到项目接口约定。课堂检测：①Axios实例一般封装在哪一类文件？②拦截器能做什么？③get失败应该在哪里处理？八、上机任务与评价练习任务要求合格标准常见问题上机1安装Axios并用get获取模拟数据控制台或页面出现数据未装依赖、URL与代理不一致上机2抽出Axios实例，至少加一处拦截日志多处调用走同一实例每页重复new、拦截器写错过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.说明snailmock适用什么场合。2.默写Axiosget的基本写法。书面作业：画出“页面→封装→代理→mock”的调用链；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：___________________________________