基于SpringBoot+vue的相机租赁管理系统

1. 项目背景与意义随着摄影爱好者和短视频创作者的快速增长相机、镜头等摄影器材的购买成本较高且部分用户仅在特定场景下需要使用专业设备因此相机租赁需求日益旺盛。传统的线下租赁模式存在信息不透明、库存管理困难、租借流程繁琐、设备归还状态难以追踪等问题。基于SpringBootVue的相机租赁管理系统旨在通过信息化手段实现相机设备的在线展示、预约租赁、订单管理、库存跟踪和归还验收等全流程数字化管理。该系统能够有效降低租赁企业的运营成本提升设备周转效率同时为用户提供便捷、透明的租赁体验具有较高的实用价值和推广意义。2. 系统技术栈本系统采用前后端分离架构后端基于SpringBoot框架前端基于Vue框架数据库使用MySQL整体技术栈如下层次技术选型说明后端框架SpringBoot提供RESTful API负责业务逻辑处理与数据持久化持久层MyBatis-Plus简化数据库操作支持分页查询与条件构造器数据库MySQL存储用户、设备、订单、租赁记录等核心数据前端框架Vue 3 Element Plus构建用户界面提供组件化开发与响应式布局构建工具Vite前端项目构建与开发服务器HTTP客户端Axios前后端数据交互封装请求与响应拦截器权限认证JWT Spring Security实现用户登录认证与接口访问控制3. 系统核心功能模块系统主要分为用户端和管理端两大模块核心功能包括用户管理用户注册、登录、个人信息维护。设备管理相机、镜头的添加、编辑、上下架、库存管理。租赁管理用户提交租赁订单管理员审核、确认发货、登记归还。订单管理订单状态跟踪待审核、租赁中、已归还、已取消。费用结算根据租赁天数自动计算租金支持押金管理。数据统计设备租赁排行、订单数量统计、营收概览。4. 数据库设计系统核心数据表包括用户表、设备表、订单表等以下为主要表结构设计-- 用户表 CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL, phone VARCHAR(20), role VARCHAR(20) DEFAULT USER, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 设备表 CREATE TABLE camera_device ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, brand VARCHAR(50), model VARCHAR(50), daily_price DECIMAL(10,2) NOT NULL, deposit DECIMAL(10,2), stock INT DEFAULT 1, status TINYINT DEFAULT 1, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 租赁订单表 CREATE TABLE rental_order ( id BIGINT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(32) NOT NULL UNIQUE, user_id BIGINT NOT NULL, device_id BIGINT NOT NULL, start_date DATE NOT NULL, end_date DATE NOT NULL, total_price DECIMAL(10,2), status TINYINT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP );5. 核心代码实现5.1 后端SpringBoot 控制器与业务逻辑以下为设备管理模块的核心代码包含设备列表分页查询与新增设备接口RestController RequestMapping(/api/device) public class DeviceController { Autowired private DeviceService deviceService; GetMapping(/page) public ResultPageCameraDevice page( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String keyword) { PageCameraDevice page deviceService.queryPage(pageNum, pageSize, keyword); return Result.success(page); } PostMapping(/add) public Result? add(RequestBody CameraDevice device) { deviceService.save(device); return Result.success(新增设备成功); } }设备查询分页逻辑实现Service public class DeviceServiceImpl implements DeviceService { Autowired private CameraDeviceMapper deviceMapper; Override public PageCameraDevice queryPage(Integer pageNum, Integer pageSize, String keyword) { LambdaQueryWrapperCameraDevice wrapper new LambdaQueryWrapper(); if (StringUtils.hasText(keyword)) { wrapper.like(CameraDevice::getName, keyword) .or().like(CameraDevice::getBrand, keyword); } wrapper.orderByDesc(CameraDevice::getCreateTime); return deviceMapper.selectPage(new Page(pageNum, pageSize), wrapper); } }5.2 后端租赁订单创建与费用计算用户提交租赁订单时系统根据租赁天数自动计算租金并校验设备库存Service public class RentalOrderServiceImpl implements RentalOrderService { Autowired private RentalOrderMapper orderMapper; Autowired private CameraDeviceMapper deviceMapper; Override Transactional public Result? createOrder(RentalOrder order) { CameraDevice device deviceMapper.selectById(order.getDeviceId()); if (device null || device.getStock() 0) { return Result.error(设备库存不足); } // 计算租赁天数 long days ChronoUnit.DAYS.between(order.getStartDate(), order.getEndDate()); if (days 0) { return Result.error(租赁日期不合法); } BigDecimal total device.getDailyPrice().multiply(BigDecimal.valueOf(days)); order.setTotalPrice(total); order.setOrderNo(R System.currentTimeMillis()); order.setStatus(0); orderMapper.insert(order); // 扣减库存 device.setStock(device.getStock() - 1); deviceMapper.updateById(device); return Result.success(订单提交成功); } }5.3 前端Vue 设备列表页面前端使用 Vue 3 组合式 API 实现设备列表展示与分页查询template el-table :datadeviceList border stripe el-table-column propname label设备名称 / el-table-column propbrand label品牌 / el-table-column propmodel label型号 / el-table-column propdailyPrice label日租金 / el-table-column propstock label库存 / el-table-column label操作 template #default{ row } el-button typeprimary sizesmall clickrent(row)立即租赁/el-button /template /el-table-column /el-table /template script setup import { ref, onMounted } from vue import request from /utils/request const deviceList ref([]) const loadDevices async () { const res await request.get(/api/device/page, { params: { pageNum: 1, pageSize: 10 } }) deviceList.value res.data.records } const rent (row) { // 跳转租赁下单页面 console.log(租赁设备, row) } onMounted(loadDevices) /script5.4 前端Axios 请求封装import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截器携带 token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer token } return config }) // 响应拦截器统一处理错误 request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.msg || 请求失败) return Promise.reject(new Error(res.msg)) } return res }, error { ElMessage.error(网络异常请稍后重试) return Promise.reject(error) } ) export default request6. 总结基于SpringBootVue的相机租赁管理系统通过前后端分离架构实现了设备管理、租赁下单、订单跟踪和费用结算等核心业务流程。系统界面友好、接口清晰、扩展性强能够有效提升相机租赁业务的运营效率。后续可进一步引入支付接口、设备定位追踪、信用免押等功能持续完善系统能力。