《Vue企业开发实战》电子教案11-Mock服务与语法

《网站开发技术（VUE）》·教案11第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目5大觅项目中与服务端通信授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目5的任务1、任务2。配置Vite开发代理，编写Mock文件，掌握Mock.js数据模板与占位符规范。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1Mock服务配置与使用vite.config.js开发代理；编写mock文件；使用说明教材5.1任务2Mock.js语法数据模板定义；数据占位符；常用规则教材5.2三、学情分析学生已能做静态数据和样式绑定，但没有后端时页面只能写死数组。本课要求代理能转到mock，能按模板生成列表数据。四、教学目标（一）知识目标1.掌握Vite开发代理的作用与配置位置。2.理解前后端分离下用Mock先行的原因。3.掌握Mock.js模板与占位符的基本写法。（二）能力目标1.能在vite.config.js中配置代理。2.能编写mock文件返回列表数据。3.能用占位符生成符合格式的模拟字段。（三）素质目标1.培养接口规范意识。2.不把模拟数据当成生产数据。3.规范操作与排错。五、教学重点与难点类型内容突破办法重点代理与mock文件对应关系对照config与请求路径难点Mock.js模板语法先一条记录再变成列表六、教学方法与准备方法：问题导入、对照配置、理实一体。导入用“详情页数据从哪来，后台还没好怎么办”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入提问：列表若写死在组件里，接口来了要改几处？引出Mock先行和代理。看当前页面的死数据。用维护成本说明本课价值。明确学习目标出示目标：代理通、mock能出数据。对照目标勾画。本课先服务与语法，Axios下次接。任务1代理与mock文件打开vite.config.js演示xy。讲解mock文件如何被命中、路径约定。在配置里标出target与rewrite。先通路，再谈数据长什么样。任务2Mock.js语法讲模板定义与占位符（id、姓名、图片等）。演示生成多条票务记录。根据接口字段草拟一份模板。把语法接到大觅字段。上机练习配置代理；写mock返回数组；用浏览器或临时请求看到JSON。巡视端口、路径不一致。独立打通并截图/展示JSON。用真实响应检验配置。小结与作业回扣：代理转发，模板出数。预告snailmock与Axios。保存配置。为封装请求做准备。课堂检测：①开发代理写在哪个文件？②为何需要Mock？③如何用模板生成多条记录？八、上机任务与评价练习任务要求合格标准常见问题上机1配置Vite代理并命中mock请求返回JSON，状态正常路径不一致、未重启dev上机2用Mock.js生成票务列表字段字段类型符合约定占位符写错、只返回空对象过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.说明Vite代理解决了什么问题。2.根据给定字段写出Mock模板草案。书面作业：为大觅列表接口列出字段与Mock占位符；下次课用于Axios调用。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：___________________________________