前端的 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