node.js零基礎詳細教程(5)：express 、路由

express

Express 是一個基於 Node.js 平臺的極簡、靈活的 web 應用開發框架，它提供一系列強大的特性，幫助你創建各種 Web 和移動設備應用。

其實可以簡單的將express理解為node.js的一個類庫：我們在使用javascript的時候，會使用到jQuery，我們可以同理將express理解為node.js的一個類庫。

我們先創建一個資料夾用於放今天的代碼。（我的示例代碼放在exTest資料夾中）

在資料夾右鍵 --> 在此處打開命令列，然後輸入 npm init初始化一下（中間有提示需要輸入的地方，直接enter確定就可以）

執行完成之後，就會發現，該資料夾下多了一個 package.json的文件。

到上圖的地方就表示初始化完成了。

注：我們這裡為什麼要初始化呢，因為後面我們需要運行命令列安裝 express，如果沒有初始化，安裝的 express就不會安裝到目前的目錄，使用的時候就會有問題。

安裝express

注：這裡的 express 和 3章中講的express-generator是不同的概念， express只是一個庫，而express-generator是項目生成器，具體差別大家可以自己百度。

運行 npm install express

運行完成以後，會發現 exTest資料夾中多了個node_modules資料夾，內部就可以找到 express 模組

然後我們在 exTest資料夾中創建一個js檔來寫代碼，我們先使用express創建一個服務，代碼如下

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

代碼解釋：和原生的http請求不同，這裡首先引入 express模組

然後使用 express()即可直接創建一個服務，然後通過 get設置請求的路徑，

get接收兩個參數， 1、請求的路徑（"/" 表示當前路徑，這就就算根目錄）， 2、回呼函數，回呼函數包括兩個參數（請求的物件，相應的物件），在回呼函數內部，使用 end方法返回最後向頁面返回的資料。

最後使用 app.listen監聽3000埠。

當運行js之後，就可以通過流覽器訪問 localhost:3000訪問到服務了

檔如下：

運行結果如下：

流覽器訪問結果：

修改上面的代碼，我們多配置兩個路徑 /a 和 /b

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

重新運行後通過流覽器訪問，會發現不同的路徑返回了不同的值。

著就是簡單的路由配置了

練習：

1、在訪問的回呼函數中，使用前面講的fs模組讀取一個網頁檔的內容，並返回給頁面

靜態資源訪問

上面的方式能訪問某個路徑，但是具體需要返回的內容，得使用代碼操作返回，如果我們想訪問靜態的資源，

比如圖片或某個網頁的話，就需要配置靜態資源路徑

首先我們在 exTest資料夾中創建一個放置靜態資源的資料夾，放入圖片和網頁（自己找幾張圖表幾個網頁放進去即可）

然後在 exTest中創建exTest02.js 文件

寫入下面代碼

1 var express = require("express");2 var path = require("path");3 var app=express();4 5 var files = express.static( path.join(__dirname,"files") ); //設置靜態資源路徑6 app.use(files); //use這個路徑設置才可以真正使用 7 8 app.listen(3000);

代碼解釋：1/2行引入了兩個模組， 3行生成一個服務， 5行設置靜態資源路徑。參數中的 path.join方法可以將兩個路徑拼接成路徑的字串， __dirname表示當前路徑的名稱。和 files拼接，就成成了 "D: odeTestxTestiles" ，就可以訪問到裡面的圖片和網頁了。

6行表示將5行設置的靜態資源路徑使用到當前服務上。

執行 exTest02.js後，就可以通過流覽器訪問靜態資源了

訪問圖片：

訪問網頁檔：

這樣就實現了靜態資源的訪問

使用express的Router實現路由的單獨設定

前面講的路由，只是簡單的實現方式，下面將講解，如何時候用express的Router來實現路由

通常我們真正開發的是，路由和入口檔是分開的，這裡我們也分開寫，首先創建兩個js檔

exTest03.js為入口文件， router.js為路由檔

先編寫exTest03.js

1 var express = require("express"); 2 var path = require("path"); 3 var router = require("./router.js"); 4 var app=express(); 5 6 var files = express.static( path.join(__dirname,"files") ); //設置靜態資源路徑 7 app.use("/",files); //使用靜態資源 8 app.use("/",router); //使用路由設置 9 10 app.listen(3000);

上面除了引入了 express、path模組，還引入了 router模組（這個模組我們還沒編寫，下一步再編寫），我們使用 app.use（'/',router），當訪問根目錄（localhost:3000），就會進入router.js中的路徑。

編寫router.js，這裡我們使用 express.Router()獲得路由對象，然後給它綁定了三個路徑監聽，16行將rout使用介面暴露，這樣當此模組被引入的時候，就可以使用該模組了

1 var express = require("express"); 2 var rout=express.Router(); 3 4 rout.get("/",function(req,res){ 5 res.send("首頁"); 6 }); 7 8 rout.get("/edit",function(req,res){ 9 return res.redirect("/點擊編輯.html");10 });11 12 rout.get("/img",function(req,res){13 res.send("");14 });15 16 module.exports = rout;

三個路徑解釋：

當訪問 /edit 路的時候，將路徑重新定位到“點擊編輯.html”的檔路徑，

res.redirect（）表示重定向url，重定向後 url變為了 "http://localhost:3000/點擊編輯.html"

當訪問 /img 路徑的時候，我們返回了一個圖片標籤，由於exTest03.js中設置了靜態資源的路徑，那麼我們直接設置圖片標籤 src='http://www.toutiao.com/item/6431321548908397057/timg01.jpg' 即可訪問靜態資源中的這張圖片了。

更多資訊：

零利潤暑期互聯網遊學夏令營活動：http://www.ujiuye.com/zt/sqxly/?wt.bd=ldd37299tt

2017大學生就業扶助基金：http://www.ujiuye.com/zt/jyfc/?wt.bd=ldd37299tt

IT學習就業交流互動平臺：http://www.ujiuye.com/zt/qqhdjlpt/?wt.bd=ldd37299tt