前端MOCK--使用 json-server 和 faker.js 模拟后台API

什么是json-server

---

帮助前端开发人员快速搭建REST API服务用于原型展示和MOCK

REST API

---

关于REST API这里不展开了，简单讲就是一种web的架构风格，有如下特点：

• URI 表示了要访问服务器上某个资源的位置
• 客户端向服务器请求的资源指定了具体某种形式，如html、json
• 客户端通过四个HTTP动词(GET,POST,PUT,DELETE)，对服务器端资源进行操作

有兴趣的可以参考这个教程

json-server 快速入门

---

第一步 搭建mock server工程

我在网上找了个脚手架工程，你可以用这个，或者随便找一个VUE的脚手架开始搭建自己的json-server服务工程

配置流程

• 全局安装： $ npm install -g json-server
• 项目目录下创建 mock 文件夹
• mock 文件夹下添加db.json 文件，内容如下

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

通过脚本启动服务
json-server mock/db.json

当你看到命令行出现下面的字符，恭喜你已经成功的搭建了自己的mock server工程

这时候在浏览器上直接输入URL即发送了get请求

你可以借助POSTMAN尝试下post、 put、 delete等其他HTTP方法

第二步 学会使用Routes

json-server很厉害的地方了，除了能支持GET/POST/PUT/DELETE多种http方法，还默认了许多常见的路由方式，甚至可以用过--routes命令自定义路由。

常见的几种默认路由：

1，过滤

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

2,分页

GET /posts?_page=7
GET /posts?_page=7&_limit=20

3,排序

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

重写路由规则

在不使用RESTFUL API的项目中请求URL可能是类似这样的，代表获取某个posts

http://domain-name.com/project-name/module-name/queryPost.json?id=2&title=kaka

使用重写路由的方式，使json-server可以应用在非RESULT API项目中。在mock文件夹下新建routes.json文件，创建一个映射关系:

{
    "/project-name/module-name/queryPost.json\\?*":"/posts?$1"
}

重启mock server:

json-server mock/db.json --routes mock/routes.json

使用浏览器发送GET请求，和预计一样获取到数据，说明重写路由映射有效。

在mock server的控制台可以看到日志：

第三步 借助faker.js生成批量生成伪数据

纯手写大量的伪数据是比较费时的，faker.js提供了为多种数据格式生成随机数据的方法库.

在我们的mock server工程中安装faker.js:

npm install faker

下面我们用一个js文件来生成某客户营销信息的伪数据：

//workbench.js
var faker = require('faker');
//生成中文字符
faker.locale = "zh_CN";
//如果你要用json-server的话，就需要export这个生成fake data的function
module.export = function() {
    const custBaseInfo = {
        custName:faker.name.findName(),
        custSex:'男',
        custPhone:faker.phone.phoneNumber()
    }
    const custMarketInfo = {
        product:faker.commerce.product(),
        pageName:faker.internet.domainName(),
        triggerTime:faker.date.past(),
        cashLine:faker.finance.amount()
    }
    return {
        "getCustInfo":{
            "ret":"0",
            "errMsg":null,
            "errCode",null,
            "data":custBaseInfo
        },
        "getMarketInfo":{
            "ret":"0",
            "errMsg":null,
            "errCode",null,
            "data":custMarketInfo
        }
    }
}

重启mock server

json-server mock/workbench.js

从浏览器发送get请求,可以成功获取数据