練習 - 建立新的 Express Web 應用程式

5 分鐘

Tailwind Traders 已負責使用 Express 架構建立簡單的 API。線上零售商想要評估 Express，以了解其是否容易使用。作為評估的一部分，零售商想要您建置處理不同路由的 Web 應用程式。

在開發容器中開啟專案

使用提供的開發容器來完成本課程模組中的練習。開發容器已預先設定完成練習所需的工具。

遠端開發 (瀏覽器)
本機開發 (Docker)

開始在 MicrosoftDocs/node-essentials GitHub 存放庫分的 main 分支上建立新的 GitHub Codespace 的流程。

在 GitHub Codespaces 中開啟此專案
在 [建立 Codespace] 頁面上，檢閱 Codespace 組態設定，然後選取 [建立新的 Codespace]
等候 Codespace 開始。此啟動程序可能需要幾分鐘的時間。
在 Codespace 中開啟新的終端機。

提示

您可以使用主功能表瀏覽至 [終端機] 功能表選項，然後選取 [新終端機] 選項。
驗證您的環境中已安裝 Node.js：
```
node --version
```
開發容器會使用 Node.js LTS 版本，例如 v20.5.1。確切的版本可能不同。
此專案中的其餘練習會在此開發容器的內容中進行。

在空白目錄的內容中開啟 Visual Studio Code。
請確定已在 Visual Studio Code 中安裝 Dev Containers 延伸模組。
在編輯器中開啟新的終端機。

提示

您可以使用主功能表瀏覽至 [終端機] 功能表選項，然後選取 [新終端機] 選項。
將 MicrosoftDocs/node-essentials GitHub 存放庫複製到目前的目錄。
```
git clone https://github.com/MicrosoftDocs/node-essentials.git
```
使用終端機中的下列命令，在程式碼中開啟存放庫。
```
cd node-essentials
code .
```
開啟 [命令選擇區]，搜尋 [開發容器] 命令，然後選取 [開發容器: 在容器中重新開啟]。

提示

Visual Studio Code 可能會自動提示您在開發容器內重新開啟現有的資料夾。這在功能上相當於使用命令選擇區重新開啟容器中的目前工作區。
驗證您的環境中已安裝 Node.js：
```
node --version
```
開發容器會使用 Node.js LTS 版本，例如 v20.5.1。確切的版本可能不同。
此專案中的其餘練習會在此開發容器的內容中進行。

使用 Express 建立基本 Web 應用程式

建立處理要求的基本應用程式。

在開發容器中開啟終端機。
使用下列命令來建立新的 Node.js 專案，並安裝 Express 架構：
```
mkdir my-express-app
cd my-express-app
npm init -y
npm install express
```
init 命令會為 Node.js 專案建立預設的 packages.json 檔案。 install 命令會安裝 Express 架構。
在程式碼編輯器中，開啟 package.json 檔案。

在 dependencies 區段中，找到 express 項目：
```
"dependencies": {
  "express": "^4.18.2"
  ...
}   
```
此項目指出 Express 架構已安裝完成。您的版本可能較新。此範例程式代碼會使用 Express 架構的第 4 版。
在程式碼編輯器中，在 my-express-app 資料夾建立名為 app.js 的檔案，並新增下列程式碼：
```
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`Example app listening on port ${port}! http://localhost:${port}/`));
```
該程式碼會叫用 express() 方法來建立 Express 應用程式的執行個體。這是 Express 模組導出的最上層函式。所有進一步的 app 組態和功能都會透過變數新增。

請注意程式碼如何設定路由，以使用下列語法為根目錄 / 加斜線：

app.get('/', (req, res) => res.send('Hello World!'));

設定路由之後，程式碼會叫用 listen() 方法來啟動 Web 應用程式：

app.listen(port, () => console.log('Example app listening on port ${port}!'));
以滑鼠右鍵按一下子資料夾名稱，然後選取 [在整合式終端機中開啟]，以開啟此子資料夾的終端機。
在終端中，執行下列命令以啟動 Express Web 應用程式：
```
node app.js
```
您應該會看見下列輸出：
```
Example app listening at http://localhost:3000
```
此輸出表示應用程式已啟動並正在執行，並已準備好接收要求。
您可以在終端機中按一下滑鼠右鍵並選取 URL，或在 Visual Studio Code 快顯通知來詢問您是否要在瀏覽器中開啟時，開啟瀏覽器。您應該會看見下列輸出：
```
Hello World!
```
在終端中，按 Ctrl + C 以停止 Web Express 程式。

建立傳回 JSON 資料的 Web 應用程式

使用相同 app.js 檔案來新增新的路由。

在程式代碼編輯器中 app.js ，開啟檔案。

在第一個路由的程式碼 / 後面，於現有 app.get 語法後面新增下列程式碼：

 app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

確定 app.js 檔案看起來如下列範例：

 const express = require('express');
 const app = express();
 const port = 3000;

 app.get('/', (req, res) => res.send('Hello World!'));

 app.get('/products', (req, res) => {
     const products = [
         { id: 1, name: 'hammer' },
         { id: 2, name: 'screwdriver' },
         { id: 3, name: 'wrench' },
     ];

     res.json(products);
 });

 app.listen(port, () => {
     console.log(`Example app listening on port ${port}! http://localhost:${port}/`);
 });

將變更儲存至 app.js 檔案，然後關閉檔案。
在終端中，執行下列命令以重新啟動 Web Express 應用程式：
```
node app.js
```
您應該會看見下列輸出：
```
Example app listening at http://localhost:3000
```
在瀏覽器中，返回上一個步驟的索引標籤，並將新的路由 /products 新增至 URL 的結尾。您應該會看到下列 JSON 輸出：
```
[{"id":1,"name":"hammer"},{"id":2,"name":"screwdriver"},{"id":3,"name":"wrench"}]
```
在終端中，按 Ctrl + C 以停止 Web Express 程式。

恭喜！您已實作可提供靜態 JSON 資料的第二個路由。

繼續

練習 - 建立新的 Express Web 應用程式

在開發容器中開啟專案

使用 Express 建立基本 Web 應用程式

建立傳回 JSON 資料的 Web 應用程式

意見反應