实验室设备借用系统

实验室设备借用系统

项目简介

本系统是一个基于 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. 数据统计

• 借用数据可视化
• 设备使用率统计

数据库设计

核心数据表

借用状态流转

待审批(0) → 审批通过(1) → 借用中(3) → 已归还(4) ↘ 审批驳回(2) ↘ 已逾期(5)

角色权限

环境要求

• Node.js >= 20.19.0
• MySQL >= 8.0
• pnpm (推荐) 或 npm

安装运行

1. 数据库配置

# 创建数据库mysql-uroot-pCREATE DATABASE laboratory_rent_system;# 导入数据mysql-uroot-plaboratory_rent_system<express/laboratory_rent_system.sql

2. 修改数据库连接配置

编辑express/config/db.js:

vardb=mysql.createConnection({database:"laboratory_rent_system",port:"3306",host:"localhost",user:"root",password:"你的密码",// 修改为你的MySQL密码});

3. 启动后端服务

cdexpresspnpminstallpnpmdev# 服务运行在 http://localhost:3000

4. 启动前端项目

cdadmin-vue3pnpminstallpnpmdev# 访问 http://localhost:5173

测试账号

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

注意事项

1. 确保 MySQL 服务已启动
2. 首次运行需要导入数据库脚本
3. 前后端需要同时运行
4. 默认后端端口 3000，前端端口 5173