整体架构目录
    image.png
    创建index.html 和引入相关资源

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>public</title>
    8.     <link rel="icon" href="data:image/ico;base64,aWNv" />
    9.     <link rel="stylesheet" href="./styles/reset.css" />
    10.   </head>
    11.   <body>
    12.     public
    13.     <script src="./scripts/common.js"></script>
    14.     <img src="./images/test.png" alt="" />
    15.   </body>
    16. </html>

    创建服务server.js

    1. const http = require('http')
    2. const path = require('path')
    4. const readStaticFile = require('./readStaticFile')
    6. http.createServer(async (req, res) => {
    7.     // 获取url
    8.     let urlString = req.url
    9.     let filePathName = path.join(__dirname, './public', urlString)
    11.     // 根据url, 去public目录下读取数据
    12.     // 如果你调用的方法是一个异步函数，在获取结果的时候，一定要await
    13.     let result
    14.     try {
    15.         result = await readStaticFile(filePathName, res)
    16.         var { data, mimeType } = result
    17.     } catch {
    18.         console.log(result)
    19.     }
    21.     // 把获取的结果， 返回给前端
    22.     res.writeHead(200, {
    23.         'content-type': `${mimeType}; charset=utf-8`
    24.     })
    25.     res.write(data)
    26.     res.end()
    27. }).listen(2139, () => console.log('localhost:2139'))

    创建自定义fs工具

    1. const path = require('path')
    2. const mime = require('mime')
    3. const fs = require('fs')
    5. // 读取文件内容，因为readFile是异步函数，为了调用者不立刻返回值，
    6. // 需要封装一个promise, 让调用者有机会等待结果
    7. function myReadFile(file) {
    8.     return new Promise((resolve, reject) => {
    9.         fs.readFile(file, (err, data) => {
    10.             if (err) {
    11.                 reject('你访问的是一个文件夹，且文件夹里没有index.html')
    12.                 // resolve('你访问的是一个文件夹，且文件夹里没有index.html')
    13.             } else {
    14.                 resolve(data)
    15.             }
    16.         })
    17.     })
    18. }
    20. async function readStaticFile(filePathName) {
    21.     let ext = path.parse(filePathName).ext
    22.     let mimeType = mime.getType(ext) || 'text/html'
    24.     let data
    25.     // 判断文件是否存在
    26.     if (fs.existsSync(filePathName)) {
    27.         if (ext) {
    28.             // myReadFile(filePathName)
    29.             //   .then(result => data = result)
    30.             //   .catch((err) => data = err)
    32.             data = await myReadFile(filePathName)
    34.         } else {
    35.             // myReadFile(path.join(filePathName, '/index.html'))
    36.             //   .then(result => data = result)
    37.             //   .catch((err) => data = err)
    39.             data = await myReadFile(path.join(filePathName, '/index.html'))
    40.         }
    41.     } else {
    42.         data = 'file or folder not found.'
    43.     }
    45.     return {
    46.         data,
    47.         mimeType
    48.     }
    49. }
    51. module.exports = readStaticFile