Vue —— mockjs 的使用方法

文章目录

• 一、关于mockjs
  • 1..mock.js是什么？
  • 2.为什么用mockjs？
• 二、使用步骤
  • 1.安装
  • 2.在main.js引入
  • 3.mockjs文件
  总结

---

一、关于mockjs

1.mock.js是什么？

mockjs是生成随机数据的一款前端工具，用来模拟 Ajax 请求，生成并返回模拟数据。

2.为什么用mockjs？

当程序员做项目开发时，前端工程师要请求后端做好的数据时，有可能后端还没做好，但是没有后端数据就无法开展前一步工作，只能等着后端做好数据，会严重影响前端开发效率，这时我们就会想有没有一种可能或者技术让前端开发独立于后端呢，mockjs就横空出世了，mockjs就可以模拟Ajax请求，发送模拟数据，只需要设置好数据接口和相应的字段等以后后端做好数据就可以直接替换，丝毫不影响前端开发效率

二、使用步骤

1.安装

使用npm 方式

npm i mockjs

2. 在main.js引入

// 引入mockjs

import     './api/mock';

3. mockjs文件

在scr根目录下，新建ap文件夹，新建 mock.js 文件

Mock.mock('/api/home/getData','get',homeapi.getStatisticalData); 、

参数解释:

参数一： 所要请求的服务器的地址

参数二：请求方式

参数三：自定义模拟数据的方法

// 引入mockJs
import Mock from 'mockjs';
//引入mock参数三中模拟的方法，方法中含有模拟的数据
import homeapi from '../api/mockServerData/home';

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

自定义模拟数据

mockjs文件夹下新建文件夹 —— mockServerData 文件夹  ——在这里以新建home.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(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: [
          {
            date: '周一',
            new: 5,
            active: 200
          },
          {
            date: '周二',
            new: 10,
            active: 500
          },
          {
            date: '周三',
            new: 12,
            active: 550
          },
          {
            date: '周四',
            new: 60,
            active: 800
          },
          {
            date: '周五',
            new: 65,
            active: 550
          },
          {
            date: '周六',
            new: 53,
            active: 770
          },
          {
            date: '周日',
            new: 33,
            active: 170
          }
        ],
        // 折线图
        orderData: {
          date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
          data: List
        },
        tableData: [
          {
            name: 'oppo',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000
          },
          {
            name: 'vivo',
            todayBuy: 300,
            monthBuy: 2200,
            totalBuy: 24000
          },
          {
            name: '苹果',
            todayBuy: 800,
            monthBuy: 4500,
            totalBuy: 65000
          },
          {
            name: '小米',
            todayBuy: 1200,
            monthBuy: 6500,
            totalBuy: 45000
          },
          {
            name: '三星',
            todayBuy: 300,
            monthBuy: 2000,
            totalBuy: 34000
          },
          {
            name: '魅族',
            todayBuy: 350,
            monthBuy: 3000,
            totalBuy: 22000
          }
        ]
      }
    }
  }
}

页面获取mock的方式

•  // 引入请求后台接口数据的方法
• //  调用请求数据的接口

 // 引入请求后台接口数据的方法

    import { getData } from '../api/index';

//  调用请求数据的接口

 getData().then((response) => {
                const { data } = response.data;
}

​​​​​​​​​​​​​​

---