Mock.js怎么安装与使用

这篇“Mock.js怎么安装与使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Mock.js怎么安装与使用”文章吧。

Mock概述

mock：模仿的;虚假的;不诚实的，这是mock作为单词的翻译，当然他的用途也是如同他的翻译一样就是模拟接口、数据其实mock的出现就是前后端分离后为前端不受制于后端同学的束缚而出现的，在实际开发中后端同学有自己的开发节奏，不能如我们前端所想几分钟出一个接口，可能我们索要接口的时候后端同学还在构思如何建表？

而mock则避免了我们对后端同学催促的尴尬，他就可以完成模拟接口，让前后端并行开发，提高我们的开发效率，不被后端拖节奏。

mock即mock.js，他的流程就是 前端发送请求到后端 =》mock.js拦截请求=》并返回模拟数据给前端。至于数据我们事先只需要与后端同学定义好格式即可，mock.js会通过法则为我们生成比较贴近真实数据的模拟数据。看到这里你是不是对mock属实有点心动了呢？下面就让我们来看一下mock.js运用到项目中。

mock.js安装

我们可以看到官网上提供了很多关于不同前端项目的安装

下面就以Vue为例子来为大家演示

1、创建vue项目

我们利用vue脚手架创建一个项目

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

因为我们的mock是拦截请求，所以我们需要安装axios进行请求，当然使用原生的ajax也是可以的！

npm i mockjs -D
npm i axios

3、安装成功后我们运行项目

npm run serve

Mock规范

说明：本小节依照官网，所以很多规范大家看不透彻没有关系，我们可以跳过此小节先看下节的mock的使用

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

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

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

// 属性名   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的使用

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) 将被执行，并把执行结果作为响应数据返回。

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中去引用我们的mock

再次尝试成功

以上就是关于“Mock.js怎么安装与使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。