前言
在前端开发过程中，常常涉及到前后端交互，而在开发过程中我们需要测试前端页面的请求与响应是否能够正常工作。在此时，如果你没有服务器端脚本，那么你就可能需要一个简易的本地服务器来测试你的前端请求与响应。为此，笔者推荐一款好用的 npm 包，即 json2server。
简介
json2server 是一个简单的命令行工具，可以快速将一个 JSON 文件构建为一个本地静态服务器。它可以读取一个 JSON 文件并用它创建一个 Mock API，以返回固定的 JSON 响应。json2server 的实现原理是基于 Express。
安装
在使用 json2server 之前，我们需要先安装它。
在命令行终端执行以下命令即可：
npm install -g json2server
使用方法
安装好之后，我们可以通过命令行终端来使用 json2server。
初始化
首先，我们需要在项目目录创建一个 json 文件，比如叫做 mock.json。该文件可以生成一些静态的数据，用于前端请求与响应测试。可以根据模板自行添加具体内容，也可以参考 jsonplaceholder。
-- -------------------- ---- -------
-
-------- -
-
----- --
------- ----- -----
-------- ----------------------
--
-
----- --
------- ----- -----
-------- ----------------------
-
--
-------- -
-
----- --
-------- ------ -------
------- ----- -- - ---- -------
--------- ---
--
-
----- --
-------- ------- ------
------- ----- -- ------- ---- -------
--------- ---
-
-
-然后，使用以下命令初始化一个本地服务器：
json2server init mock.json
其中，init 表示初始化，mock.json 是上面创建的文件名。
初始化成功后，会在当前项目目录下生成一个名为 server.js 的文件。
启动
启动刚才生成的服务器：
node server.js
我们也可以在 package.json 文件中增加如下脚本，方便启动：
"scripts": {
"start": "node server.js"
}这样，我们在命令行执行 npm start 就可以启动服务器了。
访问
现在，我们就可以通过访问 http://localhost:3000/users 或 http://localhost:3000/posts 来获取 json 中的数据了，或者根据实际路由添加相应 api 访问方式。
效果展示
以下是一个简单的示例代码，用于展示 json2server 的效果。
<script>
fetch('http://localhost:3000/posts')
.then(response => response.json())
.then(data => {
console.log(data);
});
</script>在控制台中输出的，就是刚刚定义的 JSON 内容。
总结
通过上述使用方法，我们可以快速地在本地构建一个简单的服务器，用于测试前端请求与响应。在实际的前端开发过程中，json2server 还可以结合之前在文章 如何使用 express 自己实现 mock 数据 中所提到的本地服务器实现 mock 数据，在调试阶段节省不少的时间，从而提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600575bc81e8991b448ea6d8