MockJs | 易学教程

mockjs的使用

作用：根据数据模板生成模拟数据。

1、安装mockjs cnpm i mockjs

2、 src文件下，新建文件夹mockjs，

3、 mockjs文件中新建 index.js 和 home.js文件

4、home.js文件夹写入需要模拟数据

import Mock from 'mockjs'
export default {
    getHomeData: () => {
        return {
            code: 200,
            data: {
                videoData: [
                    {
                        name: 'C语言',　　　　　　　　　　　　　　      //Mock.Random.float(整数部分的最小值, 整数部分的最大值, 小数部分位数的最小值, 小数部分位数的最大值)
                        value: Mock.Random.float(1000, 10000, 0, 2)
                    },
                    {
                        name: 'Vue',
                        value: Mock.Random.float(1000, 10000, 0, 2)
                    },
                    {
                        name: '小程序',
                        value: Mock.Random.float(1000, 10000, 0, 2)
                    },
                    {
                        name: 'React',
                        value: Mock.Random.float(1000, 10000, 0, 2)
                    },
                    {
                        name: 'ES6',
                        value: Mock.Random.float(1000, 10000, 0, 2)
                    },
                    {
                        name: 'C++',
                        value: Mock.Random.float(1000, 10000, 0, 2)
                    },
                ]
            }
        }
    }
}

5、 index.js文件写入：

import Mock from 'mockjs'
import homeAPi from './home'
// 设置200-2000毫秒延时请求数据
Mock.setup({
    timeout: '200-2000'
})
// 首页相关
// 拦截 /home/getData的Ajax请求  
Mock.mock(/\/home\/getData/, 'get', homeAPi.getHomeData)

6、在main.js引入mockjs文件夹

import http from './api/config'

成功得到的数据

来源：https://www.cnblogs.com/0520euv/p/11723156.html

标签

mock