实验室设备借用系统项目简介本系统是一个基于 Vue3 Express MySQL 的实验室设备借用管理平台用于高校或科研机构管理实验室设备的借用流程。系统支持多角色权限管理包括设备管理、借用申请、审批流程、数据统计等功能。技术栈前端Vue 3.5 Vite 7Vue Router 4 (路由管理)Pinia 3 (状态管理)Element Plus 2.8 (UI组件库)ECharts 5.5 (数据可视化)Axios (HTTP请求)Day.js (日期处理)后端Node.js Express 4MySQL 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.0MySQL 8.0pnpm (推荐) 或 npm安装运行1. 数据库配置# 创建数据库mysql-uroot-pCREATE DATABASE laboratory_rent_system;# 导入数据mysql-uroot-plaboratory_rent_systemexpress/laboratory_rent_system.sql2. 修改数据库连接配置编辑express/config/db.js:vardbmysql.createConnection({database:laboratory_rent_system,port:3306,host:localhost,user:root,password:你的密码,// 修改为你的MySQL密码});3. 启动后端服务cdexpresspnpminstallpnpmdev# 服务运行在 http://localhost:30004. 启动前端项目cdadmin-vue3pnpminstallpnpmdev# 访问 http://localhost:5173测试账号用户名密码角色admin123456超级管理员lab_manager123456实验室管理员teacher_zhang123456教师student_li123456学生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