摘要：然而扯淡的在前端前端要發請求，所以每個請求的都是，而生產環境服務器又是。前端方案因為我是在校生嘛，沒辦法了解到大公司的開發方式。可能后端就任性就不遵守，那么這個前端只能靠來調整，然而更多的情況是沒辦法調整的。

在一個中大型項目中，你不可能一邊寫著前端一邊寫后端。全棧太難 :)

像rails那樣的開發模式已經很不適合當前的環境了。所有的項目都嚷嚷著前后端分離，那就只能這么干

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

雖說整個前后端我都能掌控，但是因為整個前端是一個repo，后端又是一個，我在開發的時候又不能開著兩個編輯器(有一段時間這么干過)，而且十分不想在自己電腦上安裝那么多東西。

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

不想在自己電腦上安裝那就連遠端服務器吧。反正學生優惠的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))

然后我改字符串的時候就哭了? 如果你愿意讀一下源碼，你會體會到我當時崩潰的心情，這里還殘留著這個方案的痕跡(要改太多地方了)

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

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

因為我是在校生嘛，沒辦法了解到大公司的開發方式。在這個痛點發生以后就一直關注這方面的內容。

我一直想在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方案對后端要求很嚴格

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

JSON Server

faker.js

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

原文：前端的 mock server