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

標籤：ext   src   圖片   back   標籤   使用   style   ack   jquery   

 

第五章 建議學習時間4小時  課程共10章

學習方式：詳細閱讀，並手動實現相關代碼

學習目標：此教程將教會大家 安裝Node、搭建伺服器、express、mysql、mongodb、編寫後台商務邏輯、編寫介面，最後完成一個完整的項目後台，預計共10天課程。

 

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();app.get(‘/‘,function(req,res){  // 這個  /表示當前根目錄  訪問的時候直接   localhost:3000    res.end("hello world !");})app.listen(3000);

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

然後使用 express()即可直接建立一個服務，然後通過 get佈建要求的路徑 ，get接收兩個參數，1、請求的路徑（"/" 表示當前路徑，這就就算根目錄），2、回呼函數，回呼函數包括兩個參數（請求的對象，相應的對象），在回呼函數內部，使用 end方法返回最後向頁面返回的資料。

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

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

檔案如下：

運行結果如下：

瀏覽器訪問結果：

 

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

var express = require("express");var app=express();app.get(‘/‘,function(req,res){  // 注意，這裡的當前路徑    res.end("just index !");})app.get(‘/a/index‘,function(req,res){  // 路徑  /a    res.end("you get a !");})app.get(‘/b‘,function(req,res){  // 路徑  /b    res.end("you get b !");})app.listen(3000);

 

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

 

 

著就是簡單的路由配置了

練習：

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:\nodeTest\exTest\files" ，就可以訪問到裡面的圖片和網頁了。

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("<img src=‘timg01.jpg‘ />");14 });15 16 module.exports = rout;

三個路徑解釋：

當訪問根目錄的時候，返回首頁

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

res.redirect（）表示重新導向url，重新導向後 url變為了  "http://localhost:3000/點擊編輯.html"
這裡 之所以能直接存取到頁面，是因為exTest03.js中設定了靜態資源的路徑

 

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

 

 

 

 

 

 好，今天就講這麼多，明天將講解：資料庫操作  mysql/mongodb。

 

 

 

 

  

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