在 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 中打开该文件夹并初始化节点项目 - 查看 JavaScript Essentials：第 6 部分（Javascript 中的 Mastermind）。
此时，我们需要安装一个名为express的nodejs包。 Express 是一个可以帮助我们创建 API 的库。
我们可以通过运行 npm iexpress 来安装这个包。这应该修改 package.json 文件，并创建 package-lock.json 文件和 node_modules 文件夹。请参阅摘录《什么是 Nodejs》，以进一步了解如何使用 npm 安装软件包的信息。
在我们的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 文件，保存后，服务器将重新启动以重新加载所应用的负载更改。
我们已经创建了一个 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 的工具、程序或应用程序。最常用的是Postman、Insomnia、curl等...
在 vscode 以及其他一些 IDE 中，有一个扩展可以为 api 客户端提供扩展。 vscode 有一些与此相关的扩展。然而，我们将考虑一个称为 REST 客户端的 API 客户端。对于我们的用例，使用 Rest Client 会更简单，因此不用担心。我们已被覆盖。
注意：postman 或您选择的任何其他 api 客户端都可以使用
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
# 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"}`)
);
作为练习，创建支出端点的请求。当你遇到困难的时候可以参考一下。我们还有更多事要做。
此时，我不必强调我们将使用 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 开发的根源。这个项目很基础。放松一下，再浏览一遍。还有更多需要研究的内容，例如
crud api = 创建、列出、读取、更新和删除。这就是你解决这些问题的方法。
待办事项列表
计算器
货币转换器
您正在从一种货币转换为另一种货币。尽可能多地选择货币（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中文网其他相关文章！
