在前后端分離的大環(huán)境下浪感，前端需要后端的接口去完成頁(yè)面的渲染，但是大部分的情況下,前后端需要同時(shí)進(jìn)行開發(fā)饼问，這種情況下,后端還沒完成數(shù)據(jù)輸出影兽，前端只好寫靜態(tài)模擬數(shù)據(jù)。面臨一些問題：數(shù)據(jù)太長(zhǎng)了莱革，將數(shù)據(jù)寫在js文件里峻堰，完成后挨個(gè)改url；某些邏輯復(fù)雜的代碼盅视，加入或去除模擬數(shù)據(jù)時(shí)得小心翼翼捐名；想要盡可能還原真實(shí)的數(shù)據(jù)，要么編寫更多代碼闹击，要么手動(dòng)修改模擬數(shù)據(jù)镶蹋；特殊的格式，例如IP,隨機(jī)數(shù)赏半，圖片贺归，地址，需要去收集等等断箫。
Mock.js 正是這樣一款類庫(kù)拂酣，可以幫我們模擬生成一堆數(shù)據(jù)，也能解決那些問題仲义。
安裝
mock官網(wǎng)
npm安裝：npm install mockjs
package文件中顯示當(dāng)前mockjs版本說明安裝成功婶熬。
(也可以引入cdn：<script src="http://mockjs.com/dist/mock.js"></script>)
mockjs 文件
在main.js同級(jí)下建立mock.js文件：
// 引入mockjs
const Mock = require('mockjs');
const qs = require('qs');
// 獲取 mock.Random 對(duì)象
const Random = Mock.Random;
// 登錄
const login = function() {
let status = false;//登錄狀態(tài)：ture--成功，false--失敗
status = true;
return {
status: status
}
}
// 表格分頁(yè)
const tblList = function(param) {
param = param.body || '';//獲取傳過來(lái)的參數(shù)
// console.log(qs.parse(param));//因?yàn)閍xios的post帶參數(shù)被qs.stringfy()轉(zhuǎn)換了埃撵，需要轉(zhuǎn)回來(lái)尸诽。
if(param == ''){
//無(wú)查詢條件
let bookdata = Mock.mock({
'books|1-10': [{
'sid|+1': 1,
'date': '@date("yyyy-MM-dd")',
'name': '@csentence()',
'address': '@county(true)',
'region': '雙流區(qū)'
}]
});
// console.log(bookdata);
return bookdata;
}else{
//帶查詢條件
let paramObj = qs.parse(param);
console.log('input parameter：...');
console.log(paramObj);
let books = [];
for (let i = 0; i < 10; i++) {
let newBook = {
// thumbnail_pic_s: Random.dataImage('300x250', 'mock的圖片'), // Random.dataImage( size, text ) 生成一段隨機(jī)的 Base64 圖片編碼
date: Random.date(),
name: paramObj.name+Random.csentence(),
address: Random.county(true),
region: paramObj.region
}
books.push(newBook)
}
return {
books: books
}
}
}
//圖書列表
const bookList = function(param) {
param = param.body || '';//獲取傳過來(lái)的參數(shù)
// console.log(qs.parse(param));
// 因?yàn)閍xios的post帶參數(shù)被qs.stringfy()轉(zhuǎn)換了，需要轉(zhuǎn)回來(lái)盯另。
let paramObj = qs.parse(param);
console.log(paramObj);
let nameInput = paramObj.name || '';
let books = [];
for (let i = 0; i < 10; i++) {
let temp = i+1;
let newBook = {
sid: temp,
// thumbnail_pic_s: Random.dataImage('300x250', 'mock的圖片'), // Random.dataImage( size, text ) 生成一段隨機(jī)的 Base64 圖片編碼
author: Random.name(2,4),
name: '《'+nameInput+Random.csentence()+"》",
publishAt: Random.date(),
description: Random.cparagraph()
}
books.push(newBook)
}
return {
books: books
}
}
//獲取文件列表
const fileList = function (param) {
param = param.body || '';//獲取傳過來(lái)的參數(shù)
// console.log(qs.parse(param));
// 因?yàn)閍xios的post帶參數(shù)被qs.stringfy()轉(zhuǎn)換了性含，需要轉(zhuǎn)回來(lái)。
let paramObj = qs.parse(param);
console.log(paramObj);
let files = [];
for (let i = 0; i < 3; i++) {
let newFile = {
name: paramObj.username + i +'.png',
url: Random.dataImage('300x250', 'mock的圖片'), // Random.dataImage( size, text ) 生成一段隨機(jī)的 Base64 圖片編碼
}
files.push(newFile)
}
return {
fileList: files
}
}
// Mock.mock( url, post/get , 返回的數(shù)據(jù))鸳惯；
Mock.mock('/mk_login', 'post', login);// 登錄
Mock.mock('/mk_tbllist', 'post', tblList);// 表格分頁(yè)
Mock.mock('/mk_booklist', 'post',bookList);// 圖書列表
Mock.mock('/mk_fileupload', 'post',{});// 文件上傳
Mock.mock('/mk_fetchFiles', 'post',fileList);// 獲取文件列表
main.js 引入mock
在main.js中引入mock文件：
require('./mock');
使用
vue文件中訪問該接口mock：
(調(diào)用的url接口和mock.js文件的Mock.mock( url, post/get , 返回的數(shù)據(jù))的url接口一致商蕴，就能被mock攔截。)
api.post('/mk_login', data)
.then(res => {
console.log(res.data);
if(res.data.status){
// 登錄成功
this.setUserInfo2(data);
this.$router.replace('/home');
}
})
.catch(error => {
console.log("login異常：")
console.log(error)
})
