Vue3项目中使用mock服务

包包治百病

已于 2023-04-04 17:15:55 修改

阅读量779

点赞数 1

分类专栏：每周都写点儿文章标签： javascript 开发语言 ecmascript

于 2023-04-04 16:51:21 首次发布

本文链接：https://blog.csdn.net/qq_42981449/article/details/129956570

版权

每周都写点儿专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章介绍了如何使用MockJS在开发环境中安装和配置模拟接口数据。通过创建mock文件夹，设置不同请求方法的接口拦截，并在mock文件夹下定义返回数据，实现了对API的本地模拟，例如模拟获取列表、详情、新增、修改和删除操作的响应。

摘要由CSDN通过智能技术生成

一、安装

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
    })
  };
}
...