Mock.js 教程

Mock.js 介绍

在进行前端开发的时候, 可能会遇到需要请求后端, 但是后端数据不全面的情况. 这个时候就需要我们自己手动的伪造一些数据进行测试.

然而自己味道数据还是比较麻烦的, 可能需要再开服务乱七八糟的, 比较的繁琐. 为了解决这个问题, 我们可以使用 Mock.JS 库, 一个专门用来制作假数据的库.

基础使用

安装 Mock.js

这里可以先创建一个 Vue 的项目方便演示. 创建后进入目录, 安装该库.

1
npm install mockjs

随后在 src 目录中创建一个 mock 目录, 用来存放我们的 mock 数据. 其中创建一个 index.js 作为我们的 mock 总文件. 并且直接引入, 方便使用.

|500

构建数据

index 是用来综合数据的, 我们创建另外一个 ts 文件用来模拟. 比如这里需要模拟一个用户数据, 那么就创建一个 user.js, 并且写入如下内容, 用作 Mock.

这里需要按照语法来走.

1
2
3
4
5
6
7
8
9
10
11
12
// 引入mock
import Mock from 'mockjs'

// 定义数据以及对应的目录
// url 就是请求的路径
// type 就是请求类型
// 其次就是生成的数据了
Mock.mock('/data/userinfo', 'get', {
    name: "@cname",
    "age|20-50": 50,
    id: "@id"
})

随后直接在 index 中引入该文件即可.

配合请求

这里我们使用 axios 来进行网络请求. 安装一下 axios:

1
npm i axios

随后, 在 api 中写出如下代码, 对上面的地址进行请求.

1
2
3
4
5
6
7
8
9
import axios from "axios";

export const getUserData = () => {
    axios.get('/data/userinfo').then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
}

调用 API

在页面中写一个按钮, 点击后发送请求, 看看控制台如何.

1
2
3
4
5
6
7
<script setup lang="ts">
import {getUserData} from "./api";
</script>

<template>
  <button @click="getUserData">请求数据</button>
</template>

可以看到, 数据已经返回回来了, 这就是 MockJS 的基本使用过程.

文档

我们不可能记住每一个 API 怎么写, 最后还得是回到 API 文档. 上面是最基础的使用, 学会了基础使用, 就可以根据文档实现想要的效果了.

可以直接点击 Mock.js 前往官方文档进行查阅.