注：在Vue-cli3+中引入。
1.安装mock.js
npm i mockjs -S
2.在src/api中创建test.js
import axios from 'axios'
export function getData () {
return axios.get('/getMock')
}
3.在src/mock/modules中创建test.js
import Mock from 'mockjs'
const List = []
const count = 2
const baseContent = '我是测试数据我是测试数据'
const imageUri = 'https://image.com/e455.jpg'
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
id: '@increment',
timestamp: +Mock.Random.date('T'),
author: '@first',
reviewer: '@first',
title: '@title(5, 10)',
content_short: '我是测试数据',
content: baseContent,
forecast: '@float(0, 100, 2, 2)',
importance: '@integer(1, 3)',
display_time: '@datetime',
comment_disabled: true,
pageviews: '@integer(300, 5000)',
imageUri,
platforms: ['a-platform']
}))
}
export default {
getList: config => {
return List
}
}
4.在src/mock中创建index.js
import Mock from 'mockjs'
import test from './modules/test'
Mock.mock(/\/getMock/, 'get', test.getList)
5.main.js中引入mock文件启用
import './mock'
6.调用接口，拿到mock数据
// app.vue
<script>
import { getData } from 'src/api/test'
export default {
name: 'App',
data () {
return {}
},
created () {
this.getMock()
},
methods: {
getMock () {
getData().then(res => {
console.log(res.data)
})
}
}
}
</script>
