前端开发中使用mock模拟数据进行开发的方法之一

使用mock进行模拟数据开发

第一步：npm i mockjs -D 这里必须加-D，因为我们只是开发环境使用
第二步：在 main.js 文件中引入mock：import '@/mock'
第三步：创建mock文件夹，里面模拟自己需要调接口返回的假数据：

// 引入随机函数
import { Random } from 'mockjs'
// 引入Mock
const Mock = require('mockjs')

const userListData = Mock.mock({
    'data|10': [
        {
            id: () => Random.id(),
            nickName: () => Random.cword('零一二三四五六七八九十', 3),
            phone: () => Random.integer(11111111111, 99999999999),
            tgCount: () => Random.integer(0, 200),
            earnings: () => Random.float(2000, 10000, 0, 2),
        },
    ],
})

function userList(res) {
    return {
        code: 200,
        data: userListData.data,
        message: '获取成功',
        total: 20,
        size: 10,
        user_count: 20,
        shop_count: 20,
    }
}

const shopListData = Mock.mock({
    'data|10': [
        {
            shop_id: () => Random.id(),
            shop_name: () => Random.cword('零一二三四五六七八九十', 3),
            address: () => Random.city(true),
            shop_tel: () => Random.integer(11111111111, 99999999999),
            open_date: () => Random.date(),
            earnings: () => Random.float(2000, 10000, 0, 2),
        },
    ],
})
function shopList(res) {
    return {
        code: 200,
        data: shopListData.data,
        message: '获取推广店铺成功',
        total: 20,
        size: 10,
        earnings_count: 20000,
        shopCount: 20,
    }
}
export default {
    userList,
    shopList,
}

这里切记要暴露出去才能，具体数据怎么模拟可以参考mock官方文档。
第四步：在api文件夹中定义自己要访问的方法，接口，请求方式，请求参数：

import http from '../../plugins/http'

export const getUserList = (params) => {
    return http.get('/api/cuz/userList')
}

export const getShopListById = (id) => {
    return http.get(`/api/cuz/shopList/${id}`)
}

第五步：在mock文件夹下创建index.js，用来拦截匹配自己在api中定义的请求，并对此返回模拟出的假数据：

// 引入mockjs
import Mock from 'mockjs'
// 引入模板函数类
import ratings from './modules/ratings'
import cuz from './modules/cuz'

// Mock函数
const { mock } = Mock

// 设置延时
Mock.setup({
    timeout: 400,
})

// 使用拦截规则拦截命中的请求，mock(url, post/get, 返回的数据);
mock(/\/api\/ratings\/list/, 'post', ratings.list)

mock(/\/api\/cuz\/userList/, 'get', cuz.userList)
mock(/\/api\/cuz\/shopList/, 'get', cuz.shopList)

第六步：将api文件中定义的各个方法导入相应组件中进行模拟发送请求，并获取返回数据