Vue項目中引入mockjs

前提：建立好的vue項目

前言：

• 為什麼引入mockjs：為了實作前後端分離，開發工作可以異步進行
• 其他工具：axios
• 一般的前後端互動過程：前端 --> ajax請求 --> 網絡協定 --> 後端服務 --> 後端處理後傳回請求結果給前端 --> 前端接收請求結果，做後續處理
• 前後端分離的互動過程：前端 --> axios --> 網絡協定 --> mockjs模拟請求結果 --> 前端接收Mock出來的資料，做後續處理
• 相當于mockjs充當原本的背景服務的角色，axios充當api請求的角色。

1、安裝 mockjs 和 axios

轉到項目根目錄，輸入指令：

#npm install axios --save-dev

#npm install mockjs --save-dev

【慢的話用國内鏡像，cnpm指令即可】

2、添加mock規則

/src/mock.js

// 引入mockjs
const Mock = require('mockjs')
// 擷取 mock.Random 對象
const Random = Mock.Random
// mock一組資料
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( url, post/get , 傳回的資料)
Mock.mock('/news/index', 'post', produceNewsData)　　      

3、在 main.js 引入并注冊

require('./mock.js')

4、其他：

Mock官網：Mock.mock(rurl, rtype, template)，記錄資料模闆。當攔截到比對 rurl 和 rtype 的 Ajax 請求 時，将根據模闆 template 生成模拟資料，并作為相應資料傳回。

• rurl：表示需要攔截的 URL,可以是 URL字元串或 URL正則，如：‘/domin/list.json’    /\/domian\/list\.jsaon\
• rtype：表示需要攔截的Ajax請求類型。如 GET、POST、PUT、DELETE等。
• template：表示資料模闆。可以是對象或字元串。如 {‘data|1-10’:[{}]}、‘@EMAIL’

是以說此時如果要想通過axios（模拟的是http請求）調用mockjs，那麼需要用ajax請求。

資料：

1. vue+mockjs 模拟資料，實作前後端分離開發