首頁 web前端 js教程 Node.js的Express框架使用上手指南_node.js

Node.js的Express框架使用上手指南_node.js

May 16, 2016 pm 03:11 PM
express javascript js node node.js

Express介紹
npm提供了大量的第三方模組,其中不乏許多Web框架,例如我們本章節要講述的一個輕量級的Web框架 ——— Express。

Express是一個簡潔、靈活的node.js Web應用開發框架, 它提供一系列強大的功能,例如:模板解析、靜態文件服務、中間件、路由控制等等,並且還可以使用插件或整合其他模組來幫助你創建各種Web和行動裝置應用程式,是目前最受歡迎的基於Node.js的Web開發框架,並且支援Ejs、jade等多種模板,可以快速地建立一個具有完整功能的網站。

好,下面我們就開始吧!

1. NPM安裝

npm install express
登入後複製

2. 取得、引用

var express = require('express');
var app = express();
登入後複製

透過變數「app」我們就可以呼叫express的各種方法了,好戲才剛開始,繼續加油吧!

建立應用程式
認識了Express框架,我們開始創建我們的第一個express應用程式。

在我們的預設專案主檔app.js加入以下內容:

var express = require('express');
var app = express();
app.get('/', function (request, response) {
  response.send('Hello World!');
});

app.listen(80);

登入後複製

說明:在後面課程學習中,我們會統一使用80埠用於監聽請求。

加入完畢之後,透過右側欄的「測試位址」來檢視瀏覽器內容,當看到「Hello World!」內容就表示一個簡單的express應用程式已經創建成功了。

get請求
前面我們實作了一個簡單的express應用,下面我們就開始具體講述它的具體實現,首先我們先來學習Express的常用方法。

get方法 —— 根據請求路徑來處理客戶端發出的GET請求。

格式:

app.get(path,function(request, response));
登入後複製

path為請求的路徑,第二個參數為處理請求的回呼函數,有兩個參數分別是request和response,代表請求資訊和回應資訊。

如下範例:

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

app.get('/', function(request, response) {
  response.send('Welcome to the homepage!');
});
app.get('/about', function(request, response) {
  response.send('Welcome to the about page!');
});
app.get("*", function(request, response) {
  response.send("404 error!");
});
app.listen(80);

登入後複製

在上面範例中,指定了about頁面路徑、根路徑和所有路徑的處理方法。並且在回呼函數內部,使用HTTP回應的send方法,表示向瀏覽器發送字串。

參考以上程式碼,試試自己設定一個get請求路徑,然後瀏覽器存取該位址是否可以請求成功。

Middleware<中介軟體>
1.什麼是中間件?

中間件(middleware)就是處理HTTP請求的函數,用來完成各種特定的任務,例如檢查使用者是否登入、分析資料、以及其他在需要最終將資料傳送給使用者之前完成的任務。 它最大的特色就是,一個中間件處理完,可以把對應資料再傳遞給下一個中間件。

2.一個不進行任何操作、只傳遞request物件的中間件,大概是這樣:

function Middleware(request, response, next) {
  next();
}
登入後複製

上面程式碼的next為中間件的回呼函數。如果它帶有參數,則代表拋出一個錯誤,參數為錯誤文字。

function Middleware(request, response, next) {
  next('出错了!');
}
登入後複製

拋出錯誤以後,後面的中間件將不再執行,直到發現一個錯誤處理函數為止。如果沒有呼叫next方法,後面註冊的函數也是不會執行的。

all函數的基本用法
和get函數不同app.all()函數可以匹配所有的HTTP動詞,也就是說它可以過濾所有路徑的請求,如果使用all函數定義中間件,那麼就相當於所有請求都必須先通過此該中間件。

格式:

app.all(path,function(request, response));
登入後複製

如下所示,我們使用all函數在請求之前設定回應頭屬性。

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

app.all("*", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" }); //设置响应头属性值
next();
});

app.get("/", function(request, response) {
  response.end("欢迎来到首页!");
});

app.get("/about", function(request, response) {
  response.end("欢迎来到about页面!");
});

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

app.listen(80);

登入後複製

上面程式碼參數中的「*」表示對所有路徑有效,這個方法在給特定前綴路徑或任意路徑上處理時會特別有用,不管我們請求任何路徑都會事先經過all函數。

如果所示,如果我們跳過all函數又會怎麼樣呢,自己動手試試?

use基本用法1
use是express呼叫中間件的方法,它傳回一個函數。

格式:

app.use([path], function(request, response, next){});

//可选参数path默认为"/"。

登入後複製

1. 使用中間件

app.use(express.static(path.join(__dirname, '/')));
登入後複製

如上呢,我們就使用use函數呼叫express中間件設定了靜態檔案目錄的存取路徑(這裡假設為根路徑)。

2. 如何連續呼叫兩個中間件呢,如下例:

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

app.use(function(request, response, next){
 console.log("method:"+request.method+" ==== "+"url:"+request.url);
 next();
});

app.use(function(request, response){
 response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
 response.end('示例:连续调用两个中间件');
});

app.listen(80);

登入後複製

回调函数的next参数,表示接受其他中间件的调用,函数体中的next(),表示将请求数据传递给下一个中间件。

上面代码先调用第一个中间件,在控制台输出一行信息,然后通过next(),调用第二个中间件,输出HTTP回应。由于第二个中间件没有调用next方法,所以req对象就不再向后传递了。

use基本用法2
use方法不仅可以调用中间件,还可以根据请求的网址,返回不同的网页内容,如下示例:

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

app.use(function(request, response, next) {
  if(request.url == "/") {
    response.send("Welcome to the homepage!");
  }else {
    next();
  }
});

