mockjs的基本使用

1. 安装

npm install mockjs

2. 使用

        1. 在 src/api/mock.js文件中

import Mock from 'mockjs'


Mock.mock('/api/home/getData', 'get', function (){
    console.log('返回数据')
})

        2. 在main.js中引入

import './api/mock'

        3. 在api/index.js中创建接口

import request from "@/utils/requset";

export function getIndexData() {
    return request({
        method: 'get',
        url: '/home/getData'
    })
}

        4. 调用接口，即可

  async getAllData() {
      const res = await getIndexData()
      console.log(res.data)
    }

3. 数据的分装：因为把数据都放到mock中太不美观了

        1. 在 src/api/mockServeData/index.js中定义函数用于返回数据

// mock数据模拟
import Mock from 'mockjs'

// 图表数据
let List = []

export default {
    getStatisticalData: () => {
        //Mock.Random.float产生随机数100到8000之间保留小数最小0位最大0位
        for (let i = 0; i < 7; i++) {
            List.push(
                Mock.mock({
                        苹果: Mock.Random.float(100, 8000, 0, 0),
                        vivo: Mock.Random.float(100, 8000, 0, 0),
                        oppo: Mock.Random.float(100, 8000, 0, 0),
                        魅族: Mock.Random.float(1100, 8000, 0, 0),
                        三星: Mock.Random.float(100, 8000, 0, 0),
                        小米: Mock.Random.float(1100, 8000, 0, 0)
                    }
                )
            )
        }
        return {
            code: 20000,
            data: {
                // 饼图
                videoData: [
                    {
                        name: '小米',
                        value: 2999
                    },
                    {
                        name: '苹果',
                        value: 5999
                    },
                    {
                        name: 'vivo',
                        value: 1500
                    },
                    {
                        name: 'oppo',
                        value: 1999
                    },
                    {
                        name: '华为',
                        value: 6999
                    },
                    {
                        name: '一加',
                        value: 4999
                    },
                ],
                // 柱状图
                userData: [
                    {
                        date: '周一',
                        new: 5,
                        active: 2100
                    },
                    {
                        date: '周二',
                        new: 10,
                        active: 11200
                    },
                    {
                        date: '周三',
                        new: 15,
                        active: 800
                    },
                    {
                        date: '周四',
                        new: 20,
                        active: 200
                    },
                    {
                        date: '周五',
                        new: 30,
                        active: 2000
                    },
                    {
                        date: '周六',
                        new: 25,
                        active: 2001
                    },
                    {
                        date: '周日',
                        new: 51,
                        active: 1200
                    },
                ],
                // 折线图
                orderData: {
                    date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
                    data: List
                },
                tableData: [
                    {
                        name: 'oppo',
                        todayBuy: 500,
                        monthBuy: 3500,
                        totalBuy: 22000
                    },
                    {
                        name: '小米',
                        todayBuy: 1500,
                        monthBuy: 2500,
                        totalBuy: 40000
                    },
                    {
                        name: '苹果',
                        todayBuy: 550,
                        monthBuy: 6500,
                        totalBuy: 32000
                    },
                    {
                        name: 'vivo',
                        todayBuy: 1400,
                        monthBuy: 2800,
                        totalBuy: 32000
                    },
                    {
                        name: '华为',
                        todayBuy: 5000,
                        monthBuy: 14000,
                        totalBuy: 60000
                    },
                    {
                        name: '一加',
                        todayBuy: 440,
                        monthBuy: 1800,
                        totalBuy: 12000
                    },
                ]
            }
        }
    }
}

        2. 在src/api/mock.js中使用

import Mock from 'mockjs'
import homeApi from './mockServerData/home'

Mock.mock('/api/home/getData', 'get', homeApi.getStatisticalData)

        3. 接着调用接口即可