基于Vue.js和Node.js的校园实验仪器租赁系统开发

1. 项目概述

校园实验仪器租赁管理系统是一个基于Web的应用程序，旨在为高校实验室提供便捷的仪器设备管理解决方案。系统采用前后端分离架构，前端使用Vue.js框架配合ElementUI组件库，后端基于Node.js平台构建，数据库选用MySQL关系型数据库。

这个系统主要解决了实验室仪器管理中的几个痛点问题：

1. 传统纸质登记方式效率低下且容易出错
2. 仪器使用状态无法实时更新和查询
3. 租赁记录难以统计和分析
4. 多用户权限管理复杂

2. 技术选型与架构设计

2.1 前端技术栈

前端选择Vue.js 2.x版本作为核心框架，主要考虑以下几点：

• 渐进式框架特性，可以按需引入功能
• 组件化开发模式，便于功能模块的复用
• 响应式数据绑定，简化DOM操作
• 丰富的生态系统和社区支持

UI组件库选用ElementUI，原因包括：

• 提供大量现成的表单、表格、弹窗等常用组件
• 完善的文档和示例
• 与Vue.js深度集成
• 响应式设计适配不同设备

2.2 后端技术栈

后端采用Node.js平台，主要基于以下考量：

• 非阻塞I/O模型适合高并发的Web应用
• 使用JavaScript统一前后端语言，降低学习成本
• 轻量级且启动快速，适合敏捷开发
• 丰富的npm包生态系统

框架选择Express.js，因其：

• 简单易用的路由系统
• 中间件机制灵活扩展
• 社区活跃，文档完善
• 与前端Vue.js配合良好

2.3 数据库选型

数据库选用MySQL 5.7+版本，主要优势：

• 成熟稳定的关系型数据库
• 支持事务处理，保证数据一致性
• 完善的权限管理机制
• 与Node.js有成熟的ORM库支持
• 适合结构化数据存储

3. 核心功能模块实现

3.1 用户管理模块

用户模块采用JWT(JSON Web Token)认证机制，实现流程如下：

1. 用户注册/登录表单提交到/api/auth/login接口
2. 服务端验证凭证后生成包含用户ID和角色的JWT
3. 前端将JWT存储在localStorage中
4. 后续请求通过Authorization头携带JWT
5. 服务端中间件验证JWT并解析用户信息

关键代码示例：

javascript复制// 登录接口
router.post('/login', async (req, res) => {
  const { username, password } = req.body;
  const user = await User.findOne({ where: { username } });
  
  if (!user || !bcrypt.compareSync(password, user.password)) {
    return res.status(401).json({ error: '用户名或密码错误' });
  }
  
  const token = jwt.sign(
    { userId: user.id, role: user.role },
    process.env.JWT_SECRET,
    { expiresIn: '8h' }
  );
  
  res.json({ token });
});

3.2 仪器管理模块

仪器管理实现CRUD操作和状态变更：

1. 管理员通过表单添加仪器信息，包括：

   • 仪器名称、型号、规格
   • 所属实验室/位置
   • 分类标签
   • 初始状态（可用/维护中）
   • 图片上传（使用multer中间件处理）

2. 仪器列表页实现：

   • 分页查询（使用Sequelize的limit/offset）
   • 多条件筛选（状态、分类、位置等）
   • 表格展示（ElementUI的el-table组件）

3. 状态变更流程：

   • 租