实验室设备借用系统

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

评分:4.8/5.0
销量:92
发布:12/2/2025
难度:L3 高级

获取完整源码

演示视频仅作效果参考。完整源码、项目说明与运行答疑,请私聊沟通(适合毕业设计 / 课程设计 / 课设参考)。

获取完整源码观看演示视频
含项目说明文档,便于对照学习
可本地运行,适合课设演示
沟通获取后可咨询运行问题

项目封面

截图 1

项目概览

实验室设备借用系统毕业设计面向高校科研机构场景,提供设备 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

测试账号

用户名密码角色
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

注意事项

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

获取完整源码

技术分类

包含内容

完整源码
项目说明文档
演示材料

适合方向

适合 Vue3 全栈、高校设备管理类毕业设计;也适合审批流程系统课程设计。需要借用状态流转、设备库存与多角色权限实现的同学可参考。

关于 AI源码

AI源码 整理计算机毕业设计、课程设计向的可运行项目参考,含说明文档与演示材料。完整源码请通过联系方式沟通获取。

QQ: 861077046
邮箱: 861077046@qq.com
已帮助 92+ 位同学完成选题参考
问能不能做我的题目

相关推荐

查看全部 →
学生考勤管理系统
高级

学生考勤管理系统

Spring Boot+Vue2 学生考勤管理系统,实现请假申请审批、考勤记录管理与 ECharts 统计可视化,采用 Shiro+JWT 权限认证,支持 Excel 批量导入导出,适合 Java 高校管理类毕业设计。

SpringBootVue2MySQL
4.883
学生成绩管理系统
高级

学生成绩管理系统

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

SpringBootVue2MySQL
4.854
学生信息管理系统
高级

学生信息管理系统

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

SpringBootVue2MySQL
4.897
高校查分系统
高级·新上架

高校查分系统

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

NodeVue3MySQL
4.843
大学生就业信息管理系统
高级

大学生就业信息管理系统

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

NodeVue3MySQL
4.842
高校选课系统
高级

高校选课系统

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

NodeVue3MySQL
4.872