一、分析

① 选择想读取的文件，复制路径，在浏览器打开

② 读取的文件夹需要的页面框架：获取页面源代码，删去JS部分

③ 读取的文件夹的位置（绝对路径）"\"会当成转义字符，所以改成双斜线

const wwwDir = "D:\\software\\VScode\\code\\JS高级\\day06_node"

④ 浏览地址（根目录）成功的话，显示页面（index.html就是获取的页面源代码（绝对路径））

if(url === "/"){
        fs.readFile(wwwDir + "/index.html",(err,data)=>{
            if(err){
                return res.end("404 not found")
            }

⑤ 在源代码中，文件夹中的内容是通过JS实现的，框架里面的tbody是空的，我们在读取的时候需要一个空字符串拼接文件夹内容，转换为 tr

let str = "";

⑥ 读文件夹，获取内容，拼接字符串

fs.readdir(wwwDir,(err,files)=>{
                if(err){
                    return res.end("can not read this dir")
                }
                console.log(files);
                files.forEach((item)=>{
                    // console.log("item",item);
                    str += `<tr>
                    <td>
                        <a class="icon file" href="#">${item}</a></td>
                    <td class="detailsColumn" data-value="88">88 B</td>
                    <td class="detailsColumn" data-value="1641367747">2022/1/5 下午3:29:07</td>
                </tr>`
                })

// console.log("item",item); 可以查看一下item是什么方便理解，就是目录。

下面的 tr 框架 是从源代码中复制了一行 tr ，把标题替换成 ${item}

⑦ aaaa 是写在index.html里面占位的，把表格内容替换成读取到的内容

// 将读取的index.html内容转换为字符串
                data = data.toString();
                console.log(data);
                // 将html字符串中的aaaa替换成str中的内容（好几个tr）
                data = data.replace("aaaa",str)

 ⑧ 端口号：3000

二、代码

const fs = require("fs");
const http = require("http");
// 要读取的文件夹位置（绝对路径），这里要替换成自己的文件夹路径
const wwwDir = "D:\\software\\VScode\\code\\JS高级\\day06_node"
http.createServer((req,res)=>{
    const url = req.url
    if(url === "/"){
        fs.readFile(wwwDir + "/index.html",(err,data)=>{
            if(err){
                return res.end("404 not found")
            }
            // 拼接读取文件夹内容转换为表格中的tr
            let str = "";
            fs.readdir(wwwDir,(err,files)=>{
                if(err){
                    return res.end("can not read this dir")
                }
                console.log(files);
                files.forEach((item)=>{
                    // console.log("item",item);
                    str += `<tr>
                    <td>
                        <a class="icon file" href="#">${item}</a></td>
                    <td class="detailsColumn" data-value="88">88 B</td>
                    <td class="detailsColumn" data-value="1641367747">2022/1/5 下午3:29:07</td>
                </tr>`
                })
                // 将读取的index.html内容转换为字符串
                data = data.toString();
                console.log(data);
                // 将html字符串中的aaaa替换成str中的内容（好几个tr）
                data = data.replace("aaaa",str)
                console.log(data);
                res.end(data)
            })
        })
    }
}).listen(3000,()=>{
    console.log("running...");
})

三、结果