（强烈推荐）基于SSM和BootStrap的共享云盘系统设计（项目实现：文件/文件夹列表显示）
（强烈推荐）基于SSM和BootStrap的共享云盘系统设计（项目实现：文件/文件夹列表显示）
天道Vax的时间宝藏
发布于 2021-08-11 14:44:28
发布于 2021-08-11 14:44:28
文章被收录于专栏：用户5305560的专栏
重 点：前、后台数据交互、Ajax异步加载数据、文件读取
难 点：文件读取
内 容：登录后，根据当前用户获取相应的用户和文件信息，并将相关信息显示在主页。
图1 文件显示页面
1. 创建核心页面，完善布局
在WEB-INF的jsp文件夹下，创建index.jsp、top.jsp、menu.jsp、main.jsp，并将index.jsp作为主框架页面，通过@include指令引入其他3个页面，布局效果图如下所示；
图2 页面布局图
index.jsp页面的核心代码，如下所示；
<div class="content">
<div class="top">
<%@include file="top.jsp"%>
</div>
<div class="bottom" onclick="">
<div class="left">
<%@include file="menu.jsp"%>
</div>
<div class="right">
<jsp:include page="main.jsp"></jsp:include>
</div>
</div>
</div>top.jsp页面的核心代码，如下所示；
<div class="container">
<div class="navbar-header" style="float: left;">
<a class="navbar-brand" href="index.action" style="margin-left: 100px;">网盘</a>
<a class="navbar-brand" href="#">分享</a>
<a class="navbar-brand" href="#" target="main">更多</a>
</div>
<div id="navbar" style="float: right;">
<ul class="nav navbar-nav">
<li class="dropdown" style="width: 100px">
<a href="#" class="dropdown-toggle"> <img src="${pageContext.request.contextPath }/img/titalpicture.jpg"/> ${username}</a>
<ul class="dropdown-menu">
<li><a href="#">个人中心</a></li>
<li><a href="user/logout.action">退出登录</a></li>
</ul>
</li>
<li><a href="#" class="glyphicon glyphicon-bell" title="系统通知"></a></li>
<li><a href="#" class="glyphicon glyphicon-list-alt" title="意见反馈"></a></li>
</ul>
</div>
</div>menu.jsp页面的核心代码，如下所示；
<div style="padding: 10px 0px 0px 0px; margin: 0px;">
<ul class="ul">
<li><a href="index.action"> <span>全部文件</span></a></li>
<li><a onclick="return searchFileType('image')"> <span>图片</span></a></li>
<li><a onclick="return searchFileType('office')"> <span>文档</span></a></li>
<li><a onclick="return searchFileType('vido')"> <span>视频</span></a></li>
<li><a onclick="return searchFileType('audio')"> <span>音乐</span></a></li>
<li><a onclick="return searchFileType('docum')"> <span>文本</span></a></li>
<li><a onclick="return searchFileType('file')"> <span>其它</span></a></li>
<li><a onclick="return openMyShare()"> <span>我的分享</span></a></li>
<li><a href="file/recycleFile.action"> <span>回收站</span></a></li>
</ul>
</div>
<div>
<span id="countSize">${countSize }</span>/<span>${totalSize }</span>
</div>
main.jsp页面的核心代码，如下所示；
<div>
<div>
<a>上传文件 <input type="file" onchange="upload()" multiple="multiple"/></a>
</div>
<div id="menubutton">
<a onclick="return buildfile()">新建文件夹</a>
<div class="btn-group" role="group" id="operation" style="margin-left: 10px; margin-top: 10px;">
<a href="#" onclick="return share(this)">分享</a>
<a href="#" id="download" onclick="return downloadFileSelect(this)">下载</a>
<a href="#" id="delete" onclick="return deleteall()">删除</a>
<a onclick="return rename()">重命名</a>
<a onclick="return copyto()">复制到</a>
<a onclick="return moveto()">移动到</a>
</div>
<div style="width: 200px; float: right;">
<input type="text"> <span onclick="searchFile(this)"></span>
</div>
<div>
<div class="panel-heading" id="pathnav">
<a href="index.action">yun盘 ></a>
</div>
<table id="mytable">
<thead>
<tr>
<th><input id="checkAll" type="checkbox"></th>
<th colspan="4" width="60%">文件名</th>
<th>大小</th>
<th>修改时间</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</div>2. 在页面初始化时，使用AJax请求主页数据
在WebContent/js目录下创建index.js文件，并该文件引入index.jsp文件中；在index.js中添加getFile()方法，用于加载文件列表，代码如下所示；
function getFiles(path) {
$.post("file/getFiles.action", {
"path" : path
}, function(data) {
if (data.success) {
currentPath = path;
$("#list").empty();
$("#checkAll").prop("checked",false);
$.each(data.data, function() {
$("#list").append('<tr><td><input onclick="selectCheckbox()" name="check_name" type="checkbox" aria-label="..."></td>' +
'<td width="60%"><a href="#" prePath="' + path +'" fileType="' + this.fileType +'" onclick="return openFile(this)">
<span class="glyphicon glyphicon-'+this.fileType+'" style="margin-right: 10px"></span>' + this.fileName + '</a></td>' + '<td width="32px">' + '</td>' +
'<td width="32px"><a href="#"' +
'class="glyphicon glyphicon-download-alt" title="下载" onclick="return downloadFile(this)"></a></td>' +
'<td width="32px"><a href="#"' +
'class="glyphicon glyphicon-option-horizontal" title="更多"></a></td>' +
'<td>' + this.fileSize + '</td>' +
'<td>' + this.lastTime + '</td></tr>');
});
}
});
}3. 添加文件对象实体类
在cn.allene.yun.pojo包中，创建FileCustom.java用于封装文件的对象信息，代码如下所示；
public class FileCustom {
private String fileName;
private String fileType;
private String fileSize;
private String lastTime;
private String filePath;
private String currentPath;
public String getCurrentPath() {
return currentPath;
}
public void setCurrentPath(String currentPath) {
this.currentPath = currentPath;
}
/省略get/set方法
}4. 控制层添加获取文件列表的方法
在cn.allene.yun.controller包的FileController.java文件中，添加getFiles()方法，用户获取文件信息；根据当前所传入的路径，获取该路径对应的所有文件，然后返回前台显示，代码如下所示；
/**
* 获取文件列表
*
* @param path
* 路径
* @return Json对象
*/
@RequestMapping("/getFiles")
public @ResponseBody Result<List<FileCustom>> getFiles(String path) {
String realPath = fileService.getFileName(request, path);
List<FileCustom> listFile = fileService.listFile(realPath);
Result<List<FileCustom>> result = new Result<List<FileCustom>>(325,
true, "获取成功");
result.setData(listFile);
return result;
}5. 文件业务层获取文件路径
在FileService类中添加getFileName()方法，用于结合用户名生成当前用户的文件路径，代码如下所示；
/**
* 获取文件路径
*
* @param request
* @param fileName
* @return
*/
public String getFileName(HttpServletRequest request, String fileName) {
if (fileName == null) {
fileName = "";
}
String username = UserUtils.getUsername(request);
return getRootPath(request) + username + File.separator + fileName;
}
/**
* 根据用户名获取文件路径
*
* @param request
* @param fileName
* @param username
* @return
*/
public String getFileName(HttpServletRequest request, String fileName, String username) {
if (username == null) {
return getFileName(request, fileName);
}
if (fileName == null) {
fileName = "";
}
return getRootPath(request) + username + File.separator + fileName;
}6. 文件业务层获取文件信息
在FileService类中添加()方法，用于根据getFileName()所获取的文件路径，继而获取该路径下所对应的所有文件，此处信息是从文件中获取。
/**
* 获取路径下的文件类别
*
* @param realPath
* 路径
* @return
*/
public List<FileCustom> listFile(String realPath) {
//对文件操作 需要new出一个文件，代表指向该文件内存地址
File[] files = new File(realPath).listFiles();
List<FileCustom> lists = new ArrayList<FileCustom>();
if (files != null) {
for (File file : files) {
if (!file.getName().equals(User.RECYCLE)) {
FileCustom custom = new FileCustom();
custom.setFileName(file.getName());
custom.setLastTime(FileUtils.formatTime(file.lastModified()));
custom.setCurrentPath(realPath);
if (file.isDirectory()) {
custom.setFileSize("-");
} else {
custom.setFileSize(FileUtils.getDataSize(file.length()));
}
custom.setFileType(FileUtils.getFileType(file));
lists.add(custom);
}
}
}
return lists;
}7. 控制层添加请求数据的方法
在cn.allene.yun.controller包中添加IndexController.java，在该类中添加index()方法，用于获取用户及该用户的文件信息，获取信息后返回到index.jsp并在页面中显示信息。用户登录成功后，重定向跳转至该action，代码如下所示；
@Controller
public class IndexController {
@Autowired
private UserService userService;
/**
* 主页面页面
* @param request
* @return
*/
@RequestMapping("/index")
public String index(HttpServletRequest request){
String username = UserUtils.getUsername(request);
String countSize = userService.getCountSize(username);
request.setAttribute("countSize", countSize);
return "index";
}
}8. 业务层获取用户存储文件大小
在UserService类中添加getCountSize()方法，从dao层根据现登录的用户名来获取此用户已上传文件的大小，代码如下所示；
@Service
public class UserService {
@Autowired
private UserDao userDao;
public User findUser(User user) {
try {
user.setPassword(UserUtils.MD5(user.getPassword()));
User exsitUser = userDao.findUser(user);
return exsitUser;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
public boolean addUser(User user){
try {
user.setPassword(UserUtils.MD5(user.getPassword()));
userDao.addUser(user);
} catch (Exception e) {
e.printStackTrace();
return false;
}
return true;
}
public User findUser(String username) {
User user = null;
try {
user = userDao.findUserByUserName(username);
} catch (Exception e) {
e.printStackTrace();
return user;
}
return user;
}
public String getCountSize(String username){
String countSize = null;
try {
countSize = userDao.getCountSize(username);
} catch (Exception e) {
e.printStackTrace();
return countSize;
}
return countSize;
}
}9. 数据层获取用户存储文件大小
在UserDao.xml文件中添加SQL语句，用于查询用户已上传文件的大小，代码如下所示；
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.allene.yun.dao.UserDao" >
……
<select id="getCountSize" parameterType="java.lang.String" resultType="java.lang.String">
select countSize from user where username = #{username}
</select>
……
</mapper>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/07/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
