学习使用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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要正确使用Node.js搭建服务器,您可以按照以下步骤进行: 1. 安装Node.js:首先,您需要在您的计算机上安装Node.js。您可以从官方网站https://nodejs.org/下载并安装适合您操作系统的版本。 2. 创建项目文件夹:在您希望存放项目的位置创建一个文件夹,并进入该文件夹。 3. 初始化项目:在命令行中,使用`npm init`命令初始化项目。这将引导您完成创建`package.json`文件的过程。在这个文件中,您可以设置项目的名称、版本和其他相关信息。 4. 安装必要的依赖:使用npm命令安装您需要的依赖。例如,如果您想要使用Express框架来搭建服务器,可以运行`npm install express`来安装Express。 5. 创建服务器文件:在项目文件夹中创建一个新的JavaScript文件,例如`server.js`。这个文件将包含用于搭建服务器的代码。 6. 编写服务器代码:在`server.js`文件中,使用合适的代码来创建和配置服务器。以下是一个简单的示例: ```javascript const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hello, World!'); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 在这个示例中,我们使用Express框架创建了一个简单的服务器。`app.get('/')`定义了一个路由,当访问根路径时返回"Hello, World!"。`app.listen(3000)`指定服务器监听的端口为3000。 7. 启动服务器:在命令行中,进入到项目文件夹,并运行`node server.js`来启动服务器。如果一切顺利,您将看到终端输出 "Server started on port 3000"。 这就是使用Node.js搭建服务器的基本步骤。根据您的需求,您可以进一步配置和扩展服务器的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值