一、安装
npm install mockjs
二、使用
- 在src目录下创建mock文件夹,然后创建index.js文件
- 在main.ts中引入mock/index.js文件
//表示只在开发环境下生效
if (import.meta.env.DEV) {
import("./mock");
}
- 在mock/index.js文件中使用Mock.mock(param1,param2,param3)设置要拦截的接口
param1:请求地址,必须使用正则
param2:接口请求方式
param3:接口返回数据
import {
getPaperExam,geExamDetail} from "./education/textbook";
//列表
Mock.mock(/\/ed\/paperManage\/examList/, "get", getPaperExam);
//详情
Mock.mock(/\/ed\/paperManage\/examDetail/, "get", geExamDetail);
//新增
Mock.mock(/\/ed\/paperManage\/addExam/, "post", () => ({
code: 0 }));
//修改
Mock.mock(/\/ed\/paperManage\/updateExam/, "put", () => ({
code: 0 }));
//删除
Mock.mock(/\/ed\/paperManage\/deleteExam/, "delete", () => ({
code: 0 }));
4.设置接口返回数据,在mock文件夹下创建education/textbook.js文件
//表示创建了10条数据,格式为{code:0,data:{list:[]},total:10}
export function getPaperExam() {
return {
code: 0,
data: Mock.mock({
"list|10": [
{
id: () => Random.integer(1, 100),
subjectTypeId: () => 1,
score: () => Random.integer(1, 100),
stem: () =>
'四大名著为<span class="gapfilling-span" contenteditable="false">1</span><span class="gapfilling-span" contenteditable="false">2</span><span class="gapfilling-span" contenteditable="false">3</span><span class="gapfilling-span" contenteditable="false">4</span>'
}
],
total: 10
})
};
}
...
三、参考网址
http://mockjs.com/