Node.js中Express框架的使用教學詳解

2022-04-18 10:00:19

經過前面幾天對Node.js的學習，基本的開發知識已經逐漸掌握，所謂工欲善其事必先利其器，今天進一步學習Node.js的開發框架Express。利用Express框架可以快速的進行Web後端開發，本文僅供學習分享使用，如有不足之處，還請指正。

Express簡介

Express是基於 Node.js 平臺，快速、開放、極簡的 Web 開發框架，目前最新版本是4.17.2。Express 是一個保持最小規模的靈活的 Node.js Web 應用程式開發框架，為 Web 和移動應用程式提供一組強大的功能。

具體可參考Express中文網。

Express生成器

1. 什麼是Express生成器

通過應用生成器工具 express-generator 可以快速建立一個基於Express的應用程式的骨架。

2. 安裝Express生成器

全域性安裝 express-generator ，可以通過在命令列工具執行以下命令進行：

cnpm i -g express-generator

安裝過程，如下所示：

注意：全域性安裝npm的模組目錄：C:UsersAlan.hsiangAppDataRoamingnpm 。

建立Express專案

Exress生成器安裝成功後，就可以通過命令建立Express專案，如下所示：

切換到專案所在目錄，通過以上命令，自動建立一個Express專案：

express -e 專案名稱

建立過程，如下所示：

注意：如果已經手動建立專案目錄，則可以通過express -e 建立預設專案。

建立成功後，在資料夾裡面開啟，預設目錄結構如下所示：

安裝專案依賴

在建立預設專案後，還需要安裝依賴模組，才可以執行程式，如下所示：

cnpm i

安裝過程，如下所示：

依賴安裝成功後，即可在資料夾中檢視，多出來一個目錄【node_modules】，如下所示：

執行Express專案

在專案所在的命令列視窗，輸入以下命令，即可啟動專案：

npm start

啟動過程，如下所示：

在瀏覽器中輸入網址【http://localhost:3000/】，即可開啟專案。具體如下所示：

以上就表示Express安裝建立成功。

Express目錄結構說明

關於Exress生成器預設建立的專案，目錄結構如下所示：

建立一個新路由模組

以建立一個新聞模組為例，步驟如下所示：

1. 建立ejs模組檔案

在views目錄下，建立news目錄，然後建立list.ejs和detail.ejs，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新聞列表頁</title>
    </head>
    <body>
        <h3>新聞列表</h3>
        <ul>
            <li>第一條新聞</li>
            <li>第二條新聞</li>
            <li>第三條新聞</li>
            <li>第四條新聞</li>
        </ul>
    </body>
</html>

新聞詳細頁：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新聞詳細頁</title>
    </head>
    <body>
        <h3>新聞詳細頁</h3>
    </body>
</html>

注意：本範例只是為了說明原理，所以都是簡單的html頁面程式碼。

2. 建立路由檔案

在routes目錄下，建立一個news.js檔案，並新增程式碼，做為news模組的路由檔案。如下所示：

var express = require('express');
var router = express.Router();

/* GET news listing. */
router.get('/list.html', function(req, res, next) {
  res.render('news/list',{});
});
router.get('/detail.html', function(req, res, next) {
  res.render('news/detail',{});
});

module.exports = router;