node實現展現文件目錄

時間 2019-11-07

原文原文鏈接

本案例使用node來實現服務器功能,在瀏覽器地址欄輸入localhost:8080時,顯示根目錄下的全部文件和文件夾javascript

前言:

在學習ajax時介紹過模板引擎的使用以及做用,因此在本案例中先使用原生的ajax的來實現,而後再使用模板引擎來實現,能夠比較一下這兩種方法的不一樣之處css

本案例重點學習的知識點有:html

node的http模塊
node的fs模塊
模板引擎art-template

下面是原生ajax實現

目錄結構

前臺頁面

index.htmljava

<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="index.css">
	<title>Document</title>
</head>
<body>
	<!-- <img src="./img/folder.gif" alt=""> -->
	<table>
		<tr>
			<td>文件類型</td>
			<td>文件名</td>
			<td>文件大小</td>
			<td>文件修改時間</td>
		</tr>
	</table>
</body>
<script> var xhr=new XMLHttpRequest(); xhr.open("get","./filelist.js"); xhr.send(null); xhr.onreadystatechange=function(){ var htmls=""; if(xhr.readyState==4){ //console.log(xhr.responseText); var arr=JSON.parse(xhr.responseText); console.log(arr); for(var i=0;i<arr.length;i++){ if(arr[i].type=='f'){ htmls+="<tr><td><img src='./img/text.gif' /></td>"; }else{ htmls+="<tr><td><img src='./img/folder.gif' /></td>"; } htmls+="<td>"+arr[i].name+"</td>"; htmls+="<td>"+arr[i].size+"</td>"; htmls+="<td>"+arr[i].mtime+"</td></tr>"; } var table=document.querySelector("table"); table.innerHTML+=htmls; } } </script>
</html>
複製代碼

頁面樣式

index.cssnode

*{
    font-size: 20px;
}
table{
    text-align: left;
    border-collapse: collapse;
}
table td{
     border:1px solid rgb(34, 145, 173); 
    padding: 6px;
}
複製代碼

node部分

http.jsweb

var http=require("http");//加載http模塊
var fs=require("fs");//加載文件模塊
var _date=require("moment");//加載第三方模塊
var server=http.createServer();//建立一個server對象
server.listen(8080,function(){//綁定端口,啓動web服務器
    console.log("服務器已經啓動");
});
server.on("request",function(req,res){//爲服務器對象註冊request請求處理函數

    // console.log(req.url);
    // res.end();
    if(req.url=="/"){
        fs.readFile("./index.html","utf8",function(err,data){  
            res.end(data);//響應只處理一次請求
        });
        console.log(req.url);
    }
    else if(req.url=="/filelist.js"){
            
        var new_arr=[];
        var count=0;
        fs.readdir("./",function(err,data){
        // var arrData=JSON.stringify(data);
        // res.end(arrData);
            
            for(var i=0;i<data.length;i++){
                new_arr[i]={};
                (function (i){
                    fs.stat(data[i],function(err,datastat){
                        count++;
                        new_arr[i].name=data[i];
                        new_arr[i].size=datastat.size;
                        new_arr[i].mtime=_date(datastat.mtime).format('YYYY-MM-DD HH:mm:ss');
                        //判斷文件類型
                        if(datastat.isFile()){
                            new_arr[i].type="f";
                        }else{
                            new_arr[i].type="d";
                        }
                        if(data.length==count){
                         res.end(JSON.stringify(new_arr));
                        //console.log(new_arr);
                        }
                    });    
                })(i);
            }
        })
        
    }
    else{
        fs.readFile("."+req.url,function(err,data){
            res.end(data);

        });
       // console.log(req.url);
    }

    
});

複製代碼

頁面效果

以上就是使用原生ajax結合node實現展現文件目錄的寫法,不難發現,原生的ajax對於響應的數據是要進行處理的,比較麻煩,下面就使用模板引擎來進行升級ajax

art-template模板引擎實現

準備工做

npm安裝moment包npm

npm安裝art-template包瀏覽器

修改前臺頁面

index.html服務器

<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="index.css">
	<title>Document</title>
</head>
<body>
	<!-- <img src="./img/folder.gif" alt=""> -->
	<table>
		<tr>
			<td>文件名</td>
			<td>文件大小</td>
			<td>文件修改時間</td>
		</tr>

		{{each data}}
			<tr>
				<td>{{$value.name}}</td>
				<td>{{$value.size}}</td>
				<td>{{$value.mtime}}</td>
			</tr>
		{{/each}}
		
	</table>
</body>
</html>
複製代碼

頁面樣式

index.css

*{
    font-size: 20px;
}
table{
    text-align: left;
    border-collapse: collapse;
}
table td{
     border:1px solid rgb(34, 145, 173); 
    padding: 6px;
}
複製代碼

修改node部分

var http=require("http");//加載http模塊
var fs=require("fs");//加載文件模塊
var _date=require("moment");//加載第三方模塊,格式化時間
var template=require("art-template");//加載第三方自定義模塊
template.defaults.root="./";//設置默認的訪問路徑

var server=http.createServer();//建立一個server對象
server.listen(8080,function(){//綁定端口,啓動web服務器
    console.log("服務器已經啓動");
});

server.on("request",function(req,res){//爲服務器對象註冊request請求處理函數
    //console.log(req.url);//默認請求的是/目錄
    if(req.url=="/"){
        fs.readFile("./index.html","utf8",function(err,data){  
            var new_arr=[];
            var count=0;
            fs.readdir("./",function(err,data){
                // var arrData=JSON.stringify(data);
                // res.end(arrData);
                
                for(var i=0;i<data.length;i++){
                    new_arr[i]={};
                    (function (i){
                        fs.stat(data[i],function(err,datastat){
                            count++;
                            new_arr[i].name=data[i];
                            new_arr[i].size=datastat.size;
                            new_arr[i].mtime=_date(datastat.mtime).format('YYYY-MM-DD HH:mm:ss');
                            //判斷文件類型
                            if(datastat.isFile()){
                                new_arr[i].type="f";
                            }else{
                                new_arr[i].type="d";
                            }
                            if(data.length==count){

                               // console.log(new_arr);
                                var reshtml=template("./index.html",{data:new_arr});
                                res.end(reshtml);
                        
                            // res.end(JSON.stringify(new_arr));
                            //console.log(new_arr);
                                
                            }
                        });    
                    })(i);
                }
            })

         });
        console.log(req.url);
    }else{
        fs.readFile("."+req.url,function(err,data){
            res.end(data);
        });
    }
});
複製代碼

頁面效果

以上就是實現本案例的兩種方式全部內容,下面來分析node部分

思路方面

當咱們在瀏覽區地址欄上輸入:localhost:8080回車時,默認請求的是/目錄,因此在請求根目錄時,咱們設置讀取的是index.html頁面,而後再響應回去
案例要實如今index.html展現各類文件的文件名,文件大小,文件建立的時間,因此在將index.html響應回去以前要獲取這些信息,並隨頁面一塊兒響應回去,這裏咱們使用模板引擎技術

難點方面

怎麼樣獲取文件名,文件大小,文件的建立時間,我新建了一個文件filelist.js來探究

//該文件爲驗證用的,與案例無關
var fs=require("fs");
fs.readdir("./",function(err,data){
     console.log(data);
    fs.stat(data[2],function(err,datastat){
        console.log(datastat);
        //console.log(datastat.isFile());
    })
})
複製代碼