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;elsecurPath += "/" + 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="data:image/unknow.png";if(name.indexOf(".")==-1) src="data:image/dir.png";else if(name.endsWith(".png")||name.endsWith(".jpg")||name.endsWith(".gif"))src="data:image/image.png";else if(name.endsWith(".doc")||name.endsWith(".docx")||name.endsWith(".txt"))src="data: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方面的东西请参考其他方面的资料，下一部分开始实现文件下载和上传。

Struts2项目实战微云盘（六）主界面UI相关推荐

Struts2项目实战微云盘（四）：登录注册
一.本节说明进入github下载本项目(开源) 本节实现登录.注册的逻辑以及UI. 二.Struts相关配置在使用Struts前必选先配置Struts. Step1:引入Struts所需jar包 ...
Struts2项目实战微云盘（一）：项目分析
一.项目简述进入github下载本项目(开源) 这是一个模仿网盘的项目,主要是为了熟悉Struts2框架,该项目不涉及底层DAO操作,只涉及到Struts2的相关知识,底层DAO操作是使用数据单元进 ...
Struts2项目实战微云盘效果展示
项目下载地址进入github下载本项目(开源) 1.注册 2.登录 3.主页面 4.创建文件夹并上传三种类型文件 5.文件下载
Struts2项目实战微云盘（三）：DAO实现
一.本节说明本节主要实现用户对象.目录结点.数据单元.DAO接口.业务逻辑组件查看项目效果进入github下载本项目(开源) 二.Bean实现 1.User cn.lzf.bean包下的类 Us ...
Struts2项目实战微云盘（二）：项目结构
1.本节说明进入github下载本项目(开源) 本节主要介绍项目的结构 2.项目结构 //项目名 StrutsDemo1||_src|//该包存放各种控制器|_cn.lzf.action|//处理文 ...
Struts2项目实战微云盘（八）：Action异常处理
一.本节说明进入github下载该项目进入github查看该项目的配置指南本节是这个项目的最后一篇博文了,本节主要介绍Action的异常处理以及项目中出现的问题二.Action的异常处理 1. ...
Linux 15：基于C/S架构——微云盘
文章目录 1. 项目简介 2. 图解 3. 代码serfile&clifile(初始版) 4. 协议 5. 客户端 5.1 代码图解 6. 断点续传(服务器-客户端) 7. 秒传(客户端-服务 ...
12、Flutter - 项目实战 - 仿微信（六）聊天页面
Flutter - 项目实战 - 仿微信(六)聊天页面接上篇:11.Flutter - 项目实战 - 仿微信(五)通讯录详细代码参见Demo Demo地址 -> wechat_demo 其他 ...
【Android项目实战 | 从零开始写app (六) 】用TabLayout+ViewPager搭建App 框架主页面底部导航栏
本篇实现效果: 搭建app框架的方式有很多,本节主要用TabLayout+ViewPager搭建App框架,这种方式简单易实现,在主页中加载Fragment碎片,实现不同功能页面的切换效果图如下: 文 ...

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

Struts2项目实战微云盘（六）主界面UI相关推荐

最新文章

热门文章

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

Struts2项目实战 微云盘（六）主界面UI相关推荐

最新文章

热门文章

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

Struts2项目实战微云盘（六）主界面UI相关推荐