【Vue】自定义mock数据，模拟后台接口

一、开发背景

        在写前端vue项目中，会出现因为没有后端接口而造成的没有可用数据的现象。如果通过在前端写死假数据会很费时费力，这时就需要利用到mock数据，模拟后台接口，实现从接口获取数据。

二、mock简介

官方网站地址：http://mockjs.com

在官网中详细介绍了mock的语法规范等内容，这里就不做过多解释了。

三、使用mock

本篇文章中的部分代码参考：【Vue】使用mock模拟数据 作者：小绵杨Yancy

首先，安装mock.js

npm install mockjs

安装axio.js

npm install axios

在src文件夹中新建mock文件夹，在文件夹中新建两个.js文件：index.js和goodList.js文件，其中，goodList.js文件可以根据需求自定义。

index.js中的代码：

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});
                        
//原文链接：https://blog.csdn.net/ZHANGYANG_1109/article/details/124547442

goodList.js中的代码：

let goodList = {
    code: 200,
    message: 'success',
    data: {
        total: 100,
        'rows|10': [{
            User: '@cname',
            'Status|0-2': 2,
            'Opinion|1': ['字符串1', '字符串2', '字符串3'],
            veTouxiang: ''
        }]
    }
};
export default {
    'get|/getGoodList': goodList
}

其中，data中的语法规范部分参考官方文档。

在main.js中运行mock：

require('./mock/index');

在我们需要进行引入数据的vue代码文件中进行如下操作：

import axios from 'axios'
export default {
  data() {
    return {
      goodList: []
    }
  },
  mounted () {
     this.getData();
  },
  methods: {
    getData() {
      axios.get('/getGoodList').then((res) => {
        console.log(res)
        this.doodList = res.data.data.rows;
      })
    }
  }
}

这样，我们的模拟请求就成功了，打开浏览器，可以看到请求成功的效果。