一个超简单的 RestFUL API 接口 Mock 工具，建议各位前端同学来使用哦！

灰太狼 2023-07-23 05:55 90阅读 0赞

# 一个超简单的 RestFUL API 接口 Mock 工具，建议各位前端同学来使用哦！ #

在我们前端的开发工作中，如果与后端做好了前后端并行开发的安排，那么我们肯定是少不了使用 Mock 工具的。作为前端同学对于网上流行的各种 Mock 工具应该都有一些了解，但是这些工具要么太过于强大，使用它还得学习一下它是怎么玩儿的，比如著名的 `mockjs` 工具。要么过于简陋，比如网上各种5分钟开发一个 mock 服务的教程。

针对这样的情况，我个人开发了一款超简单的 RestFUL API 接口 Mock 工具。今天讲解的是初代版本，该版本拥有完整的 RestFUL API 接口模拟功能，使用极其简单。我将其命名为 `simple-mock`。

> 当然，因为功能太简单，太易用，因此不能满足一些复杂场景。针对这样的情况，我会尽快开发一个功能更强大的版本，并且会保持易用的特性。但是，我当前发布的 `v0.0.1` 版本已经可以胜任大多数常见使用场景，因此，来讲解这个的使用还是有一定的意义的。
> 
> 如果不满足你的需求，可以稍微等两天。。。

## 下载与安装 ##

