mockjs在vue中的使用
安装好vue-cli后
加载模块：
npm install mockjs
创建mock.js文件到src目录下的任一合适文件内新建mockjs.js，设置好拦截信息，设置规则可看官网规则
例如下面是模拟的一条数据：
import Mock from 'mockjs'
export default Mock.mock('msg', {
'name' : '@name',
'age|1-100': 100,
'color' : '@color'
});
多条数据
import Mock from 'mockjs'
const Random = Mock.Random;
export default Mock.mock('msg',getData);
function getData(){
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
}
}
在组件中使用
import axios from 'axios';
import mockdata from "@/router/mockjs";
mounted: function(){
axios.get('msg').then(res=>{
// this.data1 = res.data;
console.log(res);
})
}