章
目
录
在前端开发过程中，为了能更高效地进行开发，常常需要模拟后端服务器提供的数据接口。json-server便是一款强大的工具，它能零代码快速搭建本地RESTful API，让前端开发不再过度依赖后端服务。本文将详细介绍json-server的搭建与使用方法，帮助你轻松掌握这一实用工具。
json-server是一个非常实用的工具，它能以JSON文件作为数据源，提供一组简单的路由和端点，模拟后端服务器的行为。借助它，前端开发人员在没有实际后端API的情况下，也能顺利开展开发工作，快速生成符合REST API风格的后端服务。下面，我们就来一步步学习如何搭建和使用json-server。
一、安装json-server
要使用json-server，首先得把它安装到本地环境中。安装过程很简单，在命令行中执行以下命令即可：
npm install -g json-server
这里的-g参数表示全局安装，安装完成后，在任何地方都能使用json-server命令。
二、启动服务器
（一）创建数据库文件
在启动服务器之前，需要先创建一个db.json文件，这个文件将作为我们的“数据库”，用来存储数据。比如，我们可以在db.json中定义一些用户数据：
{
"users": [
{ "id": 1, "name": "Alice", "age": 30 },
{ "id": 2, "name": "Bob", "age": 25 }
]
}
上述代码中，users是一个数据集合，里面包含了两个用户的信息。每个用户都有id、name和age这几个属性。
（二）启动服务器
创建好db.json文件后，就可以启动json-server了。在命令行中执行：
json-server --watch db.json
执行这条命令后，json-server会启动一个服务器，默认监听在3000端口。--watch参数的作用是让json-server实时监控db.json文件的变化，一旦文件内容有更新，服务器会自动重新加载数据。
（三）报错处理
在启动服务器时，可能会遇到这样的报错：
import { parseArgs } from 'node:util';SyntaxError: The requested module 'node:util' does not provide an export named 'parseArgs'
出现这个报错，通常是因为Node.js的版本过低。要解决这个问题，需要将Node.js升级到18以上。可以通过以下命令查看当前Node.js的版本：
node -v
如果版本低于18，推荐使用nvm-windows来管理Node.js版本。它可以让你轻松切换不同版本的Node.js，还能保留之前安装的版本。具体操作如下：
- 从官网下载最新的nvm-setup.zip文件，然后解压。
- 运行解压后的
nvm-setup.exe文件，完成安装。 - 安装最新的LTS（长期支持）版本，在命令行中执行：
nvm install --lts
安装完成后，可以再次使用node -v命令查看版本，确认是否安装成功。
有时候，安装完nvm后，执行node命令可能会提示“’node’不是内部或外部命令，也不是可运行的程序或批处理文件”。遇到这种情况，可以通过以下命令查看是否安装了Node.js版本：
nvm list
如果列表中没有显示已安装的版本，就需要进行安装。比如，安装之前的低版本16.15.0，可以执行：
nvm install 16.15.0
安装完成后，再次使用nvm list命令查看版本列表，确认安装情况。还可以使用where node命令查看Node.js的安装路径，检查是否配置正确。
三、发起请求
服务器启动成功后，就可以向它发起请求来获取或操作数据了。下面是一些常见的请求示例：
（一）请求所有数据
async init() {
const response = await fetch('http://localhost:3000/users');
if (response.ok) {
const data = await response.json();
}
}
上述代码中，init函数通过fetch方法向http://localhost:3000/users发送请求，获取所有用户数据。如果请求成功（response.ok为true），就将响应数据解析为JSON格式。
（二）增加数据
async add(){
const response = await fetch('http://localhost:3000/users', {
method: 'POST',
body: JSON.stringify({
name: 'New Post',
age: 1
})
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
await this.init()
}
在add函数中，使用fetch方法向http://localhost:3000/users发送POST请求，请求体中包含要新增的数据。如果请求失败，会抛出错误；请求成功后，调用init函数重新获取数据。
（三）删除数据
async del(id){
const response = await fetch('http://localhost:3000/users/'+id, {
method: 'DELETE',
});
if (response.ok) {
await this.init()
}
}
del函数通过fetch方法向http://localhost:3000/users/{id}发送DELETE请求，其中{id}是要删除数据的ID。如果删除成功，同样调用init函数更新数据。
通过以上步骤，你就可以轻松搭建并使用json-server，在前端开发过程中模拟后端API，提高开发效率。希望这篇文章对你有所帮助，赶紧动手试试吧！
