注:本文主要學(xué)習(xí)于vue-cli 本地開發(fā)mock數(shù)據(jù)使用方法,加上我自己的理解和實(shí)踐。

實(shí)習(xí)了半年，一直覺得公司前后端的交互方式太麻煩了，很多時(shí)候前端都得根據(jù)后端的進(jìn)度開發(fā)，不用說也知道，嗯，效率很低嘛。咋解決呢？

我想，前后端在開發(fā)之前一定要根據(jù)問題討論需要的接口和數(shù)據(jù)格式，整理出api文檔之后再同時(shí)開始各自的開發(fā)。我認(rèn)為這樣的開發(fā)流程才是正確、高效的。

那么問題來了，如果沒有后端接口，前端怎么調(diào)試呢？

這就講到今天的主角啦，mockjs。

mockjs的官網(wǎng)是這樣說的：

生成隨機(jī)數(shù)據(jù)，攔截 Ajax 請(qǐng)求
mockjs官網(wǎng)

mockjs的作用已經(jīng)很明顯了，就是給前端人員用來攔截ajax，造虛擬數(shù)據(jù)進(jìn)行調(diào)試的。

mockjs的安裝參見官網(wǎng)哦。
基本的用法如官網(wǎng)所示：

// 使用 Mock
var Mock = require('mockjs');
var data = Mock.mock({ 
// 屬性 list 的值是一個(gè)數(shù)組，其中含有 1 到 10 個(gè)元素
   'list|1-10': [{ 
    // 屬性 id 是一個(gè)自增數(shù)，起始值為 1，每次增 1 
    'id|+1': 1 
    }]
});
// 輸出結(jié)果
console.log(JSON.stringify(data, null, 4))

這樣就能得到一些基本的虛假數(shù)據(jù)。
數(shù)據(jù)的類型還包括圖片、鏈接、姓名等，可以根據(jù)需要查閱mockjs官網(wǎng)。

但是得到假數(shù)據(jù)還不能滿足我們的需求，這樣做完的調(diào)試最后還是需要重新寫請(qǐng)求與后端聯(lián)調(diào)。mockjs攔截ajax的優(yōu)點(diǎn)就有大顯身手的地方啦！

怎么攔截ajax請(qǐng)求呢？具體的思路就是我們建一個(gè)服務(wù)器，把a(bǔ)jax請(qǐng)求發(fā)到這個(gè)服務(wù)器，服務(wù)器再根據(jù)請(qǐng)求返回模擬的數(shù)據(jù)。

我們使用json-server來創(chuàng)建一個(gè)完整的假REST API服務(wù)器，這樣前端要做的僅需寫一個(gè)json文件即可，完全不必有任何服務(wù)器和后端的知識(shí)。
json-server安裝參考json-server官網(wǎng)。

• 我們首先創(chuàng)建一個(gè)vue項(xiàng)目

vue init webpack 項(xiàng)目名

• 然后安裝項(xiàng)目$ npm install
• 安裝mockjs$ npm install mockjs
• 安裝json-server $ npm install -g json-server
• 項(xiàng)目根目錄下創(chuàng)建mock文件夾
• mock文件夾下創(chuàng)建db.json文件，寫入：

{
  "test1": [
    { "id": 1, "name": "test1", "author": "aoyi" }
  ],
  "test2": [
   { "id": 2, "name": "test2", "author": "aoyi" }
  ]
}

• 我們?cè)趐ackage.json的scripts中添加命令:

"mock": "json-server --watch mock/db.json",
  "mockdev": "npm run mock & npm run dev"

這樣我們使用npm run mock 就可以跑服務(wù)啦，訪問 http://localhost:3000/就可以看到我們服務(wù)器內(nèi)容。

localhost:3000

test1、test2和db就是我們可以訪問的資源,例如在瀏覽器中訪問 http://localhost:3000/db就可以得到相應(yīng)的數(shù)據(jù)。

image.png

這樣我們基本的完成了。但是涉及到數(shù)據(jù)量很大的情況，讓我們手寫恐怕是要死的吧。我們可以使用faker.js批量生成數(shù)據(jù)。

• $ npm install faker -g全局安裝 faker
• mock 目錄下創(chuàng)建 faker-data.js，內(nèi)容如下:

module.exports = function () {
    var faker = require("faker");
    faker.locale = "zh_CN";
    var _ = require("lodash");
    return {
        book:_.times(14,function (n) {
            return {
                id:n,
                name:faker.random.word(),
                src:faker.random.image()
            }
        })
    }
}

• $ json-server mock/faker-data.js
• 在 json server 中使用 faker請(qǐng)求 http://localhost:3000/book 可以獲取到隨機(jī)生成的10組偽數(shù)據(jù)

image.png