基於node環境搭建一個靜態資源服務器

時間 2020-02-11

原文原文鏈接

手動搭建一個靜態資源服務器

做者：QILIN
github： https://github.com/1999hk
項目地址（歡迎star）： https://github.com/1999hk/nod...

瞭解前端（客戶端）與後端（服務器）javascript
- requet 請求（客戶端——>服務器）
- response 響應（服務器——>客戶端）
文件目錄css
- server-static文件夾html
  - css文件夾前端
    - page.css
  - img文件夾java
    - minge.img
  - index.html
  - server-static.js
  - mime.js
node內置模塊node
- http
- fs
- url
- path
自定義模塊git
- mime
server-static.js

/**
 * 靜態資源服務器
 * nodeJS 的 commonJS (同步)
 */

// 用於建立服務器
const http = require('http')

// 用於讀取文件
const fs = require('fs')

// 用於url地址格式化
const url = require('url')

// 用於格式化文件地址
const path = require('path')

// 自定義模塊（用於告訴瀏覽器返回回去的是什麼類型的文件，方便瀏覽器識別解析）
const mime = require('./mime')

// 建立一個服務器
const app = http.createServer((request, response) => {

    // 靜態資源服務器：根據不一樣的請求，返回不一樣的內容
    let { pathname } = url.parse(request.url, true)

    // 獲取真實路徑 把相對路徑裝換爲決路徑
    // 把/img/minge.js -> C:\Users\hk\Desktop\nodejs\static_server\img
    // __dirname: 當前文件所在目錄
    let realPath = path.join(__dirname, pathname)

    // 利用path.extname來獲取文件的後綴名
    let extname = path.extname(pathname).slice(1)

    // 要顯示index.html
    // 1.經過fs模塊讀取index.html內容
    // 2.經過res.write把內容響應到客戶端
    // fs.readFile('../index.html', (error, content) => {})
    fs.readFile(realPath, (error, content) => {
        // error錯誤信息：默認爲unll

        // 告訴瀏覽器 內容類型是什麼 (Content-type)
        response.writeHead(200, { 'content-type': mime[extname] + ';charset=utf8' })

        // 響應內容（能夠是屢次）
        response.write(content)

        // 結束響應
        response.end()

    })

})

// 監聽端口
app.listen(2020, () => {
    console.log('server is runing on port 1909')
})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 請求 -->
    <link rel="stylesheet" href="../css/page.css">
    <title>靜態資源服務器</title>
</head>

<body>
    <h2>minge</h2>
    <!-- 請求 -->
    <img src="../img/minge.jpg" alt="">
</body>

</html>

mime.js

module.exports = {
    "css": "text/css",
    "gif": "image/gif",
    "html": "text/html",
    "ico": "image/x-icon",
    "jpeg": "image/jpeg",
    "jpg": "image/jpeg",
    "js": "text/javascript",
    "json": "application/json",
    "pdf": "application/pdf",
    "png": "image/png",
    "svg": "image/svg+xml",
    "swf": "application/x-shockwave-flash",
    "tiff": "image/tiff",
    "txt": "text/plain",
    "wav": "audio/x-wav",
    "wma": "audio/x-ms-wma",
    "wmv": "video/x-ms-wmv",
    "xml": "text/xml"
}