README.md 7.0 KB
予书管理系统 - 前端
基于 Vue3 + Element Plus + Vite 的企业级管理系统前端
简介
予书管理系统前端采用最新的 Vue3 技术栈，配合 Element Plus 组件库，实现现代化的企业级后台管理界面。
技术栈
| 技术 | 说明 | 版本 |
|---|---|---|
| Vue | 渐进式 JavaScript 框架 | 3.x |
| Element Plus | Vue3 组件库 | 2.x |
| Vite | 下一代前端构建工具 | 4.x |
| Pinia | Vue 状态管理 | 2.x |
| Vue Router | 路由管理 | 4.x |
| Axios | HTTP 请求库 | 0.27.x |
| Sass | CSS 预处理器 | 1.x |
UI 特性
- 玻璃拟态（Glassmorphism）设计风格
- 深色/浅色主题切换
- 动态光效与流畅动画
- 响应式布局适配
- 自定义 Element Plus 组件样式
环境要求
- Node.js 16.0+
- npm 8.0+ 或 yarn 1.22+
安装部署
开发环境
# 进入项目目录
cd yushu-uivue3
# 安装依赖
npm install
# 启动开发服务
npm run dev
# 访问地址
http://localhost:80
生产环境
# 构建生产环境
npm run build:prod
# 构建测试环境
npm run build:stage
Nginx 部署
将 dist 目录下的文件部署到 Nginx：
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /prod-api/ {
proxy_pass http://localhost:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
项目结构
yushu-uivue3/
├── public/ # 静态资源
│ └── favicon.ico
├── src/
│ ├── api/ # API 接口定义
│ │ ├── system/ # 系统管理接口
│ │ ├── monitor/ # 系统监控接口
│ │ └── tool/ # 开发工具接口
│ ├── assets/ # 项目资源
│ │ ├── icons/ # 图标资源
│ │ ├── images/ # 图片资源
│ │ └── styles/ # 全局样式
│ │ ├── index.scss # 样式入口
│ │ ├── element-ui.scss # Element Plus 样式覆盖
│ │ ├── sidebar.scss # 侧边栏样式
│ │ └── variables.module.scss
│ ├── components/ # 公共组件
│ │ ├── Breadcrumb/ # 面包屑
│ │ ├── HeaderSearch/ # 头部搜索
│ │ ├── IconSelect/ # 图标选择器
│ │ ├── Pagination/ # 分页组件
│ │ ├── RightToolbar/ # 右侧工具栏
│ │ └── ...
│ ├── directive/ # 自定义指令
│ ├── layout/ # 布局组件
│ │ ├── components/ # 布局子组件
│ │ └── index.vue # 主布局
│ ├── plugins/ # 插件配置
│ ├── router/ # 路由配置
│ ├── store/ # Pinia 状态管理
│ │ └── modules/ # 状态模块
│ ├── utils/ # 工具函数
│ │ ├── request.js # Axios 封装
│ │ ├── auth.js # 认证相关
│ │ └── validate.js # 表单验证
│ └── views/ # 页面视图
│ ├── dashboard/ # 首页仪表盘
│ ├── system/ # 系统管理
│ │ ├── user/ # 用户管理
│ │ ├── role/ # 角色管理
│ │ ├── menu/ # 菜单管理
│ │ ├── dept/ # 部门管理
│ │ ├── post/ # 岗位管理
│ │ ├── dict/ # 字典管理
│ │ ├── param/ # 参数管理
│ │ ├── notice/ # 通知公告
│ │ ├── file/ # 文件管理
│ │ └── icon/ # 图标管理
│ ├── monitor/ # 系统监控
│ │ ├── online/ # 在线用户
│ │ ├── job/ # 定时任务
│ │ ├── operlog/ # 操作日志
│ │ ├── logininfor/ # 登录日志
│ │ ├── server/ # 服务监控
│ │ ├── cache/ # 缓存监控
│ │ └── druid/ # 数据源监控
│ ├── tool/ # 开发工具
│ │ ├── gen/ # 代码生成
│ │ ├── build/ # 表单构建
│ │ └── swagger/ # 接口文档
│ └── error/ # 错误页面
├── .env.development # 开发环境配置
├── .env.production # 生产环境配置
├── .env.staging # 测试环境配置
├── vite.config.js # Vite 配置
├── package.json # 项目依赖
└── README.md # 项目说明
环境配置
开发环境 (.env.development)
# 开发环境
VITE_APP_ENV = 'development'
# 接口地址
VITE_APP_BASE_API = '/dev-api'
# 代理目标地址
VITE_APP_PROXY_TARGET = 'http://localhost:8080'
生产环境 (.env.production)
# 生产环境
VITE_APP_ENV = 'production'
# 接口地址
VITE_APP_BASE_API = '/prod-api'
内置功能
系统管理
| 功能 | 说明 |
|---|---|
| 用户管理 | 系统用户配置与权限分配 |
| 角色管理 | 角色权限分配，支持数据权限范围划分 |
| 菜单管理 | 配置系统菜单、操作权限、按钮权限 |
| 部门管理 | 组织机构树形结构管理 |
| 岗位管理 | 用户职务配置 |
| 字典管理 | 系统常用固定数据维护 |
| 参数管理 | 系统动态配置参数 |
| 通知公告 | 系统通知信息发布 |
| 文件管理 | 系统文件上传与管理 |
| 图标管理 | 系统图标资源管理 |
系统监控
| 功能 | 说明 |
|---|---|
| 在线用户 | 当前活跃用户状态监控，支持强制下线 |
| 定时任务 | 任务调度管理与执行日志 |
| 操作日志 | 系统操作日志记录与查询 |
| 登录日志 | 用户登录记录与异常查询 |
| 服务监控 | CPU、内存、磁盘、JVM 等系统信息 |
| 缓存监控 | Redis 缓存信息与命令统计 |
| 数据源监控 | 数据库连接池状态监控 |
开发工具
| 功能 | 说明 |
|---|---|
| 代码生成 | 根据数据库表生成前后端代码 |
| 表单构建 | 可视化表单设计器 |
| 系统接口 | Swagger API 接口文档 |
致谢
本项目基于 RuoYi-Vue3 进行二次开发，感谢若依团队的开源贡献。