如何获取当前目录名称并使用node.js将其显示在html页面上
其实我在index.js文件中有一个path名。无论何时我select目录，我都能够在node.js控制台屏幕上看到当前的目录名称。
现在，我想将该目录名称显示在template.html页面的文本框中。 任何人都可以请帮我解决这个问题？
在index.js中，在这个部分，我能够在控制台中看到path名：
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);
我的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. eg ( -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'); });
我的template.html：
<!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>
我的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> " + data.Name +"</a>"; } else { return "<a href='/" + data.Path + "' target='_blank'><i class='fa " + getFileIcon(data.Ext) + "'></i> " + 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);
当前浏览格式：
必需浏览格式： 
假设你的template.html只是一个静态的html页面，但不是一个模板，只有一种方法可以从服务器获取数据 – 通过xhr请求。 你可以添加一个更多的路由到你的index.js ：
//... 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); });
然后从你的app.js触发一个xhr请求（到这个路由）：
$.get('/directory').then(function(data){ $("input[name='location']").val(data.directory); });
另外，将其添加到.up事件处理程序：
$(".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); }); });
并修改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(); }); },
您也可以将这些数据添加到/files路由响应中。
还有一种方法是使用模板。 在这里，您可以阅读有关快速模板引擎。