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>
打印数据
实际效果
如有错误,请多指教,谢谢!