一、mock官网:Mock.js (mockjs.com)
二、使用场景:当后台暂时无法提供接口数据时,使用mock,自己创造
三、使用方法
安装mock:npm install mockjs -D //-D是开发时使用的意思
在根目录下设置文件夹mock和文件夹api,mock目录下设置index.ts配置mock接口的相关配置
![](https://i-blog.csdnimg.cn/blog_migrate/9bcf6cc39de46c17b077e7ee00fd6cce.png)
在·index.ts中配置mock的相关配置
import Mock from "mockjs"; // 引入mockjs
import "./api/test.ts"; // 把其他mock文件导入到入口文件
Mock.setup({
timeout: "300-400", // 设置相应时间
});
在mine.ts文件下引入mock
![](https://i-blog.csdnimg.cn/blog_migrate/4e83389fc6207f3dff6d65016999fe2f.png)
在api文件夹下设置接口文档,方便管理
![](https://i-blog.csdnimg.cn/blog_migrate/b01c0340fb516dcb27d16000e7392d5f.png)
api下的接口管理
在test.ts中,先引入mock,设置他的baseUrl
![](https://i-blog.csdnimg.cn/blog_migrate/c6e635afc0da0bd4a62ea41b6798e75f.png)
但有一点,这里有可能会报错
![](https://i-blog.csdnimg.cn/blog_migrate/d0568f84546aeb7f34e3a149b9cce25b.png)
在这里我们需要在shims-vue.d.ts文件中
![](https://i-blog.csdnimg.cn/blog_migrate/5a77c93907ec8e2db43d31887fc8c808.png)
加上一句话declare module "mockjs"; 否则ts识别不到。
![](https://i-blog.csdnimg.cn/blog_migrate/e87c69eb08e24619fc900fcb8d7fca2b.png)
在axios全局封装中修改baseUrl
![](https://i-blog.csdnimg.cn/blog_migrate/3cb7314f26abf2ff65aaa3930ceec00f.png)
全部配置好后,就可以配置自己想要的数据了。
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;
});
方法定义好后,就可以像平时调取接口那样,调取他。
先在接口文档中声明
![](https://i-blog.csdnimg.cn/blog_migrate/3ab22a0c9b7feb3e712551ace4d9aad6.png)
在需要的页面调用
![](https://i-blog.csdnimg.cn/blog_migrate/d83136ad501beeb658ba8fb5819c681d.png)
最后页面显示数据
![](https://i-blog.csdnimg.cn/blog_migrate/0749a3b71f7d23d93b078684c2e68ee3.png)
再说随机生成
随机生成数据的模板
![](https://i-blog.csdnimg.cn/blog_migrate/ef84fc52556819a4a88797580fc718e7.png)
在具体的可以去官网看
在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]/,
},
],
});
接口文档中调取
![](https://i-blog.csdnimg.cn/blog_migrate/bd6f2de2d65d5a5ad27ef12353a9ab11.png)
在页面调用
![](https://i-blog.csdnimg.cn/blog_migrate/8f88bfc6efa97acdee8b5b51c48a991e.png)
生成数据
![](https://i-blog.csdnimg.cn/blog_migrate/27e47ab1005481e3275147b60fae6a21.png)
数据就掉出来,还有许多其他的调发,在弄出来,在更新!