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

妖狐艹你老母 2022-05-18 09:28 345阅读 0赞

## 什么是[json-server][] ##

--------------------

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

## REST API ##

--------------------

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

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

有兴趣的可以参考这个[教程][Link 1]

## json-server 快速入门 ##

--------------------

### 第一步 搭建mock server工程 ###

我在网上找了个[脚手架工程][Link 2]，你可以用这个，或者随便找一个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工程  
![这里写图片描述][70]

这时候在浏览器上直接输入URL即发送了get请求  
![这里写图片描述][70 1]

你可以借助[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请求，和预计一样获取到数据，说明重写路由映射有效。  
![这里写图片描述][70 2]

在mock server的控制台可以看到日志：  
![这里写图片描述][70 3]

### 第三步 借助[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请求,可以成功获取数据  
![这里写图片描述][70 4]

[json-server]: https://github.com/typicode/json-server
[REST API]: http://www.ruanyifeng.com/blog/2011/09/restful.html
[Link 1]: https://restfulapi.net/
[Link 2]: https://github.com/carrotz/vue-cli-mock
[70]: /images/20220518/b26988d0a02f4bd59db670940e96d02b.png
[70 1]: /images/20220518/3a59f0a0a7ee4e8196a3f0d4f9ccefc6.png
[POSTMAN]: https://www.getpostman.com/
[70 2]: /images/20220518/0666797016aa4bd2bfd96caefead4bdd.png
[70 3]: /images/20220518/1780db3048174224ae7a09129fe31d71.png
[faker.js]: https://github.com/marak/Faker.js/
[70 4]: /images/20220518/b4c0367369de4d2a9c9e6d5103434b58.png