中国海洋大学2023春java-web期末大作业.zip

# java-web-exp ### 2023春季学期java课程作业 ##### 项目名称：在线文件管理器 ##### 演示视频链接 [演示视频链接](./README.assets/java-web演示视频.mov) ##### 技术栈： - 前端： - Vue2.x - axios ajax请求库 - bootstrap5.x ui库 - bootstrap icon icon库 - quill.js实现文本编辑 - 后端 - springboot3 - mysql数据库 ##### 开发周期：4天（6-17-6.20） ### 功能完成情况 - [x] 用户注册、登陆验证 - [x] 用户信息获取 - [x] 目录导航、子目录创建、目录下文件展示 - [x] 创建文本文件（txt） - [x] 批量上传文件 - [x] 查看文件、删除文件 - [x] 编辑文本文件并保存 - [x] 拖拽移动文件到文件夹内 - [x] 拖拽移动文件到上一级目录 - [x] 按住ctrl/command多选文件删除 - [x] 缓存用户上次查看的目录 - [x] 部分加了键绑定 比如esc退出查看 非流媒体空格也可以退出 - [ ] 后端的表单校验 ### 软件功能说明 注： 1. 进入目录或打开文件需要双击 2. 只有按住cmd或ctrl选择文件后删除图标才会出现 3. 拖拽功能仅支持单个拖拽（主要是没有实现多个同时被拖拽的样式问题） #### 核心功能为文件管理 - 登陆注册 - 首次访问没有登陆需要先注册登陆 - 注册与登陆页可以相互跳转 - 支持用户上传文件到当前目录 - 支持批量上传 - 最大单个文件不超过20m - 不支持上传目录 - 支持创建目录到当前目录 - 不支持选择路径创建，如需在创建到某个目录下，需先进入这个目录，或者创建完移动进去 - 可以创建文本（txt）文件到当前目录 - 不支持选择路径，只能创建txt，不需要写文件格式 - 支持网页上拖拽文件到文件夹或上一级目录 - 目前仅支持单个拖拽，拖拽过程会有样式提示，可以拖进去的背景色会变蓝 - 支持拖拽文件或目录 - 按住cmd/ctrl多选文件后删除 - 按住cmd或ctrl可以多选 - 删除按钮只有在多选后才出现 - 可以完整浏览用户所有的目录和文件，文件导航和返回上一级 - 文件导航功能完整，支持跳转到点击的位置 - 当前目录不可点击 - 非根目录文件列表第一个为...名称的文件夹，双击返回上一级目录 - 可以查看大部分流行文件（pdf，流媒体，图片等） - 不可查看的文件类型会提示不可查看 - 流媒体文件支持倍速控制，下载，音量控制等 - pdf支持下载 - 支持编辑txt文本文件并保存 - 如果打开的文件为txt文本文件，则自动进入编辑 - 退出或保存都可以保存文件到服务器 - 缓存用户上次查看的目录，下次进入网站时会自动跳转到上次访问的目录 - 组件销毁时会缓存当前用户访问的目录 - 下次进入该页面会优先显示上次访问的目录 #### 功能图  #### 核心功能实现介绍 ##### 文件列表的渲染 1. 数据库 file表 | id | user_id | parent_id | name | type | size | path | updated | status | | :----: | ------- | ------------------ | ------ | -------- | -------- | ------------ | -------- | -------- | | 文件id | 用户id | 父文件id（根为-1） | 文件名 | 文件类型 | 文件大小 | 文件存储路径 | 更新时间 | 是否删除 | 2. 接口返回的是当前用户所有的文件 3. 前端得到的是一个扁平的数组，需要处理成树状，核心实现如下 ```js // 处理文件 将扁平的列表变为树状 添加类型信息 handlerFileList(list,pid){ const result = []; // 遍历列表，找到指定 parentId 的对象 for (const item of list) { if (item.parent_id == pid) { // 递归调用 const children = this.handlerFileList(list, item.id); item.children = children result.push(item); } } return result; }, ``` 4. 初始化数据之后访问时只需要根据pid找到对应item的children即可，查询逻辑如下 ```js // 根据parent_id获取对应节点的children findChildren(pid){ if(pid == -1) return this.filelist; // pid为-1表示当前文件在根目录下，直接返回总的list return this.getFileListById(this.filelist,pid) }, // 递归查询对应pid的children getFileListById(list,pid){ for(const item of list){ if(item.id == pid) return item.children if(item.children && item.children.length > 0 ){ const result = this.getFileListById(item.children,pid) if(result){ return result } } } return null }, ``` ##### 目录导航功能 1. 导航： - 使用curPath对象数组变量存储导航栏信息，每个对象中包括当前目录的目录`id`和`folder_name` - 点击导航栏时获取该item下的id，通过上述`findChildren()`函数找到对应的`children` ```js // 点击导航栏进入目录 navigateTo(item){ let i = this.curPath.indexOf(item) // 获取点击item在路径中的索引 if(i == this.curIndex) return // 当前路径点击无效 this.curPathIndex = i this.curlist = this.findChildren(item.id) // 更新当前列表 this.curPath.splice(i+1) // 删除导航栏路径的元素 }, ``` 2. 点击目录进入 - 将目标元素的`children`赋值给当前列表 - 并将目标元素的对应信息push到导航栏路径 ##### 文件拖拽功能 注意点 - 将`tr`标签`draggable`属性设置为`true` - 给`tr`绑定`drapstart,dragover,dragleave,drop`方法 - 其中`dragover`需要禁止默认事件 1. dragstart - 开始拖动的函数，记录起始索引 - 代码： ```js // 开始拖动文件的起始索引 onDragStart(index){ this.curSelectIndex = index }, ``` 2. dragover - 拖动过程执行，检测当前鼠标下的元素是否为folder类型 如果是给该元素添加高亮样式 - 代码： ```js // 拖动过程 dragOver(event, index) { event.preventDefault() // 要阻止默认事件drop才能生效 if(index == -1){ // 上一级目录的index为-1 this.isHoveringGoBack = true return } const item = this.curlist[index] if(item.type == "folder"){ item.isHovering = true } } ``` 3. dragleave - 离开元素时执行 - 离开folder以后将对应样式移除 - 代码： ```js // 离开后让取消样式 dragLeave(item){ if(item == null){ this.isHoveringGoBack = false return } item.isHovering = false } ``` 4. drop - 鼠标松开执行，即释放拖动的元素 - 判断当前文件是否为文件夹或者是否是“上一层”的，如果是更新文件列表和导航路径 - 代码： ```js // 释放时 drop(event, index) { event.preventDefault(); const draggedIndex = this.curSelectIndex const draggedItem = this.curlist[draggedIndex]; var targetItem = null if(index != -1){ targetItem = this.curlist[index] targetItem.isHovering = false; } if(draggedIndex==index) return if(index == -1){ let pid = this.curPath[this.curPathIndex - 1].id this.changeFilePosition(draggedItem.id,pid) this.curlist.splice(draggedIndex, 1); return } if (targetItem.type === 'folder' ) { // 将拖拽的文件或文件夹放入目标文件夹中 targetItem.children.push(draggedItem); // 改变文件位置 this.changeFilePosition(parseInt(draggedItem.id),targetItem.id) // window.location.reload(); // 从原位置删除拖拽的文件或文件夹