Не найден скрипт коннектора jqueryFileTree

0

Я пытаюсь создать веб-страницу, которая отображает дерево файлов. Я решил использовать jqueryFileTree с этого сайта: http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree/

В конце концов, я подключу это дерево до сервера. На данный момент, однако, я пытаюсь заставить его работать на моем компьютере под управлением Windows с узлом Node.js localhost.

Поскольку этот плагин jquery требует использования сценария соединителя (чтобы иметь возможность извлекать информацию о каталоге), я решил использовать их включенный скрипт соединителя python, jqueryFileTree.py.

Моя проблема в том, что localhost говорит мне, что скрипт python не может быть найден (ошибка 404). Тем не менее, я знаю, что я дал правильный путь для файла, потому что, когда я ввожу URL-адрес в браузер, я могу загрузить скрипт. Это поведение отбрасывает меня, потому что он говорит мне одно, а делает другое.

Ниже приводится весь мой код и информация.

Структура каталога:

|-public (localhost)
 |-connectors
  |-jqueryFileTree.py

Создание объекта jqueryFileTree:

$(window).load(
function()
{
    $('#fileTree').fileTree({
        root: '/',
        script: 'connectors/jqueryFileTree.py',
        expandSpeed: 500,
        collapseSpeed: 500,
        multiFolder: true
    },
    function(file)
    {
        alert(file);
    });
});

Здесь мое сообщение об ошибке:

Failed to load resource: the server responded with a status of 404 (Not Found): http://localhost:3700/connectors/jqueryFileTree.py

Ниже приведен код сценария jqueryFileTree и соединителя. Я не писал код. Это происходит, когда вы загружаете плагин с сайта, о котором я упоминал ранее.

Код плагина:

