如何搭建与使用 json-server

文
章
目
录

• 一、安装json–server
• 二、启动服务器
• （一）创建数据库文件
• （二）启动服务器
• （三）报错处理
• 三、发起请求
• （一）请求所有数据
• （二）增加数据
• （三）删除数据

在前端开发过程中，为了能更高效地进行开发，常常需要模拟后端服务器提供的数据接口。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，还能保留之前安装的版本。具体操作如下：

1. 从官网下载最新的nvm-setup.zip文件，然后解压。
2. 运行解压后的nvm-setup.exe文件，完成安装。
3. 安装最新的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，提高开发效率。希望这篇文章对你有所帮助，赶紧动手试试吧！