实验室设备借用系统
Vue3 + Express + MySQL 实验室设备借用管理平台,支持设备分类树、借用申请审批、实验室管理、个人借用记录与 ECharts 数据统计。
项目封面

项目概览
实验室设备借用系统毕业设计面向高校科研机构场景,提供设备 CRUD、树形分类、借用申请与审批流程。Vue3 + Pinia + Element Plus 前端配合 Express JWT 后端,工作台展示概览数据,适合设备管理与审批流类毕业设计。
项目说明
实验室设备借用系统
项目简介
本系统是一个基于 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. 数据库配置
# 创建数据库
mysql -u root -p
CREATE DATABASE laboratory_rent_system;
# 导入数据
mysql -u root -p laboratory_rent_system < express/laboratory_rent_system.sql
2. 修改数据库连接配置
编辑 express/config/db.js:
var db = mysql.createConnection({
database: "laboratory_rent_system",
port: "3306",
host: "localhost",
user: "root",
password: "你的密码", // 修改为你的MySQL密码
});
3. 启动后端服务
cd express
pnpm install
pnpm dev
# 服务运行在 http://localhost:3000
4. 启动前端项目
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
获取完整源码
技术分类
包含内容
适合方向
适合 Vue3 全栈、高校设备管理类毕业设计;也适合审批流程系统课程设计。需要借用状态流转、设备库存与多角色权限实现的同学可参考。
关于 AI源码
AI源码 整理计算机毕业设计、课程设计向的可运行项目参考,含说明文档与演示材料。完整源码请通过联系方式沟通获取。
相关推荐
查看全部 →
学生考勤管理系统
Spring Boot+Vue2 学生考勤管理系统,实现请假申请审批、考勤记录管理与 ECharts 统计可视化,采用 Shiro+JWT 权限认证,支持 Excel 批量导入导出,适合 Java 高校管理类毕业设计。

学生成绩管理系统
基于 Spring Boot + Vue 2 的学生成绩管理系统毕业设计,支持学业、德育、体育与智育多维度成绩录入、Excel 导入导出与 ECharts 可视化统计,含管理员、教师、学生三角色权限。

学生信息管理系统
轻量级 Spring Boot + Vue 学生信息管理系统毕业设计,提供学生档案增删改查、Shiro 权限控制、Swagger 接口文档与定时任务,前后端分离架构清晰易二次开发。

高校查分系统
高校查分系统毕业设计,Vue 3 + Vite + Element Plus + Express + MySQL,管理员/教师/学生三角色,支持成绩录入发布、Excel 导入导出与 ECharts 可视化。

大学生就业信息管理系统
Vue3 + Express + MySQL 大学生就业信息管理系统,学生端求职投递、企业端招聘发布、管理员端数据统计三端分离,覆盖简历、面试、合同签署全流程。

高校选课系统
Vue3 + Express + MySQL 高校选课管理系统,支持超级管理员、普通管理员、教师、学生四角色,涵盖院系、专业、班级、课程与选课全流程及动态菜单权限。