在前端开发过程中，往往需要与后端开发人员协调好接口，并按照约定协议来进行开发。但在一些特定情况下，由于种种原因，后端可能并不会在早期就提供接口，这时候，前端开发人员需要自己构建接口数据来进行开发和测试。而 npm 提供的 webservice-mocker 就是一个很好的工具，可以帮助前端开发人员快速构建一个符合接口规范的测试服务器，方便调试和接口开发。
安装和使用
webservice-mocker 是一个 npm 包，因此需要预先安装 node 和 npm。在命令行输入以下命令：
npm install -g webservice-mocker
安装完成后，在命令行中输入以下命令来启动webservice-mocker:
wsm start [--port <port>] [--logLevel <level>] [--dir <path>]
启动参数说明：
--port <port>，指定启动的端口号，默认为 5000。--logLevel <level>，指定日志输出级别，默认为 info。--dir <path>，指定接口数据的根目录，默认为命令行当前目录。
除了在命令行中启动外，我们也可以在 package.json 文件中配置启动命令。例如，我们可以在 package.json 文件的 scripts 块中添加以下内容：
{
"scripts": {
"mock": "wsm start --port=7000 --dir=./mock"
}
}这样，在命令行中输入以下命令即可启动 webservice-mocker：
npm run mock
配置接口数据
我们已经启动了 webservice-mocker，但是如果没有配置数据，我们还是无法使用。这时候需要在指定的路径下创建接口数据文件。下面，我们以 mock 目 录为例，假设其绝对路径为 /Users/abc/project/mock/。
├── /Users/abc/project/mock/ │ ├── users │ │ ├── 1.json │ │ ├── 2.json │ │ ├── 3.json │ │ ├── GET.json │ │ └── POST.json │ └── index.json
在Users/abc/project/mock/users目录下，为每个 URL 地址设计一个文件，文件名为请求方式，例如 GET.json 或 POST.json。在请求方式文件中，可以按照返回数据格式来定义数据，如下所示：
-- -------------------- ---- -------
-
------- --
------ ----------
------- -
----- --
------- ------
------ --
-
-此外，在相同的目录下，还可以设计专门的 404.json 和 index.json 文件。其中，404.json 用于返回 404 错误页面，而 index.json 返回整个目录结构的列表。
配置请求规则
除了返回数据之外，我们还需要为 API 接口编写请求规则。例如，在以上 /users/ 请求下，我们可以定义以下规则：
-- -------------------- ---- -------
-
---------- -
------ -
-
----------- ---------------
--
-
----------- ---------------
--
-
----------- ---------------
-
--
------- -
----------- ----------------
-------- ---
-
-
-该规则定义了请求路径 "/users/" 下，GET 请求方式将分别返回 /users/1.json、/users/2.json、/users/3.json 文件的内容。而 POST 请求方式将返回 /users/4.json 文件的内容，并使用正则表达式 flags 修改匹配规则。
实例代码
下面是一个具体的 webservice-mocker 实例代码。假设我们有一个需求，需要实现以下 3 个 API 接口：
- GET /api/users，返回用户名单列表
- GET /api/user/:id，返回具体用户信息
- POST /api/user，添加新用户
我们可以的服务器端口为 3000，接口数据位于 /Users/abc/project/mock/ 目录下。我们可以在 package.json 文件的 scripts 块中添加以下内容：
{
"scripts": {
"mock": "wsm start --port=3000 --dir=./mock"
}
}在 /Users/abc/project/mock/ 目录下创建如下目录和文件：
-- -------------------- ---- ------- --- ------------------------ - --- --- - - --- ---- - - - --- -------- - - - --- ------- - - --- ----- - - - --- -------- - - - --- --------- - - --- ---------- - --- -------- - --- ----------
其中，/Users/abc/project/mock/api/users/GET.json 的内容为：
-- -------------------- ---- -------
-
------- --
------ ----------
------- -
-
----- --
------- ------
------ --
--
-
----- --
------- --------
------ --
--
-
----- --
------- --------
------ --
-
-
-/ Users/abc/project/mock/api/user/GET.json 和 / Users/abc/project/mock/api/user/:id.json 也类似，此处不再赘述。
最后，我们可以在前端页面上发起如下请求：
-- -------------------- ---- -------
------------------- -
------- -----
----------- -- -----------
---------- -- -------------------
-------------------- -
------- -----
----------- -- -----------
---------- -- -------------------
------------------ -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
----- -------
---- --
--
----------- -- -----------
---------- -- -------------------在启动了 webservice-mocker 之后，我们可以在控制台看到类似如下输出：
{"code":0,"msg":"success","data":[{"id":1,"name":"Tom","age":30},{"id":2,"name":"Jerry","age":25},{"id":3,"name":"Chris","age":28}]}
{"code":0,"msg":"success","data":{"id":1,"name":"Tom","age":30}}
{"code":0,"msg":"success","data":{"id":4,"name":"Lucy","age":23}}至此，我们已经学会了如何使用 webservice-mocker 来创建测试服务器，并配合前端进行调试和开发。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffddef