使用 Express.js 構建 web 應用

Express.js 是一個基於 Node.js 平台的 web 應用開發框架，它提供了一組豐富的功能和特性，是構建 web 應用的首選框架之一。下面我們將會從不同角度對 Express.js 進行詳細闡述。

一、安裝與配置 Express.js

在使用 Express.js 前，需要先進行安裝與配置。你可以通過npm包管理器進行安裝：

npm install express

安裝成功後，新建一個文件 `app.js`，對 Express 進行配置：

// 引入 Express 模塊
var express = require('express');
var app = express();

// 監聽端口
app.listen(3000, function () {
  console.log('app listening on port 3000!');
});

在終端中輸入 `node app.js`，你就可以在瀏覽器中訪問 http://localhost:3000，看到 Express 初始化的頁面了。

二、路由與請求

在 Express 中，路由是指如何定義應用的端點（URL）以及如何響應客戶端的請求。我們可以在 Express 應用中定義路由來執行不同的任務。定義路由最基本的要素是一個 URI（或者叫做路徑）和一個特定的 HTTP 方法（GET、POST 等等）。

如下例子所示，我們定義了一個簡單的路由，當用戶訪問 URL http://localhost:3000/ 時，返回“Hello World”：

// GET 請求
app.get('/', function (req, res) {
  res.send('Hello World!');
});

除了 get 請求，我們還可以使用 post 請求。

// POST 請求
app.post('/', function (req, res) {
  res.send('Got a POST request');
});

通過 Express 內置的中間件，可以處理 HTTP 請求體的數據，其中就包括了在 POST 請求中提交的數據。如下所示，我們先安裝 `body-parser` 中間件，再使用中間件對 POST 請求的數據進行處理：

var bodyParser = require('body-parser');// 解析請求體的中間件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/', function (req, res) {
  console.log(req.body);
  res.send('POST request to the homepage');
});

三、靜態文件

在 Express 中，可以使用 express.static() 函數來託管 Express 應用程序中的靜態資源。所謂靜態資產，通常是指圖像、CSS 文件和 JavaScript 文件等。

以下代碼展示如何將 public/ 目錄中的文件作為靜態資源：

app.use(express.static('public'));

這段代碼中，我們調用了 express.static 中間件來處理靜態文件請求， static 中間件默認服務於 ./public 文件夾。

如果你的靜態文件存儲在不同的文件夾中，可以按如下方式進行更改：

app.use('/static', express.static('public'));

這裡，我們修改了靜態文件的目錄，現在我們可以通過 http://localhost:3000/static/logo.png 訪問圖片 logo.png，它是存在於我們的服務器 public 目錄下的。

四、使用模板引擎

Express 框架提供了多種模板引擎可供用戶選擇使用。常見的模板引擎有 EJS、Pug、Handlebars 等。下面我們以 EJS 為例進行介紹。

先安裝 EJS 模塊。

npm install ejs

以下是使用 EJS 模板引擎的一個示例。

// 引入 EJS 模塊
var ejs = require('ejs');
app.set('view engine', 'ejs');// 設置模板引擎為ejs
app.set('views', './views');// 設置視圖文件夾
// GET請求
app.get('/hello', function(req, res) {  
    res.render('hello', {  
        name: '張三',  
        message: 'Hello World!'  
});});

在文件夾 `views` 下創建 hello.ejs 文件，其內容如下：

<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1><%= name %></h1>
    <p><%= message %></p>
  </body>
</html>

EJS 引入了變量表示法 “、流程控制、partials 和 layout 等模板功能。

五、錯誤處理

錯誤處理在任何 web 應用程序中都是非常重要的一環，它用於在代碼發生錯誤時，向用戶返回明確的錯誤提示。

可以通過使用 Express 的 `error middleware` 來處理錯誤。下面的代碼為一個比較簡單的例子，展示了如何使用錯誤處理中間件來捕捉全局錯誤。

app.use(function(err, req, res, next) {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

以上代碼表示當應用程序拋出錯誤時觸發錯誤中間件，並發送一個簡單的錯誤響應。 Express 會將錯誤公開在 `err.stack` 中，以便我們在控制台或日誌文件中查看。

如果你要提供給用戶一個更詳細的錯誤信息，可以使用 res.render 渲染頁面。示例如下：

app.use(function (err, req, res, next) {
  console.error(err.stack);
  res.status(500).render('error', { error: err });
});

這裡我們將錯誤對象通過渲染視圖的方式返回給用戶。

總結

本文從安裝與配置、路由與請求、靜態文件、使用模板引擎以及錯誤處理等五個方面對 Express.js 進行了詳細闡述。Express.js 擁有靈活的路由和中間件，支持多種模板引擎，可以很好的適用於構建 CRUD 應用，同時還可以進行錯誤處理。相信通過本文你已經可以掌握 Express.js 的基本應用，並且能夠基於此進行更複雜的開發與編碼。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/285814.html