您的位置:首页 > 运维架构 > Apache

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

2018-08-13 16:23 706 查看
在上一篇博客中,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>
阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: