带有 Express 的基本 CRUD API

内容

• 简介
• 项目创建和初始化
• 创建一个简单的服务器和 GET 路由
• 路由和请求处理程序
• 请求和响应
• 注意变化
• 创建 POST、GET、UPDATE 和 DELETE 路由
• API 客户端
• 请求正文、参数、查询、标头...
• 操作内存数据
• 结论

介绍

JavaScript 基础知识：第 7 部分

迈克尔·奥图 ・ 2024 年 11 月 2 日

#javascript #api #初学者 ＃节点

什么是 API

迈克尔·奥图 ・ 2024 年 2 月 24 日

#javascript #打字稿 ＃节点 #api

什么是 REST API

迈克尔·奥图 ・24 年 3 月 1 日

#javascript #打字稿 ＃节点 #api

JavaScript 基础：第 6 部分（Javascript 大师）

迈克尔·奥图 ・2024 年 10 月 28 日

#javascript #初学者 #api ＃节点

什么是 Nodejs

迈克尔·奥图 ・ 2024 年 7 月 31 日

#javascript #打字稿 ＃节点 #api

请求和响应

迈克尔·奥图 ・ 2024 年 3 月 14 日

#javascript ＃节点 ＃编程 ＃教程

什么是 JSON

迈克尔·奥图 ・ 24 年 3 月 9 日

#javascript #打字稿 ＃节点 #api

在 JavaScript Essentials：第 7 部分中，我暗示我们将研究开发 API ([0] [1])，这就是我们的起点。我们将体验如何开发一个简单的 API 来跟踪支出。

项目描述

对于此费用跟踪器，我们需要跟踪购买的商品、金额和购买日期。费用如下所示：

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

此时，由于还没有添加真正的数据库，我们可以使用列表（数组）来保存我们将创建的数据。在本摘录中，我们将介绍围绕创建 API 的每个主要概念，并添加一些稍后改进此应用程序的方法。

知道我们将在这个项目的基础上进行构建，所以，请保持它的干净，并尽可能多地探索、实验、坐立不安等。

项目创建和初始化

像往常一样，我们需要为每个项目提供一个全新的工作环境，因此我们将从创建并初始化一个 Node JS 项目开始。如果您不确定，请查看 JavaScript Essentials：第 6 部分（Javascript 大师）。

现在我们必须通过执行以下操作为我们的 API 创建父文件夹：

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

我们使用这个脚本所做的一切都是非常直接的。

• 我们为我们的项目创建一个文件夹
• 我们在 vscode 中打开了文件夹
• 我们初始化了一个nodejs项目
• 我们在index.js 文件中添加了控制台日志。这将创建文件并添加一些内容
• 我们执行index.js文件

另一种方法是转到您想要创建此文件夹的任何位置并在那里创建它，然后在 vscode 中打开该文件夹并初始化节点项目 - 查看 JavaScript Essentials：第 6 部分（Javascript 中的 Mastermind）。

此时，我们需要安装一个名为express的nodejs包。 Express 是一个可以帮助我们创建 API 的库。

我们可以通过运行 npm iexpress 来安装这个包。这应该修改 package.json 文件，并创建 package-lock.json 文件和 node_modules 文件夹。请参阅摘录《什么是 Nodejs》，以进一步了解如何使用 npm 安装软件包的信息。

创建一个简单的服务器和一个 GET 路由

在我们的index.js 文件中，我们可以添加此代码。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

我们所做的就是创建一个 Express 应用程序，使用该应用程序创建一个 GET 请求来发送消息，并让应用程序监听来自端口 3000 的请求。

const app = express();

创建一个快速应用程序（？如何创建一个快速应用程序）

app.get("/", (req, res) => res.send("Hello world"));

我们使用 Express 应用程序实例来创建 GET 请求。 app 有多个方法和属性，其中包括 HTTP 方法。在这里查看 http 方法的例外情况。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

我们使用express应用程序来监听端口，并使用箭头函数来告诉我们，告诉开发人员，我们的应用程序正在运行。对于端口，我们可以将其更改为我们选择的另一个端口。然而，一些特殊端口已经用于或用于某些特定任务，并且它们在社区中是众所周知的，并且当此类应用程序或程序在我们的 PC 上运行时作为默认服务器。看看这些 - 0 1 2

