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

更新時(shí)間：2022年04月18日 08:31:52 作者：小六公子

這篇文章主要為大家詳細(xì)介紹了Node.js中的開發(fā)框架Express，利用Express框架可以快速的進(jìn)行Web后端開發(fā)，感興趣的小伙伴可以了解一下

經(jīng)過前面幾天對(duì)Node.js的學(xué)習(xí)，基本的開發(fā)知識(shí)已經(jīng)逐漸掌握，所謂工欲善其事必先利其器，今天進(jìn)一步學(xué)習(xí)Node.js的開發(fā)框架Express。利用Express框架可以快速的進(jìn)行Web后端開發(fā)，本文僅供學(xué)習(xí)分享使用，如有不足之處，還請(qǐng)指正。

Express簡(jiǎn)介

Express是基于 Node.js 平臺(tái)，快速、開放、極簡(jiǎn)的 Web 開發(fā)框架，目前最新版本是4.17.2。Express 是一個(gè)保持最小規(guī)模的靈活的 Node.js Web 應(yīng)用程序開發(fā)框架，為 Web 和移動(dòng)應(yīng)用程序提供一組強(qiáng)大的功能。

具體可參考Express中文網(wǎng)。

Express生成器

1. 什么是Express生成器

通過應(yīng)用生成器工具 express-generator 可以快速創(chuàng)建一個(gè)基于Express的應(yīng)用程序的骨架。

2. 安裝Express生成器

全局安裝 express-generator ，可以通過在命令行工具執(zhí)行以下命令進(jìn)行：

cnpm i -g express-generator

安裝過程，如下所示：

注意：全局安裝npm的模塊目錄：C:\Users\Alan.hsiang\AppData\Roaming\npm 。

創(chuàng)建Express項(xiàng)目

Exress生成器安裝成功后，就可以通過命令創(chuàng)建Express項(xiàng)目，如下所示：

切換到項(xiàng)目所在目錄，通過以上命令，自動(dòng)創(chuàng)建一個(gè)Express項(xiàng)目：

express -e 項(xiàng)目名稱

創(chuàng)建過程，如下所示：

注意：如果已經(jīng)手動(dòng)創(chuàng)建項(xiàng)目目錄，則可以通過express -e 創(chuàng)建默認(rèn)項(xiàng)目。

創(chuàng)建成功后，在文件夾里面打開，默認(rèn)目錄結(jié)構(gòu)如下所示：

安裝項(xiàng)目依賴

在創(chuàng)建默認(rèn)項(xiàng)目后，還需要安裝依賴模塊，才可以運(yùn)行程序，如下所示：

cnpm i

安裝過程，如下所示：

依賴安裝成功后，即可在文件夾中查看，多出來一個(gè)目錄【node_modules】，如下所示：

運(yùn)行Express項(xiàng)目

在項(xiàng)目所在的命令行窗口，輸入以下命令，即可啟動(dòng)項(xiàng)目：

npm start

啟動(dòng)過程，如下所示：

在瀏覽器中輸入網(wǎng)址【http://localhost:3000/】，即可打開項(xiàng)目。具體如下所示：

以上就表示Express安裝創(chuàng)建成功。

Express目錄結(jié)構(gòu)說明

關(guān)于Exress生成器默認(rèn)創(chuàng)建的項(xiàng)目，目錄結(jié)構(gòu)如下所示：

創(chuàng)建一個(gè)新路由模塊

以創(chuàng)建一個(gè)新聞模塊為例，步驟如下所示：

1. 創(chuàng)建ejs模塊文件

在views目錄下，創(chuàng)建news目錄，然后創(chuàng)建list.ejs和detail.ejs，如下所示：

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

新聞詳細(xì)頁(yè)：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新聞詳細(xì)頁(yè)</title>
    </head>
    <body>
        <h3>新聞詳細(xì)頁(yè)</h3>
    </body>
</html>

注意：本示例只是為了說明原理，所以都是簡(jiǎn)單的html頁(yè)面代碼。

2. 創(chuàng)建路由文件

在routes目錄下，創(chuàng)建一個(gè)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;