《Vue企业开发实战》电子教案11_Mock服务与语法.docxVIP

《网站开发技术（VUE）》·教案11

第PAGE页

一、基本信息

课程名称

网站开发技术（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.培养接口规范意识。