Vue企业开发实战（第2版） 教案全套1-32-大觅项目架构设计 - -AI在项目中的综合应用

《网站开发技术（VUE）》·教案1第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目1大觅项目架构设计授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目1。以在线票务网站“大觅网”为贯穿项目，一次课完成三件事：看懂业务、搭起工程、定下架构。三个学习任务一次实施，理实一体，不拆分课时。任务教学内容课件任务1业务场景项目定位；首页、详情页、选座页认知；五大功能模块；购票主路径；Vue3+Vite技术栈选型封面至技术栈任务2环境搭建Node.js、NPM/cnpm；Vite与SPA/MPA；创建dm项目；安装依赖并启动环境搭建至上机练习1任务3前端架构设计分层与模块化；前后端分离；VSCode；ViewUIPlus引入；vite.config.js与路径别名@架构设计至本章小结三、学情分析学生已学网页设计与制作、Javascript程序设计，能写静态页和基本脚本，但对工程化前端缺少完整印象：多数人未使用过Node包管理，分不清Vite脚手架、单页应用和UI框架的关系，也容易把VisualStudio与VSCode混为一谈。本课不要求写出业务代码，要求能说清大觅项目在做什么、能独立把工程跑起来、能解释为什么要分层、分离和引入UI框架。四、教学目标（一）知识目标1.了解大觅项目的业务场景与需求分析，能说出五大功能模块和一条购票主路径。2.熟悉Vue3主流技术栈的组成（Node、NPM/cnpm、Vite、ViewUIPlus、vue-router、状态管理、Axios、Mock）。3.理解SPA与MPA的差异，以及分层架构、模块化、前后端分离的基本含义。4.知道ViewUIPlus全量引入与按需引入的适用场景，以及vite.config.js中插件、别名的作用。（二）能力目标1.能安装并验证Node.js/NPM，必要时配置cnpm。2.能用Vite创建Vue3项目、安装依赖并启动，对照欢迎页判断环境是否成功。3.能按建议完成脚手架交互选项，并在项目中引入ViewUIPlus，替换为Success按钮。4.能阅读并修改vite.config.js，为src配置路径别名@。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证环境的习惯。2.建立“按项目需求选型、不盲目追新”的工程意识。3.在分组排错中培养沟通协作和精益求精的态度。五、教学重点与难点类型内容突破办法重点大觅购票主路径与五大功能模块用首页、详情、选座截图和业务导图，让学生口述一条完整路径重点用Vite创建、安装、启动Vue3项目教师先完整演示一遍，再组织上机，按终端提示排错重点ViewUIPlus引入方式与vite.config.js别名对照main.js与配置文件逐行讲，上机立即验证难点SPA局部刷新与MPA整页刷新结合表1-1，用“点菜单不闪白屏”的生活例子难点分层、模块化、三种分离方式先讲原始开发六个痛点，再对照大觅“分离开发+分离部署”六、教学方法与准备方法：任务驱动、案例演示、理实一体、个别辅导。导入用大觅三张核心页面，新授按“场景→工具→架构”推进，上机对应“能启动、能引入UI、能改配置”。教师准备：课件；已验证可运行的Node环境；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入清点人数，检查投影与实训机。由Angular、React、Vue引出Vue3更易上手。展示大觅首页、详情页、选座页，提问：这是什么类型的网站？说明本课一次走通“业务—工程—架构”，不是一次把整站做完。就座，观察页面，回答“在线票务/选座订票”。用真实票务页面创设情境，从已知框架过渡到Vue3，建立本课“业务—工程—架构”的学习预期。明确学习目标出示五条学习目标，强调本课目标是“初步掌握Vue3项目开发的完整思路”。对照目标勾画，明确本节要达成什么。先亮出可检测的目标，让学生带着任务听课，避免把本课误解为一次做完整站。任务1业务场景对照业务导图拆五大模块：登录注册、栏目浏览、列表详情、选座支付、个人中心。以首页为入口走通主路径：导航→列表→详情→选时间票价数量→选座→确认→支付，强调已登录才能下单。列出技术栈：Node、NPM/cnpm、Vite、ViewUIPlus、vue-router、状态管理、ES6、Axios、Mock。强调四化思想相通，按项目需要选型，核心定为Vue3+Vite。在导图上标注模块；同桌口述一条购票路径；速记技术栈并回答“为什么要Mock”。先业务后技术，建立项目全局图景，为后续选型和编码提供需求依据；用口述主路径检验是否看懂。任务2环境搭建讲Node是JavaScript运行环境，课上使用当前LTS，用node-v验证。讲NPM常用命令及全局与局部区别，必要时安装cnpm。对照表1-1讲SPA/MPA，点明大觅按单页应用搭建。完整演示：npmcreatevite@latestdm→交互选项→cddm→npmi→npmrundev，强调看终端给出的本地地址。本机执行node-v、npm-v；看清脚手架选项；记下创建、安装、启动五步。把运行环境、包管理和脚手架落到可验证的命令，说明为何选用Vite和SPA，扫清后续开发的环境障碍。上机练习1组织学生创建并启动dm项目。巡视排错：未进入目录、未安装依赖、端口被占用、镜像超时。成功标准：浏览器出现Vue欢迎页，存在node_modules。独立完成创建与启动，保存项目路径，关机前不要删除dm。做中学，当堂暴露安装与启动问题，形成“工程能跑起来”的成功体验。任务3前端架构设计用六个痛点说明为何不能用原始方式硬写。讲类MVVM分层和ES6模块化；对比不分离、部分分离、完全分离，明确大觅采用分离开发+分离部署。区分VSCode与VisualStudio。介绍ViewUIPlus，演示npm安装与main.js全量引入，对比按需引入。打开vite.config.js，讲defineConfig、vue()插件和路径别名@。对照静态页举例痛点；判断三种分离方式的维护成本；打开扩展面板和本机配置文件对照。用痛点驱动理解分层、模块化和前后端分离，避免只记步骤不理解为什么这样搭。上机练习2、3要求全量引入ViewUIPlus，在HelloWorld.vue中用Success按钮替换原内容；在vite.config.js中配置@指向src，并在组件中试引用。巡视import路径、CSS是否引入、是否需安装path、是否重启开发服务。改文件、保存，验证热更新出现绿色Success按钮，确认@别名能解析。把架构选择立刻落到代码，验证UI框架引入和路径别名，达成“能引入、能改配置”。小结与作业串线：看懂业务→搭起工程→定下架构。抽问主路径、核心框架与构建工具。布置书面作业，预告下次课进入ES6。整理笔记，记录作业，确认dm工程已保存。把三个任务收成一条线，用抽问和作业巩固要点，衔接下次ES6学习。课堂检测：①大觅属于哪类业务，购票主路径有哪几步？②本项目核心框架和构建工具分别是什么？③工程是否启动成功，Success按钮和@别名是否生效？八、上机任务与评价练习任务要求合格标准常见问题上机1用Vite创建dm项目，安装依赖并启动浏览器出现Vue欢迎页；存在node_modules忘了cd、没执行npmi、端口冲突、镜像超时上机2全量引入ViewUIPlus，HelloWorld.vue换成Success按钮页面出现绿色Success按钮，控制台无报错未引入CSS、未app.use、改错文件上机3vite.config.js配置@指向src，并在组件中试引用用@/components/...能解析，不报找不到模块未安装path、未重启dev、别名写错过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述路径/技术栈10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述大觅项目的需求。2.简述大觅项目的业务逻辑。3.如何安装和调试Node.js？如何使用Vite搭建项目？4.如何在项目中使用ViewUIPlus框架？5.如何在项目中安装、配置构建工具Vite？书面作业：简述大觅项目的需求及业务场景；简述架构设计包含的内容。（下次课抽查3–5人）十、教学反思1.环境安装成功率：________%；主要卡点：______________________________2.学生对SPA、分层、分离方式的理解是否到位：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目2大觅项目中ES6的使用授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目2的任务1、任务2。在已搭建的dm工程中落实ES6变量声明与解构赋值，为后续组件和接口数据提取做准备。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1let和const块级作用域、变量提升对比、不可重复声明、for循环父子作用域；const只读与对象/数组可变；Vue3中优先const教材2.1任务2解构赋值数组解构、嵌套与默认值；对象解构、重命名与默认值；从接口数据中提取字段教材2.2三、学情分析学生已能启动dm工程，具备Javascript基础，但多数人仍习惯用var，不理解块级作用域和闭包导致的按钮序号错误，也很少用解构从对象里取值。本课要求能说清let/const与var的差异，并能用解构提取JSON字段。四、教学目标（一）知识目标1.掌握let/const与var在作用域、提升、重复声明上的差异。2.理解const只读的是绑定，对象和数组内容仍可改。3.掌握数组、对象解构及默认值、重命名。（二）能力目标1.能用let改写for循环，使每个按钮输出正确序号。2.能用对象解构从JSON中提取指定字段。3.能在Vue3示例中优先使用const声明。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证的习惯。2.培养严谨的编码意识和精益求精的态度。3.在分组排错中培养沟通协作。五、教学重点与难点类型内容突破办法重点let块级作用域与for循环闭包先复现var点按钮都是同一个值，再用let对照重点对象解构提取接口字段用一段JSON当场拆id、status、data难点const与对象可变的关系改属性成功、改指向报错，对照演示六、教学方法与准备方法：任务驱动、正误对照、理实一体。导入用“五个按钮打印同一个序号”，新授按“声明→解构”推进，上机对应“改循环、拆JSON”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入清点人数。打开示例：五个按钮用var循环绑定点击，无论点哪个都打印同一个序号。提问：为什么会这样？说明本课用ES6把声明和解构一次落实。观察现象，尝试解释。用真实闭包问题制造认知冲突，引出let的必要性。明确学习目标出示目标：能区分let/const/var，能解构取值。对照目标勾画。让学生带着可检测目标听课。任务1let和const对照示例讲块级作用域、无提升、不可重复声明。演示for中let的父子作用域。讲const只读绑定，对象加属性可以、改指向不行。明确Vue3优先const，需重赋再用let，避免var。跟打示例，记录三条使用建议。先对比后规则，把声明方式落到Vue3编码习惯。上机练习1要求用let改写按钮循环，使第n个按钮打印第n。巡视：仍写var、按钮选取错误。独立改写并在浏览器验证。做中学，用可见结果验证作用域理解。任务2解构赋值讲数组基本/嵌套/默认值，对象基本/重命名/默认值。结合接口数据演示提取字段。口述一行解构等价于几行传统赋值。把语法立刻接到取数场景，避免只记符号。上机练习2给定JSON对象，用解构取出id、status、data。合格：控制台输出正确且代码无多余下标访问。独立完成提取并对照结果。用短任务巩固对象解构。小结与作业回扣：能换let/const、能拆JSON。预告下次箭头函数与Map。整理笔记，保存示例。收口并衔接下节。课堂检测：①let和var在for循环点击中有何不同？②const声明的对象能否添加属性？③如何用一行解构取出JSON的id和status？八、上机任务与评价练习任务要求合格标准常见问题上机1用let改写按钮循环，点击输出正确序号各按钮序号与下标一致仍用var、未取到button列表上机2解构提取JSON的id、status、data输出与原数据一致，语法正确写错嵌套、未写默认值导致报错过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述let和const与var的异同点。2.简述变量的解构赋值，并举一个从对象取值的例子。书面作业：用自己的话说明Vue3中为何优先const；下次课抽查3–5人。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目2大觅项目中ES6的使用授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目2的任务3、任务4。理解箭头函数的this绑定与不适用场景，掌握Map的常用方法，为后续异步与模块化做准备。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务3箭头函数this指向问题；箭头函数语法；与普通函数区别；不适用场景（对象方法、构造函数、原型方法）教材2.3任务4Map任意类型作键、size、set/get/has/delete、keys/values/entries/forEach教材2.4三、学情分析学生已能用let/const和解构取值，但对回调里this丢失仍模糊，习惯用对象字面量当字典，不清楚Map与普通对象的差别。本课要求能改写this问题，并能用Map存取键值。四、教学目标（一）知识目标1.理解箭头函数this在定义时绑定，以及没有arguments。2.知道箭头函数不适合作为对象方法、构造函数和原型方法。3.熟悉Map的特点及size、set、get、has、delete和遍历方法。（二）能力目标1.能用箭头函数改写setInterval中this丢失的示例。2.能判断一段代码是否适合用箭头函数。3.能创建Map并完成增删改查与遍历。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证的习惯。2.培养严谨的编码意识和精益求精的态度。3.在分组排错中培养沟通协作。五、教学重点与难点类型内容突破办法重点箭头函数this绑定先普通函数报错，再箭头函数对照重点Map的set/get与遍历当场建一张表走一遍增删查难点箭头函数不适用场景对象方法里用箭头导致this不对，让学生看输出六、教学方法与准备方法：问题导入、正误对照、理实一体。导入用“定时器里打印不到姓名”，新授按“箭头函数→Map”推进。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入演示对象方法里setInterval用普通函数，this不是该对象。提问：如何在不保存self的前提下改写？观察输出，讨论原因。用this丢失把箭头函数的价值说清楚。明确学习目标出示目标：会写箭头函数、知道何时不用、会用Map。对照目标勾画。明确本课不是把所有function都改成箭头。任务3箭头函数讲语法、剩余参数。对照普通函数演示this绑定。列出不适用场景并各举一例。跟写改写，判断三道“能不能用箭头”的小题。既教写法，也教边界，避免滥用。上机练习1把this丢失示例改为箭头函数，输出正确姓名和年龄。再尝试把对象方法本身改成箭头，观察失败。完成改写并记录不适用结论。正反各做一次，把边界做实。任务4Map对比对象只能用字符串键。演示创建、size、set/get/has/delete和四种遍历。口述Map相对对象的三个优点。为作业中用Map筛选数组铺路。上机练习2创建Map，完成写入、读取、判断、删除和forEach打印。独立完成并展示控制台。短流程覆盖常用API。小结与作业回扣：箭头函数解决this，但不能当对象方法；Map用来管键值。预告Module与Promise。整理笔记。收口并衔接下节异步与模块。课堂检测：①箭头函数的this在何时绑定？②对象方法为何不宜用箭头函数？③Map如何判断某个键是否存在？八、上机任务与评价练习任务要求合格标准常见问题上机1用箭头函数改写this丢失；验证对象方法不宜用箭头定时器能读到对象属性；反例输出异常可解释内外层都改成箭头、未保存工程上机2Map增删改查与forEach遍历size与遍历结果正确当成普通对象用点语法取值过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述箭头函数的起因、应用场景和使用方法。2.简述Map的常用属性及方法。书面作业：列出至少两种不适合使用箭头函数的场景；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（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.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目3大觅项目的路由配置授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目3的任务1。理解路由、前端路由与使用场景，分清hash与history，为在大觅项目中引入VueRouter做准备。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1什么是前端路由路由概念；前端路由原理；hash/history；使用场景；与后端路由的差异教材3.1三、学情分析学生已能启动SPA工程，但多数人把“换页”理解成再请求一个html。本课要求能说清单页里如何靠URL切换视图，以及大觅为何需要前端路由。四、教学目标（一）知识目标1.理解路由是URL与视图的对应关系。2.掌握前端路由与后端路由的分工。3.了解hash与history两种模式及适用场景。（二）能力目标1.能根据大觅页面列出需要路由的路径。2.能用自己的话说明SPA中切换栏目为何不必整页刷新。3.能判断给定URL更像hash还是history。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证的习惯。2.培养严谨的编码意识和精益求精的态度。3.在分组排错中培养沟通协作。五、教学重点与难点类型内容突破办法重点前端路由与SPA的关系对照项目1的SPA/MPA表，点菜单不闪白屏难点hash与history差异看地址栏#号，结合刷新、部署注意点讲解六、教学方法与准备方法：案例导入、对比讲解、列表梳理。导入用大觅首页点栏目，新授按“是什么→为何用→两种模式”推进。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入回顾大觅首页、列表、详情。提问：若每个栏目都是一个完整html，体验和维护有何问题？引出前端路由。回忆SPA局部刷新。用项目场景定义本课问题。明确学习目标出示目标：说清前端路由、能列大觅路径草案。对照目标勾画。本课先建立概念，安装配置留到下次。任务1原理讲解讲路由映射。对比后端根据路径返回页面、前端根据路径切换组件。介绍hash与history，说明刷新404、需要服务端配合等情况。列出票务、后台等使用场景。记录两种模式特点；给大觅草拟/home、/detail等路径。先地图后工具，避免一上来就记API。上机练习在纸面或文档中列出大觅主要页面与建议path，标明哪几个是父子级。小组互评是否覆盖购票主路径。完成路径表并抽组汇报。把原理立刻变成信息架构，为下次写路由表铺路。小结与作业回扣：前端路由服务SPA。预告安装路由器、重定向与懒加载。保存路径草案。概念课也要有产出物。课堂检测：①前端路由解决什么问题？②hash和history在地址栏上有何不同？③大觅从首页到详情建议用哪几个path？八、上机任务与评价练习任务要求合格标准常见问题上机1列出大觅主要页面与path草案，覆盖购票主路径路径表完整、命名合理、能口述对应关系漏支付/个人中心、写成.html文件名过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.用自己的话解释什么是前端路由。2.比较hash与history，各举一个注意点。书面作业：完善大觅路径草案，下次课用于配置路由表。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目3大觅项目的路由配置授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目3的任务2。在dm工程中安装VueRouter，建立路由器模块并启动，配置重定向、懒加载和router-link，认识路由对象属性。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务2VueRouter基本使用安装；建立路由器模块；启动路由器；重定向；懒加载；router-link；路由对象属性教材3.2三、学情分析学生已理解前端路由并有路径草案，但尚未在工程里落地。容易漏在main.js中use(router)，也容易把所有页面写成同步import。本课要求路由能切换，首页能重定向，列表页能懒加载。四、教学目标（一）知识目标1.掌握VueRouter4的安装与路由器模块组织。2.理解重定向、懒加载和router-link的作用。3.了解路由对象常用属性（path、params、query等）。（二）能力目标1.能创建router模块并在应用中启动。2.能配置重定向到首页。3.能用懒加载注册页面组件，并用router-link完成导航。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证的习惯。2.培养严谨的编码意识和精益求精的态度。3.在分组排错中培养沟通协作。五、教学重点与难点类型内容突破办法重点路由器模块与app.use(router)对照main.js逐步引入重点重定向与懒加载先写同步，再改()=>import()难点路由未生效的排查清单：安装、创建、use、router-view六、教学方法与准备方法：演示+仿写、理实一体。导入用路径草案，新授按“安装→模块→启动→重定向→懒加载→link”推进。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入打开上次的路径草案。提问：这些path如何变成可点的导航？说明本课把草案写成可运行路由。打开dm工程。用学生自己的草案增强目的性。明确学习目标出示目标：工程可按路由切换，首页重定向有效。对照目标勾画。用可观察结果当达标线。任务2配置讲解演示安装、src/router/index.js、createRouter/createWebHistory、app.use。讲redirect、懒加载、router-link与router-view。简介route.params与query。跟做文件结构，标记易漏的use和view。把配置链条一次走完，减少碎片感。上机练习完成安装与启动；默认进入首页；至少一个页面懒加载；导航用router-link。巡视未加router-view、history写错。独立配置并点击切换。一次课拿到可演示的多页面壳。小结与作业回扣配置链条。预告push/replace/go编程式导航。保存工程。为作业中的综合导航打底。课堂检测：①路由器如何挂到应用上？②懒加载怎么写？③没有router-view会出现什么现象？八、上机任务与评价练习任务要求合格标准常见问题上机1安装并启动VueRouter，配置首页重定向打开站点落到首页，地址与path一致未use(router)、redirect写错上机2至少两个页面用懒加载，导航使用router-link点击导航切换组件，控制台无报错漏router-view、import路径错误过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.默写路由器安装到启动的步骤。2.说明为何列表/详情适合懒加载。书面作业：根据大觅路径草案补全路由表初稿；下次课用于编程式导航。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目3大觅项目的路由配置授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目3的任务3。掌握router.push、replace、go等编程式导航，完成大觅主要页面可按路由切换、导航正确。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务3页面间导航router.push；router.replace；router.go；在列表进详情、返回、支付等场景中的选用教材3.3三、学情分析学生已能用router-link切换页面，但业务里“选座后进确认页、支付成功不能回退到表单”需要编程式控制。本课要求能按场景选用push/replace/go。四、教学目标（一）知识目标1.掌握push、replace、go的含义与差别。2.理解编程式导航与声明式导航的分工。3.了解向路由传递params/query的基本写法。（二）能力目标1.能在按钮点击中调用push进入详情。2.能用replace避免返回到中间页。3.能用go实现前进后退。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证的习惯。2.培养严谨的编码意识和精益求精的态度。3.在分组排错中培养沟通协作。五、教学重点与难点类型内容突破办法重点push与replace的差异演示历史记录能否返回难点带参数跳转先query后params，对照地址栏六、教学方法与准备方法：场景驱动、对比演示、理实一体。导入用“支付成功后按返回又回到填写页”，新授按push/replace/go推进。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入提问：确认订单后跳支付，用户按浏览器返回是否应回到未提交表单？引出replace。讨论购票路径上哪些步不能随便回。用业务规则定义导航API的选用。明确学习目标出示目标：三种方法会选、会写，大觅主路径可走通。对照目标勾画。强调不是多记几个函数名。任务3导航API演示push打开详情，replace替换历史，go(-1)返回。结合列表→详情→确认→支付说明选用。简介query传id。填一张“场景-方法”对照表。先场景后API，降低死记。上机练习在作业要求下：默认首页；导航可点；按钮控制push/replace/go。对照教材图示检查。完成综合导航并互测返回行为。用可演示主路径作为项目3达标。小结与作业回扣：link负责菜单，push/replace负责流程。预告项目4认识Vue3实例与数据。保存工程。结束路由项目，转入核心语法。课堂检测：①push和replace对历史记录有何不同？②支付成功页适合用哪种跳转？③go(-1)与go(1)分别做什么？八、上机任务与评价练习任务要求合格标准常见问题上机1列表按钮push进入详情，可返回历史记录行为正确写成location.href整页刷新上机2流程中某步使用replace；实现前进后退按钮返回不会落到被替换页；go有效replace用错步骤、未取router实例过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.完成教材路由综合练习：默认首页，单击导航切换。2.在作业1基础上添加按钮控制页面间导航。书面作业：用表格列出大觅购票主路径每一步建议的导航方式；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目4初识Vue3授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目4的任务1。认识Vue3渐进式框架、MVVM与单文件组件，区分选项式与组合式思路，为数据绑定和生命周期打基础。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1Vue.js是什么MVVM；渐进式框架与开发模式；单文件组件结构；选项式与setup/组合式的关系教材4.1三、学情分析学生已能配置路由，但多数人仍按“改DOM”思考。对.vue里template/script/style三分还停留在会打开文件。本课要求能说明MVVM，能指认SFC三部分。四、教学目标（一）知识目标1.理解MVVM中数据与视图的对应关系。2.了解Vue3作为渐进式框架的含义。3.掌握单文件组件的基本结构。（二）能力目标1.能打开.vue指出template、script、style。2.能用自己的话说明改数据驱动视图。3.能创建一个最简单的SFC并挂到路由上。（三）素质目标1.培养声明式思维和阅读官方文档的习惯。2.养成规范操作、爱护设备的习惯。3.建立不盲目堆插件的意识。五、教学重点与难点类型内容突破办法重点MVVM与声明式对比直接改innerHTML难点选项式与组合式并存说明本课先建立SFC印象，细节下次展开六、教学方法与准备方法：概念对照、拆文件观察、理实一体。导入用“点按钮改页面文字，是改DOM还是改数据”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入提问：若标题要随数据变化，用document.querySelector改和用Vue改有何不同？引出MVVM。回忆jQuery式改DOM。把思维从命令式转到声明式。明确学习目标出示目标：说清MVVM，认清SFC。对照目标勾画。降低“一次学会全部API”的焦虑。任务1概念与SFC讲MVVM。说明渐进式：可用核心再逐步加路由、生态。拆开HelloWorld.vue看三块。简介选项对象与setup。在工程里圈出三块；口述数据变化后谁更新视图。用已有文件讲新概念。上机练习新建一个简单页面组件，写入标题数据，配入路由能打开。不要求指令。创建并路由访问成功。把“认识SFC”变成可打开的一页。小结与作业回扣：改数据不改DOM。预告实例、插值、生命周期。保存组件。衔接下节数据绑定。课堂检测：①MVVM里ViewModel起什么作用？②.vue文件三部分各做什么？③渐进式意味着必须一次用全生态吗？八、上机任务与评价练习任务要求合格标准常见问题上机1新建SFC并通过路由访问，页面显示标题数据路由可打开，结构完整未写template、路由未注册过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述MVVM模式。2.说明单文件组件三部分的职责。书面作业：对照dm工程中的一个.vue，标注三部分；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目4初识Vue3授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目4的任务2。掌握实例与数据、插值表达式和生命周期，能用数据驱动视图，能说明挂载阶段可做什么。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务2组件与数据绑定实例与数据；插值表达式及注意事项；生命周期（尤其挂载）教材4.2三、学情分析学生已能创建SFC，但数据如何出现在模板、何时适合发请求还不清楚。本课要求会写插值，能指出created/mounted等节点的用途。四、教学目标（一）知识目标1.掌握组件数据如何被模板使用。2.掌握插值表达式的典型用法及不能写语句等注意点。3.理解生命周期及挂载时期适合做的事。（二）能力目标1.能用插值把数据显示到页面。2.能根据生命周期图说明mounted适合加载数据。3.能做插值与生命周期的对照实验。（三）素质目标1.培养声明式思维。2.养成先看生命周期再写副作用的习惯。3.规范操作、协作排错。五、教学重点与难点类型内容突破办法重点插值与数据驱动改数据看页面自动变重点mounted加载数据对照生命周期图难点插值里能写什么用错误示例（if语句）对比六、教学方法与准备方法：实验演示、图表对照、理实一体。导入用“数据改了页面为什么自己变”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入在组件里改一个data/ref，保存后页面变化。提问：谁在更新DOM？观察热更新。用现象引出响应式与生命周期。明确学习目标出示目标：会插值、能说挂载阶段做什么。对照目标勾画。把抽象钩子变成可说的用途。任务2数据与生命周期讲实例数据、插值、表达式限制。对照生命周期图讲beforeCreate到unmounted，突出mounted发请求、updated少做重活。在图上标注“取数放哪”。跟写插值。图+实验双通道。上机练习页面用插值显示票名、价格；在mounted打印或模拟赋值。记录各钩子若console会在何时出现。完成显示与钩子观察。用日志把时间线做实。小结与作业回扣：插值展示，mounted做初始化。预告v-bind绑定class/style。保存实验。转向动态样式。课堂检测：①插值里能否写if语句？②mounted适合做什么？③数据变化后模板为何会更新？八、上机任务与评价练习任务要求合格标准常见问题上机1用插值显示至少两项数据页面与数据一致，语法正确写了语句、未return/未ref上机2在mounted中完成初始化赋值或日志挂载后可见效果，能说明时机把请求写在模板里过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述生命周期函数的实质以及挂载时期可以完成的工作。2.简述插值表达式的典型用法及注意事项。书面作业：画一张本课用到的生命周期简图并标注用途；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目4初识Vue3授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目4的任务3。掌握v-bind及class、style的对象/数组写法，能完成动态样式绑定。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务3class与style绑定v-bind；class对象语法与数组语法；内联style绑定教材4.3三、学情分析学生已会插值，但改外观仍去改css文件或写死class。本课要求能根据数据切换高亮、颜色，理解:class是v-bind:class的简写。四、教学目标（一）知识目标1.掌握v-bind的作用与简写。2.掌握class的对象语法、数组语法。3.掌握style对象绑定。（二）能力目标1.能按条件为元素添加/移除class。2.能绑定内联样式对象。3.能完成动态样式小练习（如选中高亮）。（三）素质目标1.培养对数据驱动样式的严谨态度。2.规范命名class。3.协作排错。五、教学重点与难点类型内容突破办法重点:class对象语法true/false当场切换高亮难点对象语法与数组语法混用先拆开写，再合并六、教学方法与准备方法：对照静态class、条件演示、理实一体。导入用“哪张票被选中就要高亮”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入展示选座或列表：选中项应换样式。提问：能否不手写两个class名来回改DOM？引出v-bind。回忆购票选中态。用项目UI需求定义本课。明确学习目标出示目标：会:class、会:style，能做选中高亮。对照目标勾画。用可见高亮当达标。任务3绑定写法讲v-bind与:。class对象、数组；style对象。强调class名用连字符时的引号。跟写三种写法。语法一次给全，避免下次再补窟窿。上机练习列表或按钮根据数据切换active；再绑定一个style颜色。点击/改数据后面貌变化。把指令接到可演示的选中态。小结与作业回扣：样式也是数据。预告项目5用Mock和Axios取真实一些的数据。保存页面。结束初识Vue3，转入通信。课堂检测：①:class对象语法如何根据布尔值开关类名？②绑定style为何常用对象而不是字符串？③v-bind可以省略成什么？八、上机任务与评价练习任务要求合格标准常见问题上机1用:class实现选中高亮选中项class正确切换写死class、对象键名写错上机2用:style绑定至少一种样式颜色或字号随数据变化写成style字符串且无法响应过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.默写:class对象语法和数组语法各一例。2.说明v-bind的作用。书面作业：为大觅列表项设计一个选中态的class绑定方案；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（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.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（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.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（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.其他：________________________________________________________________授课教师：XXX授课日期：________年____月____日一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目6模板语法与常用指令授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目6的任务1。掌握v-if、v-else、v-show及选用，能根据登录态、库存等条件展示界面。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务1条件渲染v-if；v-else；v-show；v-if与v-show的选择与区别教材6.1三、学情分析学生已能把mock数据放到页面，但“没登录显示按钮、没数据给空态”仍靠注释或两个页面。本课要求能正确选用v-if/v-show。四、教学目标（一）知识目标1.掌握v-if/v-else的条件渲染。2.掌握v-show的显示隐藏。3.能说明二者在切换频率、初始渲染上的差异。（二）能力目标1.能按条件切换登录/未登录块。2.能用v-show做高频切换的提示条。3.能解释为何空列表适合v-if。（三）素质目标1.培养对条件指令选用的严谨态度。2.避免同时滥用导致DOM混乱。3.规范操作。五、教学重点与难点类型内容突破办法重点v-if与v-show差异看元素是销毁还是display:none难点场景选用用“是否还要保留状态/是否经常切换”判断六、教学方法与准备方法：对比实验、场景选用、理实一体。导入用“未登录不能下单”。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入回忆购票须登录。提问：未登录时整块下单区是不生成还是藏起来？引出两种指令。讨论哪种体验更好。用业务规则选技术。明确学习目标出示目标：两种都会写，能说选用理由。对照目标勾画。防止只会一种指令打天下。任务1条件指令演示v-if/v-else、v-show。对比切换开销与是否保留状态。给出选用口诀。完成对照表。跟写登录态示例。对比实验比背定义有效。上机练习实现登录/