实验室设备借用系统

完整代码地址：https://www.aiyuanma.vip/posts/laboratory-rent-system

项目简介

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

2. 修改数据库连接配置

编辑 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:3000

4. 启动前端项目

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