一、分析
① 选择想读取的文件,复制路径,在浏览器打开
② 读取的文件夹需要的页面框架:获取页面源代码,删去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...");
})