实验室设备借用系统
项目简介
本系统是一个基于 Vue3 + Express + MySQL 的实验室设备借用管理平台，用于高校或科研机构管理实验室设备的借用流程。系统支持多角色权限管理，包括设备管理、借用申请、审批流程、数据统计等功能。
技术栈
前端
- Vue 3.5 + Vite 7
- Vue Router 4 (路由管理)
- Pinia 3 (状态管理)
- Element Plus 2.8 (UI组件库)
- ECharts 5.5 (数据可视化)
- Axios (HTTP请求)
- Day.js (日期处理)
后端
- Node.js + Express 4
- MySQL 8.0 (数据库)
- JWT (身份认证)
- Multer (文件上传)
- bcryptjs (密码加密)
项目结构
laboratory-rent-system/
├── admin-vue3/ # 前端项目
│ ├── src/
│ │ ├── api/ # API接口
│ │ ├── assets/ # 静态资源
│ │ ├── composables/ # 组合式函数
│ │ ├── layouts/ # 布局组件
│ │ ├── router/ # 路由配置
│ │ ├── stores/ # Pinia状态管理
│ │ ├── utils/ # 工具函数
│ │ ├── views/ # 页面组件
│ │ │ ├── borrow/ # 借用管理
│ │ │ ├── equipment/ # 设备管理
│ │ │ ├── system/ # 系统管理
│ │ │ └── user/ # 个人中心
│ │ ├── App.vue
│ │ └── main.js
│ └── package.json
│
├── express/ # 后端项目
│ ├── bin/ # 启动脚本
│ ├── config/ # 配置文件
│ │ ├── db.js # 数据库配置
│ │ └── index.js # 全局配置
│ ├── routes/ # 路由接口
│ │ ├── sys/ # 系统管理接口
│ │ ├── borrow.js # 借用管理
│ │ ├── equipment.js # 设备管理
│ │ ├── equipment-category.js # 设备分类
│ │ ├── laboratory.js # 实验室管理
│ │ ├── statistics.js # 数据统计
│ │ └── user-center.js # 个人中心
│ ├── util/ # 工具函数
│ ├── laboratory_rent_system.sql # 数据库脚本
│ └── package.json
│
└── 图片资源/ # 项目截图功能模块
1. 工作台 (Dashboard)
- 系统概览数据展示
- 快捷操作入口
2. 设备管理
- 设备列表: 设备信息的增删改查，支持按分类、实验室筛选
- 设备分类: 树形分类管理（支持父子级分类）
- 实验室管理: 实验室信息维护
3. 借用管理
- 我的借用: 查看个人借用状态
- 借用申请: 提交设备借用申请
- 审批管理: 管理员审批借用申请
- 借用记录: 查看所有借用历史记录
4. 个人中心
- 借用历史: 个人借用记录查询
- 个人信息: 修改个人资料
5. 系统管理
- 用户管理: 用户账号的增删改查
- 角色管理: 角色权限配置
- 菜单管理: 动态菜单配置
6. 数据统计
- 借用数据可视化
- 设备使用率统计
数据库设计
核心数据表
| 表名 | 说明 |
|---|---|
| sys_user | 系统用户表 |
| sys_role | 角色表 |
| sys_menu | 菜单表 |
| sys_role_menu | 角色菜单关联表 |
| laboratory | 实验室表 |
| equipment | 设备表 |
| equipment_category | 设备分类表 |
| borrow_record | 借用记录表 |
| equipment_maintenance | 设备维护记录表 |
| system_notice | 系统公告表 |
借用状态流转
待审批(0) → 审批通过(1) → 借用中(3) → 已归还(4)
↘ 审批驳回(2)
↘ 已逾期(5)角色权限
| 角色 | 权限说明 |
|---|---|
| 超级管理员 | 系统最高权限，拥有所有功能 |
| 实验室管理员 | 管理实验室设备和借用审批 |
| 教师 | 可借用设备，查看统计数据 |
| 学生 | 可借用设备，查看个人借用记录 |
环境要求
- Node.js >= 20.19.0
- MySQL >= 8.0
- pnpm (推荐) 或 npm
安装运行
1. 数据库配置
bash
# 创建数据库
mysql -u root -p
CREATE DATABASE laboratory_rent_system;
# 导入数据
mysql -u root -p laboratory_rent_system < express/laboratory_rent_system.sql2. 修改数据库连接配置
编辑 express/config/db.js:
javascript
var db = mysql.createConnection({
database: "laboratory_rent_system",
port: "3306",
host: "localhost",
user: "root",
password: "你的密码", // 修改为你的MySQL密码
});3. 启动后端服务
bash
cd express
pnpm install
pnpm dev
# 服务运行在 http://localhost:30004. 启动前端项目
bash
cd admin-vue3
pnpm install
pnpm dev
# 访问 http://localhost:5173测试账号
| 用户名 | 密码 | 角色 |
|---|---|---|
| admin | 123456 | 超级管理员 |
| lab_manager | 123456 | 实验室管理员 |
| teacher_zhang | 123456 | 教师 |
| student_li | 123456 | 学生 |
API接口
系统管理
POST /api/sys/user/login- 用户登录GET /api/sys/user/list- 用户列表GET /api/sys/role/list- 角色列表GET /api/sys/menu/list- 菜单列表
设备管理
GET /api/equipment/list- 设备列表POST /api/equipment/add- 添加设备PUT /api/equipment/update- 更新设备DELETE /api/equipment/delete/:id- 删除设备
借用管理
GET /api/borrow/list- 借用记录列表POST /api/borrow/apply- 提交借用申请PUT /api/borrow/approve- 审批借用申请PUT /api/borrow/return- 归还设备
实验室管理
GET /api/laboratory/list- 实验室列表POST /api/laboratory/add- 添加实验室
数据统计
GET /api/statistics/overview- 统计概览
项目截图
项目演示视频: 实验室设备借用系统.mp4
注意事项
- 确保 MySQL 服务已启动
- 首次运行需要导入数据库脚本
- 前后端需要同时运行
- 默认后端端口 3000，前端端口 5173