Node組件——Express簡介

来源:https://www.cnblogs.com/qianduansanmei/archive/2020/06/01/13024733.html
-Advertisement-
Play Games

概述 Express是目前最流行的基於Node.js的Web開發框架，可以快速地搭建一個完整功能的網站。 Express上手非常簡單，首先新建一個項目目錄，假定叫做hello-world。 $ mkdir hello-world 進入該目錄，新建一個package.json文件，內容如下。 { "n ...


概述

Express是目前最流行的基於Node.js的Web開發框架，可以快速地搭建一個完整功能的網站。

Express上手非常簡單，首先新建一個項目目錄，假定叫做hello-world。

$ mkdir hello-world

進入該目錄，新建一個package.json文件，內容如下。

{
  "name": "hello-world",
  "description": "hello world test app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "4.x"
  }
}

上面代碼定義了項目的名稱、描述、版本等，並且指定需要4.0版本以上的Express。

然後，就可以安裝了。

$ npm install

執行上面的命令以後，在項目根目錄下，新建一個啟動文件，假定叫做index.js。

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8080);

1.pngfile
然後，運行上面的啟動腳本。

$ node index

現在就可以訪問http://localhost:8080，它會在瀏覽器中打開當前目錄的public子目錄（嚴格來說，是打開public目錄的index.html文件）。如果public目錄之中有一個圖片文件my_image.png，那麼可以用http://localhost:8080/my_image.png訪問該文件。

你也可以在index.js之中，生成動態網頁。
2

然後，在命令行下運行啟動腳本，就可以在瀏覽器中訪問項目網站了。

$ node index

上面代碼會在本機的3000埠啟動一個網站，網頁顯示Hello World。

啟動腳本index.js的app.get方法，用於指定不同的訪問路徑所對應的回調函數，這叫做“路由”（routing）。上面代碼只指定了根目錄的回調函數，因此只有一個路由記錄。實際應用中，可能有多個路由記錄。

3

這時，最好就把路由放到一個單獨的文件中，比如新建一個routes子目錄。

4

然後，原來的index.js就變成下麵這樣。

// index.js
var express = require('express');
var app = express();
var routes = require('./routes')(app);
app.listen(3000);

運行原理

底層：http模塊

Express框架建立在node.js內置的http模塊上。http模塊生成伺服器的原始代碼如下。

var http = require("http");
var app = http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hello world!");
});
app.listen(3000, "localhost");

上面代碼的關鍵是http模塊的createServer方法，表示生成一個HTTP伺服器實例。該方法接受一個回調函數，該回調函數的參數，分別為代表HTTP請求和HTTP回應的request對象和response對象。

Express框架的核心是對http模塊的再包裝。上面的代碼用Express改寫如下。

var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello world!');
});
app.listen(3000);

比較兩段代碼，可以看到它們非常接近。原來是用http.createServer方法新建一個app實例，現在則是用Express的構造方法，生成一個Epress實例。兩者的回調函數都是相同的。Express框架等於在http模塊之上，加了一個中間層。

什麼是中間件

簡單說，中間件（middleware）就是處理HTTP請求的函數。它最大的特點就是，一個中間件處理完，再傳遞給下一個中間件。App實例在運行過程中，會調用一系列的中間件。

每個中間件可以從App實例，接收三個參數，依次為request對象（代表HTTP請求）、response對象（代表HTTP回應），next回調函數（代表下一個中間件）。每個中間件都可以對HTTP請求（request對象）進行加工，並且決定是否調用next方法，將request對象再傳給下一個中間件。

一個不進行任何操作、只傳遞request對象的中間件，就是下麵這樣。

function uselessMiddleware(req, res, next) {
  next();
}

上面代碼的next就是下一個中間件。如果它帶有參數，則代表拋出一個錯誤，參數為錯誤文本。

function uselessMiddleware(req, res, next) {
  next('出錯了！');
}

拋出錯誤以後，後面的中間件將不再執行，直到發現一個錯誤處理函數為止。

use方法

use是express註冊中間件的方法，它返回一個函數。下麵是一個連續調用兩個中間件的例子。

