鍍金池/ 問答/HTML/ 原生nodejs,res.end()無法輸出到頁面。

原生nodejs,res.end()無法輸出到頁面。

1.問題:
console.log(html),控制臺輸出成功,但res.end(html)無法渲染頁面。

2.代碼

var http = require("http");
var path = require("path");
var url = require("url");
var fs = require("fs");
var ejs = require("ejs");

var server = http.createServer(function (req, res) {
    if (req.url == "/favicon.ico") {
        return;
    }
    var pathname = url.parse(req.url).pathname;
    var fileUrl = path.normalize("./public/" + pathname);
    var extname = path.extname(pathname);

    fs.readFile(fileUrl, function (err, fileData) {
        getMime(extname, function (mime) {
            res.writeHead(200, { "context-type": mime });
            res.end(fileData);
        })
    });



    if (pathname == "/") {
        var _thisUrl = "./public"
        var fileArry = [];//存儲各個(gè)文件data的一些數(shù)據(jù)
        var a = {}
        var data = {};//存儲file(是否事文件,1是,0不是);fileName:文件(夾)名;url:文件實(shí)際地址
        fs.readdir(_thisUrl, function (err, files) {
            var length = files.length;
            (function iterator(i) {
                var show = 0;
                if (i >= files.length) {
                    data = { "fa": fileArry, "length": length };

                    fs.readFile("./views/index.ejs", function (err, fileData) {

                        var template = fileData.toString();
                        var html = ejs.render(template, data);
                        console.log(html);
                        res.end(html);
                    });
                    return;
                }
                fs.stat(_thisUrl + "/" + files[i], function (err, stats) {
                    if (stats.isDirectory()) {
                        a = { "file": 0, "fileName": files[i], "url": _thisUrl + "/" + files[i] }
                    }
                    else {

                        if (path.extname("/" + files[i]).toLocaleLowerCase() == ".jpg") {
                            show = 1;
                        }
                        a = { "file": 1, "fileName": files[i], "url": _thisUrl + "/" + files[i], "show": show }
                    }
                    fileArry.push(a);
                    //console.log(fileArry);
                    iterator(i + 1);
                })
            })(0);

        });

    };



});

server.listen(3000, "127.0.0.1");

function getMime(extname, fn) {
    fs.readFile("./public/mime.json", function (err, data) {
        var mimeList = JSON.parse(data);
        var mime = mimeList[extname];
        fn(mime);
    })
}

3.控制臺截圖
圖片描述

我是小白,請解釋的稍微淺顯些,謝謝各位大神。
PS:我后來consol.log(res)發(fā)現(xiàn),自執(zhí)行函數(shù)的res和外部的res不一樣,自執(zhí)行函數(shù)內(nèi)部的res好像少了很多,如圖
圖片描述

回答
編輯回答
櫻花霓

可以改成下面這種方式試下:
var rs = fs.createReadStream(__dirname + '/test.txt')
rs.on('data', function (data) {
console.log(data.toString());
});
rs.on('end', function () {
console.log('讀取文件結(jié)束')
});

2017年4月20日 13:11
編輯回答
別瞎鬧

因?yàn)樽x文件是異步的,等你讀完文件的時(shí)候請求已經(jīng)處理完了

2018年7月27日 02:40
編輯回答
孤酒
fs.readFile(fileUrl, function (err, fileData) {
        getMime(extname, function (mime) {
            res.writeHead(200, { "context-type": mime });
            res.end(fileData);  ```//你這里 end 直接結(jié)束了響應(yīng)導(dǎo)致后面的數(shù)據(jù)沒傳吧```
        })
    });
2018年9月11日 18:11
編輯回答
尐潴豬
if (extname) {
        return fs.readFile(fileUrl, function (err, fileData) {
            if (err) {
                res.writeHead(404, 'not found');
                return res.end();
            }
            getMime(extname, function (mime) {
                if (!mime) {
                    res.writeHead(404, 'not found');
                    return res.end();
                }
                res.writeHead(200, { "context-type": mime });
                res.end(fileData);
            })
        });
    }

應(yīng)該是之前的這塊在你輸出html之前已經(jīng)返回了,前面要做充分的判斷。
還有就是這些讀文件的操作為什么不在應(yīng)用啟動(dòng)的時(shí)候直接讀取后緩存,不要放在linstener函數(shù)內(nèi)做,這樣每個(gè)請求過來之后都要進(jìn)行文件讀取操作,性能大大降低了

后面的那個(gè)循環(huán)讀取文件的邏輯也不對,因?yàn)槭钱惒讲僮?,在render的時(shí)候并不能保證fileArry中已經(jīng)有所有的文件信息了

2018年3月6日 01:06