摘要:問題暴露之前做的瀏覽是使用版本做的,因為參考書比較舊了。方法可以將本地文件以靜態資源發送給用戶,所有問題迎刃而解。舊版本不支持等代碼文件和文件在線查看,所以進行改進。利用和進行響應式布局。監控文件,改變后無需重啟服務器。
問題暴露
之前做的HTTP瀏覽是使用express2.x版本做的...,因為參考書比較舊了。
express2.x中沒有express4.x中的res.sendFile()方法,之前發送文件是使用的stream.pipe()方法,導致不支持繼續下載,而且用戶不能知道下載進度,在線音樂視頻播放也不能選擇時間跳躍欣賞。res.sendFile()方法可以將本地文件以靜態資源發送給用戶,所有問題迎刃而解。
舊版本不支持java/c/cpp/js/css/html等代碼文件和md/markdown文件在線查看,所以進行改進。
利用Bootstrap responsive utils和Bootstrap grid system進行響應式布局。
監控root.txt文件,改變root后無需重啟服務器。
去除對q.js依賴,使用原生Promise
效果預覽
json文件查看
md文件查看
html文件查看
代碼改進 root.txt文件監控//全局對象 global.root = fs.readFileSync("./root.txt").toString().split(/s+/)[0]; fs.watchFile("./root.txt",function () { //root.txt 文件修改后觸發 global.root = fs.readFileSync("./root.txt").toString().split(/s+/)[0]; });原生Promise
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);sendFile方法使用
// noraw為url上的noraw參數值 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; // 在服務器渲染高亮代碼方法被淘汰,因為對大文件調用下面方法十分耗時間, // 而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}); }layout.jade
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 contentcode.jade
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();//自動尋找md.jade進行解析 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 //"="會被轉義(如 < : <),"!="不會 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.md.js
~function(){ marked.setOptions({ highlight: function (code) { return hljs.highlightAuto(code).value; } }); renderer = new marked.Renderer(); var map = {}; //重寫默認"#","##"... 格式的轉換方法 renderer.heading = function (text, level) {//level 表示層級,如#為1,##為2 var escapedText = text.toLowerCase(); // 防止出現重復的錨點 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應用吧,比如在線查看壓縮文件等功能。
代碼地址http-file-explorer-express4.x
參考資料markdown-styles: 提供高大上的CSS樣式。
marked: 提供強大的markdown格式轉化API。
highlight.js: 提供強大的code格式轉化為具有class樣式的標簽,方便用戶自定義樣式。
express4.x: express4.x詳細API文檔。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86338.html
摘要:前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存,以便及時獲取最新的靜態資源版本。 前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。 實戰 鑒于叉燒包本包是個前端,所以我們就以HTML和Node為例開始showImg(https...
摘要:前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存,以便及時獲取最新的靜態資源版本。 前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。 實戰 鑒于叉燒包本包是個前端,所以我們就以HTML和Node為例開始showImg(https...
摘要:前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存,以便及時獲取最新的靜態資源版本。 前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。 實戰 鑒于叉燒包本包是個前端,所以我們就以HTML和Node為例開始showImg(https...
摘要:前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存,以便及時獲取最新的靜態資源版本。 前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。 實戰 鑒于叉燒包本包是個前端,所以我們就以HTML和Node為例開始showImg(https...
摘要:前言學習也有一段時間了,踩過許多坑,在這里打算記錄一下自己覺得有用的點,以備以后所需。代碼調試一般我們調試項目都是通過前端或者后端,這總是顯得不夠靈活。即使是內置的也不夠友好。這樣修改文件時服務就會自動重啟了。 前言 學習NodeJs也有一段時間了,踩過許多坑,在這里打算記錄一下自己覺得有用的點,以備以后所需。 代碼調試 一般我們調試Js項目都是通過Alert()(前端)或者 Cons...
閱讀 1848·2021-11-22 15:24
閱讀 1307·2021-11-12 10:36
閱讀 3194·2021-09-28 09:36
閱讀 1836·2021-09-02 15:15
閱讀 2745·2019-08-30 15:54
閱讀 2391·2019-08-30 11:02
閱讀 2391·2019-08-29 13:52
閱讀 3539·2019-08-26 11:53