Vue3项目中使用mock服务

一、安装

npm install mockjs

二、使用

1. 在src目录下创建mock文件夹，然后创建index.js文件
2. 在main.ts中引入mock/index.js文件

//表示只在开发环境下生效
if (import.meta.env.DEV) {
    
    
  import("./mock");
}

3. 在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/