1. 程式人生 > >node——8-node.js 實現 apache 功能

node——8-node.js 實現 apache 功能

初步實現 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>

在這裡插入圖片描述