Mock.js 的使用

Mock.js （基于 Vue 项目中演示）

参考自 （mockjs官网）

安装

npm install mockjs
复制代码

新建一个 mock.js 文件

import Mock from 'mockjs'

export const list = Mock.mock({
  'foods|10-50': [{
    'id|+1': 1, // id++
    'name': '@ctitle(2,10)', // 随机生成中文title
    'img': "@image('600x600',#b7ef7c)", // 图片
    'brief': '@csentence(1,50)', // 随机生成段落
    'price|0-20.0-2': 1, // 数字
    'num': 0,
    'minusFlag': true, // Boolean 值
    'time': '@time', // 时间
    '配送费|0-100.0-2': 1,
    'limit|0-50': 1,
    'email': '@email',
    'array|1-10': ['Mock.js'], // 随机数组
    'object|2-4': { // Object
      '110000': '北京市',
      '120000': '天津市',
      '130000': '河北省',
      '140000': '山西省'
    }
  }],
  'sales|10-50': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'name': '@ctitle(2,10)',
    'img': "@image('600x600',#b7ef7c)",
    'brief': '@csentence(1,50)',
    'price|0-100.0-2': 1,
    'num': 0,
    'minusFlag': true,
    'time': '@time',
    'peisongfei|0-100.0-2': 1,
    'limit|0-100': 1
  }]
})
复制代码

在对应的 .vue 页面中使用 以下：

import { list } from '@/mock.js'
 
 created () {
    console.log(list)
}
复制代码

效果以下：

模拟 ajax 请求

Mock.mock( rurl, rtype, template )

mock.js 文件：

import Mock from 'mockjs'

Mock.mock('/api/goodsList', 'get', {
  'goodsList|15-50': [{
    'id|+1': 1,
    'title': '@ctitle(5,10)',
    'company': '@csentence(10, 30)',
    'num|100-999': 90, // 100-999 的随机数
    'image': '@image("400×400", #b7ef8b)',
    'flag|1': true // true/false 几率各一半
  }]
})
复制代码

.vue 文件中：

import axios from 'axios'

created () {
    axios.get('/api/goodsList').then(res => {
      console.log(res.data)
    })
}

复制代码

结果以下：