使用jsonserver模拟号程序员

在开发过程中，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。

对比过多种mock工具后，我最终选择了使用 json server 作为工具，因为它足够简单，写少量数据，即可使用。也因为它足够强大，支持CORS和JSONP跨域请求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查询方法，如limit，order等。下面我将详细介绍 json server 的使用。

首先你的电脑中需要安装nodejs，建议使用最新版本。然后全局安装json server.

使用linux和macOS的电脑需要加上sudo

安装完成后可以用 json-server -h 命令检查是否安装成功，成功后会出现

然后使用到 /mock 目录下执行 npm run mock 命令，如果成功会出现

PATCH 和 DELETE 使用方式同上，就不做演示了。

/mock 下运行

但是在开发环境中，name 这个属性应该是诸如 “李铁蛋”， “张艳华” 或者是 “Brenda Thomas”， “Daniel Wilson” 这样接地气的名字，而不是 “user0”, “user1” 这样让人望而生畏的名字，对于用户的 年龄，性别，籍贯，也应该有比较合理的数据展示。

这些看起来有些怪异的中文格式，多半是不能用于国内的数据模拟的，我们再看看 mockjs 的表现：

虽然 mockj s可以模拟的数据不如 faker 那么多，但是由于其对中文的良好支持，并且使用了位于国内的随机图片提供商，显然是更适合国情的选择。

在 /mock 目录下安装

我知道有些人不会去认真的阅读官方文档，所以在此摘抄一些官方文档中的例子作为示范：

我知道有些人不会去认真的阅读官方文档，所以在此摘抄一些官方文档中的例子作为示范：

通过阅读 mockjs 的官方文档可以发现，它其实是作为一个独立的 mock server 存在的，就算没有json server，一样可以反馈数据，但是由于以下一些缺点，让我只能把它作为一个数据构造器来使用：

不能跨域使用

与某些框架中的路由处理逻辑冲突

无法定义复杂的数据结构，比如下面的数据结构，images 将会是字符串 [object object]， 而非预想中的数组：

无法自定义较为复杂的路由

下面是一个使用 mockjs 构造的比较复杂的数据格式,对象是一个新闻列表，其中有100条新闻，每条新闻有对应的id，标题，内容，简介，标签，浏览量，和一个图片数组：

/mock 下运行

在安装好json server之后，通过 json-server -h 可以看到如下配置项：

既可以通过命令行方式单行配置，如

运行

在 /mock 下建立 public 目录，即可直接访问其下的所有静态文件，包括但不限于js, css ,markdown 文件等。

可以通过自定义路由的形式，简化数据结构，或是建立高弹性的web api，例如

访问 /news/1/show 和 topics/1/show 均返回指定的 /news/1 内容。

* 需要注意的是，路由必须以 / 开头

数据过滤是 json server 中非常强力的功能。通过url上简单的query字段，即可过滤出各种各样的数据。示例数据源:

使用 . 操作对象属性值

使用 _start 和 _end 或者 _limit (response中会包含 X-Total-Count)