node——8-node.js 实现 apache 功能

版权声明:未经同意,不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83903964

初步实现 apache 功能

var http = require('http');
var fs = require('fs');

// 任意目录地址
var wwwDir = 'E:/desk/my-pro/QD-practice/node/2/www';

// 1. 创建 Server
var server = http.createServer();

// 2. 监听 Server 的 request 请求事件,设置请求处理函数
// 请求
// 处理
// 响应
// 一个请求对应一个响应,如果在一个请求的过程中,已经结束响应了,
// 则不能重复发送响应。
// 没有请求就没有响应。

// 以前使用过 apache 服务器软件,默认有个 www 目录,
// 所有存放在里面的内容都可以用网址访问
server.on('request', function (req, res) {
    var url = req.url;
    if (url === '/') {
        fs.readFile(wwwDir + '/index.html', function (err, data) {
            // if (err) {
            //     res.end('404 not found');
            // } else {
            //
            // }

            if (err) {
                // return 有两个作用
                // 1. 方法返回值
                // 2. 阻止代码继续执行
                return res.end('404 not found');
            }
            res.end(data);
        })
    } else if (url === '/boy.html') {
        fs.readFile(wwwDir + '/boy.html', function (err, data) {
            if (err) {
                return res.end('404 not found');
            }
            res.end(data);
        })
    } else if (url === '/plus/login.html') {
        fs.readFile(wwwDir + '/plus/login.html', function (err, data) {
            if (err) {
                return res.end('404 not found');
            }
            res.end(data);
        })
    }

});

// 3. 绑定端口号,启动服务
server.listen(3000, function () {
    console.log('running...');
});

在这里插入图片描述

升级 apache

可以发现上面那个每新打开一个文件都要添加一个 if…else 非常麻烦,所以

var http = require('http');
var fs = require('fs');

// 任意目录地址
var wwwDir = 'E:/desk/my-pro/QD-practice/node/2';

// 1. 创建 Server
var server = http.createServer();

// 2. 监听 Server 的 request 请求事件,设置请求处理函数
server.on('request', function (req, res) {
    var url = req.url;
    
    var filePath = 'index.html';
    if (url !== '/') {
        filePath = url;
    }

    fs.readFile(wwwDir + filePath, function (err, data) {
        if (err) {
            // return res.end(wwwDir + filePath);
            // E:/desk/my-pro/QD-practice/node/2/plus/login.html
            return res.end('404 not found');
        }

        res.end(data);
    });
});

// 3. 绑定端口号,启动服务
server.listen(3000, function () {
    console.log('running...');
});

在这里插入图片描述

Apache 目录列表

var http = require('http');
var fs = require('fs');

var wwwDir = 'E:/desk/my-pro/QD-practice/node/2';

// 1. 创建 Server
var server = http.createServer();

// 2. 监听 Server 的 request 请求事件,设置请求处理函数
server.on('request', function (req, res) {
    var url = req.url;
    fs.readFile(wwwDir + '/template/template.html', function (err, data) {
        if (err) {
            // return res.end('404 not found');
            return res.end(wwwDir + '/template/template.html');
        }
        // 1. 得到 wwwDir 目录列表中的文件名和目录名
        // fs.readdir
        // 2. 将得到的文件名和目录名替换到 template.html 中
        //    2.1 在 template.html 中需要替换的位置预留一个特殊标记(随意)
        //    2.2 根据 files 生成需要的 HTML 内容
        // 模板引擎
        fs.readdir(wwwDir + '/www', function (err, files) {
            if (err) {
                return res.end('Can not find www dir')
            }

            // 2.2 生成需要替换的内容
            var content = '';
            files.forEach(function (item) {
                // 在 EcmaScript 6 的 ` 字符串中,可以使用 ${} 来引用变量
                content += `
                       <tr>
                            <td><a href="">${item}&gt;</a></td>
                            <td align="left">2018-10-20 18:50</td>
                            <td align="right"> -</td>
                            <td>hello world!</td>
                       </tr>
                `;
            });

            // 2.3 替换
            data = data.toString();
            // 普通的字符串解析替换,浏览器看到的结果就不一样了
            data = data.replace('^_^', content);

            // 3. 发送解析替换后的页面
            res.end(data);
        });
    })
});

// 3. 绑定端口号,启动服务
server.listen(3000, function () {
    console.log('running...');
});

模板页面:template.html

<html>
<head>
    <title>My Item</title>
</head>
<body>
<h1>My Item</h1>
<table>
    <tbody>
    <tr>
        <th align="left"><a href="?C=N;O=D">Name</a></th>
        <th align="left"><a href="?C=M;O=A">Last modified</a></th>
        <th align="left"><a href="?C=S;O=A">Size</a></th>
        <th align="left"><a href="?C=D;O=A">Description</a></th>
    </tr>
    <tr>
        <th colspan="5">
            <hr>
        </th>
    </tr>
    ^_^
    <tr>
        <th colspan="5">
            <hr>
        </th>
    </tr>
    </tbody>
</table>
<address>node.js</address>
</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/lucky541788/article/details/83903964