Node.js後端開發 - 進階篇 #11 express框架之res.sendFile和res.render，傳遞模塊數據，模板引擎（持續更新中）

目錄

一、前言

二、res.sendFile和res.render 函數的區別？

1、handler.js 業務模塊返回 html 頁面

（1）加載的 html 頁面，沒有css文件和image圖片文件

（2）加載的 html 頁面，有css文件和image圖片文件

（3）最終效果

---

一、前言

上幾篇文章我們對exprss的 router.js 路由模塊、handler.js 業務模塊進行了封裝介紹，詳細可參見博文：Node.js後端開發 - 進階篇 #9 express框架之路由模塊的封裝2（相對安全）、Node.js後端開發 - 進階篇 #10 express框架之封裝handler.js模塊 這篇文章我們將講 res.sendFile和res.render 函數的區別？如何傳遞模塊數據？服務器端如何響應css文件、image文件？以及模板引擎的一些知識

二、res.sendFile和res.render 函數的區別？

1、handler.js 業務模塊返回 html 頁面

（1）加載的 html 頁面，沒有css文件和image圖片文件

上篇文章我們封裝了 handler.js 文件

//業務模塊

//暴露函數,並且需要傳入req、res參數，
//才能處理相應的業務，向用戶響應
module.exports.index = function (req, res) {
    res.send('這個是 handler.index 方法中的代碼');
};

它返回響應的是一些簡單的文字信息： res.send('這個是 handler.index 方法中的代碼'); ，我們現在來嘗試返回一些 html 頁面，我們新建一個 index.html，然後把相關resources資源文件放到項目裏面。那麼要用戶看到 index.html 頁面很簡單，只要讀取 index.html 頁面的內容，然後響應給用戶就行了。

我們可以用到前幾篇文章講到的 res.sendFile() 方法，要先拼接一下 index.html 的路徑，要拼接路徑我們先要加載 path 模塊 ，我們來看下修改後的 handler.js 文件

//業務模塊

var path = require('path');

//暴露函數,並且需要傳入req、res參數，
//才能處理相應的業務，向用戶響應
module.exports.index = function (req, res) {
    //res.send('這個是 handler.index 方法中的代碼');

    //它後面的參數，回調函數可不寫，它也會把信息數據返回給用戶
    res.sendFile(path.join(__dirname, 'views', 'index.html'));

};

我們運行服務器端程序，然後在瀏覽器中輸入地址：http://localhost:3000/

             

 這樣可以看到網頁信息，但是有很大的問題，因爲css文件和image圖片文件都沒有。

 當請求css文件、圖片文件的時候，服務器返回的是404。那麼爲什麼會這樣？

因爲我們對用戶請求的這些靜態資源文件，服務器並沒有做處理。那麼我們怎麼做處理呢？

（2）加載的 html 頁面，有css文件和image圖片文件

我們可以用到前幾篇文章講到的 通過express模擬Apache實現靜態資源託管服務 的一些知識，詳見可參考博文：Node.js後端開發 - 進階篇 #6 express框架之通過express模擬Apache實現靜態資源託管服務 ，我們修改下路由模塊 router.js 裏面的代碼，實現對 resources 文件下的內容進行靜態資源託管，核心代碼如下

// 實現對 resources 文件下的內容進行靜態資源託管
// /resources/css/MyStyle.css
router.use('/resources', express.static(path.join(__dirname, 'resources')));

（3）最終效果

我們運行服務器端程序，在瀏覽器中輸入地址：http://localhost:3000/ ，最終效果如下圖，css樣式 和 圖片文件都加載出來了

 

 

 

更新中。。。。。