mock的基本使用

mock数模拟实战

mock 就是前端用来模拟后端接口的工具，通过拦截前端的请求，自己定义一些返回的数据。
当通过 axios 进行发送请求之后，能够得到后端返回的数据
mock的官方网站

mock方法里面一些参数的含义

Mock.mock( rurl?, rtype?, template|function( options ) )
rurl ： url 表示要拦截的接口，可以是绝对地址或者正则表达式
rtype：表示请求类型 get / post 等等
template|function( options ) ：处理的函数

在项目中的使用

注意事项 在下载的时候或者进行引入的时候 写的是 mockjs 而不是mock.js
（1）在项目中进行下载 mock

npm i mockjs

（2） 创建一个mock.js 文件

// 引入mock
import Mock from 'mockjs'
import homeApi from './mockServeData/home'

/**  定义mock请求拦截
 第一个参数 请求地址 '/home/getData'
 第二个参数 接口请求类型 get / post

*/
// 里面引入封装好的数据里面的方法 homeApi.getStatisticalData
Mock.mock('/home/getData',homeApi.getStatisticalData
        // function(){
        //     // 拦截到请求后的处理逻辑
        //     console.log(1111111111); 
        //     // 在没有进行 return 的时候 返回的数据 是undefined
        //     // 如果随意的返回一个数据（可以是任意类型 也就是可以自定义接口返回的数据），此时里面的data 就变为 1
        //     // return 1
        // }

)

封装的数据文件 api文件夹下的mockServeData 文件夹下的home.js

import Mock from 'mockjs'

// 图表数据
let list = []
export default {
    getStatisticalData:()=>{
        // mock.Random.float 产生随机数 100 - 8000 之间 保留小数 最小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(100,8000,0,0),
                    三星: Mock.Random.float(100,8000,0,0),
                    小米: Mock.Random.float(100,8000,0,0),
                })
            )
        }
        return {
            code:20000,
            data:{
                // 饼图
                videoData:[
                    {
                        name:'小米',
                        value:2999
                    },
                    {
                        name:'苹果',
                        value:5999
                    },
                    {
                        name:'vivo',
                        value:1500
                    },
                    {
                        name:'oppo',
                        value:1999
                    },
                    {
                        name:'魅族',
                        value:2200
                    },
                    {
                        name:'三星',
                        value:4500
                    }

                ],
                // 柱状图
                userData:[
                    {
                        data:'周一',
                        new:5,
                        active:200
                    },
                    {
                        data:'周二',
                        new:10,
                        active:500
                    },
                    {
                        data:'周三',
                        new:12,
                        active:550
                    },
                    {
                        data:'周四',
                        new:60,
                        active:800
                    },
                    {
                        data:'周五',
                        new:65,
                        active:550
                    },
                    {
                        data:'周六',
                        new:53,
                        active:770
                    },
                    {
                        data:'周日',
                        new:33,
                        active:170
                    }
                ],
                // 折线图
                orderData:{
                    data:['20221013','20221014','20221015','20221016','20221017','20221018','20221019'],
                    data:list
                },
                tableData:[
                    {
                        name: "oppo",
                        todayBuy: 500,
                        monthBuy: 3500,
                        totalBuy: 22000,
                      },
                      {
                        name: "vivo",
                        todayBuy: 300,
                        monthBuy: 2200,
                        totalBuy: 20000,
                      },
                      {
                        name: "苹果",
                        todayBuy: 800,
                        monthBuy: 4500,
                        totalBuy: 65800,
                      },
                      {
                        name: "小米",
                        todayBuy: 1200,
                        monthBuy: 6500,
                        totalBuy: 45000,
                      },
                      {
                        name: "三星",
                        todayBuy: 300,
                        monthBuy: 2000,
                        totalBuy: 20800,
                      },
                      {
                        name: "魅族",
                        todayBuy: 350,
                        monthBuy: 3000,
                        totalBuy: 28000,
                      },
                ]
            }
        }
    }
}

（3）在main.js 文件里面进行引入

// 此时引入的是 src 下的 api 文件夹里面的 mock.js文件
import '@/api/mock'