Vue.js 教程：如何使用 Mock.js 进行前端开发

古城微笑少年丶 2024-03-22 12:02 174阅读 0赞

**[Mock.js][]** 是常用的生成随机数据，拦截 Ajax 请求的 JavaScript 库。在软件开发的初期，后端 API 接口可能还没有实现或者还没有完全实现。在这种情况下，用 Mock.js 可以模拟后端 API 供前端开发人员调用，从而避免等待后端 API 的完成。

要在 Vue 项目中使用 Mock.js 有两个思路：

1.  在客户端拦截 Ajax。用 Mock.js 拦截 Ajax 请求，返回 Mock.js 生成的随机数据。
2.  在服务器端返回 Mock 数据。后端在 API 还没开发好前，返回 Mock.js 生成的随机数据。

知识扩展：**[了解 Mock.js 的语法规范][Mock.js 1]**

下面我们来具体看一下。

### 方法1: 在客户端拦截 Ajax ###

使用 Mock.js 需要安装依赖：

npm install mockjs --save

用 `Mock.mock(url, template)` 可以拦截 Ajax 请求，并返回数据。 当拦截到匹配 `url` 的 Ajax 请求时，将根据数据模板 `template` 生成模拟数据，并作为响应数据返回。如果未拦截到匹配，则还是走正常的接口调用。

比如，调 API `/user/list` 时，随机返回用户列表数据：

import Mock from 'mockjs'
    Mock.mock('/user/list', {
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|1-10': [{
            'id|+1': 1, // id 从 1 开始自增。
            'name': '@cname', // 随机中文名
            'age|15-25': 1,  // 15～25 的随机数
            'city': '@county(true)' // 随机的城市
        }]
    })

调用该 API 时，返回值类似这样：

{
    "list": [
    {
    "id": 1,
    "name": "Susan Smith",
    "age": 20,
    "city": "New York City, New York"
    },
    {
    "id": 2,
    "name": "Emily Johnson",
    "age": 24,
    "city": "Los Angeles, California"
    },
    {
    "id": 3,
    "name": "Andrew Davis",
    "age": 25,
    "city": "Chicago, Illinois"
    }
    ]
    }

当然，有时 Mock 的场景比较复杂。需要根据 API 的参数，来动态返回数据。此时，可以用 `Mock.mock(url, function( options))`。 当拦截到匹配 `url` 时，函数 `function(options)` 将被执行，并把执行结果作为响应数据返回。其中，函数的参数 `options`指向本次请求的 Ajax 选项集，含有 `url`、`type` 和 `body` 三个属性，参见 [XMLHttpRequest 规范][XMLHttpRequest]。

如果要匹配相同 url 的不同 method，可以用`Mock.mock(url, method，function( options))`。第二个参数是 method。只有同时配置到`url` 和 `method` 时，拦截才会生效。

### 方法2: 在服务器端返回 Mock ###

这里的服务器端用 Node.js。 Node.js 安装比较容易，下载安装包([这里][Link 1])安装就行了，这里就不赘述了。

服务器端处理接口请求，我们用 基于 Node.js 的轻量级 Web 框架 [Express][]。安装：

$ npm install express --save

处理请求，并返回 Mock 数据：

const express = require('express')
    const Mock = require('mockjs')
    
    const app = express()
    
    const useMock = true
    app.get('/user/list', (req, res) => {
      if (useMock) {
        const list = Mock.mock({
            'list|1-10': [{
                'id|+1': 1, // id 从 1 开始自增。
                'name': '@cname', // 随机中文名
                'age|15-25': 1,  // 15～25 的随机数
                'city': '@county(true)' // 随机的城市
            }]
        })
        res.send(list)
        return
      }
      // ...res.send(正常的业务逻辑返回数据)
    })

调用该 API 时，返回值和 方法1 的一样。

处理根据 API 的参数，来动态返回数据的场景。只需在上面代码的路由处理函数中加逻辑即可。请求的信息可以在 req 对象上获得。

要处理相同 url 的不同 method，只需添加不同的路由即可。上面的代码，只匹配 method 是 get 的。

### 总结 ###

本文总结了在 Vue 项目中使用 Mock.js 有两种方法。方法1 的优点是使用简单。方法2 的优点是灵活和对前端代码的侵入性低，但要学习一点 Node.js 知识。

想进阶成为一位 Mock 高手吗？或许你可以看这篇实操，帮助你学习，语法完全兼容 **Mock.js，** 并扩展了一些 Mock.js 没有的语法（如国内手机号 @phone）。

*  **[手把手教你用搞定 Mock API][Mock API]**

[Mock.js]: https://apifox.com/apiskills/mock-js-example/
[Mock.js 1]: https://apifox.com/apiskills/mock-js-syntax/
[XMLHttpRequest]: https://xhr.spec.whatwg.org/
[Link 1]: https://nodejs.org/en/download/
[Express]: https://expressjs.com/
[Mock API]: https://apifox.com/apiskills/mock-done/