【项目训练营】Spring Boot从零实现网盘系统

8842-Spring Boot 从零实现网盘系统-项目训练营-private/01-420083-项目演示.sy.md

@@ -0,0 +1,35 @@
+# 项目演示
+
+#### 下载运行项目
+
+首先，请打开线上实操环节，复制以下命令后在终端中执行：
+
+```bash
+cd /home/project
+sudo service mysql start
+wget https://labfile.oss.aliyuncs.com/courses/3472/qiwen-file-1.0.0-SNAPSHOT.jar
+java -jar qiwen-file-1.0.0-SNAPSHOT.jar
+```
+
+上述命令中，包含：
+
+1. 启动数据库。
+2. 下载项目代码并执行。
+
+执行全部命令以后，注意看控制台。如果看到 “Started Application in 15.483 seconds” 等字样，说明项目运行成功。
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/5f8758e91ae94449c88dc222ee0851d3-0/wm)
+
+#### 查看项目效果
+
+如果运行成功，请点击环境右边工具栏的「Web 服务」。
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/82dae333b182c7e9de21db93abbff6ad-0/wm)
+
+如果一切顺利，你将可以看到完整的项目登录页面了。
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/72018fac466bc78895b2df7ea257c890-0/wm)
+
+点击登录进入系统，系统界面如下
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/0a8107321e73a7430816f433c8232b9f-0/wm)

8842-Spring Boot 从零实现网盘系统-项目训练营-private/02-466260-需求文档.wd.md