var express = require("express");
var http = require("http");

var app = express();

app.use(function(request, response, next) {
  console.log("In comes a " + request.method + " to " + request.url);
  next();
});

app.use(function(request, response) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Hello world!\n");
});

http.createServer(app).listen(1337);

上面代碼使用app.use方法，註冊了兩個中間件。收到HTTP請求後，先調用第一個中間件，在控制台輸出一行信息，然後通過next方法，將執行權傳給第二個中間件，輸出HTTP回應。由於第二個中間件沒有調用next方法，所以request對象就不再向後傳遞了。

use方法內部可以對訪問路徑進行判斷，據此就能實現簡單的路由，根據不同的請求網址，返回不同的網頁內容。

var express = require("express");
var http = require("http");

var app = express();

app.use(function(request, response, next) {
  if (request.url == "/") {
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.end("Welcome to the homepage!\n");
  } else {
    next();
  }
});

app.use(function(request, response, next) {
  if (request.url == "/about") {
    response.writeHead(200, { "Content-Type": "text/plain" });
  } else {
    next();
  }
});

app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error!\n");
});

http.createServer(app).listen(1337);

上面代碼通過request.url屬性，判斷請求的網址，從而返回不同的內容。註意，app.use方法一共登記了三個中間件，只要請求路徑匹配，就不會將執行權交給下一個中間件。因此，最後一個中間件會返回404錯誤，即前面的中間件都沒匹配請求路徑，找不到所要請求的資源。

除了在回調函數內部判斷請求的網址，use方法也允許將請求網址寫在第一個參數。這代表，只有請求路徑匹配這個參數，後面的中間件才會生效。無疑，這樣寫更加清晰和方便。

app.use('/path', someMiddleware);

上面代碼表示，只對根目錄的請求，調用某個中間件。

因此，上面的代碼可以寫成下麵的樣子。

var express = require("express");
var http = require("http");

var app = express();

app.use("/home", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Welcome to the homepage!\n");
});

app.use("/about", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Welcome to the about page!\n");
});

app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error!\n");
});

http.createServer(app).listen(1337);

Express的方法

all方法和HTTP動詞方法

針對不同的請求，Express提供了use方法的一些別名。比如，上面代碼也可以用別名的形式來寫。

var express = require("express");
var http = require("http");
var app = express();

app.all("*", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  next();
});

app.get("/", function(request, response) {
  response.end("Welcome to the homepage!");
});

app.get("/about", function(request, response) {
  response.end("Welcome to the about page!");
});

app.get("*", function(request, response) {
  response.end("404!");
});

http.createServer(app).listen(1337);

上面代碼的all方法表示，所有請求都必須通過該中間件，參數中的“*”表示對所有路徑有效。get方法則是只有GET動詞的HTTP請求通過該中間件，它的第一個參數是請求的路徑。由於get方法的回調函數沒有調用next方法，所以只要有一個中間件被調用了，後面的中間件就不會再被調用了。

除了get方法以外，Express還提供post、put、delete方法，即HTTP動詞都是Express的方法。

這些方法的第一個參數，都是請求的路徑。除了絕對匹配以外，Express允許模式匹配。

app.get("/hello/:who", function(req, res) {
  res.end("Hello, " + req.params.who + ".");
});

上面代碼將匹配“/hello/alice”網址，網址中的alice將被捕獲，作為req.params.who屬性的值。需要註意的是，捕獲後需要對網址進行檢查，過濾不安全字元，上面的寫法只是為了演示，生產中不應這樣直接使用用戶提供的值。

如果在模式參數後面加上問號，表示該參數可選。

app.get('/hello/:who?',function(req,res) {
	if(req.params.id) {
    	res.end("Hello, " + req.params.who + ".");
	}
    else {
    	res.send("Hello, Guest.");
	}
});

下麵是一些更複雜的模式匹配的例子。

app.get('/forum/:fid/thread/:tid', middleware)

// 匹配/commits/71dbb9c
// 或/commits/71dbb9c..4c084f9這樣的git格式的網址
app.get(/^\/commits\/(\w+)(?:\.\.(\w+))?$/, function(req, res){
  var from = req.params[0];
  var to = req.params[1] || 'HEAD';
  res.send('commit range ' + from + '..' + to);
});

