Node学习笔记模拟Apache目录展示

结合前两篇文章可以实现模拟 Apache 的目录展示效果，代码如下：

var template = require('art-template') // 引入 art-template 模版引擎
var fs = require('fs') // 引入 Node 核心文件操作模块 fs
var http = require('http') // 引入 Node 核心 http 模块

var server = http.createServer() // 创建一个 server 服务

server.on('request', (req, res) => { // 处理 request 请求
    
  // ‘./html-template.html’为用于对数据展示的静态页面路径
  fs.readFile('./html-template.html', (err, data) => { // 读取静态模板内容
    if (err) { // 当文件读取失败则抛出‘读取文件失败’
      return console.log('读取文件失败')
    }

    // ‘target-menu’为所需展示的文件目录
    fs.readdir('./target-menu/', (err, files) => { // 读取目标文件目录
      if (err) { // 当目录读取失败则抛出‘找不到目录’
        return res.end('找不到目录')
      }

      // 目录读取成功，运行以下代码
      var ret = template.render(data.toString(), { // 使用模板引擎将目录替换到页面模板中
        files: files
      })
      // data.toString() 为‘./html-template.html’模板文件具体内容
      // files 对应模板文件中 {{}} 的具体数据变量

      res.end(ret) // 将最终的数据响应给客户端
    })
  })

})

server.listen('2828', () => { // 服务器绑定端口
	console.log('server 启动成功')
})

以上代码需要补充解释以下方法：

.render(source, data, options) 编译并返回渲染结果

用法示例

var html = template.render('hi, {{ value }}.', {value: 'aui'});

它有两个参数

source 为需要被转化的文本字符串，需要注意此参数接受字符串或二进制编码
data 为需要替换到模板中对应标识符 {{}} 中的具体真是数据

换种方式解释之前的代码：

我有一个静态页面 html-template.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		{{ files }}
	</body>
</html>

通过 fs.readFile 读取到其内容，保存在其内部 data 中
我有一个 target-menu 文件夹，其中存放有 index.html、text.txt、新建文件夹三个文件
通过 fs.readdir 获取该文件夹目录信息，保存在其内部 files 中

使用模版引擎将 files 中的目录信息替换到 data 中

var ret = template.render(data.toString(), {
	files: files
})

此时 data 内容为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
    	index.html
        text.txt
        新建文件夹
	</body>
</html>

创建一个 server 服务，用于浏览最终页面
```
var server = http.createServer()
```

通过页面请求，将 data 数据返回给客户端

server.on('request', (req, res) => {
    res.end(ret)
})

绑定端口，访问 http://localhost:2828/ 即可看到最终展示结果
```
server.listen('2828', () => {})
```

文章已同步我的个人博客：《Node学习笔记模拟Apache目录展示》

资料参考：

本篇文章由一文多发平台ArtiPub自动发布

SFatpaper

发布了16 篇原创文章 · 获赞 0 · 访问量 517

私信关注

Node学习笔记 模拟Apache目录展示

.render(source, data, options) 编译并返回渲染结果

猜你喜欢

Node学习笔记模拟Apache目录展示