mockJs模拟数据在vue中的的用法
第一步
安装mockjs:npm install mockjs --sava-dev
第二步
在项目src中创建一mockJs文件夹,在改文件夹下面创建一个mock.js文件,并且在main.js中引入这个文件。如图:
第三步
mockjs的使用,在mock.js中模拟简单的一些数据,代码如下:
const Mock = require('mockjs')
const Random = Mock.Random
const produceData = function (opt) {
console.log(opt, 'opt')
let articles = [];
for (let i = 0; i < 30; i++) {
let newAriticleObject = {
title: Random.csentence(5, 30),
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'),
author_name: Random.cname(),
date: Random.date() + ' ' + Random.time()
}
articles.push(newAriticleObject)
}
return {
data: articles
}
}
Mock.mock('/news', /post|get/i, produceData)
第四步 使用
先安装axios
npm install axios --sava
然后在main.js中引入 import axios from 'axios'
注意:axios不能使用Vue.use(),而是这样Vue.prototype.axios = axios
然后在created中调用,打印出来看看数据
this.axios.get('/news', "")
.then(res => {
console.log(res.data.data)
})
动一遍手基本上就差不多明白
关于生成什么数据的参考地址:http://mockjs.com/examples.html#Name