学习使用Node.js搭建一个类似于Apache的服务器之二

在上一篇博客中，node服务器功能基本实现了，但是只能在地址栏输入地址及进行查找，这篇我们在页面渲染文件目录

---

1. 想要列出文件夹目录，首先需读取到目录，fs有一个方法：readdir（）
2. 读取到目录之后，我们可以通过遍历数组获到每个目录名称
3. 通过readFile方法读取文件后，替换data数据
   具体实现如下：

var http = require('http')

var server = http.createServer()

var fs = require('fs')

var wwwDir = 'F:/www'

server.on('request', function (request, response) {
    var url = request.url

    fs.readFile('./template.html', function (err, data) {

        if (err) {
            return response.end('404 Not Found')
        }

        fs.readdir(wwwDir, function (err, files) {   //读取文件夹目录

            if (err) {
                return response.end('目录不存在')
            }
            var content = ''
            files.forEach(function (item) {
                //在es6反引号字符串中，可以使用${}来引用变量
                content += `
                    <tr>
                        <td data-value=".idea/"><a class="icon dir" href="/F:/www/.idea/">${item}</a></td>
                        <td class="detailsColumn" data-value="0"></td>
                        <td class="detailsColumn" data-value="1534126542">2018/8/13 上午10:15:42</td>
                    </tr>`
            })


            data = data.toString()

            data = data.replace('++--', content)

            response.end(data)

        })

    })


})

server.listen(4000, function () {
    console.log('server is running...,端口号是:4000')
})

另外，我们读取的文件template.html主要代码：

<tbody id="tbody">
        ++--
    </tbody>

即将原先html页面的符号替换成我们遍历出的全部tr，现在运行服务器，打开网页，显示如下 ：

添加删除文件之后刷新页面都会触发server.on，显示更改后的数据
我们用这种拼接字符串的方式感觉还是不太好，太麻烦还容易出错，如果用模板引擎，则更方便：
首先下载art-template， 在要使用模板引擎的文件夹打开命令行，输入：

npm install art-template

然后在文件列表会看到

node_modules里面书我们的各种依赖和art-template，如果html要用模板引擎的话，通过script标签引入，修改type

<script src="./node_modules/art-template/lib/template-web.js"></script>
    <script type="text/template" id="tp1">
        ...
    </script>

我们这里在node中使用

var template = require('art-template')

js代码如下：

var template = require('art-template')

server.on('request', function (request, response) {
    var url = request.url

    fs.readFile('./template.html', function (err, data) {

        if (err) {
            return response.end('404 Not Found')
        }

        fs.readdir(wwwDir, function (err, files) {   //读取文件夹目录

            if (err) {
                return response.end('目录不存在')
            }
            var res = template.render(data.toString(),{   //data是二进制，需转换成字符串才能被模板引擎识别
                files: files
            })


            response.end(res)

        })

    })


})

html模板渲染：

<tbody id="tbody">
    {{ each files }}
    <tr>
        <td data-value=".idea/"><a class="icon dir" href="/F:/www/.idea/">{{ $value }}</a></td>
        <td class="detailsColumn" data-value="0"></td>
        <td class="detailsColumn" data-value="1534126542">2018/8/13 上午10:15:42</td>
    </tr>
    {{ /each }}
    </tbody>