使用Node来模仿Apache功能来完成目录列表渲染

模仿Apache功能来完成目录列表渲染

fs.readdir 这个API用来读取文件目录

1
2
3
4
5
6
7
const fs = require('fs');
fs.readdir('F:/nodejs/Node_test', (err, files) => {
    if (err) {
        return res.end('文件目录不存在.')
    }
    console.log(files);
});

返回的值是 一个数组

  • [
    ‘02.module-a.js’,
    ‘02.module-b.js’,
    ‘03.module-exports.js’,
    ‘03.require.js’,
    ‘04.写文件.js’,
    ‘04.读取文件.js’,
    ‘05.简单的http请求.js’,
    ‘06.响应类型内容Content-Type.js’,
    ‘07.简单结合fs模块来访问不同资源.js’,
    ‘08.简化07代码，模仿Apache功能.js’,
    ‘09.Apache目录列表.js’,
    ‘09.读取目录（fs.readdir API）.js’,
    ‘1.heeloword.js’,
    ‘data.txt’,
    ‘nodejs资料（7天）’,
    ‘resource’,
    ‘你好.txt’
    ]

简单的来实现了 目录列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const http = require('http')
const server = http.createServer()
const fs = require('fs')
server.on('request', (req, res) => {
    let url = req.url
    let wwwDir = 'F:/nodejs/Node_test/resource'
    fs.readFile('./resource/index.html', (err, data) => {
    // data 是 index.html 的二进制数据
        if (err) {
            return res.end('404 Not Foun.')
        }
        // 1. 如何得到 wwwDir 目录列表中的文件名和目录名
        //    fs.readdir  这个API可以读取目录列表中的文件名和目录名
        // 2. 如何将得到的文件名和目录名替换到 template.html 中
        //    2.1 在 template.html 中需要替换的位置预留一个特殊的标记（就像以前使用模板引擎的标记一样）
        //    2.2 根据 files 生成需要的 HTML 内容
        // 只要你做了这两件事儿，那这个问题就解决了
        fs.readdir(wwwDir, (err, files) => {
            if (err) {
                return res.end('文件不存在.')
            }

            // 2.1 生成需要替换的内容
            let content = '';
            files.forEach((item) => {
                // 在 EcmaScript 6 的 ` 字符串中，可以使用 ${} 来引用变量
                content += ` <tr>
                <td data-value="nodejs资料（7天）/"><a class="icon dir"
                        href="/F:/nodejs/Node_test/nodejs%E8%B5%84%E6%96%99%EF%BC%887%E5%A4%A9%EF%BC%89/">${item}</a>
                </td>
                <td class="detailsColumn" data-value="0"></td>
                <td class="detailsColumn" data-value="1596634470">2020/8/5 下午9:34:30</td>
            </tr>`
            });

            // 2.3 替换
            // data 是 index.html 的二进制数据，要想渲染到页面先转换为字符串格式
            data = data.toString();
            
            // 将 index.html 中的内容的 *** 替换成 我们想要的目录列表内容
            data = data.replace('***', content);


            // 3. 发送解析替换过后的响应数据
            res.end(data);
        })
    })
});
server.listen(3000, () => {
    console.log('服务器启动成功，可以通过 http://127.0.0.1:3000/ 来访问');
})