10.靜態資源

1.新建10文件夾，10文件夾下再新建static文件夾和server.js文件，server.js中引入http、fs、url三個模塊，創建http服務，偵聽8080端口。

var http = require('http')
var fs = require('fs')
var url = require('url')

http.createServer(function (req, res) {

}).listen(8080)

2.在http.createServer的回調函數中處理請求req與返回res參數，通過req.url獲取請求的url地址，url模塊對對req.url進行處理。pathname 是請求的路徑，router是不帶擴展名的請求路徑，ext是請求文件的擴展名。

http.createServer(function (req, res) {
    var urls = url.parse(req.url, true)
    var pathname = urls.pathname
    if (pathname == '/') pathname = '/index.html'
    var router = pathname.split('.')[0]
    var ext = pathname.split('.')[1]
    
}).listen(8080)

3.對請求路徑帶擴展名與不帶擴展名分別進行處理，帶擴展名router && ext請求靜態資源；不帶擴展名router && !ext則請求數據。

    if (router && ext) {

    } else if (router && !ext) {

    }

4.返回靜態資源，通過fs模塊讀取static文件夾下文件，在其回調函數中，通過res返回data參數。fs模塊的讀取文件方法fs.readFile(pathname,callback)

    if (router && ext) {
        fs.readFile('./static' + pathname, function (err, data) {
            res.writeHead(200, { 'Content-Type': mime(ext) })
            res.write(data)
            res.end()
        })
    }

5.對靜態資源進行文件錯誤處理，如果在static文件夾下沒有找到請求的文件，文件擴展名ext == 'html'則返回404.html文件，如果是其它擴展名的文件，則不返回任何信息。

    if (router && ext) {
        fs.readFile('./static' + pathname, function (err, data) {
            if (err) {
                if (ext == 'html') {
                    fs.readFile('./static/404.html', function (err, data) {
                        res.writeHead(200, { 'Content-Type': 'text/html' })
                        res.write(data)
                        res.end()
                    })
                } else {
                    res.end()
                }
                return
            }
        
            res.writeHead(200, { 'Content-Type': mime(ext) })
            res.write(data)
            res.end()
        })
    }

6.調用mime(ext)函數是根據擴展名ext返回文件的類型，mime函數定義如下，不要將其放在http.createServer的回調函數中。

function mime(ext) {
    if (ext == 'html') {
        ext = 'text/html'
    } else if (ext == 'css') {
        ext = 'text/css'
    } else if (ext == 'js') {
        ext = 'application/x-javascript'
    } else if (ext == 'json') {
        ext = 'application/json'
    } else if (ext == 'txt') {
        ext = 'text/plain'
    } else if (ext == 'jpg') {
        ext = 'image/jpeg'
    } else if (ext == 'png') {
        ext = 'image/png'
    } else if (ext == 'gif') {
        ext = 'image/gif'
    } else {
        ext = 'text/html'
    }
    return ext
}

7.對沒有擴展名的請求路徑進行處理，返回data字符串測試，具體功能後續章節有需求再添加。

else if (router && !ext) {
        res.writeHead(200, { 'Content-Type': 'text/txt' })
        res.write('data')
        res.end()
}

8.server.js的完整代碼

var http = require('http')
var fs = require('fs')
var url = require('url')

http.createServer(function (req, res) {
    var urls = url.parse(req.url, true)
    var pathname = urls.pathname
    if (pathname == '/') pathname = '/index.html'
    var router = pathname.split('.')[0]
    var ext = pathname.split('.')[1]

    if (router && ext) {
        fs.readFile('./static' + pathname, function (err, data) {
            if (err) {
                if (ext == 'html') {
                    fs.readFile('./static/404.html', function (err, data) {
                        res.writeHead(200, { 'Content-Type': 'text/html' })
                        res.write(data)
                        res.end()
                    })
                } else {
                    res.end()
                }
                return
            }

            res.writeHead(200, { 'Content-Type': mime(ext) })
            res.write(data)
            res.end()
        })
    } else if (router && !ext) {
        res.writeHead(200, { 'Content-Type': 'text/txt' })
        res.write('data')
        res.end()
    }
}).listen(8080)

console.log('run http://127.0.0.1:8080')

function mime(ext) {
    if (ext == 'html') {
        ext = 'text/html'
    } else if (ext == 'css') {
        ext = 'text/css'
    } else if (ext == 'js') {
        ext = 'application/x-javascript'
    } else if (ext == 'json') {
        ext = 'application/json'
    } else if (ext == 'txt') {
        ext = 'text/plain'
    } else if (ext == 'jpg') {
        ext = 'image/jpeg'
    } else if (ext == 'png') {
        ext = 'image/png'
    } else if (ext == 'gif') {
        ext = 'image/gif'
    } else {
        ext = 'text/html'
    }
    return ext
}

9.在static文件夾下，新建index.html，通過!!代碼自動補全後再輸入其餘標籤。

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <link rel="icon" href="data:;base64,=">
    <title>index</title>
    <style>
    </style>
</head>

<body>
    <h3>index測試頁面</h3>
    <script>
    </script>
</body>

</html>

10.VSCode中10文件夾點右鍵，在終端中打開，輸入node server運行服務，瀏覽器地址欄輸入http://127.0.0.1:8080，顯示如下