腳本之家服務器常用軟件

快捷導航

軟件下載

android MAC 驅(qū)動下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

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

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

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

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

Express簡介

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

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

Express生成器

1. 什么是Express生成器

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

2. 安裝Express生成器

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

cnpm i -g express-generator

安裝過程，如下所示：

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

創(chuàng)建Express項目

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

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

express -e 項目名稱

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

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

創(chuàng)建成功后，在文件夾里面打開，默認目錄結構如下所示：

安裝項目依賴

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

cnpm i

安裝過程，如下所示：

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

運行Express項目

在項目所在的命令行窗口，輸入以下命令，即可啟動項目：

npm start

啟動過程，如下所示：

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

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

Express目錄結構說明

關于Exress生成器默認創(chuàng)建的項目，目錄結構如下所示：

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

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

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

在views目錄下，創(chuàng)建news目錄，然后創(chuàng)建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. 創(chuàng)建路由文件

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