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方面的东西请参考其他方面的资料，下一部分开始实现文件下载和上传。