如何使用Mock.js来模拟后端接口

HelloWorldZ

发布于 2024-03-20 18:22:15

2210

发布于 2024-03-20 18:22:15

前言

我记得暑假的时候，浅浅用过Mook返回的数据，但是那个时候，并不是很喜欢学习前端，现在我想继续深入学习前端了，对于前端越来越喜欢了，也愿意不断去探索了，那就做个记录吧，如下是记录我使用 mook 数据的一个过程，以前写 vue 的时候，我写渲染模板的时候，都是将数据都写在 data 对象里面，或者使用本地的json文件来模拟后端返回的数据。

Mook.js详细语法使用文档传送门

详细使用

为项目安装依赖包

# 安装
npm install mockjs

新建 mock.js 文件

api / mock.js

import Mock from 'mockjs'
import homeApi from './mockServerData/home'
// 定义 mock 请求拦截
// 参数一：接口地址
// 参数二：接口/请求类型 默认 get
// 参数三：数据处理函数
Mock.mock('/api/home/getData', 'get', homeApi.getStatisticalData())

在api文件夹下新建 mockServerDate 文件夹来存放数据处理函数

这样来做的话，将数据处理函数单独封装起来，数据就也模块化管理起来了。

home.js

import Mock from 'mockjs'
const List = []
// 暴露一个对象出去
export default {
  getStatisticalData: () => {
    // Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
    for (let i = 0; i < 7; i++) {
      List.push(
        Mock.mock({
          A: Mock.Random.float(100, 8000, 0, 0),
          B: Mock.Random.float(100, 8000, 0, 0),
          C: Mock.Random.float(100, 8000, 0, 0),
          D: Mock.Random.float(100, 8000, 0, 0),
          E: Mock.Random.float(100, 8000, 0, 0),
          F: Mock.Random.float(100, 8000, 0, 0)
        })
      )
    }
    // 数据将会在这里返回
    return {
      code: 200,
      data: {
        List
      }
    }
  }
}

这样就可以模拟生成了一些图表数据，并且将这些数据通过接口返回了：