技術標籤：vuevue

使用mockjs模擬資料

• 1 下載

npm install mockjs

• 2 使用
  1 在api資料夾下新建mock.js檔案

import Mock from 'mockjs';


// 為了模擬真實，設定請求延遲
Mock.setup({
    // 1s之後返回
    timeout: 1000
})
// 匹配路徑返回資料
// 除了可以使用字串匹配路徑，還可以使用正則匹配路徑
// Mock.mock('/api/user', {
//     username: 'xiaoming',
//     age: 18,
//     gender: '男'
// })
// 正則匹配，匹配/api/user開頭的
 

Mock.mock(/^\/api\/user/igs, {
    username: 'xiaoming',
    age: 18,
    gender: '男'
})

使用mock資料，不會影響原來的請求，沒有被mock匹配到的請求會正常請求資料
2 在main,js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
// 判斷，如果是開發模式，引入mock
if
 
 (process.env.NODE_ENV == 'development') require('@/api/mock')

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

• mock還可以隨機資料

// mock還可以隨機資料
Mock.mock(/^\/api\/user/igs, {
    username: 'xiaoming',
    // 隨機時間
    "mtime": "@datetime",
    // 隨機得分1-800
    "score|1-800"
 
: 800,
    // 隨機等級
    "rank|1-100": 100,
    // 隨機生成中文的名字
    "nickname": "@cname"
})