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>

打印数据

实际效果

评价页面

如有错误，请多指教，谢谢！