第五章 建議學(xué)習(xí)時間4小時  課程共10章

學(xué)習(xí)方式：詳細閱讀，并手動實現(xiàn)相關(guān)代碼

學(xué)習(xí)目標(biāo)：此教程將教會大家 安裝Node、搭建服務(wù)器、express、mysql、mongodb、編寫后臺業(yè)務(wù)邏輯、編寫接口，最后完成一個完整的項目后臺，預(yù)計共10天課程。

 

express

Express 是一個基于 Node.js 平臺的極簡、靈活的 web 應(yīng)用開發(fā)框架，它提供一系列強大的特性，幫助你創(chuàng)建各種 Web 和移動設(shè)備應(yīng)用。

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

 

我們先創(chuàng)建一個文件夾用于放今天的代碼。（我的示例代碼放在exTest文件夾中）

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

執(zhí)行完成之后，就會發(fā)現(xiàn)，該文件夾下多了一個 package.json的文件 。

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

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

注：我們這里為什么要初始化呢，因為后面我們需要運行命令行安裝 express，如果 沒有初始化， 安裝的 express就不會安裝到當(dāng)前目錄，使用的時候就會有問題。

 

安裝express 

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

運行 npm install express

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

運行完成以后，會發(fā)現(xiàn) exTest文件夾中多了個node_modules文件夾，內(nèi)部就可以找到  express 模塊 

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

 

然后我們在 exTest文件夾中創(chuàng)建一個js文件來寫代碼，我們先使用express創(chuàng)建一個服務(wù)，代碼如下

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

var express = require("express");var app=express();
app.get('/',function(req,res){  // 這個  /表示當(dāng)前根目錄  訪問的時候直接   localhost:3000
    res.end("hello world !");
})
app.listen(3000);

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

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

然后使用 express()即可直接創(chuàng)建一個服務(wù)，然后通過 get設(shè)置請求的路徑 ，get接收兩個參數(shù)，1、請求的路徑（"/" 表示當(dāng)前路徑，這就就算根目錄），2、回調(diào)函數(shù)，回調(diào)函數(shù)包括兩個參數(shù)（請求的對象，相應(yīng)的對象），在回調(diào)函數(shù)內(nèi)部，使用 end方法返回最后向頁面返回的數(shù)據(jù)。

最后使用 app.listen監(jiān)聽3000端口。

當(dāng)運行js之后，就可以通過瀏覽器訪問 localhost:3000訪問到服務(wù)了

文件如下：

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

運行結(jié)果如下：

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

瀏覽器訪問結(jié)果：

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

 

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

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

var express = require("express");var app=express();
app.get('/',function(req,res){  // 注意，這里的當(dāng)前路徑
    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);

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

 

重新運行 后 通過瀏覽器訪問，會發(fā)現(xiàn)不同的路徑返回了不同的值。

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

 

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

 

著就是簡單的路由配置了

練習(xí)：

1、在訪問的回調(diào)函數(shù)中，使用前面講的fs模塊讀取一個網(wǎng)頁文件的內(nèi)容，并返回給頁面

 

靜態(tài)資源訪問

上面的方式能訪問某個路徑，但是具體需要返回的內(nèi)容，得使用代碼操作返回，如果我們想訪問靜態(tài)的資源，比如圖片或某個網(wǎng)頁的話，就需要配置靜態(tài)資源路徑

首先我們在 exTest文件夾中創(chuàng)建一個放置靜態(tài)資源的文件夾，放入圖片和網(wǎng)頁（自己找?guī)讖垐D表幾個網(wǎng)頁放進去即可）

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

然后在 exTest中創(chuàng)建exTest02.js 文件

 寫入下面代碼

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

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

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

代碼解釋：1/2行引入了兩個模塊，3行生成一個服務(wù)，5行設(shè)置靜態(tài)資源路徑。參數(shù)中的 path.join方法可以將兩個路徑拼接成路徑的字符串 ， __dirname表示當(dāng)前路徑的名稱。和 files拼接，就成成了  "D:\nodeTest\exTest\files" ，就可以訪問到里面的圖片和網(wǎng)頁了。

6行表示將5行設(shè)置的靜態(tài)資源路徑使用到當(dāng)前服務(wù)上。

執(zhí)行 exTest02.js后，就可以通過瀏覽器訪問靜態(tài)資源了

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

訪問圖片：

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

訪問網(wǎng)頁文件：

 iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

這樣就實現(xiàn)了靜態(tài)資源的訪問

 

使用express的Router實現(xiàn)路由的單獨設(shè)定

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

通常我們真正開發(fā)的是，路由和入口文件是分開的，這里我們也分開寫，首先創(chuàng)建兩個js文件

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

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

先編寫exTest03.js

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

 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")  );  //設(shè)置靜態(tài)資源路徑 7 app.use("/",files); //使用靜態(tài)資源 8 app.use("/",router); //使用路由設(shè)置 9 10 app.listen(3000);

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

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

 

編寫router.js，這里我們使用  express.Router()獲得路由對象，然后給它綁定了三個路徑監(jiān)聽，16行將rout使用接口暴露，這樣當(dāng)此模塊被引入的時候，就可以使用該模塊了

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

 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;

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

三個路徑解釋：

當(dāng)訪問根目錄的時候，返回首頁

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

當(dāng)訪問 /edit 路的時候，將路徑重新定位到“點擊編輯.html”的文件路徑，

res.redirect（）表示重定向url，重定向后 url變?yōu)榱?nbsp; "http://localhost:3000/點擊編輯.html"
這里 之所以能直接訪問到頁面，是因為exTest03.js中設(shè)置了靜態(tài)資源的路徑

iOS培訓(xùn),Swift培訓(xùn),蘋果開發(fā)培訓(xùn),移動開發(fā)培訓(xùn)

 

當(dāng)訪問 /img 路徑的時候，我們返回了一個圖片標(biāo)簽，由于exTest03.js中設(shè)置了靜態(tài)資源的路徑，那么 我們直接設(shè)置圖片標(biāo)簽 src='timg01.jpg' 即可訪問靜態(tài)資源中的這張圖片了。

http://www.cnblogs.com/chengduxiaoc/p/7003671.html