注意：有些是不允许的，因为您的系统附带它们，还有一些是我们安装的应用程序附带的，例如一些服务器和数据库等。不用担心，当我们使用已在使用的端口时，我们的应用程序会让我们知道。我们所要做的就是加一或减一。没有汗水。

路由和请求处理程序

要创建 GET 请求，请使用 app.get(...)，对于 POST，请使用 app.post(...) 等等。对于我们要创建的每个路由，app.SomeMethod(...) 将采用一条路由或路径，指示用户客户端所需的资源或他们要执行的操作。作为路由的一部分，它可以至少采用一个请求处理程序。这意味着我们可以有 app.SomeMethod(path, hanlder1, handler2, ..., handlern);.

对于上面的 GET 请求，路径或路由是 / （字符串），我们拥有的单个请求处理程序是 (req, res) => res.send("Hello world")，一个处理函数（回调或简单的箭头函数）。请求处理程序可以是中间件和控制器。

请求和响应

请求处理程序通常接受两个参数，请求和响应，分别缩写为 req 和 res （您不必这样称呼它们，但第一个始终是请求，第二个是响应）。该请求保存有关谁发出请求以及他们想要什么的数据（或一些信息）。响应是向提出请求的用户提供反馈的一种方式。在本例中，当客户端向 / 路径发出 GET 请求时，我们发送“Hello world”。

在这里，您会注意到客户端和用户是可以互换的，即哪个设备向我们的 api 服务器而不是用户（如用户帐户）发出 HTTP 请求。

通常，请求处理程序将采用第三个参数，该参数将在前一个处理程序完成其工作后指向下一个处理程序。我们接下来称之为。它看起来或多或少像：

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

下一个参数很有用，它指向请求处理程序，有时它需要一个参数，一个错误。我们将实现一个错误处理程序来通常处理我们未处理的错误或我们“传递”到下一个请求处理程序的错误。

现在让我们使用control c 取消正在运行的nodejs 进程（在终端中）。然后再次运行它。这次使用 创建一个简单的服务器和 GET 路由 部分的更新内容，我们应该在控制台（终端）中看到类似于
的输出

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

在浏览器中打开http://localhost:3000。你看到了什么？一条文字：你好世界 ?

留意变化

俗话说罗马不是一天建成的。这同样适用于软件开发。也许这里我们的意思是，随着我们的开发，我们会逐渐添加更多的功能，在这个持续的过程中，一直启动和停止服务器变得很烦人。

继续，添加另一个带有 /hello 路径的 GET 请求（路由）和一个请求处理程序，其中包含您想说的内容。开心就好。

您必须重新启动服务器（正在运行的 Nodejs 进程）并在浏览器中访问 http://localhost:3000/hello 才能查看来自该端点的响应。

这个，GET http://localhost:3000/hello，是一个端点。您与 api 消费者共享此信息。在我们中间，我们说路由，因为我们不必知道整个 URL（包括协议 - http、域 - localhost、端口 - 3000、和路径 - /hello）。路线是 METHOD PATH，或多或少，GET /hello.

在 macOS 或 Windows 上，我们可以执行 node --watch index.js ，或者我们不仅可以在条目文件中查找更改，还可以通过 node --watch-path=./index.js 在整个文件夹路径中查找更改。使用 Node.js 来监视文件路径以及文件本身的变化。

目前，这是我的 package.json 文件的内容：

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

我们可以在脚本部分添加一个名为 dev 的脚本。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

我们可以使用 control c 停止正在运行的服务器，然后执行 npm run dev。这将监视我们文件中保存的更改并重新加载服务器。

因此，如果这不适合您，我们还有其他选择。我们将安装nodemone，npm i nodemon -g。我们会在任何地方使用它作为实用工具，因此我们不必将它作为软件包的一部分安装。我们可以通过执行nodemon index.js来观察变化。在某些情况下这不起作用，当不起作用时， dom nodemon --exec node index.js

我们可以修改我们的开发脚本以使用nodemon，

const app = express();

此时，您可以自由修改 .js 文件，保存后，服务器将重新启动以重新加载所应用的负载更改。

创建 POST、GET、UPDATE、DELETE 路由

我们已经创建了一个 GET 请求。在本节中，我们将简要了解每种方法的含义，因为我们已经在请求和响应中详细讨论了它们。

在这个应用程序中，我们只为客户提供一种资源，那就是支出。假设我们正在服务多个资源，那么我们会将每个资源下的请求分组。

