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

 

第五章 建議學習時間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接收兩個參數，一、請求的路徑（"/" 表示當前路徑，這就就算根目錄），二、回調函數，回調函數包括兩個參數（請求的對象，相應的對象），在回調函數內部，使用 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);

 

從新運行 後 經過瀏覽器訪問，會發現不一樣的路徑返回了不一樣的值。

 

 

着就是簡單的路由配置了

練習：

一、在訪問的回調函數中，使用前面講的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。