大家好，昨天我們已經學習如何創立server和顯示文字了，今天我們就來學習如何顯示出一個HTML頁面吧！

首先若我們要顯示HTML的話，就要將setHeader裡的'text/plain'改為'text/html'，因為我們現在不是要顯示純文字了～再來，因為我們是要讀取其他地方的HTML來顯示的，所以會使用到readFile method，因此要記得import 'fs'到我們的server程式喔！

那readFile的用法和語法我前幾天也教過了～所以大家應該都沒問題！如果沒有錯誤的話，我們就會將data都輸出到頁面，所以就在res.write的括號內放data，再在最後加上res.end()，這樣就好囉！

程式code如下：

const http = require('http');
const fs = require('fs');

const localhost = '127.0.0.1';

const server = http.createServer( (req,res) => {
    res.setHeader('Content-Type', 'text/html');

    fs.readFile('./sites/home.html',(err,data) => {//'./sites/home.html'為我的html檔案位置
        if(err){
            console.log(err);
            res.end();
        }else{
            res.write(data);
            res.end();
        }
    });
});

server.listen(3000, localhost, () => {
    console.log('Server is running on port 3000');
});

再到localhost:3000網址看我們的結果：

能看到我們的HTML正常顯示了！

當然，我們的網站一定會根據使用者發出的請求給出不同的回應(頁面)，這時就要學習該怎麼對應request中的URL來給予對應的頁面了！

第一步，要先根據需求設計出不同的HTML檔案，舉例來說，我設計了三個檔案：網站主頁面、關於、以及404錯誤頁面。

接下來，如果要對應不同的情況做出回應，可以用if, else來處理，但那樣勢必會讓程式變得很繁瑣，更不用說當一個程式有著幾百種頁面時要做多少個else了！所以，這裡更好的做法是使用'switch'來處理。

如果有學過C語言的switch的話，這裡的switch語法和C裡面的一模一樣！沒有學過也沒有關係，其實很簡單～直接用成果的程式來當範例：

path = './sites/';

switch(req.url){
　　case '/':
        path += 'home.html';
        break;
    case '/about':
        path += 'about.html';
        break;
    default:
        path += '404.html';
}

switch旁邊的括號內會放置我們想要判斷的變數，這裡是request的url因為我們要看的是使用者的網址，然後下面的case就是如果網址符合某一個case的話，便會執行裡面的指令，並且一定要記得在每一個case最後加上break，否則就會將其他case中的指令也執行一遍。並在所有case都做完後，要再設計一個dafault case(預設case)，即為當所有case都不符合時，要執行的動作。

最後我們完整的程式如下：

const http = require('http');
const fs = require('fs');

const localhost = '127.0.0.1';

const server = http.createServer( (req,res) => {
    res.setHeader('Content-Type', 'text/html');

    path = './sites/';

    switch(req.url){
        case '/':
            path += 'home.html';
            break;
        case '/about':
            path += 'about.html';
            break;
        default:
            path += '404.html';
    }

    fs.readFile(path,(err,data) => {//'./sites/home.html'為我的html檔案位置
        if(err){
            console.log(err);
            res.end();
        }else{
            res.write(data);
            res.end();
        }
    });
});

server.listen(3000, localhost, () => {
    console.log('Server is running on port 3000');
});

再看看我們的成果～當我們訪問localhost3000時會顯示主畫面(home.html)：

再來是localhost3000/about會出現關於頁面(about.html)：

最後，如果我們在網址後面輸入亂碼，就會對應default中所設定的，顯示404錯誤頁面：

以上為今天的學習～明天就是最後一天了！明天見！