所以假设我们有用户和支出，我们对用户和支出都有 GET、POST、PUT、DELETE 等。

目前，我们使用 /expenditures 路径来表示支出资源。

• GET：这意味着我们将创建一个路由来列出、获取所有、获取所有支出记录等。我们可以使用 GET 请求来获取其中一条记录。我们创建了类似的 GET

• POST：post方法常用于创建资源

• PUT：put方法用于更新资源

• DELETE：delete方法用于删除资源

现在我们可以将以下几行代码添加到 index.js 文件中，但位于 app.listen(3000,...) 之上。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

保存文件时，您注意到终端中的日志了吗？在浏览器中测试支出的 GET 路由。

我们只能在浏览器中运行 GET 请求。接下来我们将讨论 api 客户端。

API客户端

在此上下文中，API 客户端是用于交互（使用、集成或测试）API 的工具、程序或应用程序。最常用的是Postman、Insomnia、curl等...

在 vscode 以及其他一些 IDE 中，有一个扩展可以为 api 客户端提供扩展。 vscode 有一些与此相关的扩展。然而，我们将考虑一个称为 REST 客户端的 API 客户端。对于我们的用例，使用 Rest Client 会更简单，因此不用担心。我们已被覆盖。

注意：postman 或您选择的任何其他 api 客户端都可以使用

如何使用 REST 客户端

• 首先，安装 REST 客户端。
• 我们正在创建一个 HTTP 请求，因此我们可以创建一个带有 .http 或 .rest 扩展名的文件 - touchexpense-tracker-api.http
• 在expense-tracker-api.http中我们可以定义我们的请求
• 要创建 GET 请求，请将以下内容添加到 .http 文件中

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

• 端点的传递如上所示。对于帖子，放置或删除更新端点的请求。还记得端点和路由之间的区别吗？
• 对于需要将数据传递给api的请求，我们可以将数据作为路由的一部分作为参数或字符串查询传递，也可以在body中传递。

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

• Content-Type：application/json 是标头键值。这意味着这就是您使用rest-client 传递标头的方式。
• 对于请求正文，我们将其作为 json 对象传递 - 不过，标头和正文之间需要换行符
• 每个请求可以用三个井号或灰烬符号 ### 分隔。可以在 ### 末尾添加文本，使其看起来像标题。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

作为练习，创建支出端点的请求。当你遇到困难的时候可以参考一下。我们还有更多事要做。

请求体、参数、查询、标头

此时，我不必强调我们将使用 JSON 来使用 API 客户端与我们的 api 进行通信。

如前所述，我们可以使用请求的正文、标头或 URL 将数据传递到我们的 api。我们已经了解了如何通过请求正文和标头传递数据（我们将在其他时间研究传递一些特定数据）。检查创建的 POST 请求。我们还没有研究如何将数据作为 URL 的一部分传递。

假设我们想要读取 id 为 4 的支出，我们可以传递添加参数（作为 URL 的一部分），如 /expenditures/2。对于将处理此要求的请求，我们执行 /expenditures/:id，其中 :id 指支出的 ID。假设它是 id 以外的其他内容，比如说一个名称，那么我们会执行 :name。 Express 将对此进行处理，并为我们提供一种毫不费力地提取此值的方法。

现在，对于查询字符串，其思想类似于请求参数，但是，它出现在问题之后，后跟 key1=value1&key2=value2...&keyN=valueN，其中 key 是您要查询的值的标识符想要通过。一个非常直接的例子是 REST-Client URL，https://marketplace.visualstudio.com/items?itemName=humao.rest-client。问号标记查询字符串的开头，其后面的任何内容都将键映射到值。例如：?itemName=humao.rest-client.

这将是测试所有 api 端点并体验使用它的好时机。

请求正文

现在我们将处理一个使用请求正文传递数据的请求 - POST 端点。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

请求对象有一个属性，body，在这个属性上，是我们在请求的请求正文中传递的值 - req.body。

这是将要运行的请求。

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

这是我们的端点实现，它只会将请求正文记录到控制台。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

发生了什么？我们得到了通常的响应，但是......未定义被记录在控制台中。好吧，这意味着一切都好，但是，我们的 api 服务器不知道它应该将传入解析为 json。还记得 json 吗？

让我们在 const app = express(); 下面添加这一行这应该解决将传入数据解析为 json 的问题。

