WNDS (Wisteria Netdisk System) - MVC 架构图

系统概述

项目名称: Wisteria Netdisk System (WNDS)

项目版本: 1.0.0

项目描述: 一个基于Spring Boot + Vue3的现代化网盘系统，采用前后端分离架构，实现了文件管理、分享、回收站等功能。

架构模式: 基于Spring Boot的MVC架构 + Vue.js前端

Model (实体类)
View (前端界面)
Controller (控制器)
Service (业务逻辑)
Mapper (数据访问)
Model (模型层)
文件相关实体
com.wisteria.system.domain.FileInfo
文件信息实体类，包含文件ID、用户ID、文件名、大小、路径等属性
用户空间实体
com.wisteria.system.domain.UserSpace
用户存储空间实体，管理用户存储容量和使用情况
文件分享实体
com.wisteria.system.domain.FileShare
文件分享实体，包含分享链接、有效时间、访问密码等信息
系统用户实体
com.wisteria.system.domain.SysUser
系统用户实体，包含用户基本信息、权限等
兑换码实体
com.wisteria.system.domain.RedeemCode
兑换码实体，用于用户空间扩容等功能
邮箱验证码实体
com.wisteria.system.domain.EmailCode
邮箱验证码实体，用于用户注册和找回密码功能
Java
Spring Boot
MyBatis
MySQL
View (视图层)
文件管理界面
src/views/file/index.vue
文件管理主界面，提供文件列表展示、上传、下载、分享等功能
用户登录界面
src/views/login.vue
用户登录界面，支持用户名密码登录和验证码验证
文件分享界面
src/views/share/share/index.vue
文件分享界面，展示分享的文件列表和访问权限
系统管理界面
src/views/system/*
系统管理界面，包含用户、角色、菜单、部门等系统配置
回收站界面
src/views/recycle/index.vue
回收站界面，管理已删除但未彻底删除的文件
用户个人资料
src/views/system/user/profile/index.vue
用户个人资料页面，包含头像、密码修改等功能
Vue 3
Element Plus
Vite
JavaScript
Controller (控制器层)
文件信息控制器
com.wisteria.system.controller.FileInfoController
处理文件管理相关的HTTP请求，包括文件列表、上传、下载、删除等操作
文件分享控制器
com.wisteria.system.controller.FileShareController
处理文件分享相关的HTTP请求，包括创建分享链接、访问分享文件等
用户空间控制器
com.wisteria.system.controller.UserSpaceController
处理用户存储空间相关的HTTP请求，包括空间查询、扩容等
系统用户控制器
com.wisteria.web.controller.system.SysUserController
处理系统用户管理相关的HTTP请求，包括用户增删改查等
兑换码控制器
com.wisteria.system.controller.RedeemCodeController
处理兑换码相关的HTTP请求，包括兑换码生成、验证等
邮箱验证码控制器
com.wisteria.system.controller.EmailCodeController
处理邮箱验证码相关的HTTP请求，包括发送、验证验证码
Spring MVC
RESTful API
JWT
Spring Security
Service (业务逻辑层)
文件信息服务
com.wisteria.system.service.IFileInfoService & IFileInfoService
处理文件管理的核心业务逻辑，包括文件上传、下载、移动、删除、分享等业务流程
文件分享服务
com.wisteria.system.service.IFileShareService & IFileShareServiceImpl
处理文件分享的核心业务逻辑，包括生成分享链接、验证访问权限、统计访问次数等
用户空间服务
com.wisteria.system.service.IUserSpaceService & IUserSpaceServiceImpl
处理用户存储空间的业务逻辑，包括空间计算、扩容、使用情况统计等
系统用户服务
com.wisteria.system.service.ISysUserService & ISysUserServiceImpl
处理系统用户的业务逻辑，包括用户认证、权限管理、信息更新等
兑换码服务
com.wisteria.system.service.IRedeemCodeService & IRedeemCodeServiceImpl
处理兑换码的业务逻辑，包括生成、验证、使用兑换码等
Mapper (数据访问层)
文件信息数据映射器
com.wisteria.system.mapper.FileInfoMapper
负责文件信息实体与数据库表之间的数据映射操作
文件分享数据映射器
com.wisteria.system.mapper.FileShareMapper
负责文件分享实体与数据库表之间的数据映射操作
用户空间数据映射器
com.wisteria.system.mapper.UserSpaceMapper
负责用户空间实体与数据库表之间的数据映射操作
系统用户数据映射器
com.wisteria.system.mapper.SysUserMapper
负责系统用户实体与数据库表之间的数据映射操作
前端API接口层
文件API
src/api/file/file.js
前端与后端文件管理接口的通信层，封装了文件列表、上传、下载等API调用
分享API
src/api/share/share.js
前端与后端文件分享接口的通信层，封装了分享创建、访问等API调用
空间API
src/api/space/space.js
前端与后端用户空间接口的通信层，封装了空间查询、扩容等API调用
系统API
src/api/system/*
前端与后端系统管理接口的通信层，包含用户、角色、菜单等管理API

数据流向与处理流程

文件上传流程: 前端界面 → API调用 → 控制器 → 业务服务 → 数据访问层 → 数据库
文件访问流程: 前端界面 → API调用 → 控制器 → 业务服务 → 数据访问层 → 模型实体 → 前端界面
用户认证流程: 登录界面 → 认证API → 认证控制器 → 认证服务 → 用户实体 → JWT令牌 → 前端存储
文件分享流程: 分享界面 → 分享API → 分享控制器 → 分享业务服务 → 分享实体 → 数据库 → 分享链接生成

系统模块架构

WNDS-Server (后端服务)
  • wnds-admin: 系统启动模块，包含主要控制器，入口类RuoYiApplication
  • wnds-system: 核心业务模块，包含文件、用户、分享等业务逻辑
    • Controller: FileInfoController, FileShareController, UserSpaceController等
    • Service: IFileInfoService, IFileShareService, IUserSpaceService等接口及实现
    • Mapper: FileInfoMapper, FileShareMapper, UserSpaceMapper等数据访问接口
    • Domain: FileInfo, FileShare, UserSpace等实体类
  • wnds-common: 公共模块，包含工具类、常量、异常处理等
    • Utils: 文件处理、加密、HTTP请求等工具类
    • Core: 基础实体类、控制器基类、分页工具等
    • Exception: 各种业务异常处理
  • wnds-framework: 框架模块，包含安全、配置、拦截器等
    • Security: JWT认证、权限控制
    • Config: 数据源、Redis、定时任务等配置
    • Aspect: 日志记录、数据权限、限流等切面
  • wnds-generator: 代码生成模块，用于生成CRUD代码
    • Controller模板: 生成REST控制器代码
    • Service模板: 生成业务逻辑代码
    • Mapper模板: 生成数据访问代码
    • Vue模板: 生成前端页面代码
  • wnds-quartz: 定时任务模块，处理文件清理、分享过期等任务
    • Tasks: BlessingTask, ShareTask, RecycleTask等定时任务
    • Scheduler: 基于Quartz的任务调度
WNDS-Client (前端应用)
  • src/api: API接口定义，与后端服务通信
    • file/file.js: 文件管理API接口
    • share/share.js: 文件分享API接口
    • space/space.js: 用户空间API接口
    • system/*: 系统管理API接口
  • src/views: 视图组件，包含所有页面界面
    • file/index.vue: 文件管理主界面
    • share/share/index.vue: 文件分享界面
    • system/*: 系统管理界面
    • login.vue: 用户登录界面
  • src/components: 公共组件，可复用的UI组件
    • FileUpload: 文件上传组件
    • ImagePreview: 图片预览组件
    • VideoPlayer: 视频播放组件
    • PDFPreview: PDF预览组件
  • src/router: 路由配置，页面导航管理
  • src/store: 状态管理，使用Pinia管理全局状态

组件依赖关系

后端依赖关系 (MVC)
  • Controller → Service: 控制器依赖服务层进行业务处理
  • Service → Mapper: 服务层依赖数据访问层进行数据库操作
  • Service → Domain: 服务层操作实体对象
  • Mapper → Domain: 数据访问层映射实体对象到数据库
  • Common → All: 公共模块被其他所有模块依赖
前端依赖关系
  • Views → Components: 视图组件使用公共组件
  • Views → API: 视图组件调用API接口
  • API → Views: API返回数据给视图组件展示
  • Store ↔ Views: 状态管理与视图组件双向数据流

核心业务流程

文件上传流程
  1. 前端FileUpload组件选择文件
  2. 调用src/api/file/file.js中的上传API
  3. 后端FileInfoController接收上传请求
  4. FileInfoService处理文件上传业务逻辑
  5. 验证用户空间配额
  6. 保存文件到存储目录
  7. FileInfoMapper插入文件记录到数据库
  8. 更新用户空间使用情况
文件分享流程
  1. 用户在文件管理界面选择分享功能
  2. 前端调用分享API
  3. FileShareController处理分享请求
  4. FileShareService生成分享链接和提取码
  5. FileShareMapper保存分享记录到数据库
  6. 返回分享链接给前端展示
用户认证流程
  1. 用户在登录界面输入用户名密码
  2. 前端调用认证API
  3. SysLoginController处理认证请求
  4. SysLoginService验证用户凭据
  5. SysUserMapper查询用户信息
  6. 生成JWT令牌
  7. 返回令牌给前端存储

技术栈与框架

Spring Boot 2.5.15
Vue 3.4.31
Element Plus 2.7.6
MyBatis
MySQL
Redis
JWT
Druid
Vite
Axios