mockjs入门

# 介绍

mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。

# 使用方式

这里主要讨论在vue项目中，使用axios发送ajax请求，mock.js模拟数据的流程。

# 1. vue-cli搭建项目后，安装axios和mock.js

npm install axios --save-dev
npm install mockjs --save-dev

1
2

# 2. 新建一个mock文件夹

.
├─ src
│  └─ mock
│     └─ index.js
|     └─ data.js
|  └─ network
│     └─ request.js
|     └─ api.js
└─ package.json

1
2
3
4
5
6
7
8
9

# 3. 在mock文件夹下的index.js中写入

import Mock from 'mockjs' // 引入mockjs

import data from './data'
import operation from './operation'

Mock.mock(/home\/data/, ['post',] home) // 如果需要post请求,加上"post",否则默认get请求

1
2
3
4
5
6

# 4. 在main.js中引入

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'

require(./mock.js)

1
2
3
4
5
6

# 5. 在mock文件夹下再新建一个data.js

import Mock from 'mockjs' // 引入mockjs

const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
let data = {
  status: 200,
  message: '获取数据列表成功',
  // 生成5到10条，或者直接data|5条数据
  'data|5-11': [{
    // mock自增函数@increment-从1开始
    id: '@increment(1)',
    // 随机返回中文文字-显示名字
    name: '@cword(2, 8)',
    // 随机返回一个自然数
    price: '@natural(2, 10)',
    count: '@natural(100, 999)',
    // 建议使用 data字符串压缩64格式，你建议url地址请求
    img: '@dataImage(78x78)',
    'order|2': {
      id: 1,
      name: '订单1',
      price: 999
    }, // 在对象中随机抽取2个属性进行返回
  }]
}

export default data;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 5. 写入axios

// request.js
import axios from 'axios'

export function request(config) {
  const instance = axios.create({
    // 这里需要一个接口，如果不是真实的接口会导致无法使用
    // baseURL: 'https://www.baidu.com/', 
    timeout: 5000
  })

  instance.interceptors.request.use(config => {
    return config
  }, err => {})
  
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err)
  })
  return instance(config)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 6. 写入api

// api.js
import {
  request
} from "./request";

// 注册
export function getHomeDataList() {
  return request({
    url: '/api/dataList',
    method: 'get',
  })
}

1
2
3
4
5
6
7
8
9
10
11
12

# 7. 在index.vue中发送请求获取数据

import {getHomeDataList} from "@/network/api"; 
 // ...
 methods: {
    // 获取数据
    async getHomeDataList() {
      const res = await getHomeDataList();
      console.log(res);
    },
  }

1
2
3
4
5
6
7
8
9

# 8. 最后打开控制台就可以看到我们获取到的数据了

# 更多语法见mock.js官网

mockjs.com (opens new window)

在GitHub上编辑

上次更新: 4/27/2021, 11:18:01 AM

← mongodb+node+express+vue 网页长截图→