[JavaScript知识库]vue配置mock.js模拟数据？

vue配置mock.js模拟数据？

mock 的作用：
使用 mock 可以模拟后台接口提供页面需要的数据，方便前端自动化测试，一般用于前后端分离的项目场景。

mock 官网：
http://mockjs.com/

mock GitHub 地址：
https://github.com/nuysoft/Mock/wiki

在 vue 项目中配置 mock.js 步骤：

1、安装：

在工作中接触的是使用 npm 方式安装，因此本文使用的方式是 npm 方式安装，安装命令如下：

npm install mock.js

2、在 js 文件夹中新建 mock.js 文件（放哪里都无所谓，不过建议尽量存放在 js 文件夹中，方便集中管理），复制以下内容到 mock.js 文件中。后续所有接口的数据都是在这里模拟：

const Mock = require('mockjs');

// Mock响应模板
Mock.mock("/api/example", {
    "user|1-3": [{ // 随机生成1到3个数组元素
        'name': '@cname', // 中文名称
        'id|+1': 88, // 属性值自动加 1，初始值为88
        'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型
        'birthday': '@date("yyyy-MM-dd")', // 日期
        'city': '@city(true)', // 中国城市
        'color': '@color', // 16进制颜色
        'isMale|1': true, // 布尔值
        'isFat|1-2': true, // true的概率是1/3
        'fromObj|2': obj, // 从obj对象中随机获取2个属性
        'fromObj2|1-3': obj, // 从obj对象中随机获取1至3个属性
        'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
        'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
        'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组
    },
    {
        'gf': '@cname'
    }
    ]
});

// Mock响应模板-userOperation
Mock.mock("/api/userOperation", {
    id: '个人中心',
    AccountTitle: '账户名称',
    passWord: '12345',
    phone: '307594995xiong',
    email: '307594995@qq.com'
});

3、在main.js中引入 mock.js ：

4、在vue页面中模拟请求（前提是安装了 axios）：

<script>
export default {
    data () {
        return {
        };
    },
    mounted () {
        this.getExample();
    },
    methods: {
        getExample () {
            const _this = this;
            _this.axios({
                url: "/api/example",
                type: 'get',
                dataType: 'json'
            })
                .then(res => {
                    console.log(res);
                });
        }

    }
};
</script>

5、打开浏览器控制台可以看到：

结束。