我们在 [https://github.com/fengcms/simple-mock/releases][https_github.com_fengcms_simple-mock_releases] 下载 `v0.0.1` 的 `releases` 版本。

在命令行中进入项目文件夹后执行如下命令：

# 安装依赖
    npm i
    # 运行项目
    npm start

运行后，如下图所示，可以看到我们的 `mock` 服务已经在 `3000` 端口上跑起来了。

![服务已经在3000端口上跑起来了][3000]

## mock 基础配置 ##

在项目根目录中，我们打开 `config.js` 文件，这个就是我们的配置文件。

module.exports = { 
      prefix: '/api/v1/',
      port: 3000,
      host: '0.0.0.0'
    }

`prefix` 是接口前缀的配置，根据你的实际情况进行调整。  
`port` 是 `mock` 服务运行的默认端口，如果你的端口被占用了，可以调整一下。  
`host` 是运行IP，默认是 `0.0.0.0`。这个配置是局域网内可以访问的，你只要知道你的IP地址是多少就可以了。如果只允许本地访问，可以修改为 `127.0.0.1` 即可。

## 访问测试接口 ##

在项目中，我 `api` 目录放了三个接口演示文件:

![接口演示文件][20200407111801700.png]

这三个文件分别演示了 `mock` 分别支持 `js`、`json` 两种类型的接口模拟文件，并且 `js` 文件是支持动态计算数据的。

下面以 `book` 这个接口为例：

**GET http://0.0.0.0:3000/api/v1/book**

![GET LIST][]

**POST http://0.0.0.0:3000/api/v1/book**

![POST LIST][]

**GET http://0.0.0.0:3000/api/v1/book/1**

![GET ITEM][]

**DELETE http://0.0.0.0:3000/api/v1/book/1**

![DELETE ITEM][]

**PUT http://0.0.0.0:3000/api/v1/book/1**  
![PUT ITEM][]

如上图多图所示，一个接口模拟文件，可以完整的支持 `RestFUL` 风格的所有模拟数据。

## 接口模拟文件解读 ##

我们还是以 `book` 接口为例，来看一下我们的接口模拟文件是怎么撰写的：

module.exports = { 
      list: { 
        get: { 
          status: 0,
          data: { 
            list: [
              { 
                id: 1,
                name: 'The three-body problem'
              }, { 
                id: 2,
                name: 'Interstellar'
              }
            ]
          }
        },
        post: { 
          status: 0,
          msg: 'add success'
        }
      },
      item: { 
        get: { 
          status: 0,
          data: { 
            id: 1,
            name: 'The three-body problem'
          }
        },
        put: { 
          status: 0,
          msg: 'edit success'
        },
        delete: { 
          status: 0,
          msg: 'delete success'
        }
      }
    }

如上，我们可以按到，模拟文件导出了一个对象，其中 `list` 节点是服务于 `/api/v1/book` 接口，而 `item` 节点服务于 `/api/v1/book/:id` 这样的接口。

而这其中的子节点就是各个支持的**方法名的小写**，再其中的，就是我们的模拟数据了。

因为这是 `js` 文件，所以它也是支持动态方法的。我们来看一下 `love.js` 文件源码：

function makeList () { 
      let o = []
      for (let i = 0; i < 10; i++) { 
        o.push({ 
          id: i,
          name: 'fungleo',
          old: 30
        })
      }
      return o
    }
    
    module.exports = { 
      list: { 
        get: { 
          status: 0,
          data: { 
            list: makeList()
          }
        },
        post: { 
          status: 0,
          msg: '添加成功'
        }
      },
      item: { 
        get: { 
          status: 0,
          data: { 
            name: 'fungleo',
            old: 30
          }
        },
        put: { 
          status: 0,
          msg: '修改成功'
        },
        delete: { 
          status: 0,
          msg: '删除成功'
        }
      }
    }

相信各位一看就一目了然了。

好，到此，该 `mock` 服务的主要内容就讲解完成了。如果你需要添加某个接口，只需要在 `api` 目录新建一个接口名的 `js` 文件，然后自己去编写该接口的 `mock` 数据即可了。

## 我们的接口风格不是 RestFul 怎么办？ ##

当然，有部分朋友可能会有这个疑问。比如，在很多公司，都只采用 `post` 方法，而弃用其他的接口请求方法的。其实，这是很简单的。举个例子，比如你要模拟一个 `getBook` 的接口，可以搞：

1.  新建一个 `getBook.js` 的文件。
2.  在其中录入以下内容即可

const data = { 
      // 你要模拟的数据放在这里
    }
    module.exports = { 
      list: { 
        post: data
      },
    }

这样就好啦！是不是巨简单呢？

## 下一版本功能提前预报 ##

当前发布的这个版本，可以满足绝大多数的使用场景了，但是还是有很多场景是无法模拟的。为了更真实的模拟数据，下一版本我会增加如下功能：

1.  接口请求延迟时间设定，方便我们模拟服务器慢的情况。
2.  支持接收前端请求参数，可以根据请求参数动态返回不同的内容。
3.  增加图片上传接口模拟，（现在也可以，不过很多人不知道怎么写）。
4.  增加校验登录功能，通过判断 `header` 或者 `cookies` 是否包含指定字段来判断是否登录。
5.  更简洁的接口返回格式设置（不用每个地方都写一些固定的返回参数）。
6.  内置一些便于模拟接口的方法，让大家可以更简单更快的模拟接口数据。
7.  如果你还有其他需求，可以在评论中或者我的github项目中给我留言，我会考虑加入的哦！

本项目 github 地址： [https://github.com/fengcms/simple-mock][https_github.com_fengcms_simple-mock] ，喜欢的话，去给我点个赞，关注一下吧！

> 本文允许转载，转载需注明文章首发地址，并不得去除我正文中的 github 地址，谢谢！

[https_github.com_fengcms_simple-mock_releases]: https://github.com/fengcms/simple-mock/releases
[3000]: /images/20230528/30e89cf2bca8428da65a3eaa77b44037.png
[20200407111801700.png]: /images/20230528/afad359eb29c4dd9b4ed3dcea1cd2b9c.png
[GET LIST]: /images/20230528/222420ee287348598a40c5d8939ea792.png
[POST LIST]: /images/20230528/38f25c76da1e4897951b1519d40b454d.png
[GET ITEM]: /images/20230528/8a2d4d625e03490f89eb5f2a11852aa0.png
[DELETE ITEM]: /images/20230528/aea6665f96ee418784184502b2cd440e.png
[PUT ITEM]: /images/20230528/3b528f8c2fe44a2c838f10f7858b7427.png
[https_github.com_fengcms_simple-mock]: https://github.com/fengcms/simple-mock