Struts2项目实战 微云盘（六）主界面UI

一、本节说明
进入github下载本项目（开源）
本节实现的是主界面UI

二、AJAX请求
在使用Jquery前先确认正确的引入了jquery。
1.获取文件结点
当文档加载完成后需要获取到用户根目录下的所有孩子。
二话不说定义向控制器请求数据的方法：

/*
获取指定路径的文件目录
*/
function getDirs(dir) {
    $.ajax({
        type : "POST",
        data : {
            "dirName" : dir
        },
        url : "dirAction!getDirs",
        dataType : "html",
        success : function(data) {
            parseData(data);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
        }
    });
}

2.创建文件夹
该方法负责接收用户输入文件夹名字，将文件夹名字以及被处理过的当前路径封装成参数提交给dirAction的createDir（）方法。curPath表示显示给用户的当前路径，格式是：/文件夹1/文件夹2，传递给Action的时候必须对其进行转换，不明白的话参考

Struts2项目实战 微云盘（一）：项目分析

，dealPath(curPath)就是对其转换地址的方法，稍后会对其定义。

/*
    创建文件夹
    */
function showInputAlert() {
    var filename = prompt("设置文件夹的名字");
    if (filename == null || filename.trim() == "") return;
    $.ajax({
        type : "POST",
        data : {
            "dirName" : filename,
            "path" : dealPath(curPath)
        },
        url : "dirAction",
        dataType : "html",
        success : function(data) {
            parseData(data);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
        }
    });
}

3.获取指定路径的下级文件目录

/*
获取指定路径的下级文件目录
*/
function getChilds(dir) {
    if(dir.indexOf(".")!=-1) return;
    if (curPath == '/')
        curPath += dir;
    else
        curPath += "/" + dir;
    var tmp = dealPath(curPath);
    $.ajax({
        type : "POST",
        data : {
            "path" : tmp
        },
        url : "dirAction!getDirs",
        dataType : "html",
        success : function(data) {
            $('#curPath').html(curPath);
            parseData(data);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
        }
    });
}

4.获取当前路径上一级目录

function getUpperDirs() {
    var j = curPath.lastIndexOf("/");
    curPath = curPath.substr(0, j);
    var tmp = dealPath(curPath);
    if (curPath == "")
        curPath = "/";
    $.ajax({
        type : "POST",
        data : {
            "path" : tmp
        },
        url : "dirAction!getDirs",
        dataType : "html",
        success : function(data) {
            $('#curPath').html(curPath);
            parseData(data);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
        }
    });
}

可以看到前面几个操作请求的地址是相同的，因为完成的功能基本是一致的。

5.在当前目录下删除多个文件或文件夹
form下有一个隐藏的path，在删除提交的时候需要先为其赋值，然后将整个表单序列化提交给dirAction!deleteDirs。

<form action="" method="post" id="form1">
        <input type="hidden" name="path" id="path">
        <div id="dirs"></div>
</form>

/*
删除选中的文件夹
*/
function deleteDirs() {
    var tmp = dealPath(curPath);
    $('#path').val(tmp);
    var dirs = $('#form1').serialize();
    if (dirs == "") return;
    $.ajax({
        type : "POST",
        data : dirs,
        url : "dirAction!deleteDirs",
        dataType : "html",
        success : function(data) {
            parseData(data);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
        }
    });
}

6.将对用户的路径映射为Action可处理的路径

function dealPath(path) {
    var tmp = path;
    var reg = /\//g; //正则表达式,g指定全局检索
    tmp = tmp.replace(reg, "#");
    if (tmp.charAt(0) == '#')
        tmp = tmp.substr(1);
    return tmp;
}

7.对数据解析
请求成功之后需要对数据解析，将data转化为Json对象并将数据显示在网页上。

/*
将Action返回的JSON字符串转化为对象
并将结果显示在视图上
*/
function parseData(data) {
    //解析为Json对象
    var obj = $.parseJSON(data);
    var html = "";
    //内容为空，将显示区域设为空白
    if (obj.dirNodes == null) $('#dirs').html('');
    else {
        for (i = 0; i < obj.dirNodes.length; i++) {
            //获取文件结点相关属性
            var name = obj.dirNodes[i].name;
            var url=obj.dirNodes[i].url;

            //根据文件类型设置其图标
            var src="image/unknow.png";
            if(name.indexOf(".")==-1) src="image/dir.png";
            else if(name.endsWith(".png")||name.endsWith(".jpg")||name.endsWith(".gif"))
                src="image/image.png";
            else if(name.endsWith(".doc")||name.endsWith(".docx")||name.endsWith(".txt"))
                src="image/doc.png";
            html += "<div class='dir_item'><input type=\"checkbox\" name=\"dirName\" value=\"" +
                name + "\"/><img src='"+src+"'/>";

            //如果该节点是文件，那么给它设置下载链接
            if(url!=null) html+="<a href=\"downloadAction?inputPath="+url+"&fileName="+name+"\">" + name + "</a></div>";
            //如果是文件夹，点击它之后会进入它的内部
            else html+="<a onclick=\"getChilds('" + name + "')\">" + name + "</a></div>";
        }
        $('#dirs').html(html);
    }
}

三、文件上传UI

• 原生的file表单很丑，也很不灵活，怎么改进呢？
  首先创建一个隐藏的表单

<s:form action="uploadAction" enctype="multipart/form-data" id="form2" method="post" style="display:none;">
    <input type="hidden" name="dirPath" id="dirPath">
    <s:file name="upload" style="width:150px;" id="file" onchange="submitUpload()" value="选择文件"></s:file>
</s:form>

• 通过<label></label>标签将它与表单关联起来，当点击上传文件时会触发file弹出文件选择框

<li><a><label for="file">上传文件</label></a></li>

• 同时我们监听了file表单的onchange（）方法，当选择文件改变时会触发我们的submitUpload()，该方法为了实现选择文件后自动上传。

/*
上传文件
 */
function submitUpload() {
    if($('#file').val()!="选择文件"){
        var tmp = dealPath(curPath);
        $('#dirPath').val(tmp);
        $("#form2").ajaxSubmit(function (data) {
            parseData(data);
        });
        $('#file').val("选择文件");
    }
}

五、小结
UI部分到此结束，可以发现我只介绍了一点点关于html以及css方面的东西，因为具体的实现逻辑是关键，html、css方面的东西请参考其他方面的资料，下一部分开始实现文件下载和上传。