本課重點：學(xué)習(xí)如何用Node.js創(chuàng)建一個靜態(tài)網(wǎng)站服務(wù)器,并實現(xiàn)根據(jù)用戶請求的不同的URL，響應(yīng)對應(yīng)的頁面爽雄。掌握其中基本原理橄维。

一.首先加載把所有需要用到的模塊

創(chuàng)建靜態(tài)網(wǎng)站服務(wù)器需要用到http服務(wù)模塊url路由模塊和fs文件服務(wù)模塊倍阐。

//加載http服務(wù)模塊
const http = require('http')
//設(shè)置服務(wù)器ip
const ip = '127.0.0.1';
//加載url路由模塊
const url = require('url');
//加載fs文件服務(wù)模塊
const fs = require('fs');

二.創(chuàng)建HTTP服務(wù)器

實例化一個http服務(wù)

const server = new http.Server();

監(jiān)聽一個端口悬钳，注意不要和系統(tǒng)其它服務(wù)端口沖突就行

//監(jiān)聽端口5700
server.listen(5700,ip);

三.監(jiān)聽請求儡遮，并設(shè)置相應(yīng)的回調(diào)函數(shù)執(zhí)行相應(yīng)的操作

代碼如下：

//使用on方法注冊事件處理蓝纲，該事件會一直被監(jiān)聽敛纲，任何的請求都會進入回調(diào)函數(shù)并執(zhí)行相應(yīng)的操作
server.on('request',function(request,response){//當(dāng)有request請求的時候觸發(fā)處理函數(shù)
//解析請求的url掠兄，獲取請求的資源路徑
var pathName = url.parse(request.url).pathname;

//監(jiān)聽請求的網(wǎng)站像云，以當(dāng)前腳本目錄為根目錄的url地址
console.log(pathName);

//判斷請求的路徑信息
switch(pathName){
//處理請求的網(wǎng)站根目錄,指定加載對應(yīng)的文件夾,一般以根目錄的index.html為默認,也可以通過配置文件來配置
case '/'||'/index' : fs.readFile("./index.html",function(err,content){//打開對應(yīng)的請求文件
                        //如果有錯誤，輸出錯誤信息蚂夕，也可以自己定義錯誤信息
                        if(err){//并告訴相應(yīng)頭文件迅诬，返回的類型
                            response.writeHead(404,{'Content-Type':'text/plain;charset=utf-8'});
                            response.write(err.message);
                            response.end();
                        }else{//請求成功返回數(shù)據(jù)并告訴相應(yīng)頭文件，返回的類型
                            response.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
                            //返回的內(nèi)容婿牍，有時候還會加上buter數(shù)據(jù)類型
                            response.write(content);
                            //結(jié)束響應(yīng)侈贷，不寫的話會一直處于響應(yīng)狀態(tài)，頁面不會顯示內(nèi)容
                            response.end();
                        }
});
break;

四.對本地靜態(tài)資源文件做類型判斷

代碼如下:這里使用閉包的方式

//處理來自本地目錄的文件,主要是一些靜態(tài)資源文件
default:
    //去掉'/'
    var filename = pathName.substring(1);
    var type = getType(filename.substring(filename.lastIndexOf('.')+1));
    console.log(filename);
    //獲取文件類型 css js...
    //異步讀取文件等脂，并將內(nèi)容作為單獨的數(shù)據(jù)模塊傳給回調(diào)函數(shù)
    fs.readFile(filename,function(err,content){
        if(err){
            response.writeHead(404,{'Content-Type':'text/plain;charset=utf-8'});
            response.write(err.message);
            response.end();
        }else{
            response.writeHead(200,{'Content-Type':type});
            response.write(content);
            response.end();
        }
    });
    break;
}

});

當(dāng)然還需要在外面實現(xiàn)這個用來判斷文件類型的閉包函數(shù)

 //定義一個用來判斷文件類型的函數(shù)
 function getType(endTag){
var type=null;
switch(endTag){
    case 'html':
        type = 'text/html;charset=utf-8';
        break;
    case 'htm' :
        type = 'text/html;charset=utf-8';
        break;
    case 'css' :
        type = 'text/css';'charset=utf-8';
        break;
    case 'js'  :
        type = 'application/javascript;charset=utf-8';
        break;
    case 'txt' :
        type = 'text/plain;charset=utf-8';
        break;
    case 'manifest' :
        type = 'text/cache-manifest;charset="utf-8"';
        break;
    default :
        type = 'application/octet-stream';
        break;

}
return type;
}