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目錄結構圖:
    image
  4. index.js代碼:
  5. // 引入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)
  6. ratings.js代碼:

  7. // 引入隨機函數
    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 }
  8. mockjs使用Random方法生成隨機數據的規則  官方文檔
  9. main.js中引入模擬數據接口:
    在 src/main.js 中需要加入以下代碼
  10. import '@/mock'
  11. 安裝axios   npm install axios
  12. main.js中引入axios
  13. import axios from 'axios'
    // 配置axios 到原型中
    Vue.prototype.$axios = axios
  14. main.js完整代碼:

  15. 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')
  16. 頁面使用:
    image
  17. 打印數據:
    image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM