使用 Node.JS 和 Hoppscotch 创建您的第一个 CRUD Restful API 我们将构建什么 先决条件 1. 我们的软件真的需要 API 吗？ 2. 我们为什么要使用 Node JS？ 3. 为什么选择 Hoppscotch？ 4. 什么是 CRUD 操作 设置您的 Node 环境 设置服务器 我们需要一个数据库 连接到 Harperdb 云数据库：保护您的项目敏感信息 构建待办事项列表 创建操作 我们需要做什么来实现这一点 构建待办事项列表 读取操作 构建待办事项列表 更新操作 构建待办事项列表 删除操作 结论 我们为此项目安装了什么

2025-06-07

使用 Node.JS 和 Hoppscotch 创建您的第一个 CRUD Restful API

我们将构建什么

先决条件

1. 我们的软件真的需要 API 吗？

2.我们为什么要使用 Node JS？

3. 为什么选择跳房子？

4.什么是CRUD操作

设置 Node 环境

设置服务器

我们需要一个数据库

连接到 Harperdb 云数据库：

保护您的项目敏感信息

构建待办事项列表创建操作

我们需要做什么

构建待办事项列表读取操作

构建待办事项列表更新操作

构建待办事项列表删除操作

结论

我们为这个项目安装了什么

本完整教程最初发布于开源社区 Aviyel，您可以继续阅读，以支持他们的开源社区。点击此处在 Aviyel 上阅读

我将于周日在@aviyel4社区现场演示该项目，您可以在这里回复活动邀请


你好，我美丽的网络朋友👋，

如果您在这里并且想知道如何构建 API，那么非常欢迎您，因为在本文中，我将向您展示 API 的重要性以及如何使用 Node.JS、Express.js 和 Hoppscotch 创建您的第一个 CRUD restful API。

嘿伙计，这是一篇基于项目的文章，所以一定要坚持到最后。

我们将构建什么

直截了当地说，我们正在一起构建一个待办事项列表后端！！！

原因是待办事项列表是一个您可能熟悉的流行的 Web 开发项目，并且您很有可能以前使用过它或者使用 HTML、CSS 和 JavaScript 构建过待办事项列表界面。

因此在本文中，我们将为流行的 Todo List 项目构建一个后端 API，并且在本文结束时，您将对 API 的工作原理以及如何构建自己的 API 有一个基本的了解。

先决条件

但在开始之前，我们先来快速解决以下问题：

  1. 我们的软件真的需要 API 吗？
  2. 我们为什么要使用 Node JS？
  3. 为什么选择 HoppScotch.io？
  4. 什么是 CRUD 操作？

1. 我们的软件真的需要 API 吗？

是的，我的朋友！我们确实需要 API。API 是一种软件通信和数据交换接口，允许两个应用程序进行通信和数据交换。例如，用 React.js、Vue.js、Angular 或纯 HTML、CSS 和 JavaScript 编写的待办事项列表界面等前端应用程序，可以与用 C#、Python 或 Node.js 编写的后端应用程序 API 连接并交换数据（例如用户信息和逻辑）。

我最喜欢的使用 API 进行软件开发的重要性之一是，您可以为项目后端提供多个前端界面，例如使用相同的 API 的 Web 版本和移动版本，并且在修改后端代码库时实际上不需要篡改前端代码库，反之亦然。

在本教程中，我们将重点构建待办事项列表应用程序的后端，我们将利用 Node JS 为任何前端技术提供待办事项列表功能，所有这些都将使用 Hoppscotch 进行测试，而 Harperdb 将作为我们的待办事项列表数据库。

2.我们为什么要使用 Node JS？

您一定像浏览器前端的其他人一样，一直console.log()在使用 JavaScript 代码并执行 DOM 操作，没关系，该过程称为客户端，但您现在应该知道后端应用程序或我们的 API 不在浏览器上运行，而是在服务器端运行，现在的问题是我们如何在浏览器之外执行 JavaScript？

节点来救援！！！

Node 或 Node.js 是一个在 Web 浏览器之外运行的开源 JavaScript 后端运行时环境，这意味着使用 Node 我们可以在服务器端编写和执行我们的 JavaScript 后端代码，并且可以console.log在 Node 环境上查看我们的代码。

不要感到困惑，我已在本文的某处进行了演示。

3. 为什么选择跳房子？

在构建后端 API 时，我们有时需要在没有任何前端界面的情况下以尽可能简单的方式对其进行测试，这也使我们能够在投入生产之前尽早发现错误，这也使得开发人员（即我们）能够独立地处理 API，直到前端人员准备好使用它们。

但是我们如何实现这一点呢？通过所谓的 API 测试工具，这些工具是应用程序，允许我们在将 API 投入生产之前测试其功能是否按预期执行，而 HOPPSCOTCH 就是 API 的优秀测试工具之一。

HOPPSCOTCH 正式名称为 POSTWOMAN，是一款免费的超轻量级、基于 Web 的渐进式 Web 应用程序，它允许我们随时随地测试我们的 API 端点，而无需任何复杂的配置。

HOPPSCOTCH 是我们本教程的官方测试工具，我们将在本文中使用它来测试我们的待办事项列表 API，您可以通过将下面的表情符号端点粘贴到 Hoppscotch URL 框中并向 emoji-api 端点发送 GET 请求来查看 Hoppscotch 的工作原理，或者单击此处获取预填充的 URL。

hoppscotch.io 主页

很酷😎不是吗？

fetch()我们从 emoji-API 端点得到了一个眯着眼睛笑的表情😆的回应，Hoppscotch 刚刚为我们节省了编写 JavaScript或方法的压力axios()。

干得好，伙计，你已经走了很长的路了，让我们继续检查一下 CRUD 操作到底是什么，我们开始吧🏃‍♀️！！！

图片来源：https://www.beta-labs.in/

在您继续阅读之前，Aviyel 正在与Hoppscotch合作，在社区内扩展开源项目。您可以考虑在Aviyel官方网站上继续阅读这篇文章，以支持他们的社区。点击此处继续阅读 Aviyel 的文章。

4.什么是CRUD操作

CRUD 的首字母缩写代表四种主要类型的 SQL 命令，即创建、读取、更新和删除命令。这些命令对于开发连续存储应用程序非常重要。

这意味着 CRUD 命令允许我们执行一些基本操作，使我们能够帮助我们操作数据库中的数据，这些操作包括以下内容：

  1. 创建新记录 - 添加待办事项
  2. 读取现有记录 - 查看所有待办事项
  3. 更新现有记录 - 更新待办事项
  4. 删除现有记录 - 删除已完成的待办事项

嘿伙计，既然我们了解了这些技术以及我们将用它们构建什么，请系好安全带，因为我们将在待办事项列表后端实现上述操作，现在！！！

来源：Giphy

设置 Node 环境

在本节中，我们将在计算机上设置 JavaScript 运行时环境，首先请确保在继续本节之前已安装 Node.js，您可以从这里快速安装它，而我等您。

注意：您也可以运行node --version来检查是否已经安装了更新的版本。

欢迎回来，现在您已经在计算机上安装了 Node.js，请按照以下说明启动您的 Node.js 项目。

  1. 创建一个新文件夹并将其命名为todo-list-backend，
  2. 打开你的cmd或git bash，
  3. 跑步npm install --global yarn
  4. 然后运行yarn init
  5. 忽略或提供命令提示符中问题的答案，如下所示

注意：下次您可以选择忽略这些问题，只需运行yarn init -y

Yarn 是 NPM 的一个更快的替代品，它是一个包管理器，允许我们通过我们的cmd或下载包，git bash

设置服务器

现在您已经在计算机上设置了运行时环境，让我们继续在计算机上安装一些软件包，以帮助我们的服务器运行

1.安装 Express

Express 是一个 Node.js 框架，它为我们提供了许多快速功能，如果 Angular 是一个 JavaScript 框架，那么 express 就是一个 node.js 框架。

运行yarn add express以在您的项目中安装 express。

2. 安装 Nodemon

Nodemon 是一个简单的脚本监控包，它可以帮助我们在项目文件发生变化时自动重新启动运行环境，这就像 Web 浏览器上的自动刷新一样。

运行yarn add nodemon以在您的项目中安装 nodemon。

打开您的package.json并添加以下代码以nodemon在您的项目中启用。

"scripts": {
  "start": "nodemon index.js"
}
Enter fullscreen mode Exit fullscreen mode

你package.js应该看起来像下面这样

3.安装Cors

因为API有助于两个应用程序之间共享资源，所以我们需要建立一种称为的机制cors，允许来自两个不同域的资源共享。

运行yarn add cors以在您的应用程序中安装 cors

你好，世界回应

欢迎来到有趣的部分，到目前为止，我们已经准备好编写我们的第一个端点并测试我们的设置，我们将编写一个端点，用流行的 Hello, world 文本向调用者做出响应。

创建一个index.js文件并将下面的代码复制粘贴到里面。

// import express
const express = require("express");
const app = express();
// set your preferred server port
const port = 3000;
// root endpoint response
app.get("/", (req, res) => {
  res.send("Hello, World!");
});

app.listen(port, () => {
  console.log(`Your server ⚡ is running 🏃‍♂️ on http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

运行yarn start，如果一切顺利，请访问或单击http://localhost:3000/，您应该在终端中看到控制台消息，并且在浏览器屏幕上显示 Hello, World，如下所示。

如果您遇到任何错误，请追溯到此点以找出您错过了什么。

如果一切顺利，您可以通过更改文本响应来继续玩代码，我会等您😉。

我们需要一个数据库

是的，我们需要一个数据库来保存待办事项，在本教程中，我们将利用 Harperdb 云实例作为我们的待办事项列表应用程序数据库。

按照以下说明设置您自己的 Harperdb 数据库

  1. 前往https://studio.harperdb.io/sign-up创建免费帐户

  2. 在您的仪表板上单击创建新的 Harperdb 云实例卡

  3. 填写实例信息表并确保其安全

  4. 单击实例详细信息，除非您想升级数据库

  5. 确认您的实例详细信息正确，然后单击添加优惠券按钮下方的添加实例按钮。

  6. 等待 Harperdb 完全创建您的新实例，即使刷新后也需要 10 分钟以上也没关系，只需喝杯咖啡即可☕。

  7. 完成所有操作后，单击实例卡并创建一个名为的新模式todos
    注意：模式是表的集合，也类似于 SQL 中的数据库

  8. 现在创建一个名为itemsid 的哈希属性的表

注意：哈希属性是我们将要创建的每个待办事项的唯一标识符

连接到 Harperdb 云数据库：

此时您的 Harperdb 实例已准备好使用，下一步要做的是安装 Node.js 客户端harperive包，它将允许您从 Node.js 应用程序与 Harperdb 云数据库进行通信。

运行yarn add harperive以在您的项目中安装该包。

现在您已经成功安装了harperive，下一步是在 Node.js 应用程序中设置 Harperdb 身份验证。您还记得在创建 Harperdb 实例时设置的实例 URL、管理员用户名和管理员密码吗？这正是我们所需要的。

保护您的项目敏感信息

由于这些详细信息非常敏感，因此当您将代码推送到 GitHub 时，您需要将实例 URL、用户名和密码保存在未经授权的人员无法访问的安全环境中，该.env文件将作为安全环境，并且将授予您从 Node.js 应用程序访问此安全详细信息的包是dotenv包。

运行yarn add dotenv以在您的项目中安装该包。

完成所有这些设置后，我现在可以向您展示如何将您的 Node.js 应用程序连接到您的 Harperdb 云实例。

首先要做的是创建一个.env文件并将以下代码片段粘贴到里面

INSTANCE_URL=YOUR_INSTANCE_URL
INSTANCE_USERNAME=YOUR_INSTANCE_USERNAME
INSTANCE_PASSWORD=YOUR_INSTANCE_PASSWORD
INSTANCE_SCHEMA=YOUR_INSTANCE_SCHEMA (todo)
Enter fullscreen mode Exit fullscreen mode

您可以从仪表板上的配置部分获取实例 URL，实例模式是您之前创建的表的集合，其中实例用户名和密码是您在创建数据库实例时使用的凭据。

创建一个文件名dbconfig.js并将下面的代码粘贴到其中

require('dotenv').config();
const harperive = require('harperive');
const DB_CONFIG = {
  harperHost: process.env.INSTANCE_URL,
  username: process.env.INSTANCE_USERNAME,
  password: process.env.INSTANCE_PASSWORD,
  schema: process.env.INSTANCE_SCHEMA,
};

const Client = harperive.Client;
const db = new Client(DB_CONFIG);
module.exports = db;
Enter fullscreen mode Exit fullscreen mode

由于您已经安装了 dotenv，因此我们可以利用它process.env来访问.env文件中的变量，还可以使用 harperive 包连接到我们的 Harperdb 云实例，您可以使用导出的实例与应用程序中任何地方的数据库进行通信db，我将向您展示如何快速完成。

继续导入您已安装的所有包index.js，它应该看起来像这样。

   // import express
const express = require("express");
const app = express();

//Parse URL-encoded bodies - Allows us to retrieve data from submitted data
app.use(express.urlencoded({ extended: true }));

// import cors
var cors = require("cors");
app.use(cors());

// import the harperdb instance
const db = require("./dbconfig");

// your preferred server port
const port = 3000;
Enter fullscreen mode Exit fullscreen mode

构建待办事项列表创建操作

欢迎，在本节中您将学习如何开发 CRUD 端点（路由），以允许任何人在您的应用程序中创建新的待办事项。

让我们分解一下；为了实现这一点，用户必须通过表单提交一个项目，我们的待办事项列表将具有以下属性

  1. todo：这是用户想要做的事情，例如“晚上买面包”
  2. 状态：这是待办事项的完成状态，默认情况下为待办

我们需要做什么

  1. 创建一个 POST 路由，前端可以通过表单向其发送数据，
  2. 找到从表单中检索待办事项的方法，
  3. 验证表单提交，
  4. 将待办事项及其完成状态准备到一个新对象中，
  5. 确保捕获任何错误并使用异步 JavaScript，
  6. 将新的待办事项发送到 Harperdb 云实例，
  7. 最后用成功或错误消息通知前端

现在让我们写一些代码：


// 1. create your post route that handles creating new todo item
app.post("/add", async (req, res) => {
  // 2. retrieve the todo from req.body
  // 3. Validate the todo to nsure the user does not submit an empty form
  if (!req.body.todo || req.body.todo === "") {
    res.status(400).send("Todo is required");
  } else {
    // 4. prepare the todo in an object
    const option = {
      todo: req.body.todo,
      status: "pending",
    };
    // 5. ensure to catch the error using try/catch
    try {
      // 6. if the todo is not empty
      const response = await db.insert({
        table: "items",
        records: [option],
      });
      // 7. notify the frontend or sender with the success response
      res.status(200).send(response);
    } catch (error) {
      // 7. notify the frontend or sender with the error response
      res.status(500).send(error);
    }
  }
});

// just a notification in the console
app.listen(port, () => {
  console.log(`Your server ⚡ is running 🏃‍♂️ on http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

构建待办事项列表读取操作

READ 操作用于从数据库中检索数据，对于我们的待办事项应用程序，我们将利用它来检索从 Create 操作端点添加的所有可用待办事项。

为了检索 Harperdb 云实例中的所有待办事项，我们需要遵循以下步骤：

  1. 创建 GET 路由
  2. 确保捕获任何错误并使用异步 JavaScript
  3. 使用查询方法从表中选择每条数据
  4. 最后用成功或错误消息通知前端

// 1. route to retrieve all todos in the database
app.get("/todos", async (req, res) => {
  // 2. use try/catch to control errors
  try {
    // 3. user query method to get all todo from the database table
    const response = await db.query("SELECT * FROM todos.items");
    // 4. send success message to the frontend
    res.status(200).send(response);
  } catch (error) {
    // 4. send error message to the frontend
    res.status(500).send("something went wrong");
  }
});
Enter fullscreen mode Exit fullscreen mode

构建待办事项列表更新操作

UPDATE 操作用于修改或编辑数据库中的数据，对于我们的待办事项列表应用程序，用户可以决定更改待办事项的条目或更新任何待办事项的状态，例如从pending到completed或根据前端设计的情况。

为了在我们的应用程序中实现更新操作，必须检查以下内容：

  1. 创建 POST 路由，
  2. 在对象中设置新的待办事项详细信息（需要哈希属性），
  3. 确保捕获错误并使用 async/await，
  4. 使用更新方法将新的待办事项发送到后端，
  5. 最后用成功或错误消息通知前端。

// 1. route to update a todo
app.post("/edit", async (req, res) => {
  // 2. set the updated todo and specify the todo identifier - hash attribute
  const option = {
    id: req.body.id,
    todo: req.body.todo,
    status: req.body.status,
  };
  // 3. use try/catch to control errors
  try {
    // 4. send the updated todo
    const response = await db.update({
      table: "items",
      records: [option],
    });
    // 5. send success message to the frontend
    res.status(200).send(response);
  } catch (error) {
    // 5. send error message to the frontend
    res.status(500).send(error);
  }
});
Enter fullscreen mode Exit fullscreen mode

构建待办事项列表删除操作

DELETE 操作允许用户删除不需要的数据，在我们的待办事项应用程序中，用户应该能够从他们的待办事项中删除/移除已完成的项目。

按照以下说明向后端应用程序添加删除操作：

  1. 创建一个 POST 路由，该路由要求 URL 中包含一个参数，
  2. 从URL参数中获取参数，
  3. 确保捕获错误并使用 async/await，
  4. 使用 Harperdb 的 delete 方法从数据库中删除待办事项，
  5. 最后用成功或错误消息通知前端。
// 1. route to delete a todo using its id
app.post("/delete/:todo_id", async (req, res) => {
  // 2. get the id from the url parameter
  const { todo_id } = req.params;
  // 3. use try/catch to control errors
  try {
    // 4. Send a delete request to the database
    const response = await db.delete({
      table: "items",
      hashValues: [todo_id],
    });
    // 5. send success message to the frontend
    res.status(200).send(response);
  } catch (error) {
    // 5. send error message to the frontend
    res.status(500).send(error);
  }
});
Enter fullscreen mode Exit fullscreen mode

使用 HoppScotch.io 测试我们的应用程序

恭喜你进入 API 测试部分，你应该为自己感到自豪，我已经为我们的待办事项列表后端应用程序的完整代码创建了一个 GitHub git，地址在这里。

在本节中，我们将使用 hoppscotch.io 测试我们的后端应用程序，前往 hoppscotch.io，并按照以下说明进行测试。

测试添加 Todo 路由端点

为了确保从前端发送到后端应用程序的新待办事项能够成功存储到数据库中，我们需要先通过将添加待办事项的 URL 粘贴http://localhost:3000/add到 Hoppscotch 的 URL 栏中来测试端点 URL，如下所示。您可以访问此处启动 Hoppscotch

添加端点是一个帖子请求，POST从下拉列表中选择方法。

为了添加新的待办事项，请选择正文菜单并application/json从下拉菜单中选择。

这application/json使我们能够从 Hoppscotch 向 Node.js 应用程序发送数据，然后可以通过 进行检索req.body。

您可以通过在原始请求正文中写入待办事项的对象并单击发送按钮向服务器发出请求来发布新的待办事项，如下所示。

确保在对象属性周围添加引号"todo"，"Buy bread in the evening"否则测试将失败。

如果一切顺利，您应该会从服务器收到这样的成功响应，这表明我们的应用程序能够接收通过http://localhost:3000/add端点发布的新数据。

尝试添加尽可能多的待办事项，但要确保对象键是，"todo"否则您将收到 404 响应，这是来自我们的 Node.js 验证逻辑。

测试获取/读取 Todo 路由端点

在本节中，我将向您展示如何检索存储在数据库中的待办事项。从数据库获取所有待办事项的端点 URL 是http://localhost:3000/todos。

将 URL 粘贴到 Hoppscotch URL 栏中并向GET服务器发送请求。

您将收到一个成功响应，其中包含您之前添加的所有待办事项的数组，您还应该注意到，我们的待办事项应用程序具有比我们在POST向服务器发出请求期间最初添加的更多属性。

该status属性是为 Node.js 路由中的新待办事项设置的，/add而id、__createdtime__和 是__updatedtime__由 Harperdb 数据库添加的，当您需要知道某个项目的创建时间或上次更新时间时，这些很有用，我们将id在接下来的部分中使用该属性

注意：如果您在本节中遇到任何错误，可能是因为您没有GET向服务器发送请求。

测试更新/编辑路线端点

在本节中，我将向您展示如何从数据库更新项目的记录，我们可以用来更新服务器上待办事项的 URL 是http://localhost:3000/edit，它只接受POST请求。

我们可以更新todo或其status，并实现更新数据库中的待办事项记录，我们需要在原始请求正文中指定id待办事项以及我们想要更新的属性。

GET您可以向服务器发送请求并复制id您希望在数据库中更新的待办事项。

我将更新status待办事项的属性，completed如下所示。

确保发送有效的id，否则不会更新任何内容，如下所示。

继续自行发送GET请求并查看数据是否更新，如果待办事项未按预期更新，则应回溯您的步骤。

测试删除路由端点

在本节中，我将向您展示如何从数据库中删除一个项目，实现此操作的 URL 是http://localhost:3000/delete/:id，此 URL 与其他路由完全不同，它接受一个名为的参数id，该参数是您希望删除的待办事项的 ID。

路由 URL 中的参数在 Node.js 路由中使用 进行检索req.params，您的 URL 应该类似于此
http://localhost:3000/delete/c7f032b1-a4a2-457b-ad50-8bb758a9fc10，将 URL 粘贴到 Hoppscotch URL 栏中并向POST服务器发送请求。

服务器将忽略原始请求主体，因为它仅检索通过 URL 参数发送的数据，并且具有指定的待办事项id将从数据库中删除。

发送GET请求以获取我们数据库中的待办事项并检查更新的项目。

在我的情况下，我将收到一个空数组，因为我只有一个待办事项，而且我已经删除了它，如果您有两个以上的待办事项，您将收到其他待办事项。

结论

在本文中，您学习了如何设置 Node.js 后端项目、将其连接到数据库、编写后端 CRUD 逻辑并使用 API 测试工具 Hoppscotch 对其进行测试，凭借从本文中获得的知识，您可以启动您的个人项目并将其应用于任何其他后端项目。

感谢您的阅读，我希望看到您的评论以及您未来将要构建的很酷的东西。

干杯，

我们为这个项目安装了什么

  1. express - Node.js 快速框架
  2. harperive - 帮助我们将 Node.js 连接到 Harperdb
  3. nodemon - 帮助我们在发生更改时重新启动 Node.js 服务器
  4. dontenv - 允许我们访问dot.env文件中的变量
  5. cors - 允许两个来源共享资源
文章来源：https://dev.to/unclebigbay/creating-your-first-crud-restful-api-with-nodejs-and-hoppscotch-4lc7
Devto 翻译
PREV
JavaScript 打包工具：深入对比 👍👎 Webpack 仍然是 2021 年最佳打包工具吗？📦 先说最重要的。什么是打包工具？🤔 使用场景 🖥 1. Webpack 2. Rollup 3. Browserify 4. ESBuild 5. Parcel 对比 📈 我的最终结论是什么？😼 现在轮到你了！🔥 免责声明 👇
NEXT
如何让Web应用程序支持多个浏览器窗口