快捷導(dǎo)航

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

更新時間：2017年02月25日 09:26:32 作者：Wenzi

相信大家都知道Express是一個簡潔而靈活的 node.js Web應(yīng)用框架, 提供了一系列強(qiáng)大特性幫助你創(chuàng)建各種 Web 應(yīng)用，和豐富的 HTTP 工具。下面這篇文章主要介紹了node.js中express的入門知識，需要的朋友可以參考下。

一、介紹

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

Express 框架核心特性：

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

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

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

二、入門

創(chuàng)建一個目錄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

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

2.1 APP

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

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

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

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

2.2 路由

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

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

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

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

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

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

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

2.3 RES響應(yīng)方法

我們在剛上面的例子中，使用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);
});

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

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

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

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

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

方法	描述
res.download()	下載文件。
res.end()	終結(jié)響應(yīng)處理流程。
res.json()	發(fā)送一個 JSON 格式的響應(yīng)。
res.jsonp()	發(fā)送一個支持 JSONP 的 JSON 格式的響應(yīng)。
res.redirect()	重定向請求。
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(){})時，里面的回調(diào)函數(shù)就是中間件。中間件其實(shí)就是一個函數(shù)，在使用app.get, app.post, app.use等方法時，都是在調(diào)用中間件作為回調(diào)函數(shù)。中間件都可以調(diào)用req和res對象，如果多個中間件順序向下執(zhí)行的話，上一個中間還需要一個next變量，來調(diào)用下一個中間件。

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

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

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

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

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

我們在瀏覽器中輸入一些不同的url看看：

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

同時，app.use()和app.get()等方法，可以調(diào)用多個中間件依次執(zhí)行，使用next()將控制權(quán)交由下一個中間件。多個中間件既可以依次作為傳輸傳遞進(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ǔ)上，我們編寫多個中間件。

// 作為數(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();
 }
])

// 每個中間件作為一個參數(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)我們訪問127.0.0.1/topic/1.html時，在控制臺則會輸出：

index m 1
index m 2
index m 3

topic get 1
topic get 2
topic get 3

說明中間件是依次向下執(zhí)行的。我們可以在每個中間件都做不同的處理，不過要記得使用next()方法，不然頁面就掛了。
我們在上面看到res中的方法，至少需要調(diào)用一個，不然請求就會被掛起，一直等待或404。如果對外沒有任何的回復(fù)，也可以使用res.end()結(jié)束。同時，如果在某個中間件中使用了res中的方法，則后面的中間件不再調(diào)用。

總結(jié)

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

您可能感興趣的文章: