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 模擬數據，實現前后端分離開發