const app = express();

现在，让我们再次测试 POST 端点。这次你得到了什么？你有没有收到类似的东西？

app.get("/", (req, res) => res.send("Hello world"));

现在你知道如何从body中获取数据了。现在作为练习，解构身体并在响应中传递一个对象。因此，不要记录它，而是将其作为响应返回。

请求参数

我们将创建一个新的 GET 端点来按 ID 读取支出。

这将是我们的 API 请求：

app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

请求对象有一个属性 params，在此属性上，是我们在请求的请求参数中传递的值 - req.params。

现在的实现将与我们迄今为止所做的类似，但略有不同。

app.get("/", (req, res, next) => ...);

我们也可以直接访问id。我希望您注意到作为路由一部分传递的 :id 键或名称与记录的对象中的键匹配。尝试重命名路由中的 params 键并查看记录的输出。

请求查询（查询字符串）

对于查询字符串，请求对象上有一个属性，query，它公开了传递的查询字符串。

为了演示这一点，将传递一个查询字符串来过滤要返回的记录。这个端点应该足够了。

expense-tracker-simple-api
Api running on http://localhost:3000

现在的实现将类似于：

{
  "name": "expense-tracker-simple-api",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.21.2"
  }
}

现在运行您的 api 并检查您的日志。尝试一下。

操作内存数据

此时，我们还没有连接到数据库，因此我们必须操作内存中的数据。我们打算做的是创建一个数组，向该数组添加元素，更新其中的元素，以及删除元素。听起来可行，这就是我们要做的。

我们将对一些以前编写的代码进行一些修改，请随意更改您的代码。最终摘录将在最后分享。

初始化内存数据

让我们在下面创建一个支出数组（虚拟数据） const express = require("express");

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

列出支出

当前端点仅使用 res.send(message) 返回一条消息，但我们想要返回的是 json。虽然 .send 也可以接受对象或 json，但我们将使用 res.json(obj)。

我没有提到，但返回的默认状态码是 200。你注意到了吗？除了发生其他情况或请求出现问题之外，状态代码保持不变。状态码下面有一个部分，浏览一下。

我们可以通过在 res.status(desireStatusCode).json(obj) 中传递所需的状态代码来更改状态代码。我将始终保持 200 状态码。

确保服务器仍在运行

我们可以直接传递支出清单。

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

收到了什么回复？检查状态代码以及响应负载。

根据经验，为了避免歧义，我更喜欢默认返回状态代码 200，并使用 success 属性、消息或数据属性来返回消息或请求的资源。默认情况下，当 status 为 false 时，将传递消息，否则，可能会传递消息或数据。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

我们需要显示id（每行的索引）

const app = express();

应用过滤

app.get("/", (req, res) => res.send("Hello world"));

为什么映射后要进行过滤？

阅读支出

app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

这个实现是否向您提示，为什么在映射之后完成过滤器？？

创造支出

app.get("/", (req, res, next) => ...);

更新支出

expense-tracker-simple-api
Api running on http://localhost:3000

删除支出

{
  "name": "expense-tracker-simple-api",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.21.2"
  }
}

结论

我们已经涵盖了大多数 API 开发的根源。这个项目很基础。放松一下，再浏览一遍。还有更多需要研究的内容，例如

• 验证
• 身份验证和授权
• 中间件
• 错误处理
• SQL
• 数据库集成

实践项目

crud api = 创建、列出、读取、更新和删除。这就是你解决这些问题的方法。

⁠待办事项列表

• todo 对象：{ id：int，任务：字符串，状态：布尔值 }
• crud api
• 添加端点以将所有任务标记为已完成，成功为 true 或未完成

⁠计算器⁠

• 您必须决定是否为所有运算（加法、减法、乘法、除法）创建端点
• 或者您将创建一个具有与每个操作相对应的不同功能的单个端点。用户应该能够传递运算符和两个操作数

⁠货币转换器⁠
您正在从一种货币转换为另一种货币。尽可能多地选择货币（3 种就足够了）

• ⁠单位转换器⁠ ⁠- 笔记应用程序⁠ ⁠- 个人博客⁠ ⁠- 测验应用程序⁠

片段

知道多余的已被删除。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

API 请求

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

以上是带有 Express 的基本 CRUD API的详细内容。更多信息请关注PHP中文网其他相关文章！