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);
})
}