Vue項目中使用mockjs實現mock模擬數據

此篇文章針對的是vue cli 2腳手架搭建的項目引入mock.js實現mock數據

Mock.js的主要作用是生成隨機數據，攔截 Ajax 請求

安裝mock.js

npm install mockjs --save-dev

模擬數據接口

在項目的src目錄下創建一個mock目錄，然后在里面新建一個index.js文件，作為mock的導出點，用於提供給src/main.js使用。

在src/mock下新建modules目錄，里面再新建各種xxx.js，用來模擬各個頁面的數據。

src目錄截圖

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)

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 }

關於mockjs使用Random方法生成隨機數據的規則，大家可以查看它的官方文檔

main.js中引入模擬數據接口

在src/main.js中需要加入以下代碼

// 引入mock文件，正式發布時，注釋掉該處即可
import '@/mock'

安裝axios

npm安裝axios

npm install axios

main.js中引入axios

// 引入axios
import axios from 'axios'

// 配置axios到原型鏈中
Vue.prototype.$axios = axios

main.js完整代碼

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引入路由
import router from './router'
// 引入vant
import Vant from 'vant'
import 'vant/lib/index.css'
// 引入axios
import axios from 'axios'

// 引入樣式文件
import '@/common/stylus/index.styl'

// 引入mock文件，正式發布時，注釋掉該處即可
import '@/mock'

// 配置axios到原型鏈中
Vue.prototype.$axios = axios

Vue.config.productionTip = false
Vue.use(Vant)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
  // components: { App },
  // template: '<App/>'
})

頁面使用

<template>
  <div class="ratings">
    <van-list
      v-model="loading"
      :finished="finished"
      loading-text="拼命加載中"
      finished-text="沒有更多評價了"
      @load="onLoading">
      <van-cell
        clickable
        center
        size="large"
        v-for="(v, i) in list"
        :key="i"
        :title="v.username"
        :value="v.content"
        :label="v.time"
      />
    </van-list>
  </div>
</template>

<script>

export default {
  name: 'Ratings',
  data () {
    return {
      msg: '評價頁面',
      loading: false,
      finished: false,
      list: []
    }
  },
  methods: {
    onLoading () {
      // 使用axios獲取mock的模擬數據
      this.$axios.post('/api/ratings/list').then(res => {
        const { code, data } = res.data
        if (code === 200 && data) {
          data.forEach(v => {
            this.list.push(v)
          })
          this.loading = false // 加載狀態結束
        }
        if (this.list.length >= 100) {
          this.finished = true // 數據全部加載完畢
        }
      }).catch(err => {
        console.log(`調用失敗：${err}`)
      })
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.ratings
  text-align: center
</style>

打印數據

實際效果

評價頁面

如有錯誤，請多指教，謝謝！