Mock隨機數據

1. 先安裝 mock.js
   npm install mockjs --save-dev
2. 模擬數據接口
   在項目的src目錄下創建一個mock目錄，然后在里面新建一個index.js文件，作為mock的導出點，用於提供給src/main.js使用。
   在src/mock下新建modules目錄，里面再新建各種xxx.js，用來模擬各個頁面的數據。
3. src目錄結構圖:
   
4. index.js代碼:

// 引入mockjs
import Mock from 'mockjs'
// 引入模板函數類
import ratings from './modules/ratings'

// Mock函數
const { mock } = Mock

// 設置延時
Mock.setup({
  timeout: 400
})

// 使用攔截規則攔截命中的請求，mock(url, post/get, 返回的數據);
mock(/\/api\/ratings\/list/, 'post', ratings.list)
// mock(/\/api\/ratings\/list/, 'get', ratings.list)

5. ratings.js代碼:
   
   

// 引入隨機函數
import { Random } from 'mockjs'
// 引入Mock
const Mock = require('mockjs')

// 定義數據
const listData = Mock.mock({
  'data|20': [{
    username: () => Random.cname(),
    time: () => Random.date('yyyy.M.d'),
    content: () => Random.csentence(5, 10)
  }]
})

function list (res) {
  // res是一個請求對象，包含: url, type, body
  return {
    code: 200,
    data: listData.data,
    message: '請求成功'
  }
}

export default { list }

6. mockjs使用Random方法生成隨機數據的規則  官方文檔
7. main.js中引入模擬數據接口:
   在 src/main.js 中需要加入以下代碼

import '@/mock'

8. 安裝axios   npm install axios
9. main.js中引入axios

import axios from 'axios'
// 配置axios 到原型中
Vue.prototype.$axios = axios

10. main.js完整代碼:
    
    

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import '@/mock'


Vue.prototype.$axios = axios
Vue.config.productionTip = false

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

11. 頁面使用:
    
12. 打印數據: