從零學(xué)習(xí)node.js之express入門(六)

發(fā)布時(shí)間：2020-10-02 06:19:19 來(lái)源：腳本之家閱讀：144 作者：Wenzi 欄目：web開(kāi)發(fā)

一、介紹

什么是express，為什么要使用express？根據(jù)官方網(wǎng)站的說(shuō)法，express是一個(gè)基于 Node.js 平臺(tái)的極簡(jiǎn)、靈活的web應(yīng)用開(kāi)發(fā)框架，它提供一系列強(qiáng)大的特性、豐富的API接口，對(duì)web應(yīng)用的接口進(jìn)行了二次的封裝，提供了MVC模式，方便我們可以快速地創(chuàng)建各種web和移動(dòng)應(yīng)用。

Express 框架核心特性：

可以設(shè)置中間件來(lái)響應(yīng) HTTP 請(qǐng)求。
定義了路由表用于執(zhí)行不同的 HTTP 請(qǐng)求動(dòng)作。
可以通過(guò)向模板傳遞參數(shù)來(lái)動(dòng)態(tài)渲染 HTML 頁(yè)面。

本文也只是簡(jiǎn)單的了解下express框架的內(nèi)容，希望大家能比較快速的入門，更多詳細(xì)的內(nèi)容還是閱讀官網(wǎng)并查看相關(guān)的API。

express的中文官方網(wǎng)站：【Express】

二、入門

創(chuàng)建一個(gè)目錄myapp，進(jìn)入到myapp后，使用命令npm express --save-dev把express安裝到本地，然后創(chuàng)建app.js（或server.js）作為程序的入口。

// app.js
var express = require('express');
var app = express();

app.get('/', function(req, res){
 res.send('hello world');
});

app.listen(3000, function(){
 console.log('server has running at port 3000');
})

運(yùn)行app.js文件：

$ node app.js
server has running at port 3000

在瀏覽器中訪問(wèn)http://127.0.0.1:3000/就能看到頁(yè)面上輸出的hello world。說(shuō)明基本的express程序可以正常運(yùn)行了。

2.1 APP

引入express模塊后，執(zhí)行express()得到一個(gè)app實(shí)例，app實(shí)例中有g(shù)et, post, use, listen等方法。

app.get(path, handler) ：當(dāng)使用get方法訪問(wèn)路徑path時(shí)，執(zhí)行handler指定的方法，而且handler方法還帶有req和res兩個(gè)參數(shù)供我們使用。req是請(qǐng)求過(guò)來(lái)時(shí)帶的信息，比如參數(shù)query, body, 頭部header等； res是我們作為服務(wù)器想要返回給瀏覽器的信息設(shè)置。res.send(‘hello world')表示是向頁(yè)面中發(fā)送'hello world'字符串。

當(dāng)然，如果想要接收post過(guò)來(lái)的請(qǐng)求，可以使用 app.post(path, function(req, res){}) 接收post到path的請(qǐng)求。

app.listen用來(lái)監(jiān)聽(tīng)本地的端口后運(yùn)行web程序，監(jiān)聽(tīng)成功后執(zhí)行回調(diào)函數(shù)。

2.2 路由

我們?cè)谥爸v解《從零學(xué)習(xí)node.js之搭建http服務(wù)器（二）》也說(shuō)過(guò)一點(diǎn)路由的內(nèi)容，不過(guò)那時(shí)候我們制定的路由規(guī)則非常簡(jiǎn)單，而且只是處理了3個(gè)左右的頁(yè)面而已。而express則對(duì)路由功能進(jìn)行豐富。

app.get(path, handler) : get方式訪問(wèn)path路徑
app.post(path, handler) : post方式訪問(wèn)path路徑
app.put(path, handler) : put方式訪問(wèn)path路徑
app.delete(path, handler) : delete方式訪問(wèn)path路徑
app.all(path, handler) : 任何方式訪問(wèn)path路徑

同時(shí)，我們也應(yīng)該注意的是： /是表示根路徑下，/user是表示user路徑下，如果訪問(wèn)/user/login時(shí)，是直接訪問(wèn)/user/login路由的，前面的兩個(gè)路由是不訪問(wèn)的。

// 根路徑下的請(qǐng)求
app.get('/', function(req, res){
 console.log('hello world');
 res.send('hello world');
});

// /user路徑下的請(qǐng)求
app.get('/user', function(req, res){
 console.log('user');
 res.send('huser');
});

// /user/login下的請(qǐng)求
app.get('/user/login', function(req, res){
 console.log('user/login');
 res.send('user/login');
});

而且，path路徑還可以通過(guò)字符串匹配和正則匹配的方式進(jìn)行路由選擇。

2.3 RES響應(yīng)方法

我們?cè)趧偵厦娴睦又校褂?code>res.send()向頁(yè)面中輸出一段'hello world'的純文本字符串，而且res.send()也可以輸出其他類型的數(shù)據(jù)，比如html字符串（瀏覽器可以解析），Buffer類型，Object類型，Array類型等。

比如我們要輸出一段html字符串。

var html = '<!DOCTYPE html>\
   <html lang="en">\
    <head>\
     <meta charset="UTF-8" />\
     <title>Document</title>\
    </head>\
    <body>\
     <div>\
      <p >hello world</p>\
      <p><input type="text" /></p>\
     </div>\
    </body>\
   </html>';

app.get('/', function(req, res, next){
 res.send(html);
});

我們可以在瀏覽器上一個(gè)紅色的hello world和一個(gè)文本輸入框。但是若html的代碼比較長(zhǎng)，我們可以把這些代碼都放到一個(gè)單獨(dú)的html文件里，然后使用res.sendFile()方法，將html文件里的內(nèi)容輸出到頁(yè)面中。

在根目錄下創(chuàng)建一個(gè)index.html文件，把完整的html代碼放進(jìn)去，然后：

app.get('/', function(req, res, next){
 res.sendFile('index.html');
});

這樣就能在瀏覽器中看到一個(gè)完整的頁(yè)面了。

此外，res中還提供了一些別的方法供我們使用：

方法	描述
res.download()	下載文件。
res.end()	終結(jié)響應(yīng)處理流程。
res.json()	發(fā)送一個(gè) JSON 格式的響應(yīng)。
res.jsonp()	發(fā)送一個(gè)支持 JSONP 的 JSON 格式的響應(yīng)。
res.redirect()	重定向請(qǐng)求。
res.render()	渲染視圖模板。
res.send()	發(fā)送各種類型的響應(yīng)。
res.sendFile	以八位字節(jié)流的形式發(fā)送文件。
res.sendStatus()	設(shè)置響應(yīng)狀態(tài)代碼，并將其以字符串形式作為響應(yīng)體的一部分發(fā)送。

三、中間件

上面我們執(zhí)行app.get('/', function(){})時(shí)，里面的回調(diào)函數(shù)就是中間件。中間件其實(shí)就是一個(gè)函數(shù)，在使用app.get, app.post, app.use等方法時(shí)，都是在調(diào)用中間件作為回調(diào)函數(shù)。中間件都可以調(diào)用req和res對(duì)象，如果多個(gè)中間件順序向下執(zhí)行的話，上一個(gè)中間還需要一個(gè)next變量，來(lái)調(diào)用下一個(gè)中間件。

這里app.use的使用方法與app.get一樣，都是有兩個(gè)參數(shù)：path和回調(diào)函數(shù)，而在這里，path參數(shù)是可以忽略不寫的（忽略不寫則每個(gè)請(qǐng)求都會(huì)執(zhí)行該中間件）。