// jQuery File Tree Plugin
//
// Version 1.01
//
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 24 March 2008
//
// Visit http://abeautifulsite.net/notebook.php?article=58 for more information
//
// Usage: $('.fileTreeDemo').fileTree( options, callback )
//
// Options:  root           - root folder to display; default = /
//           script         - location of the serverside AJAX file to use; default = jqueryFileTree.php
//           folderEvent    - event to trigger expand/collapse; default = click
//           expandSpeed    - default = 500 (ms); use -1 for no animation
//           collapseSpeed  - default = 500 (ms); use -1 for no animation
//           expandEasing   - easing function to use on expand (optional)
//           collapseEasing - easing function to use on collapse (optional)
//           multiFolder    - whether or not to limit the browser to one subfolder at a time
//           loadMessage    - Message to display while initial tree loads (can be HTML)
//
// History:
//
// 1.01 - updated to work with foreign characters in directory/file names (12 April 2008)
// 1.00 - released (24 March 2008)
//
// TERMS OF USE
//
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC.
//
if(jQuery) (function($){

    $.extend($.fn, {
        fileTree: function(o, h) {
            // Defaults
            if( !o ) var o = {};
            if( o.root == undefined ) o.root = '/';
            if( o.script == undefined ) o.script = 'jqueryFileTree.py';
            if( o.folderEvent == undefined ) o.folderEvent = 'click';
            if( o.expandSpeed == undefined ) o.expandSpeed= 500;
            if( o.collapseSpeed == undefined ) o.collapseSpeed= 500;
            if( o.expandEasing == undefined ) o.expandEasing = null;
            if( o.collapseEasing == undefined ) o.collapseEasing = null;
            if( o.multiFolder == undefined ) o.multiFolder = true;
            if( o.loadMessage == undefined ) o.loadMessage = 'Loading...';

            $(this).each( function() {

                function showTree(c, t) {
                    $(c).addClass('wait');
                    $(".jqueryFileTree.start").remove();
                    $.post(o.script, { dir: t }, function(data) {
                        $(c).find('.start').html('');
                        $(c).removeClass('wait').append(data);
                        if( o.root == t ) $(c).find('UL:hidden').show(); else $(c).find('UL:hidden').slideDown({ duration: o.expandSpeed, easing: o.expandEasing });
                        bindTree(c);
                    });
                }

                function bindTree(t) {
                    $(t).find('LI A').bind(o.folderEvent, function() {
                        if( $(this).parent().hasClass('directory') ) {
                            if( $(this).parent().hasClass('collapsed') ) {
                                // Expand
                                if( !o.multiFolder ) {
                                    $(this).parent().parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                                    $(this).parent().parent().find('LI.directory').removeClass('expanded').addClass('collapsed');
                                }
                                $(this).parent().find('UL').remove(); // cleanup
                                showTree( $(this).parent(), escape($(this).attr('rel').match( /.*\// )) );
                                $(this).parent().removeClass('collapsed').addClass('expanded');
                            } else {
                                // Collapse
                                $(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                                $(this).parent().removeClass('expanded').addClass('collapsed');
                            }
                        } else {
                            h($(this).attr('rel'));
                        }
                        return false;
                    });
                    // Prevent A from triggering the # on non-click events
                    if( o.folderEvent.toLowerCase != 'click' ) $(t).find('LI A').bind('click', function() { return false; });
                }
                // Loading message
                $(this).html('<ul class="jqueryFileTree start"><li class="wait">' + o.loadMessage + '<li></ul>');
                // Get the initial file list
                showTree( $(this), escape(o.root) );
            });
        }
    });

})(jQuery);

Код сценария соединителя:

#
# jQuery File Tree
# Python/Django connector script
# By Martin Skou
#
import os
import urllib

def dirlist(request):
   r=['<ul class="jqueryFileTree" style="display: none;">']
   try:
       r=['<ul class="jqueryFileTree" style="display: none;">']
       d=urllib.unquote(request.POST.get('dir','c:\\temp'))
       for f in os.listdir(d):
           ff=os.path.join(d,f)
           if os.path.isdir(ff):
               r.append('<li class="directory collapsed"><a href="#" rel="%s/">%s</a></li>' % (ff,f))
           else:
               e=os.path.splitext(f)[1][1:] # get .ext and remove dot
               r.append('<li class="file ext_%s"><a href="#" rel="%s">%s</a></li>' % (e,ff,f))
       r.append('</ul>')
   except Exception,e:
       r.append('Could not load directory: %s' % str(e))
   r.append('</ul>')
   return HttpResponse(''.join(r))

Возможно, я опубликовал больше, чем нужно. Я хотел быть тщательным, а не отвечать и редактировать с дополнительной информацией. При этом, пожалуйста, не стесняйтесь обращаться за дополнительной информацией.

Я ценю любую помощь!

3 ответа

0

Я думаю, ваша проблема связана с:

script: 'connectors/jqueryFileTree.py',

Ваш javascript выполняется на интерфейсе (пользовательский браузер) и не может видеть файлы python (на сервере).

Вместо этого вы должны поместить URL-адрес, по которому доступно представление Django. Проверьте механизм маршрутизации URL-адреса Django (https://docs.djangoproject.com/en/1.11/topics/http/urls/), чтобы найти URL-адрес, связанный с вашим представлением ("dirlist").

0

пожалуйста, извините меня за то, что вы не проверили свой сценарий и не получили ответа. Тем не менее, у меня была та же проблема, и я решил ее решить, следуя путям, описанным в: http://pastebin.com/kVkTssdG и http://www.abeautifulsite.net/jquery-file-tree/

в деталях: 1) Я создал новую папку с именем "jQFTree" в подкаталоге "node_modules" моего проекта. 2) Я включил строки:

var jQFTree=require('jQFTree');

а также

app.post('/FileTree', jQFTree.handlePost);

в файл app.js в node.js. 3) Добавлен в мою форму html:

div(id="FileTree" class="fTre")

и скрипт соответственно:

var orig = window.location.origin + '/FileTree';
var servDir='Mats';//or Carps or Rugs
$("#FileTree").fileTree({
    root: servDir,
    script: orig
},
followed by callback function.

4) Ранее созданная папка jQFTree содержит только один файл с именем index.js со следующим кодом javascript:

//my Node.js module for jQuery File Tree
var path = require('path'); 
var fs = require('fs');
var util = require('util');
var stringHeader = "<ul class='jqueryFileTree' style='display: none;'>";
var stringFooter = "</ul>";
// arguments: path, directory name
var formatDirectory = 
    "<li class='directory collapsed'><a href='#' rel='%s/'>%s</a><li>";
// arguments: extension, path, filename
var formatFile = "<li class='file ext_%s'><a href='#' rel='%s'>%s</a></li>";
var createStatCallback = (function (res, path, fileName, isLast) {
    return function (err, stats) {
        if (stats.isDirectory()) {
            res.write(util.format(formatDirectory, path, fileName));
        }
        else {
            var fileExt = fileName.slice(fileName.lastIndexOf('.') + 1);
            res.write(util.format(formatFile, fileExt, path, fileName));
        }
        if (isLast) {
            res.end(stringFooter);
        }
    }
});

exports.handlePost = function (req, res) {
    //for safety; only directory name is available from the browser 
    //through the req.body.dir variable
    //but complete dir path in server is required for dir browsing
    // 'text/html'
    //console.log('Filetree handles post dir: '+ req.body.dir);
    res.writeHead(200, { 'content-type': 'text/plain' });
    res.write(stringHeader);
    // get a list of files
    var seeDir = req.body.dir;
    if (seeDir.indexOf('%5C') > -1 || seeDir.indexOf('%2F') > -1) {
        //directory path was returned as a subfolder from jQuery FileTree using URL encoding
        //decode it first:
        seeDir = decodeURIComponent(seeDir);
        //console.log('seeDir: '+seeDir+' __dirname:'+__dirname);
        if (seeDir.slice(-1) == "/" || seeDir.slice(-1) == "\\") {
            //last char either / (MS-windows) or \ (not MS-windows) is dropped
            seeDir = seeDir.slice(0, seeDir.length - 1)
            if (seeDir.indexOf('/') > -1) {
                seeDir = seeDir + '/';
            }
            else {
                seeDir = seeDir + '\\';
            }
        }
    }
    if (req.body.dir == 'Mats' || req.body.dir == 'Carps' || req.body.dir == 'Rugs') {
        //restricted to three sub dirs in server directory: public/MatsCarpsRugs/
        //console.log('.=%s', path.resolve('.'));
        //gives path to the above app.js calling this module (=as wanted)
        //combine path to requested directory:
        seeDir = path.join(path.resolve('.'), 'public', 'MatsCarpsRugs', req.body.dir);
        if (seeDir.indexOf('/')>-1){
            //web-browser not in ms-windows filesystem
            seeDir=seeDir+'/';
        }
        else{
            //web-browser is in ms-windows filesystem
            seeDir=seeDir+'\\';
        }
        //console.log('seeDir now: '+seeDir);
    }
    fs.readdir(seeDir, function (err, files) {
        var fileName = '';
        var path = '';
        var statCallback;
        if (files.length === 0) {
            path = util.format('%s%s', seeDir, fileName);
            statCallback = createStatCallback(res, path, fileName, true);
            fs.stat(path, statCallback);
            }
        for (var i = 0; i < files.length; i++) {
            fileName = files[i];
            path = util.format('%s%s', seeDir, fileName);
            var isLast = (i === (files.length - 1));
            statCallback = createStatCallback(res, path, fileName, isLast);
            fs.stat(path, statCallback);

        }
    });
}

Надеюсь, это поможет вам или кому-то еще решить проблему

0

Попробуйте одно: вместо этого используйте этот коннектор /jqueryFileTree.py, попробуйте использовать абсолютный URL-адрес, который вы использовали в браузере для загрузки сценария.

  • 0
    Я думал, что это может сработать. Я ранее пробовал это, и я получил ту же ошибку. Честно говоря, я пытался переместить сценарий по всей файловой иерархии, а также я пытался поиграть со многими вариантами пути в JavaScript. Мне не повезло с этим.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню