mock.js的基本使用

1.是什么

• 用来生成虚拟数据的工具

2.有什么用

• mockjs 在开发过程中后端的接口还没有开发完成，但是前端已经完成了工作。可以使用它来生成一些虚拟数据，来替换后端的接口，等后端接口开发完成之后，再替换成真实的接口。

3.怎么用

• 用来直接生成虚拟数据
• 可以拦截异步请求

用法一:生成虚拟数据
步骤：

• 1.0 安装

  • npm install mockjs

• 2.0 使用

  // 引用 mockjs
  var Mock = require('mockjs')
  // 生成数据
  var data = Mock.mock({
  	'list|1-10': [{
        'id|+1': 1
  	}]
  })
  

• 3.0 了解生成数据的规则 https://github.com/nuysoft/Mock/wiki/Getting-Started

用法二:拦截异步请求

• 为什么需要拦截：

  • 因为前端开发比后端要快，很有可能，后端还没有开发完接口，但是前端已经要调用接口了，为了解决这样的问题，需要拦截异步请求。

• 步骤：

  • 1）单独创建一个 js 文件用来拦截异步请求

  • 2）在文件中书写代码：

    // 可以用来拦截请求
    //	 path: 拦截的请求路径
    //   method： 拦截的请求方式
    //   function： 拦截的回调函数
    //		这个函数一定要返回数据：mock模拟出来的数据
    Mock.mock(path, method, function() {})
    

  • 3）全局引用这个拦截的文件

  代码:

<template>
  <div>
    <h1>使用mock生成虚拟数据</h1>
    <button @click="getData">点我生成虚拟数据</button>
    <div>data: {{ data }}</div>
    <h1>使用mock拦截异步请求</h1>
    <button @click="getDataFormAjax">发送异步请求</button>
  </div>
</template>

<script>
// 引入第三方包 mockjs
import Mock from "mockjs";
import axios from "axios";

export default {
  data() {
    return {
      data: []
    };
  },
  methods: {
    getData() {
      // 生成虚拟数据: 它是一个数组，长度是 1 ~ 10, 数组中都是对象，每个对象中有一个 id，id会进行自增
      var data = Mock.mock({
        "list|1-10": [
          {
            "id|+1": 1,
            fist: "@cfirst",
            last: "@clast",
            cname: "@cname"
          }
        ]
      });
      this.data = data;
    },
    getDataFormAjax() {
      axios.get("/getData").then(res => {
        console.log(res);
      });
    }
  }
};
</script>

效果见图一,mock.js中的代码:

import Mock from "mockjs";
// 生成拦截的规则
Mock.mock("/getData", "get", function() {
  // 返回当前接口需要的数据
  let data = Mock.mock({
    "list|1-10": [
      {
        "id|+1": 1,
        first: "@cfirst",
        last: "@clast"
      }
    ]
  });
  return data;
});

记得在main.js中引用 import './mock/mock.js'

效果图:

被拦截后