@@ -0,0 +1,152 @@
+# 需求文档
+
+## 项目简介
+
+### 定位
+
+采用前后端分离的模式来开发 Web 端网盘系统，具有用户注册、登录功能，单个和批量操作文件的功能。
+
+### 特色
+
+1. 使用前后端分离的模式搭建工程，开发系统，使开发者能够各司其职。
+2. 后台使用业内目前最流行的Spring Boot2作为基础框架开发，集成优秀开源项目 Knife 使前端开发者可浏览和调试接口文档。
+3. 前端使用 Vue.js 框架及其生态，结合 Element UI 组件库开发页面，编写功能。
+
+### 项目架构
+
+#### 项目结构图
+
+<img src="https://doc.shiyanlou.com/courses/8842/1557563/24476257a474cae477a6b23cc238ef7d-0/wm" style="display: block; margin: 0 auto; width: 90%;">
+
+#### 技术架构图
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/be34a28af734ea3b6da8afa72ba9987a-0/wm)
+
+### 一般约束
+
+1. 开发环境约束：
+   - 开发工具：VSCode
+   - 开发语言：HTML5、CSS3、JavaScript、Java、SQL
+2. 时间约束：项目开发周期为 14 个工作日，需要开发者合理规划时间。
+3. 技术约束：Vue.js、Element UI、Axios、Stylus、Spring Boot、MySQL、MyBatis。
+4. 其他约束：开发者需在完成项目需求的前提下，考虑编码规范、页面优化等因素。
+
+## 详细功能说明
+
+### 注册页
+
+顶部导航栏所有页面共享，使用 Element UI 的 [NavMenu 导航菜单](https://element.eleme.cn/#/zh-CN/component/menu) 实现；内容区使用 [Form 表单](https://element.eleme.cn/#/zh-CN/component/form) 实现，表单校验规则使用 Element  UI 内置的 [async-validator](https://github.com/yiminghe/async-validator) 来实现，表单项中的组件使用 [Input 输入框](https://element.eleme.cn/#/zh-CN/component/input)、[Button 按钮](https://element.eleme.cn/#/zh-CN/component/button) 实现。
+
+1. 用户须注册账号后才能登录系统
+2. 注册页面表单项包含 **用户名**， **手机号**， **密码**，页面设计如下：
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/4b793f11d75ff9591498006f6b83564d-0/wm)
+
+### 登录页
+
+页面使用 Element UI 的 [Form 表单](https://element.eleme.cn/#/zh-CN/component/form) 实现，表单校验规则使用 Element  UI 内置的 [async-validator](https://github.com/yiminghe/async-validator) 来实现，表单项中的组件使用 [Input 输入框](https://element.eleme.cn/#/zh-CN/component/input)、[Button 按钮](https://element.eleme.cn/#/zh-CN/component/button) 实现。
+
+用户使用注册的**手机号**和**密码**在登录页面进行账户验证后，即可进入系统，登录页面设计如下：
+
+非法输入校验：用户输入错误的手机号或密码，页面提示手机号或密码错误
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/24dd663fd25459b89cc32dc276a0725a-0/wm)
+
+### 网盘主页
+
+#### 静态页面布局
+
+主页使用了 Element UI 用于布局的容器组件 el-aside 侧边栏容器和 el-main 主要区域容器布局，组成了主页面布局。
+
+左侧分类：**全部**、**图片**、**文档**、**视频**、**音乐**、**文档**
+
+右侧主显示区域：**文件展示及操作**，使用了 [Table 表格](https://element.eleme.cn/#/zh-CN/component/table) 来实现
+
+效果图如下：
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/05bab2d5d197f755a3c97543b908d2a6-0/wm)
+
+#### 文件类型分类查看
+
+这部分使用了 Element UI 的 [NavMenu 导航菜单](https://element.eleme.cn/#/zh-CN/component/menu) 实现。
+
+点击左侧手风琴按钮，即可按照文件类型分类查看文件
+
+#### 新建文件夹
+
+使用 Element UI 的 [Dialog 对话框](https://element.eleme.cn/#/zh-CN/component/dialog) 来实现。
+
+在全部分类下，点击新建文件夹，可以进行文件夹的创建，如下
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/f0041b27d5b5c04621746b7736391cb8-0/wm)
+
+#### 上传文件
+
+上传组件使用开源项目 [vue-simple-uploader](https://github.com/simple-uploader/vue-uploader/blob/master/README_zh-CN.md) ，支持文件分片上传
+
+在全部分类下，点击顶部上传文件按钮，可以进行文件上传，支持单个文件上传及批量文件上传，上传的文件会保存到当前停留的文件夹目录下，如下：
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/de36864e8aaef99b87b1f63e18c97378-0/wm)
+
+#### 批量删除文件
+
+批量选中文件使用 Table 组件的多选属性来实现。
+
+在全部分类下，勾选文件左侧复选框，即可对文件批量进行删除操作，点击取消可撤回操作，如下：
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/faf31ee9be2c5ab215b21a2c2ea5e9d5-0/wm)
+
+#### 批量移动文件
+
+对话框内的目录树使用了 Element UI 的 [Tree 树形控件](https://element.eleme.cn/#/zh-CN/component/tree) 来展示。
+
+在全部分类下，勾选文件左侧复选框，即可对文件进行批量移动操作，点击取消可撤回操作，如下：
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/9566523e9399414ddac6f7992da5e943-0/wm)
+
+#### 批量下载文件
+
+下载功能使用 `<a>`标签来实现。
+
+在全部分类下，勾选文件左侧复选框，即可对文件进行批量下载，如下：
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/ee02d1a4a50ac165202a139aae0fda45-0/wm)
+
+#### 文件表格列显隐设置
+
+对话框内使用 Element UI 的 [CheckBox 多选框](https://element.eleme.cn/#/zh-CN/component/checkbox) 来实现。
+
+点击右上角设置显示列，可以对当前页面表格列显隐进行设置
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/8c68b83da61e370197703ee21b1243fd-0/wm)
+
+#### 单个文件操作
+
+在全部分类下，点击表格操作列右侧 + - 按钮，可以切换操作样式，可以平铺或者下拉，每个文件右侧操作可单独对文件进行删除、移动、重命名、下载操作
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/6ae47541ec080b1842259d9af2e4ca41-0/wm)
+
+#### 图片分类下的功能介绍
+
+分类切换使用 Element UI 的 [CheckBox 多选框](https://element.eleme.cn/#/zh-CN/component/checkbox) 来实现。
+
+点击图片分类，右上角有三种可选的展示类型，分别为列表、网格、时间线
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/011b5f08f5e3dae2d585b6a6ef0eb562-0/wm)
+
+时间线展示，使用原生的 `<ul>` 来实现。
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/472a5ce63aeba5614273dc6b9a3623f7-0/wm)
+
+点击图片即可预览，可切换上一张、下一张、旋转、缩放。缩放功能使用 Element UI 的 [Progress 进度条 ](https://element.eleme.cn/#/zh-CN/component/progress)来实现。
+
+![图片描述](https://doc.shiyanlou.com/courses/8842/1557563/aff963f3f9ca1339892f414e9eeaf8c3-0/wm)
+
+### 项目版本规划
+
+**版本迭代**
+
+| 版本号 | 修订时间   | 修订说明                                            | 修订人 |
+| ------ | ---------- | --------------------------------------------------- | ------ |
+| V1.0   | 2022-02-24 | 网盘系统全部功能实现                            |  MAC   |
+| V2.0   | 待定       |                                                     |        |