使用 Node.js 和 JQuery 发布 PHP 脚本答案

【问题标题】：Post PHP script using Node.js & JQuery使用 Node.js 和 JQuery 发布 PHP 脚本
【发布时间】：2018-02-25 08:06:32
【问题描述】：

我在 Web 应用程序 (https://github.com/chjj/tty.js/) 中使用 tty.js 项目终端，我想将 jquery treeview 添加到主页并显示根文件夹。我在 apache 上测试的 jquery treeview 工作正常，但是当我在 node.js web 应用程序上使用它时，我得到了这个错误：我可以下载 htps://localhost:10443/Foldertree.php 但无法 POST 数据错误 404 未找到。

这是场景：（注意我是 node.js 的新手）。

app.server 设置：

var tty = require('tty.js');
var app = tty.createServer({
  "users": {
    "user": "password"
  },
  "https": {
    "key": "./skey.key",
    "cert": "./scert.crt"
  },
  "port": 10443,
  "hostname": "localhost",
  "shell": "sh",
  "static": "./static",
  "debug": true,
  "term": {
    "termName": "xterm",
    "geometry": [80, 24],
    "scrollback": 1000,
    "visualBell": true,
    "popOnBell": true,
    "cursorBlink": true,
    "screenKeys": true,
    "colors": [
      "#2e3436",
      "#cc0000",
      "#4e9a06",
      "#c4a000",
      "#3465a4",
      "#75507b",
      "#06989a",
      "#d3d7cf",
      "#555753",
      "#ef2929",
      "#8ae234",
      "#fce94f",
      "#729fcf",
      "#ad7fa8",
      "#34e2e2",
      "#eeeeec"
    ]
  } 
});
app.listen();

/tty.js/static/index.html：

<!doctype html>
<title>TEST01</title>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="sweetalert2.css">
<link rel="stylesheet" href="css/filetree.css" type="text/css" >
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="sweetalert2.js"></script>
<script type="text/javascript" src="custom.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="term.js" ></script>
<script type="text/javascript" src="options.js"></script>
<script type="text/javascript" src="tty.js"></script>
<script type="text/javascript" src="jqueryFileTree.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {

    $( '#container' ).html( '<ul class="filetree start"><li class="wait">' + 'Generating Tree...' + '<li></ul>' );

    getfilelist( $('#container') , 'Sample' );

    function getfilelist( cont, root ) {

        $( cont ).addClass( 'wait' );


        $.post('Foldertree.php', { dir: root }, function( data ) {
            $( cont ).find( '.start' ).html( '' );
            $( cont ).removeClass( 'wait' ).append( data );

            if( 'Sample' == root ) 
                $( cont ).find('UL:hidden').show();
            else 
                $( cont ).find('UL:hidden').slideDown({ duration: 500, easing: null });

        });
    }

    $( '#container' ).on('click', 'LI A', function() {
        var entry = $(this).parent();

        if( entry.hasClass('folder') ) {
            if( entry.hasClass('collapsed') ) {

                entry.find('UL').remove();
                getfilelist( entry, escape( $(this).attr('rel') ));
                entry.removeClass('collapsed').addClass('expanded');
            }
            else {

                entry.find('UL').slideUp({ duration: 500, easing: null });
                entry.removeClass('expanded').addClass('collapsed');
            }
        } else {
            $( '#selected_file' ).text( "File:  " + $(this).attr( 'rel' ));
        }
    return false;
    });

});
</script>

</head>
<h1>TEST01</h1>
<body>
<button class="pure-button pure-button-active" onclick="sweet();">ScreenShot</button>
<button class="pure-button pure-button-active" id="open">Terminal</button>
<button class="pure-button pure-button-active" id="lights">Lights</button>
<div id="container"> </div>
<div id="selected_file"></div>      
</div>
</body>
</html>

PHP 脚本 /tty.js/static/Foldertree.php ：

<?php
class treeview {

    private $files;
    private $folder;

    function __construct( $path ) {

        $files = array();   

        if( file_exists( $path)) {
            if( $path[ strlen( $path ) - 1 ] ==  '/' )
                $this->folder = $path;
            else
                $this->folder = $path . '/';

            $this->dir = opendir( $path );
            while(( $file = readdir( $this->dir ) ) != false )
                $this->files[] = $file;
            closedir( $this->dir );
        }
    }

    function create_tree( ) {

        if( count( $this->files ) > 2 ) { /* First 2 entries are . and ..  -skip them */
            natcasesort( $this->files );
            $list = '<ul class="filetree" style="display: none;">';
            // Group folders first
            foreach( $this->files as $file ) {
                if( file_exists( $this->folder . $file ) && $file != '.' && $file != '..' && is_dir( $this->folder . $file )) {
                    $list .= '<li class="folder collapsed"><a href="#" rel="' . htmlentities( $this->folder . $file ) . '/">' . htmlentities( $file ) . '</a></li>';
                }
            }
            // Group all files
            foreach( $this->files as $file ) {
                if( file_exists( $this->folder . $file ) && $file != '.' && $file != '..' && !is_dir( $this->folder . $file )) {
                    $ext = preg_replace('/^.*\./', '', $file);
                    $list .= '<li class="file ext_' . $ext . '"><a href="#" rel="' . htmlentities( $this->folder . $file ) . '">' . htmlentities( $file ) . '</a></li>';
                }
            }
            $list .= '</ul>';   
            return $list;
        }
    }
}

$path = urldecode( $_REQUEST['dir'] );
$tree = new treeview( $path );
echo $tree->create_tree();

?>

【问题讨论】：

标签： javascript php jquery node.js web

【解决方案1】：

在 nodeJS 中，我们不使用文件来接受请求，我们使用路由和路径。因此，您需要制定一条路线来接受来自前端的请求。

在您的情况下，可以使用从var app = tty.createServer 返回的实例来完成，我们会将路由及其描述添加到app(instance of server created using tty)。

// sample route
app.get('/foo', function(req, res, next) {
  res.send('bar');
});

我猜你会想要像POST /folder-tree 这样的路线。然后你将不得不做类似的事情：

// sample route
app.post('/folder-tree', function(req, res, next) {

    // do your file processing using package named - fs

    // sending the response
    return res.status(200).json(/* finalFolderTree */);
});

然后您将使用 ajax 从前端发出请求，例如：

$.post('/folder-tree', { dir: root }, function( data ) {

【讨论】：