Geçerli dizin adını alma ve node.js'yi kullanarak html sayfasında görüntüleme

Dizini seçtiğimde index.js dosyasında bir yol adım var Aslında, geçerli dizin adını node.js konsol ekranı.Geçerli dizin adını alma ve node.js'yi kullanarak html sayfasında görüntüleme

Şimdi, bu dizin adını template.html sayfasının metin kutusuna görüntülemek istiyorum. Bu konuda bana yardımcı olabilecek herhangi biri var mı?

app.get('/files', function(req, res) { 
var currentDir = dir; 
var query = req.query.path || ''; 
if (query) currentDir = path.join(dir, query); 
console.log("browsing ", currentDir);

Benim index.js:

#!/usr/bin/env node 

var http = require('http'); 
var _ = require('lodash'); 
var express = require('express'); 
var fs = require('fs'); 
var path = require('path'); 
var util = require('util'); 

var program = require('commander'); 

function collect(val, memo) { 
    if(val && val.indexOf('.') != 0) val = "." + val; 
    memo.push(val); 
    return memo; 
} 

program 
    .option('-p, --port <port>', 'Port to run the file-browser. Default value is 8088') 
    .option('-e, --exclude <exclude>', 'File extensions to exclude. To exclude multiple extension pass -e multiple times. e.g. (-e .js -e .cs -e .swp) ', collect, []) 
    .parse(process.argv); 

var app = express(); 
var dir = process.cwd(); 
app.use(express.static(dir)); //app public directory 
app.use(express.static(__dirname)); //module directory 
var server = http.createServer(app); 

if(!program.port) program.port = 8088; 

server.listen(program.port); 
console.log("Please open the link in your browser http://<YOUR-IP>:" + program.port); 

app.get('/files', function(req, res) { 
var currentDir = dir; 
var query = req.query.path || ''; 
if (query) currentDir = path.join(dir, query); 
console.log("browsing ", currentDir); 
fs.readdir(currentDir, function (err, files) { 
    if (err) { 
     throw err; 
     } 
     var data = []; 
     files 
     .filter(function (file) { 
      return true; 
     }).forEach(function (file) { 
     try { 
       //console.log("processing ", file); 
       var isDirectory = fs.statSync(path.join(currentDir,file)).isDirectory(); 
       if (isDirectory) { 
        data.push({ Name : file, IsDirectory: true, Path : path.join(query, file) }); 
       } else { 
        var ext = path.extname(file); 
        if(program.exclude && _.contains(program.exclude, ext)) { 
        console.log("excluding file ", file); 
        return; 
        }  
        data.push({ Name : file, Ext : ext, IsDirectory: false, Path : path.join(query, file) }); 
       } 

     } catch(e) { 
      console.log(e); 
     }   

     }); 
     data = _.sortBy(data, function(f) { return f.Name }); 
     res.json(data); 
    }); 
}); 

app.get('/', function(req, res) { 
res.redirect('lib/template.html'); 
});

Benim template.html:

index.js olarak

bu kısmında ben konsolda yol adını görmek mümkün değilim

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>File Browser</title> 
    <link rel="stylesheet" href="/lib/bootstrap.min.css"> 
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="/lib/app.css"> 
    </head> 
    <body> 
    <div id="panelDiv"> 

      <div class="panel-heading"> 
        <button type="button" id="butDiv" >Browse</button> 
        <input type="text" name="location"/> 
        <span class="up"> 
        <i class="fa fa-level-up"></i> Up 
        </span> 
      </div> 
     <div id="showDiv" class="panel-body"> 
       <table class="linksholder"> 
       </table> 
     </div> 

    </div> 
    <script src="/lib/jquery.min.js"></script> 
    <script src="/lib/bootstrap.min.js"></script> 
    <script src="/lib/datatable/js/jquery.datatables.min.js"></script> 
    <script src="/lib/app.js"></script> 
<script> 
$(document).ready(function(){ 
$("#butDiv").click(function(){ 
     $("#showDiv").toggle(); 

}); 
}); 
</script> 
</body> 
</html>

Benim app.js:

(function($){ 

     var extensionsMap = { 
         ".zip" : "fa-file-archive-o",   
         ".gz" : "fa-file-archive-o",   
         ".bz2" : "fa-file-archive-o",   
         ".xz" : "fa-file-archive-o",   
         ".rar" : "fa-file-archive-o",   
         ".tar" : "fa-file-archive-o",   
         ".tgz" : "fa-file-archive-o",   
         ".tbz2" : "fa-file-archive-o",   
         ".z" : "fa-file-archive-o",   
         ".7z" : "fa-file-archive-o",   
         ".mp3" : "fa-file-audio-o",   
         ".cs" : "fa-file-code-o",   
         ".c++" : "fa-file-code-o",   
         ".cpp" : "fa-file-code-o",   
         ".js" : "fa-file-code-o",   
         ".xls" : "fa-file-excel-o",   
         ".xlsx" : "fa-file-excel-o",   
         ".png" : "fa-file-image-o",   
         ".jpg" : "fa-file-image-o",   
         ".jpeg" : "fa-file-image-o",   
         ".gif" : "fa-file-image-o",   
         ".mpeg" : "fa-file-movie-o",   
         ".pdf" : "fa-file-pdf-o",   
         ".ppt" : "fa-file-powerpoint-o",   
         ".pptx" : "fa-file-powerpoint-o",   
         ".txt" : "fa-file-text-o",   
         ".log" : "fa-file-text-o",   
         ".doc" : "fa-file-word-o",   
         ".docx" : "fa-file-word-o",   
        }; 

    function getFileIcon(ext) { 
    return (ext && extensionsMap[ext.toLowerCase()]) || 'fa-file-o'; 
    } 

    var currentPath = null; 
    var options = { 
     "bProcessing": true, 
     "bServerSide": false, 
     "bPaginate": false, 
     "bAutoWidth": false, 
     "sScrollY":"250px", 
     "fnCreatedRow" : function(nRow, aData, iDataIndex) { 
      if (!aData.IsDirectory) return; 
      var path = aData.Path; 
      $(nRow).bind("click", function(e){ 
      $.get('/files?path='+ path).then(function(data){ 
       table.fnClearTable(); 
       table.fnAddData(data); 
       currentPath = path; 
      }); 
      e.preventDefault(); 
      }); 
     }, 
     "aoColumns": [ 
      { "sTitle": "", "mData": null, "bSortable": false, "sClass": "head0", "sWidth": "55px", 
      "render": function (data, type, row, meta) { 
       if (data.IsDirectory) { 
       return "<a href='#' target='_blank'><i class='fa fa-folder'></i>&nbsp;" + data.Name +"</a>"; 
       } else { 
       return "<a href='/" + data.Path + "' target='_blank'><i class='fa " + getFileIcon(data.Ext) + "'></i>&nbsp;" + data.Name +"</a>"; 
       } 
      } 
      } 
     ] 
    }; 

    var table = $(".linksholder").dataTable(options); 
    console.log(table); 

    $.get('/files').then(function(data){ 
     table.fnClearTable(); 
     table.fnAddData(data); 
    }); 

    $(".up").bind("click", function(e){ 
    if (!currentPath) return; 
    var idx = currentPath.lastIndexOf("/"); 
    var path =currentPath.substr(0, idx); 
    $.get('/files?path='+ path).then(function(data){ 
     table.fnClearTable(); 
     table.fnAddData(data); 
     currentPath = path; 
    }); 
    }); 
})(jQuery);

Güncel Gözat Biçimi:

Gerekli Gözat Biçimi:

kaynak

2015-11-04 dev333

sizin template.html sadece statik html sayfası ama bir şablon olduğunu varsayarsak, veri almak için tek bir yolu vardır sunucudan - bir xhr isteği ile. .up olay işleyicisi ekleyin, ayrıca

$.get('/directory').then(function(data){   
    $("input[name='location']").val(data.directory); 
});

//... 
app.get('/', function(req, res) { 
    res.redirect('lib/template.html'); 
}); 

app.get('/directory', function(req, res) { 
    var currentDir = dir; 
    var query = req.query.path || ''; 
    if (query) currentDir = path.join(dir, query); 
     var data = { directory: currentDir } 
    res.json(data); 
});

Ve sonra app.js den (bu rotaya) bir daha xhr isteğini tetikleyebilir: Eğer index.js bir daha yolu ekleyebilirsiniz

$(".up").bind("click", function(e){ 
    if (!currentPath) return; 
    var idx = currentPath.lastIndexOf("/"); 
    var path =currentPath.substr(0, idx); 
    $.get('/files?path='+ path).then(function(data){ 
     table.fnClearTable(); 
     table.fnAddData(data); 
     currentPath = path; 
    }); 
    $.get('/directory?path='+ path').then(function(data){   
      $("input[name='location']").val(data.directory); 
    }); 
});

Ve değiştirmek fnCreatedRow:

"fnCreatedRow" : function(nRow, aData, iDataIndex) { 
    if (!aData.IsDirectory) return; 
    var path = aData.Path; 
    $(nRow).bind("click", function(e){ 
     $.get('/files?path='+ path).then(function(data){ 
      table.fnClearTable(); 
      table.fnAddData(data); 
      currentPath = path; 
     }); 
     $.get('/directory?path='+ path').then(function(data){   
      $("input[name='location']").val(data.directory); 
     });   
    e.preventDefault(); 
    }); 
},

Ayrıca bu veriyi /files rota yanıtına da ekleyebilirsiniz.

Şablonları kullanmanın bir yolu daha. Here ekspresinde şablon motorları hakkında okuyabilirsiniz.

kaynak

2015-11-04 13:40:16

Yardım için çok teşekkürler.Açıkladığım metin kutusuna eğik çizgi alıyorum.Ama mevcut dizin yolunu bu metin kutusuna görüntülemek istiyorum.Lütfen bu sorunla ilgili olarak bana yardımcı olun ... – dev333

Güncelleme yaptım cevap :) –

Burada değeri slash olarak alabiliyorum.Ama mevcut dizinin yolunu alamıyorum. $ .get ('/ dizin'). sonra (işlev (veri) { $ ("girdi [name = 'location']"). val (data.directory); }); – dev333

Geçerli dizin adını alma ve node.js'yi kullanarak html sayfasında görüntüleme

cevap

İlgili konular