摘要：問題暴露之前做的瀏覽是使用版本做的，因為參考書比較舊了。方法可以將本地文件以靜態(tài)資源發(fā)送給用戶，所有問題迎刃而解。舊版本不支持等代碼文件和文件在線查看，所以進行改進。利用和進行響應(yīng)式布局。監(jiān)控文件，改變后無需重啟服務(wù)器。

之前做的HTTP瀏覽是使用express2.x版本做的...，因為參考書比較舊了。

express2.x中沒有express4.x中的res.sendFile()方法，之前發(fā)送文件是使用的stream.pipe()方法，導(dǎo)致不支持繼續(xù)下載，而且用戶不能知道下載進度，在線音樂視頻播放也不能選擇時間跳躍欣賞。res.sendFile()方法可以將本地文件以靜態(tài)資源發(fā)送給用戶，所有問題迎刃而解。

舊版本不支持java/c/cpp/js/css/html等代碼文件和md/markdown文件在線查看，所以進行改進。

利用Bootstrap responsive utils和Bootstrap grid system進行響應(yīng)式布局。

監(jiān)控root.txt文件，改變root后無需重啟服務(wù)器。

去除對q.js依賴，使用原生Promise

json文件查看

md文件查看

html文件查看

//全局對象
global.root = fs.readFileSync("./root.txt").toString().split(/s+/)[0];
fs.watchFile("./root.txt",function () {
  //root.txt 文件修改后觸發(fā)
  global.root = fs.readFileSync("./root.txt").toString().split(/s+/)[0];
});

var statP = function(root,file){
    return new Promise(function(resolve){
      fs.stat(root+"/"+file,function (err, stats) {
        var t = {};
        if(err){
            t.reason=err;
            resolve(t);
        }
        else {
           t.state="ok";
           stats.name = file;
           stats.type = stats.isDirectory()?"文件夾":"文件";
           t.value=stats;
           resolve(t);
        }
      });
    })
};
Promise.all(files.map((x,i,a)=>{return statP(r,x);}))
    .then(function (results) {
        var values = [];
        results.forEach(x=>{
            if(x.state==="ok"){
                values.push(x.value);
            }else
                console.error(x.reason);
        });
        //...render
    },console.error);

// noraw為url上的noraw參數(shù)值
if(!!noraw){
    // f為文件名
    if(f.match(/.(avi|mp4|mkv|rmvb|mpg|rm|wma)$/i)){
        res.render("video",o);
    }else if(f.match(/.(jpg|png|bmp|jpeg|gif)$/i)){
        res.render("img",o);
    }else if(f.match(/.(mp3|wma|aac)$/i)){
        res.render("audio",o);
    }else if(f.match(/.(md|markdown)$/i)){
        fs.readFile(file,(error,data) => {
            if(error) throw error;
            o.content = data.toString();
            res.render("md",o);
        });
    }else if(f.match(/.(java|c|cpp|js|css|jsp|php|json|txt)$/i)){
        fs.readFile(file,(error,data) => {
            if(error) throw error;
            // 在服務(wù)器渲染高亮代碼方法被淘汰，因為對大文件調(diào)用下面方法十分耗時間，
            // 而node為單線程，所以其他用戶請求也會被阻塞，而且本用戶也要等待很久。
            // 所以選擇在瀏覽器端解析。
            // console.time("hl");
            // o.content=hl.highlightAuto(data.toString()).value;
            // console.timeEnd("hl");
            o.content = data.toString();
            res.render("code",o);
        });
    }else if(f.match(/.(html|htm)$/i)){
        fs.readFile(file,(error,data) => {
            if(error) throw error;
            o.content = data.toString();
            res.render("html",o);
        });
    }else{
        // rela 為相對路徑，root 為文件根目錄
        res.sendFile(rela,{root:global.root});
    }
}else{
    res.sendFile(rela,{root:global.root});
}

doctype
html(lang="zh")
  head
    title= title
    meta(name="renderer",content="webkit")
    meta(http-equiv="X-UA-Compatible",content="IE=edge")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel="stylesheet", href="/stylesheets/bootstrap.min.css")
    link(rel="stylesheet", href="/stylesheets/style.css")
    link(rel="stylesheet", href="/stylesheets/hljs-github.min.css")
    link(rel="stylesheet", href="/stylesheets/pilcrow.css")
    link(rel="stylesheet", href="/stylesheets/github-markdown.css")
  body
    block content

extends layout

block content
    script(src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js")
    div.container-fluid
        h1=title
        include btns
        div.markdown-body
            pre
                code!=content
        script hljs.initHighlightingOnLoad();//自動尋找
進行解析
        footer
            p.text-center.text-info Running on node with Express, Jade. By Moyu.

//
   Created by Yc on 2016/6/9.
extends layout

block content
    script(src="http://cdn.bootcss.com/marked/0.3.5/marked.min.js")
    script(src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js")
    div.container-fluid
        h1=title
        include btns
        div.row
            div.col-lg-6.visible-lg
                h2 解析前
                div.markdown-body
                    pre
                        code(id="markdown-raw")=content //"="會被轉(zhuǎn)義(如 < : <),"!="不會
            div.col-lg-6
                h2 解析后
                div.markdown-body(id="markdown-show")
        script(src="/javascripts/md.js")
        //renderer 來自md.js
        script document.getElementById("markdown-show").innerHTML = marked(document.getElementById("markdown-raw").innerText,{renderer:renderer});
        footer
            p.text-center.text-info Running on node with Express, Jade. By Moyu.

~function(){
    marked.setOptions({
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        }
    });
    renderer = new marked.Renderer();
    var map = {};
    //重寫默認"#","##"... 格式的轉(zhuǎn)換方法
    renderer.heading = function (text, level) {//level 表示層級，如#為1，##為2
        var escapedText = text.toLowerCase();
        // 防止出現(xiàn)重復(fù)的錨點
        if(!!map[text])
            escapedText+="-"+map[text]++;
        else
            map[text]=1;
        return "" +
            text + "";
    };
}();

通過url的noraw控制展示方式，對SEO不友好
GitHub的解決方法是，在raw文件提供獨立的三級域名raw.githubusercontent.com/{username}/{repo}/{branch}/{file}

后期希望更加完善這個web應(yīng)用吧，比如在線查看壓縮文件等功能。

http-file-explorer-express4.x

markdown-styles: 提供高大上的CSS樣式。

marked: 提供強大的markdown格式轉(zhuǎn)化API。

highlight.js: 提供強大的code格式轉(zhuǎn)化為具有class樣式的標簽，方便用戶自定義樣式。

express4.x: express4.x詳細API文檔。