Mock.js教程：Vue项目中安装配置及Mock.mock用法详解

前言

当前Web应用开发普遍采用前后端分离模式，其中存在一个不成文的惯例：后端开发需先行。然而，前端工程师在页面搭建完成后，是否只能被动等待后端接口？这种模式显然会限制前端的开发进度。

实际上，只要与后端确认接口返回的数据格式，双方即可并行开发。部分开发者会定义变量来模拟接口数据以进行前端渲染，这虽然可行，但缺乏专业性。是否存在更专业的技术手段？答案就是Mock，接下来我们将探讨前端开发的这一重要工具。

Mock概述

Mock意为“模仿”或“虚假”，其核心用途正是模拟接口与数据。Mock.js的出现旨在解决前后端分离后前端受制于后端的问题。在实际开发中，后端有独立的开发节奏，无法随时响应前端对接口的需求，甚至在前端索要接口时，后端可能还在进行数据库表设计。

Mock.js避免了前端催促后端的尴尬局面，它通过模拟接口实现前后端并行开发，从而显著提升开发效率，确保前端不受后端进度拖拽。

Mock.js的工作流程为：前端发送请求至后端，Mock.js拦截该请求，随后返回模拟数据给前端。只要事先与后端约定好数据格式，Mock.js即可依据规则生成贴近真实的模拟数据。了解其原理后，让我们进一步探讨如何在项目中应用Mock.js。

Mock.js安装

官网提供了多种前端项目的安装指南，有兴趣的读者可自行查阅。若希望在Vue项目中使用，可跳过相关图片说明，直接参考后续步骤。

以下以Vue项目为例进行演示。

1、创建vue项目

利用Vue脚手架创建项目。若不熟悉此操作，可参考文章:https://www.jb51.net/article/259646.htm

2、项目中安装mock.js和axios

由于Mock.js用于拦截请求，因此需要安装axios进行网络请求，当然使用原生ajax也是可行的。

npm i mockjs -D
npm i axios

3、安装成功后运行项目

npm run serve

Mock规范

说明：本小节依据官网文档，部分规范可能较难理解，读者可先跳过此节，直接阅读后续的Mock使用部分。

Mock.js的语法规范包含两部分：

1.数据模板定义规范（Data Template Definition，DTD）

数据模板中的每个属性由三部分构成：属性名、生成规则、属性值。

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意：属性名与生成规则之间用竖线 | 分隔。生成规则是可选的。生成规则有7种格式： ‘name|min-max’: value ‘name|count’: value ‘name|min-max.dmin-dmax’: value ‘name|min-max.dcount’: value ‘name|count.dmin-dmax’: value ‘name|count.dcount’: value ‘name|+step’: value 生成规则的含义需依赖属性值的类型来确定。属性值中可包含@占位符。属性值还指定了最终值的初始值和类型。

2.数据占位符定义规范（Data Placeholder Definition，DPD）

占位符仅在属性值字符串中占据位置，不会出现在最终属性值中。

占位符的格式为：

@占位符 @占位符(参数 [, 参数])

注意：使用@标识其后的字符串为占位符。占位符引用Mock.Random中的方法。可通过Mock.Random.extend()扩展自定义占位符。占位符也可引用数据模板中的属性。占位符优先引用数据模板中的属性。占位符支持相对路径和绝对路径。

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

上述内容仅简要介绍了Mock的规范，实际上Mock包含大量规则。掌握这些规则后，可生成更加真实且复杂的数据。

https://github.com/nuysoft/Mock/wiki/Syntax-Specification

Mock的使用

1、创建mock文件

在src文件夹下创建mock文件夹。
在mock文件夹中创建json文件夹。
在mock文件夹中创建index.js文件。

2、在mock下的index.js中引入mock并创建mock响应内容

// 引入 mock.js
const Mock = require('mockjs')
//Mock.mock  接口，请求方式，返回数据（数据就是json文件夹中的文件自行添加）
Mock.mock('/user/list', 'get', require('./json/userList'))

说明：Mock.mock()

该方法用于匹配请求并拦截，返回模拟数据，主要有以下几种形式：

Mock.mock( rurl, template )

记录数据模板。当拦截到匹配rurl的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。

Mock.mock( rurl, function( options ) )

记录用于生成响应数据的函数。当拦截到匹配rurl的Ajax请求时，函数function(options)将被执行，并把执行结果作为响应数据返回。

Mock.mock( rurl, rtype, template )

记录数据模板。当拦截到匹配rurl和rtype的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。

Mock.mock( rurl, rtype, function( options ) )

记录用于生成响应数据的函数。当拦截到匹配rurl和rtype的Ajax请求时，函数function(options)将被执行，并把执行结果作为响应数据返回。

当然，Mock还提供其他多种方法，更多细节可查阅官网文档。

3、我们在mock文件夹下的json文件夹下创建我们引用的userList.json

{
    "status": 0,
    "data|10": [
        {
            "id|+1": 1001,
            "company": "10001",
            "username": "ceshi1",
            "age": 25
        }
    ],
    "msg": ""
}

4、接着我们就去我们的页面中测试请求

找到我们的页面，由于是新建项目，我们删除页面中的原有内容，替换为简洁的代码。

然后我们引入axios并注册事件即可发送请求。

<template>
  <div>
      <div @click="btnClick" class="btn">
          这是测试
      </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {};
  },

  methods: {
    async btnClick() {
      const res = await axios.get("/user/list");
      console.log(res.data.data);
    },
  },
};
</script>

<style>
</style>

点击后发现仍请求了接口，这是为何？原来我们遗漏了一个步骤，即在main.js中引用Mock。

再次尝试，请求成功。

总结

通过上述使用示例可见，前端发送的请求只要被Mock.mock方法中的url匹配，就会被Mock拦截。我们可以自行验证，使用Mock并匹配url后，Network中将不再显示请求。Mock会根据定义的url规则返回对应数据。在实际开发中，前端许多后期工作是在接口调通后根据返回数据进行的。通过Mock.js，前端不再过度依赖后端接口，只要知晓后端返回数据的格式，即可自行生成数据进行模拟接口。从而在接口调通前，前端也能独立进行数据渲染和调试工作。

到此这篇关于Mock.js安装与使用的文章就介绍到这了，更多相关Mock.js安装使用内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

Mock.js安装与使用：实现前后端并行开发

前言