【mockjs】vue3项目使用mockjs

一、mock官网：Mock.js (mockjs.com)

二、使用场景：当后台暂时无法提供接口数据时，使用mock，自己创造

三、使用方法

1. 安装mock：npm install mockjs -D //-D是开发时使用的意思

2. 在根目录下设置文件夹mock和文件夹api，mock目录下设置index.ts配置mock接口的相关配置

在·index.ts中配置mock的相关配置

import Mock from "mockjs"; // 引入mockjs

import "./api/test.ts"; // 把其他mock文件导入到入口文件

Mock.setup({

timeout: "300-400", // 设置相应时间

});

在mine.ts文件下引入mock

在api文件夹下设置接口文档，方便管理

3. api下的接口管理

在test.ts中，先引入mock，设置他的baseUrl

但有一点，这里有可能会报错

在这里我们需要在shims-vue.d.ts文件中

加上一句话declare module "mockjs"; 否则ts识别不到。

在axios全局封装中修改baseUrl

4. 全部配置好后，就可以配置自己想要的数据了。

mock中的数据，可以是自定义，也可以是随机生成。

先说自定义

在test.ts中定义一组list。

const tastList = [

{

id: 101,

name: "小明",

age: "20",

},

{

id: 102,

name: "小美",

age: "16",

},

{

id: 103,

name: "小新",

age: "19",

},

{

id: 104,

name: "小嵩",

age: "18",

},

];

写一个方法返回这个list

const getList = Mocks.mock(baseUrl + "/getTestList", () => {

return tastList;

});

5. 方法定义好后，就可以像平时调取接口那样，调取他。

先在接口文档中声明

在需要的页面调用

最后页面显示数据

6. 再说随机生成

随机生成数据的模板

在具体的可以去官网看

在test.ts中定义一个方法

const randomData = Mocks.mock(baseUrl + "/randomData", "post", {

"data|1-3": [

{

"id|+1": 1,

"name|2-4": "",

number: "@natural(10000)",

regexp1: /[a-z][A-Z][0-9]/,

},

],

});

接口文档中调取

在页面调用

生成数据

数据就掉出来，还有许多其他的调发，在弄出来，在更新！