NodeJs仿阿帕奇实现浏览某一路径文件目录效果

网页效果

这里实现的效果是将我的电脑下的某一路径文件展现在网页中

html网页代码:

<h1>仿阿帕奇网页 </h1>
  <table>
   <tr>
      <th valign="top"><img src="data:imag9e/gif;base64,R0lGODlhFAAWAKEAAP///8z//wAAAAAAACH+TlRoaXMgYXJ0IGlzIGluIHRoZSBwdWJsaWMgZG9tYWluLiBLZXZpbiBIdWdoZXMsIGtldmluaEBlaXQuY29tLCBTZXB0ZW1iZXIgMTk5NQAh+QQBAAABACwAAAAAFAAWAAACE4yPqcvtD6OctNqLs968+w+GSQEAOw=="
         alt="[ICO]"></th>
      <th><a href="?C=N;O=D">Name</a></th>
      <th><a href="?C=M;O=A">Last modified</a></th>
      <th><a href="?C=S;O=A">Size</a></th>
      <th><a href="?C=D;O=A">Description</a></th>
       </tr>
   <tr><th colspan="5"><hr></th></tr>
{{list}}
   <tr><th colspan="5"><hr></th></tr>
</table>

JS文件

var  http =require('http')
var path = require('path')
var fs = require('fs')
var root ='f:\\nodejs'
//创建服务
http.createServer((requeset,response)=>{
     //获取文件及目录信息
    //  fs.readFileSync读取目录的内容
    response.setHeader('Content-type',"text/html;charset=utf-8")
     var files = fs.readdirSync(root);
     var list = ''
     files.forEach((item)=>{
         console.log(item)
            // 下一步 判断是否为文件  stats方法需要一个正确的文件路径
            // 我们这里的item只是一个文件的名称
            var stats = fs.statSync(root+'\\'+item)
            //这里还可以换一种写法
            //利用path模块的join方法组装文件目录
            // var stats = fs.statSync(path.join(root,item))

            // console.log(root+'\\'+item)
            if(stats.isFile()){
                console.log(item)
                list+='<tr><td valign="top"><img src="data:image/gif;base64,R0lGODlhFAAWAOMAAP/////MM/8zM8z//5mZmZlmM2bM/zMzMwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+TlRoaXMgYXJ0IGlzIGluIHRoZSBwdWJsaWMgZG9tYWluLiBLZXZpbiBIdWdoZXMsIGtldmluaEBlaXQuY29tLCBTZXB0ZW1iZXIgMTk5NQAh+QQBAAADACwAAAAAFAAWAAAEb/DISee4eBzAu99Hdm1eSYbZWXEkgI5sEBg0+2HnTBsccvhAmGtXAyCOSITwUGg2PYQoQalhOZ/QKLVV6gKmQm8XXDUmzx0yV5ze9s7JdpgtL3ME5jhHTS/xO3hwdWt0f317WwdSi4xRPxlwkUgXEQA7" alt="[DIR]"></td><td><a href="code/">'+item+'/</a>                  </td><td align="right">2019-02-16 17:13  </td><td align="right">  - </td><td>&nbsp;</td></tr>'
            }else{
                console.log(item)
                list+='<tr><td valign="top"><img src="data:image/gif;base64,R0lGODlhFAAWAMIAAP/////Mmcz//5lmMzMzMwAAAAAAAAAAACH+TlRoaXMgYXJ0IGlzIGluIHRoZSBwdWJsaWMgZG9tYWluLiBLZXZpbiBIdWdoZXMsIGtldmluaEBlaXQuY29tLCBTZXB0ZW1iZXIgMTk5NQAh+QQBAAACACwAAAAAFAAWAAADVCi63P4wyklZufjOErrvRcR9ZKYpxUB6aokGQyzHKxyO9RoTV54PPJyPBewNSUXhcWc8soJOIjTaSVJhVphWxd3CeILUbDwmgMPmtHrNIyxM8Iw7AQA7" alt="[   ]"></td><td><a href="eshop.rar">'+item+'</a>              </td><td align="right">2017-10-19 20:32  </td><td align="right"> 12M</td><td>&nbsp;</td></tr>'
            }
     })
     //判断完之后然后内容给目标网页
     var content =fs.readFileSync('work2.html').toString();
    //  console.log(body);
     content= content.replace("{{list}}",list)
     response.end(content)

}).listen(8080,()=>{
    console.log('启动服务!')
})

//思路

1\查询我们需要的某一文件路径

2\遍历出来每一个文件的名称

3\由于只有名字 而stats方法需要的参数path是正确的文件路径 所以需要拼接为正确的文件路径

4\这里一种好的拼接方法 path.join(root,item)

5\然后利用stats的isfile方法判断是否问正确的常规文件

6\这里遍历的内容有很多个 所以每一个需要把他们拼接起来

7\最后将html网页中的{{list}}用我们的拼好之后的替换

8\最后返送给网页