// 任何的請(qǐng)求，該中間件都會(huì)響應(yīng)
app.use(function(req, res, next){
 console.log('index m url: '+req.url);
 next(); // 若沒(méi)有next()，則請(qǐng)求就會(huì)被掛起，一直等待
})

// /topic 下的請(qǐng)求都會(huì)響應(yīng)，包括 /topic/1.html, /topic/c/1.html等
app.use('/topic', function(req, res, next){
 console.log('topic m url: '+req.url);
 next();
})

// 處理/根目錄下的請(qǐng)求
app.get('/', function(req, res, next){
 res.send('index');
});

// 處理 /topic/1.html 這種類型的請(qǐng)求
app.get('/topic/:id.html', function(req, res, next){
 res.send('topic');
});

我們?cè)跒g覽器中輸入一些不同的url看看：

url	控制臺(tái)輸出	瀏覽器輸出	說(shuō)明
127.0.0.1:3000	index m url: /	index
/user	index m url: /user	Cannot GET /user	中間件響應(yīng)了不存在頁(yè)面的請(qǐng)求
/topic/1.html	index m url: /topic/1.html topic m url: /1.html	topic	兩個(gè)use中間件都響應(yīng)了請(qǐng)求
/topic/c/1.html	index m url: /topic/c/1.html topic m url: /c/1.html	Cannot GET /topic/c/1.html	兩個(gè)use中間件都響應(yīng)了請(qǐng)求，只是沒(méi)有路由來(lái)對(duì)該url進(jìn)行處理

同時(shí)，app.use()和app.get()等方法，可以調(diào)用多個(gè)中間件依次執(zhí)行，使用next()將控制權(quán)交由下一個(gè)中間件。多個(gè)中間件既可以依次作為傳輸傳遞進(jìn)去，也可以都放到數(shù)組中，也可以兩者混用（app.get等同理）：

app.use(path, m1, m2, m3, m4...);
app.use(path, [m1, m2, m3, ...]);
app.use(path, [m1, m2, m3, ...], m7, m8, ...);

在上面代碼的基礎(chǔ)上，我們編寫多個(gè)中間件。

// 作為數(shù)組方式
app.use([
 function(req, res, next){
  console.log('index m 1');
  next();
 }, function(req, res, next){
  console.log('index m 2');
  next();
 }, function(req, res, next){
  console.log('index m 3');
  next();
 }
])

// 每個(gè)中間件作為一個(gè)參數(shù)
app.get('/topic/:id.html', function(req, res, next){
 // res.send('topic');
 console.log('topic get 1');
 next();
}, function(req, res, next){
 console.log('topic get 2');
 next();
}, function(req, res, next){
 console.log('topic get 3');
 res.send('topic');
});

當(dāng)我們?cè)L問(wèn)127.0.0.1/topic/1.html時(shí)，在控制臺(tái)則會(huì)輸出：

index m 1
index m 2
index m 3

topic get 1
topic get 2
topic get 3

說(shuō)明中間件是依次向下執(zhí)行的。我們可以在每個(gè)中間件都做不同的處理，不過(guò)要記得使用next()方法，不然頁(yè)面就掛了。
我們?cè)谏厦婵吹絩es中的方法，至少需要調(diào)用一個(gè)，不然請(qǐng)求就會(huì)被掛起，一直等待或404。如果對(duì)外沒(méi)有任何的回復(fù)，也可以使用res.end()結(jié)束。同時(shí)，如果在某個(gè)中間件中使用了res中的方法，則后面的中間件不再調(diào)用。

總結(jié)

這里我們也是簡(jiǎn)要的了解了下express框架，更多的內(nèi)容還是需要查看官網(wǎng)網(wǎng)站。之后我們將使用express構(gòu)建一個(gè)簡(jiǎn)單的論壇系統(tǒng)。感興趣的朋友們請(qǐng)繼續(xù)關(guān)注億速云。

向AI問(wèn)一下細(xì)節(jié)

從零學(xué)習(xí)node.js之express入門(六)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