一.安装
在项目文件下的命令行窗口中输入：npm install mockjs --save-dev（或者用cnpm install mockjs --save-dev）
二.配置数据
在src文件中新建一个文件夹util，新建mock.js文件，内容如下，随便配置了三个接口，第三个引用mock的Random对象，随机生成图片和文字
import Mock from 'mockjs'; /*引用mockjs*/
/*配置接口：url地址及数据*/
Mock.mock('http://mysite/weblist', {
weblist:[
{type:'html'},
{type:'css'},
{type:'javascript'}
]
});
Mock.mock('http://mysite/userlist', {
userlist:[
{name:'Mary'},
{name:'Tom'},
{name:'Lucy'}
]
});
// 获取 mock.Random 对象
const Random = Mock.Random;
const produceNewsData = function() {
let articles = [];
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}
return {
articles: articles
}
}
Mock.mock('http://mysite/produceNews','post', produceNewsData);
三.使用mock接口
比如在vue组件中使用ajax请求接口。
vue2.0建议用axios，所以先安装npm install axios
在main.js中添加
import axios from 'axios'
Vue.prototype.$http=axios
在vue组件中使用
import data from '@/util/mock' /*导入mock.js文件*/
vm.$http.get("http://mysite/userlist")
.then(function(res){
console.log（res.data.userlist）;
})
.catch(function(err){
console.log(err)
})
