在Vue项目中使用Mock

一、Mock介绍

mock.js可以通过随机数据来模拟各种场景，不需要修改既有代码，就可以拦截 Ajax
请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则，非常简单方便,
无侵入性, 基本覆盖常用的接口数据类型。

结合vue使用

1.安装

使用yarn安装

yarn add mockjs2 --save

2.引入mock.js

通过vue脚手架搭建的项目，在src目录下创建mock文件夹区分。
在mock文件夹下面创建文件index.js,以及模拟接口模块api文件夹，其中index.js内容如下：

// 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
    // 使用同步加载依赖
    const Mock = require('mockjs2')
    const fs = require("fs");
    require('./api/user')
    Mock.setup({
        timeout: 100 // 请求延时时间
    })
    console.log('#####################启动Mock服务#####################')
}

在api文件夹下面创建接口模拟服务user.js

import Mock from "mockjs2";

//获取用户数据
Mock.mock(/\/api\/user\/user/, "get", {
    status: 200,
    message: "success",
    data: {
        "id|+1": 1, // 模拟自增+1
        id: "@increment(1)", // 自增的数字
        name: "@cname()", // 中文名称
        introduce: "@cword(10,20)", // 中文字
        img: "@dataImage(64x64)" // 图片
    }
});

在main.js中引入mock

import './mock'

3.使用测试

在测试页面里面使用

<template>
  <div>
    <button @click="this.getUser">加载信息按钮</button><br>
  </div>
</template>

<script>
import axios from "axios";

export default {
  components: {},
  data: function () {
    return {
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    getUser() {
      axios.get("/api/user/user").then(res => {
        console.log(res.data)
      });
    }
  }
};
</script>

效果图：