app.use(function(request, response, next) {
  if(request.url == "/about") {
    response.send("Welcome to the about page!");
  }else {
    next();
  }
});
app.use(function(request, response) {
  response.send("404 error!");
});
app.listen(80);

登入後複製

上面代码通过request.url属性,判断请求的网址,从而返回不同的内容。

回调函数
Express回调函数有两个参数,分别是request(简称req)和response(简称res),request代表客户端发来的HTTP请求,request代表发向客户端的HTTP回应,这两个参数都是对象。示例如下:

function(req, res) {
});
登入後複製

在后面的学习中,我们会经常和它打交道,牢牢记住它的格式吧!

获取主机名、路径名
今天我们就先来学习如何使用req对象来处理客户端发来的HTTP请求。

req.host返回请求头里取的主机名(不包含端口号)。

req.path返回请求的URL的路径名。

如下示例:

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

app.get("*", function(req, res) {
  console.log(req.path);
  res.send("req.host获取主机名,req.path获取请求路径名!");
});

app.listen(80);

登入後複製

试一试在浏览器中输入任意一个请求路径,通过req查看主机名或请求路径。

query基本用法
query是一个可获取客户端get请求路径参数的对象属性,包含着被解析过的请求参数对象,默认为{}。

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

app.get("*", function(req, res) {
  console.log(req.query.参数名);
  res.send("测试query属性!");
});

app.listen(80);

登入後複製

通过req.query获取get请求路径的对象参数值。

格式:req.query.参数名;请求路径如下示例:

例1: /search?n=Lenka

req.query.n // "Lenka"
登入後複製

例2: /shoes?order=desc&shoe[color]=blue&shoe[type]=converse

req.query.order // "desc"

req.query.shoe.color // "blue"

req.query.shoe.type // "converse"

登入後複製

试一试get请求一个带参数路径,使用“req.query.参数名”方法获取请求参数值。

param基本用法
和属性query一样,通过req.param我们也可以获取被解析过的请求参数对象的值。

格式:req.param("参数名");请求路径如下示例:

例1: 获取请求根路径的参数值,如/?n=Lenka,方法如下:

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

app.get("/", function(req, res) {

  console.log(req.param("n")); //Lenka

  res.send("使用req.param属性获取请求根路径的参数对象值!");

});
app.listen(80);

登入後複製

例2:我们也可以获取具有相应路由规则的请求对象,假设路由规则为 /user/:name/,请求路径/user/mike,如下:

app.get("/user/:name/", function(req, res) {
  console.log(req.param("name")); //mike
  res.send("使用req.param属性获取具有路由规则的参数对象值!");
});
登入後複製

PS:所谓“路由”,就是指为不同的访问路径,指定不同的处理方法。

看了上面的示例,试一试使用req.param属性解析一个请求路径对象,并获取请求参数值。

params基本用法
和param相似,但params是一个可以解析包含着有复杂命名路由规则的请求对象的属性。

格式:req.params.参数名;

例1. 如上课时请求根路径的例子,我们就可以这样获取,如下:

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

app.get("/user/:name/", function(req, res) {
  console.log(req.params.name); //mike
  res.send("使用req.params属性获取具有路由规则的参数对象值!");
});

app.listen(80);

登入後複製

查看运行结果,和param属性功能是一样的,同样获取name参数值。

例2:当然我们也可以请求复杂的路由规则,如/user/:name/:id,假设请求地址为:/user/mike/123,如下:

app.get("/user/:name/:id", function(req, res) {
  console.log(req.params.id); //"123"
  res.send("使用req.params属性复杂路由规则的参数对象值!");
});
登入後複製

对于请求地址具有路由规则的路径来说,属性params比param属性是不是又强大了那么一点点呢!

send基本用法
send()方法向浏览器发送一个响应信息,并可以智能处理不同类型的数据。格式如下: res.send([body|status], [body]);

1.当参数为一个String时,Content-Type默认设置为"text/html"。

res.send('Hello World'); //Hello World
登入後複製

2.当参数为Array或Object时,Express会返回一个JSON。

res.send({ user: 'tobi' }); //{"user":"tobi"}
res.send([1,2,3]); //[1,2,3]
登入後複製

3.当参数为一个Number时,并且没有上面提到的任何一条在响应体里,Express会帮你设置一个响应体,比如:200会返回字符"OK"。

res.send(200); // OK
res.send(404); // Not Found
res.send(500); // Internal Server Error
登入後複製

send方法在输出响应时会自动进行一些设置,比如HEAD信息、HTTP缓存支持等等。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟,需要具體程式碼範例隨著網路和科技的快速發展,股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環,其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息,幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

Pi Node教學:什麼是Pi節點?如何安裝和設定Pi Node? Pi Node教學:什麼是Pi節點?如何安裝和設定Pi Node? Mar 05, 2025 pm 05:57 PM

PiNetwork節點詳解及安裝指南本文將詳細介紹PiNetwork生態系統中的關鍵角色——Pi節點,並提供安裝和配置的完整步驟。 Pi節點在PiNetwork區塊鏈測試網推出後,成為眾多先鋒積極參與測試的重要環節,為即將到來的主網發布做準備。如果您還不了解PiNetwork,請參考Pi幣是什麼?上市價格多少? Pi用途、挖礦及安全性分析。什麼是PiNetwork? PiNetwork項目始於2019年,擁有其專屬加密貨幣Pi幣。該項目旨在創建一個人人可參與

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展,股票投資已經成為了越來越多人的選擇。而在股票交易中,蠟燭圖是常用的技術分析方法,它能夠顯示股票價格的變動趨勢,幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧,帶領讀者了解如何繪製股票蠟燭圖,並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前,我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

See all articles