set方法

set方法用於指定變數的值。

app.set("views", __dirname + "/views");

app.set("view engine", "jade");

上面代碼使用set方法，為系統變數“views”和“view engine”指定值。

response對象

（1）response.redirect方法

response.redirect方法允許網址的重定向。

response.redirect("/hello/anime");
response.redirect("http://www.example.com");
response.redirect(301, "http://www.example.com");

（2）response.sendFile方法

response.sendFile方法用於發送文件。

response.sendFile("/path/to/anime.mp4");

（3）response.render方法

response.render方法用於渲染網頁模板。

app.get("/", function(request, response) {
  response.render("index", { message: "Hello World" });
});

上面代碼使用render方法，將message變數傳入index模板，渲染成HTML網頁。

requst對象

（1）request.ip

request.ip屬性用於獲得HTTP請求的IP地址。

（2）request.files

request.files用於獲取上傳的文件。

搭建HTTPs伺服器

使用Express搭建HTTPs加密伺服器，也很簡單。

var fs = require('fs');
var options = {
  key: fs.readFileSync('E:/ssl/myserver.key'),
  cert: fs.readFileSync('E:/ssl/myserver.crt'),
  passphrase: '1234'
};

var https = require('https');
var express = require('express');
var app = express();

app.get('/', function(req, res){
  res.send('Hello World Expressjs');
});

var server = https.createServer(options, app);
server.listen(8084);
console.log('Server is running on port 8084');

本文由博客群發一文多發等運營工具平臺 OpenWrite 發佈


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JS控制下拉列表左右選擇實例代碼
    按照國際慣例先放效果圖 <!DOCTYPE html> <html> <head> <title>JavaScript下拉列表左右選擇</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <scrip ...
  • js的15種迴圈遍歷，你掌握了幾種【轉】
    方式一： 原生的 js 迴圈 1.while 迴圈 While語句包括一個迴圈條件和一段代碼塊，只要條件為真，就不斷迴圈執行代碼塊。 while (條件) 語句; //舉例： var i = 0; while (i < 100) { console.log('i 當前為：' + i); i = i ...
  • 零基礎小白轉行如何入門學習web前端
    隨著近些年，web前端開發行業薪資的水漲船高，越來越多的人選擇加入到前端開發行業，他們中的絕大多數人都沒有任何編程基礎，對於這些零基礎的人要怎麼學習web前端開發呢？前端開發都要學習哪些知識。零基礎小白轉行如何入門學習web前端 首先你要知道什麼是web前端，web前端是做什麼的。Web前端做的工作 ...
  • javascript實用寫法彙總
    轉Boolean類型 !!'a' 通過兩個取反，可以強制轉換為Boolean類型。 轉Number類型 // String轉化為Number console.log(+'45'); // 日期輸出時間戳 console.log(+new Date); parseInt ~~，這種方法還可以將字元串轉 ...
  • 使用 Apache SSI(Server Side Includes) 製作多語言版靜態網頁
    因此，我們往往期望，網頁排版時，只做一個語言版的網頁。然後把其它語言的純翻譯文字，每個語言一個文件。 ... 經過一番研究，我找到了辦法。那就是使用 Apache SSI(Server Side Includes)。 ...
  • js/jQuery獲取data-*屬性值【轉】
    下麵就詳細介紹四種方法獲取data-*屬性的值 <li id="getId" data-id="122" data-vice-id="11">獲取id</li> 需要獲取的就是data-id 和 dtat-vice-id的值 一：getAttribute()方法 const getId = docu ...
  • js移除數組中指定元素【轉】
    首先需要找到元素的下標，使用splice函數進行移除： var array = ["zhangsan", "lisi", "wangwu"]; var index = array.indexOf("lisi"); if (index > -1) { array.splice(index, 1); } ...
  • jquery checkbox選中、改變狀態、change和click事件【轉】
    jquery判斷checked的三種方法: .attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop('checked'); //16+:true/false .is(':checked'); //所有版本 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類