在前后端分離開發(fā)模式下，前端項(xiàng)目通常在項(xiàng)目構(gòu)建初期需要使用假數(shù)據(jù)以及相應(yīng)的http請求來進(jìn)行輔助開發(fā)，例如在后端接口還沒開發(fā)好下，我們可以模擬http請求以及數(shù)據(jù)來進(jìn)行前端的axios封裝,接口設(shè)計(jì)，對http狀態(tài)碼處理等。前端模擬數(shù)據(jù)的方法有許多種，假如你熟悉node.js以及express框架，你可以快速地構(gòu)建一個(gè)后端服務(wù)器來進(jìn)行輔助開發(fā)，我本人也比較喜歡這種方式，這種方法在我日后的文章將會(huì)有介紹。如果你不熟悉node也沒關(guān)系，我將一步一步教你如何在前端vue項(xiàng)目中使用mock.js來構(gòu)建一個(gè)模擬假數(shù)據(jù)環(huán)境。

1 ,安裝mock.js

npm install mockjs --save

2,安裝axios

npm install axios --save

3新建一個(gè)文件夾mock 下面有一個(gè)文件mock.js,mock.js作用主要用來生成假數(shù)據(jù)以及提供了一個(gè)服務(wù)器，有了這個(gè)服務(wù)器我們通過定義api來訪問mock.js生成的數(shù)據(jù)

mock.js內(nèi)容

const Mock = require('mockjs');const Random = Mock.Random;//造新聞列表數(shù)據(jù)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 ) 生成一段隨機(jī)的 Base64 圖片編碼      author_name: Random.cname(), // Random.cname() 隨機(jī)生成一個(gè)常見的中文姓名      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默認(rèn)為yyyy-MM-dd；Random.time() 返回一個(gè)隨機(jī)的時(shí)間字符串    }    articles.push(newArticleObject)  }   return {    articles: articles  }};

上述mock.js內(nèi)容主要是引入mock模塊，然后生成100條新聞列表數(shù)據(jù).對于mock生成數(shù)據(jù)的一些規(guī)則就省略了，讀者可以自己去mock官網(wǎng)了解一些常用的生成規(guī)則。例如Random.csentence(5, 30)代表的含義。

這里再演示幾個(gè)生成數(shù)據(jù)的方法

//生成100個(gè)用戶登入信息const produceUserInfo=function(){  let Users=[];  let type=['游客','會(huì)員','管理員'];  for(let i=0;i<100;i++){   let obj=Mock.mock({    userId:i+1,    userName:Random.cname(),    userEmail:Random.email(),    'userType|+1':type   })   Users.push(obj);  }};//生成一篇文章詳情const articleDetail=function(){ let obj={}; obj.author_name=Random.cname(); obj.title=Random.csentence(5, 30); obj.publish_date=Random.date(); obj.content=Random.paragraph(100); obj.view=Random.integer(0, 10000); obj.source='今日頭條' return{  data:obj }}//生成類型列表數(shù)據(jù)const getlist=function(){ let arr=[] for(let i=0;i<100;i++){   let obj={};   obj.id=i+1;   obj.title=Random.csentence(5, 30);   obj.date=Random.date();   arr.push(obj); } return {  data:arr }}const adminInfo=[ {  name:'admin',  password:'admin',  email:'4399@qq.com' },{  name:'test',  password:'test',  email:'1341313944@qq.com' },{  name:'admin',  password:'abc123',  email:'112360@qq.com' },{ }]