一、 介紹
什么是express,為什么要使用express?根據(jù)官方網(wǎng)站的說法,express是一個(gè)基于 Node.js 平臺(tái)的極簡、靈活的web應(yīng)用開發(fā)框架,它提供一系列強(qiáng)大的特性、豐富的API接口,對(duì)web應(yīng)用的接口進(jìn)行了二次的封裝,提供了MVC模式,方便我們可以快速地創(chuàng)建各種web和移動(dòng)應(yīng)用。
Express 框架核心特性:
本文也只是簡單的了解下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.jsvar 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.jsserver has running at port 3000
在瀏覽器中訪問http://127.0.0.1:3000/就能看到頁面上輸出的hello world。說明基本的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方法訪問路徑path時(shí),執(zhí)行handler指定的方法,而且handler方法還帶有req和res兩個(gè)參數(shù)供我們使用。req是請(qǐng)求過來時(shí)帶的信息,比如參數(shù)query, body, 頭部header等; res是我們作為服務(wù)器想要返回給瀏覽器的信息設(shè)置。res.send(‘hello world')表示是向頁面中發(fā)送'hello world'字符串。
當(dāng)然,如果想要接收post過來的請(qǐng)求,可以使用 app.post(path, function(req, res){}) 接收post到path的請(qǐng)求。
app.listen用來監(jiān)聽本地的端口后運(yùn)行web程序,監(jiān)聽成功后執(zhí)行回調(diào)函數(shù)。
2.2 路由
我們?cè)谥爸v解《從零學(xué)習(xí)node.js之搭建http服務(wù)器(二)》也說過一點(diǎn)路由的內(nèi)容,不過那時(shí)候我們制定的路由規(guī)則非常簡單,而且只是處理了3個(gè)左右的頁面而已。而express則對(duì)路由功能進(jìn)行豐富。
同時(shí),我們也應(yīng)該注意的是: /是表示根路徑下,/user是表示user路徑下,如果訪問/user/login時(shí),是直接訪問/user/login路由的,前面的兩個(gè)路由是不訪問的。
// 根路徑下的請(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路徑還可以通過字符串匹配和正則匹配的方式進(jìn)行路由選擇。
2.3 RES響應(yīng)方法
我們?cè)趧偵厦娴睦又校褂?code>res.send()向頁面中輸出一段'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 style="color:#f00;">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的代碼比較長,我們可以把這些代碼都放到一個(gè)單獨(dú)的html文件里,然后使用res.sendFile()方法,將html文件里的內(nèi)容輸出到頁面中。
在根目錄下創(chuàng)建一個(gè)index.html文件,把完整的html代碼放進(jìn)去,然后:
app.get('/', function(req, res, next){ res.sendFile('index.html');});這樣就能在瀏覽器中看到一個(gè)完整的頁面了。
此外,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變量,來調(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(); // 若沒有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)輸出 | 瀏覽器輸出 | 說明 |
|---|---|---|---|
| 127.0.0.1:3000 | index m url: / | index | |
| /user | index m url: /user | Cannot GET /user | 中間件響應(yīng)了不存在頁面的請(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)求,只是沒有路由來對(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問127.0.0.1/topic/1.html時(shí),在控制臺(tái)則會(huì)輸出:
index m 1index m 2index m 3topic get 1topic get 2topic get 3
說明中間件是依次向下執(zhí)行的。我們可以在每個(gè)中間件都做不同的處理,不過要記得使用next()方法,不然頁面就掛了。
我們?cè)谏厦婵吹絩es中的方法,至少需要調(diào)用一個(gè),不然請(qǐng)求就會(huì)被掛起,一直等待或404。如果對(duì)外沒有任何的回復(fù),也可以使用res.end()結(jié)束。同時(shí),如果在某個(gè)中間件中使用了res中的方法,則后面的中間件不再調(diào)用。
總結(jié)
這里我們也是簡要的了解了下express框架,更多的內(nèi)容還是需要查看官網(wǎng)網(wǎng)站。之后我們將使用express構(gòu)建一個(gè)簡單的論壇系統(tǒng)。感興趣的朋友們請(qǐng)繼續(xù)關(guān)注武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注