前端的 mock server

在一箇中大型項目中，你不可能一邊寫着前端一邊寫後端。全棧太難 :)

像rails那樣的開發模式已經很不適合當前的環境了。全部的項目都嚷嚷着先後端分離，那就只能這麼幹

我以前在作大學狗們的時候，在mock數據這一塊曾經特別難受

雖然說整個先後端我都能掌控，可是由於整個前端是一個repo，後端又是一個，我在開發的時候又不能開着兩個編輯器(有一段時間這麼幹過)，並且十分不想在本身電腦上安裝那麼多東西。

一開始的解決方案很扯淡：

後端Mock方案

不想在本身電腦上安裝那就連遠端服務器吧。反正學生優惠的Server超級便宜，並且再開個二級域名沒有任何損失。

說幹就幹。

在遠端開發服務器上先把後端拉下來，搞數據庫。是laravel作的，因此mock數據也仍是挺輕鬆的。整個一套弄下來了。

而後給Nginx加上跨域的header。

好了，到這裏服務端就完成了。

雖然很不舒服，但仍是能忍受對吧。然而扯淡的在前端

前端要發請求，因此每一個請求的url都是http://dev.foo.com/，而生產環境服務器又是http://www.bar.com/。

我想出了一個"聰明"的法子：在全部請求前面加上一個prefix，在dev環境就設置成http://dev.foo.com/, 生產環境就改過來。這樣全部請求的prefix就是個變量，在release以前替換一下就能夠了！

天才！

就像是這樣

// release前修改
const prefix = 'http://dev.foo.com/'

// 其餘文件中
fetch(`${prefix}/api/users`).then(res => res.json()).then(data => todo(data))

而後我改字符串的時候就哭了☹ 若是你願意讀一下源碼，你會體會到我當時崩潰的心情，這裏還殘留着這個方案的痕跡(要改太多地方了)

不過說真的，雖然這套方案問題至關大，然而它確實是有用的，支撐了我好幾個月。

難以忍受這套方案的同時我也在尋找好的解決方案。

前端Mock方案

由於我是在校生嘛，沒辦法瞭解到大公司的開發方式。在這個痛點發生之後就一直關注這方面的內容。

我一直想在webpack-dev-server這邊作箇中間層，把這個server作成完整後端那種的，包含路由什麼的，直接返回json。

由於一直考慮其餘的事情，一直拖着沒作，另外也以爲webpack這套東西好像也有點兒複雜，不太願意碰。

其實還有個問題，我相信mock這一塊大公司確定碰到的比我早，爲何我沒有搜索到這樣的包？是他們不肯意這麼作仍是有更好的解決方案？

最近總算是找到了個還算靠譜的一套方案，流程是這樣的：

首先開一個mock server，只有路由功能，返回假數據。

在webpack-dev-server中加上proxy，把對server的請求都轉發給proxy，不存在跨域的東西，能夠很逼真的模擬。

這套方案就很棒，徹底不用修改請求url。

說幹就幹：

$ npm install --save faker
$ npm install -g json-server

在項目目錄下建立mock目錄，而後作路由和數據

// mock/db.js
'use strict'
const faker = require('faker')

module.exports = function() {
    let data = {
        'activity': [
            {
                id: 0,
                title: faker.lorem.words(),
                img: faker.image.image()
            }
        ]
    }
    return data
}

路由文件，主要把對/api/*的請求轉到/*，主要是簡單一些

{
    "/api/": "/"
}

而後把這個mock server 起一下吧

$ json-server mock/db.js --routes mock/routes.json --port 9999

剩下的是webpack那邊的配置了。核心是這些：

const config = require('./webpack.config')
config.devServer = {
    hot: true,
    inline: true,
    proxy: {
        '/api/*': {
            target: 'http://127.0.0.1:9999',
            secure: false
        }
    }
}
module.exports = config

好了，配置也能夠了。

$ webpack-dev-server --process --colors --hot --inline --devtool eval --config webpack.dev.config.js

全部的事情都作完了，只剩下測試了

找個入口文件測試一下：

fetch('/api/activity').then(res => res.json()).then(data => console.log(data))

ok。把我折騰了這麼幾個月的先後端總算是完全分開了

問題

這套流程的最大問題在於json-server這麼個東西，由於是純粹的RESTful的server。一樣是上面的配置爲例：

GET /api/activity
POST /api/activity {title: 'foo', image: '/foo.jpg'}
PUT /api/activity/1 {title: 'bar', image: '/bar.jpg'}
DELETE /api/activity/1

對RESTful有了解就明白了，分別對應的是獲取, 建立, 更新, 刪除操做

固然還有更多的json-server的設置，好比查詢，關係什麼的，底下我會給連接。

這些東西能夠說設計是很不錯的。然而也是問題。

老系統徹底不能用。或者設計不夠好的系統根本不能用。

可能後端就職性！就不遵照REST API，那麼這個前端mock只能靠routes.json來調整，然而更多的狀況是沒辦法調整的。

因此啊，這個mock server方案對後端要求很嚴格

References

• 你是如何構建 Web 前端 Mock Server 的？

• JSON Server

• faker.js

• Egghead.io free video tutorial - Creating demo APIs with json-server

原文：前端的 mock server