首頁 >web前端 >js教程 >用node.js和express編碼您的第一個API:設置服務器

用node.js和express編碼您的第一個API:設置服務器

William Shakespeare
William Shakespeare原創
2025-03-14 10:00:15422瀏覽

Code Your First API With Node.js and Express: Set Up the Server

上一篇教程中,我們學習了REST 架構、REST 的六大約束、如何理解HTTP 請求方法及其響應代碼,以及RESTful API 端點的構成。

本教程將為我們的API 設置一個服務器。您可以使用任何編程語言和服務器軟件構建API,但我們將使用Node.js(JavaScript 的後端實現)和Express(一個流行的、極簡的Node 框架)。

安裝

我們的首要前提是確保Node.js 和npm 在計算機上全局安裝。我們可以使用express-api測試兩者並切換到它。

 mkdir express-api && cd express-api

現在我們位於新目錄中,我們可以使用安裝命令以及每個依賴項來初始化我們的項目,以完成項目的設置。

 npm install body-parser express mysql request

這將創建一個package-lock.json文件和一個node_modules目錄,並且我們的package.json將更新為如下所示:

 {
  "name": "express-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "AsyncBanana",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.19.2",
    "express": "^4.17.3",
    "mysql": "^2.18.1",
    "node-fetch": "^3.2.0"
  }
}

然後,我們需要添加"scripts" 對象。 "scripts" 對象可以幫助我們運行代碼。

 {
  "name": "express-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "AsyncBanana",
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.19.2",
    "express": "^4.17.3",
    "mysql": "^2.18.1",
    "node-fetch": "^3.2.0"
  },
  "type": "module"
}

什麼是ECMAScript 模塊?

ECMAScript 模塊(或ESM) 是一個新的規範,用於連接瀏覽器和Node 等環境中的腳本。它取代了舊的規範,例如Node 默認使用的CommonJS (CJS)。在本教程中,我們將使用所有ESM。

設置HTTP 服務器

在開始設置Express 服務器之前,我們將使用Node 內置的http模塊快速設置一個HTTP 服務器,設置一個端口號(我選擇createServer()方法)。

 // 使用Node 的HTTP 模塊構建服務器import { createServer } from "http";
const port = 3001;
const server = createServer();

在介紹性REST 文章中,我們討論了關於HTTP 服務器的請求和響應。我們將設置我們的服務器來處理請求,並在服務器端顯示請求的URL,並在響應端向客戶端顯示“Hello, server!”消息。

 server.on("request", (request, response) => {
    console.log(`URL: ${request.url}`);
    response.end("Hello, server!");
});

最後,我們將告訴服務器監聽哪個端口,並在出現錯誤時顯示錯誤。

 // 啟動服務器server.listen(port, (error) => {
    if (error) return console.log(`Error: ${error}`);
    console.log(`Server is listening on port ${port}`);
});

現在,我們可以通過運行我們之前創建的npm 腳本啟動服務器。

 npm start

您將在終端中看到此響應:

 <code>Server is listening on port 3001</code>

要檢查服務器是否正在運行,請訪問https://localhost:3001/hello ,您將看到服務器根目錄上的GET 請求( /接收請求,我們將顯示請求的URL 和“Hello, Server!”消息)。

 app.get("/", (request, response) => {
    console.log(`URL: ${request.url}`);
    response.send("Hello, Server!");
});

最後,我們將服務器啟動在listen()方法上的端口。

 const server = app.listen(port, (error) => {
    if (error) return console.log(`Error: ${error}`);
    console.log(`Server listening on port ${server.address().port}`);
});

現在我們可以對URL 使用curl -i ,我們將看到它現在由Express 提供支持,並且有一些額外的標頭,例如POSTbody-parser模塊。將import語句添加到index.js文件的頂部。

 import bodyParser from "body-parser";
...

然後我們將告訴我們的Express 應用程序使用curl -i到服務器,您將看到標頭現在返回GET路由到根目錄( require中不需要.js擴展名。現在我們將移動應用程序的路由器,以便我們可以在index.js文件中使用它。

 // 導出路由器export default router;

index.js中,替換路由:

 routes(app);

您現在應該能夠轉到routes.js中的users變量,其中包含JSON 格式的一些偽造用戶數據。

 const users = [
  {
    id: 1,
    name: "Richard Hendricks",
    email: "richard@piedpiper.com",
  },
  {
    id: 2,
    name: "Bertram Gilfoyle",
    email: "gilfoyle@piedpiper.com",
  },
];

我們將添加另一個/users ,並通過它發送用戶數據。

 app.get("/users", (request, response) => {
    response.send(users);
});

重新啟動服務器後,您現在可以導航到http://localhost:3002/users並查看我們顯示的所有數據。

注意:如果您在瀏覽器上沒有JSON 查看器擴展程序,我強烈建議您下載一個,例如Chrome 的JSONVue。這將使數據更容易閱讀!

訪問我們的GitHub 倉庫以查看本文的完整代碼,並將其與您自己的代碼進行比較。

結論

在本教程中,我們學習瞭如何在Node 中設置內置HTTP 服務器和Express 服務器,路由請求和URL,以及使用get 請求使用JSON 數據。

在RESTful API 系列的最後一期中,我們將把我們的Express 服務器連接到MySQL,以便在數據庫中創建、查看、更新和刪除用戶,從而完成API 的功能。

以上是用node.js和express編碼您的第一個API:設置服務器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn