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)
    })
}

複製代碼

結果以下：