【万字文档+源码】基于SpringBoot+Vue建材租赁系统-可用于毕设-课程设计-练手学习-学习资料分享

摘要

随着建筑行业快速发展，中小型建材租赁企业线下手工管理模式存在库存混乱、租赁订单统计繁琐、客户信息分散、建材品类管控困难等痛点。传统纸质台账、Excel 表格无法实现租赁业务全流程数字化管理，库存、订单、客户、建材类型数据无法联动，经营数据难以快速统计。

本文基于SpringBoot + Vue3前后端分离架构，设计并实现建材租赁管理系统，系统区分管理员后台与普通用户前台两套业务端口。管理员可完成用户管理、建材类型管理、建材物品库存管理、租赁订单管理、损坏建材登记、首页轮播图维护；普通用户可完成账号注册、登录、浏览建材商品、发起租赁下单、查看个人租赁记录、维护个人信息。系统采用 MySQL 存储业务数据、JWT 实现登录鉴权、Element Plus 搭建页面组件，完整覆盖建材租赁企业日常经营全流程，实现建材、客户、订单一体化数字化管控，提升租赁业务管理效率。

第一章 绪论

1.1 研究背景

建筑施工项目对脚手架、管材、保温板材、五金配件等建材租赁需求持续增长，大量中小型建材租赁门店仍采用人工记账方式：

1. 建材品类繁多，缺乏分类管理，库存数量、产地、租赁单价、发货时限信息无法统一维护；

2. 租赁订单依靠手工登记，租赁起止时间、配送方式、应付金额、支付状态易出错，对账效率低；

3. 客户信息分散，无统一客户档案，无法追溯历史租赁记录；

4. 门店宣传素材、首页轮播图片无法线上统一管理，线下宣传成本高；

5. 建材损坏无单独登记台账，损耗成本无法统计核算。

传统管理方式存在数据丢失、查询困难、业务流程不规范等问题，因此开发一套轻量化、易操作的线上建材租赁管理系统具备实际应用价值。

1.2 研究意义

1.2.1 理论意义

本文以建材租赁垂直业务场景为核心，搭建标准 SpringBoot+Vue 前后端分离开发案例，完整实现多角色权限管控、商品分类管理、订单全生命周期、图片上传、分页检索、条件筛选等通用 Web 功能。完善了租赁类管理系统的分层设计、数据库关联模型、接口鉴权方案，为同类物资租赁管理系统开发提供标准化技术参考，丰富 B/S 架构行业管理系统的实践研究。

1.2.2 现实意义

1. 企业管理层面：实现建材分类、库存、租赁订单、客户、损坏物资、首页轮播素材统一线上管理，替代纸质台账，减少人工统计失误；

2. 业务流程层面：管理员后台支持建材新增 / 修改 / 删除、订单增删改查、客户账号管控；普通用户前台自助注册、浏览建材、在线租赁，简化线下沟通流程；

3. 数据管控层面：系统自动记录租赁时长、应付租金、支付状态，一键检索订单与建材信息，快速完成对账与库存盘点；

4. 运营推广层面：后台可维护首页轮播宣传图，前台可视化展示全部租赁建材，降低线下获客宣传成本。

1.3 国内外研究现状

1.3.1 国外研究现状

国外物资租赁行业数字化起步较早，成熟租赁管理系统多基于 SaaS 云平台开发，集成智能库存预警、自动租金核算、线上支付、客户信用评级、多终端移动端适配等功能，系统模块化、智能化程度高。但国外系统针对工业大型设备租赁设计，本地化适配差，收费昂贵，不符合国内中小建材租赁小店轻量化、低成本使用需求，无法直接落地使用。

1.3.2 国内研究现状

国内现有物资租赁系统多集中于工程机械、汽车租赁赛道，专门针对建筑建材租赁的轻量化管理系统较少。现有同类系统普遍存在功能冗余、界面复杂、缺少建材分类与损坏登记模块、无面向客户的前台浏览下单端口等问题。

同时 SpringBoot+Vue 前后端分离技术已成为国内中小型管理系统主流开发方案，开发成本低、部署简单、上手门槛低，非常适配中小建材租赁门店使用。本文结合建材租赁专属业务需求，区分管理员后台与客户前台双端口，补齐现有系统场景短板。

1.4 研究内容与技术路线

1.4.1 主要研究内容

1. 调研建材租赁门店完整业务流程，拆分管理员、普通用户两类角色，完成功能性与非功能性需求分析；

2. 搭建 SpringBoot 后端、Vue3 前端开发环境，梳理系统四层架构，划分七大核心业务模块；

3. 完成数据库概念模型（ER 图）、物理数据表设计，建立用户、建材类型、建材物品、租赁订单、损坏记录、轮播图多表关联关系；

4. 开发前后端核心功能：登录注册、建材分类管理、建材库存管理、租赁订单管理、损坏建材登记、轮播图管理、前台建材展示与个人中心；

5. 实现 JWT 令牌鉴权、图片文件上传、分页查询、多条件模糊检索、弹窗新增 / 编辑、数据逻辑删除等通用功能；

6. 完成系统功能测试、兼容性测试、业务流程联调，修复交互与数据 bug，提供项目部署方案。

1.4.2 技术路线

1. 需求调研阶段：走访建材租赁门店，梳理业务痛点，绘制业务流程图，输出需求文档；

2. 方案设计阶段：系统分层架构设计、功能模块拆分、数据库 ER 图设计、数据表结构设计、接口规范定义；

3. 编码开发阶段：

   • 后端：SpringBoot 搭建工程，整合 MyBatis-Plus、JWT、文件上传工具，开发 Controller、Service、Mapper 分层代码；

   • 前端：Vue3 + Element Plus 搭建页面，封装 Axios 请求，实现路由守卫、表单校验、图片上传、分页组件；

   • 前后端联调，完成接口对接；

4. 系统测试阶段：编写测试用例，对登录、建材管理、订单管理、前台浏览等模块进行功能测试，修复异常；

5. 部署上线阶段：前端打包 dist 静态资源，后端打包 Jar 包，配置 MySQL 数据库，Nginx 反向代理部署上线。

1.5 论文组织结构

本文共分为六个章节，内容安排如下：
第一章：绪论，阐述项目研究背景、意义、国内外现状、研究内容与技术路线；
第二章：相关技术介绍，详细讲解 SpringBoot、Vue3、MyBatis-Plus、JWT、MySQL 等核心开发技术；
第三章：系统需求分析，包含角色分析、功能性需求、非功能性需求、业务流程分析；
第四章：系统总体设计，涵盖系统四层架构、功能模块拆分、数据库 ER 图、数据表结构、核心业务流程；
第五章：系统实现与界面展示，分后端、前台、管理员后台展示核心代码与页面截图；
第六章：系统测试，说明测试环境、测试方法、核心功能测试用例、测试结果分析；
第七章：总结与展望，总结项目完成成果，分析系统存在不足，提出后续优化扩展方向。

第二章 相关技术介绍

2.1 后端核心技术

2.1.1 SpringBoot 框架

SpringBoot 基于 Spring 生态封装，通过 Starter 自动依赖配置、内置 Tomcat 容器，无需复杂 XML 配置即可快速搭建 Java Web 后端项目。本项目采用 SpringBoot 2.7.x 版本，简化 Maven 依赖管理，提供全局异常处理、拦截器配置、跨域配置、文件上传配置，大幅降低后端开发与部署复杂度，适配中小型管理系统快速迭代开发。

2.1.2 MyBatis-Plus 持久层框架

MyBatis-Plus 是 MyBatis 增强工具，内置通用 CRUD 接口、分页插件、逻辑删除、字段自动填充（创建时间、更新时间），无需手写基础增删改查 SQL。本项目使用 MyBatis-Plus 实现用户、建材、订单、轮播图全表数据操作，自定义 XML 完成多条件模糊检索、多表关联查询，提升数据库开发效率。

2.1.3 JWT 令牌认证

JWT（JSON Web Token）是前后端分离标准鉴权方案，替代传统 Session 会话存储。用户登录成功后后端生成加密令牌，携带用户 ID、账号、角色信息，前端本地存储 Token；所有请求在请求头携带 Token，后端拦截器校验令牌有效性，实现未登录拦截、角色权限区分，无服务器会话存储压力，支持分布式部署。

2.1.4 BCrypt 密码加密

系统所有用户密码采用 BCrypt 加盐加密存储，数据库不保存明文密码，登录时将前端传入密码加密后与库中密文比对，有效防止数据库泄露造成账号安全风险。

2.2 前端核心技术

2.2.1 Vue3 前端框架

Vue3 采用组合式 API、虚拟 DOM、双向数据绑定，轻量化、渲染性能优异，搭配 Vue Router 实现页面路由管理与路由守卫。路由守卫校验本地 Token，未登录用户自动跳转登录页面，区分管理员后台路由与普通用户前台路由，实现两套界面隔离访问。

2.2.2 Element Plus UI 组件库

Element Plus 是适配 Vue3 的 PC 端组件库，系统全部页面表单、弹窗、表格、分页、上传组件、下拉选择框均基于 Element Plus 开发，统一页面 UI 风格，内置表单校验、弹窗提示、图片上传预览功能，减少原生 CSS、JS 开发工作量。

2.2.3 Axios 网络请求库

Axios 用于前后端异步数据交互，项目对 Axios 进行二次全局封装：统一请求超时时间、请求头自动携带 Token、统一处理后端返回状态码、全局弹窗提示操作成功 / 失败信息，规范前后端数据交互格式。

2.3 数据库与开发工具

2.3.1 MySQL 8.0 关系型数据库

MySQL 开源免费、读写速度稳定，适配本项目结构化业务数据存储。系统共设计 6 张业务数据表，通过主键、外键建立表关联，设置索引优化订单、建材模糊检索查询速度，支持事务保证租赁订单新增、库存扣减数据一致性。

2.3.2 开发工具清单

1. 后端开发：IDEA 2023、Maven 3.6、Git 版本控制；

2. 前端开发：VS Code、Node.js 16、NPM 包管理工具；

3. 数据库工具：Navicat Premium；

4. 部署工具：Xshell、Nginx、JDK1.8。

第三章 系统需求分析

3.1 用户角色分析

系统分为普通前台用户、管理员两类核心角色，权限完全隔离，业务职责区分明确：

3.1.1 普通前台用户（租赁客户）

1. 账号功能：注册账号、登录系统、记住密码、修改个人信息、更换头像、修改登录密码；

2. 建材浏览：首页轮播图查看、全部租赁建材可视化卡片浏览，查看建材名称、类型、单价、库存；

3. 租赁业务：选择建材发起租赁订单，填写租赁时长、配送方式，生成应付租金；

4. 个人中心：查看全部历史租赁订单、订单支付状态、个人账号信息维护。

3.1.2 系统管理员（门店运营人员）

1. 用户管理：查看全部前台客户账号、新增管理员账号、编辑 / 删除用户、重置用户密码；

2. 建材物品管理：建材类型分类管理、新增 / 编辑 / 删除建材物品、维护建材图片、产地、单价、库存、发货时限；

3. 租赁信息管理：查看全部客户租赁订单，按订单编号、建材名称检索，新增线下订单、修改订单信息、删除作废订单、查看订单详情；

4. 损坏信息管理：登记租赁过程中损坏建材，记录损坏数量、赔付金额、对应租赁订单；

5. 轮播图管理：新增、修改、删除前台首页宣传轮播图片，控制前台首页展示素材；

6. 系统首页：后台首页展示系统欢迎页面，顶部显示当前登录管理员账号。

3.2 功能性需求分析

3.2.1 登录注册模块需求

1. 前台登录页面：输入账号、密码，支持记住密码勾选，登录失败弹窗提示；提供注册跳转入口；

2. 前台注册页面：填写账号、密码、确认密码、姓名、头像上传、性别、手机号、身份证号，表单非空校验，注册成功跳转登录；

3. 管理员后台登录：独立八角形登录弹窗，输入 admin 账号密码登录，进入后台管理系统；

4. 鉴权规则：无 Token 访问任意页面自动拦截跳转登录，Token 过期需重新登录。

3.2.2 前台首页建材展示模块需求

1. 顶部轮播图：读取后台维护的轮播素材自动循环播放；

2. 建材卡片展示：分页加载全部建材，展示建材实拍图、名称、类型、租赁单价；

3. 左侧导航栏：首页、建材物品、个人中心快速切换；

4. 顶部状态栏：显示当前城市、时间、温度。

3.2.3 管理员 - 用户管理模块需求

1. 分页展示系统全部用户（管理员 + 前台客户）；

2. 多条件检索：账号、姓名模糊搜索；

3. 操作功能：新增管理员、查看用户详情、修改用户信息、逻辑删除用户。

3.2.4 管理员 - 建材物品管理模块需求

分为建材类型子模块与建材物品子模块：

1. 建材类型管理：

   • 分页展示全部建材分类名称；

   • 新增、查看详情、修改、删除建材类型；

   • 按建材类型名称模糊检索；

2. 建材物品管理：

   • 分页展示全部建材，展示名称、类型、图片、产地、单价、库存、发货时限；

   • 新增建材弹窗：必填建材名称，下拉选择建材类型，上传建材图片，填写产地、租赁单价、库存、发货时限；

   • 支持编辑、删除、查看建材详情，按建材名称、类型检索筛选。

3.2.5 管理员 - 租赁信息管理模块需求

1. 租赁订单列表分页展示，字段包含：订单编号、建材名称、单价、建材类型、租赁数量、租赁起止时间、配送方式、应付金额、支付状态、客户账号、姓名、联系电话；

2. 检索功能：订单编号、建材名称双条件模糊搜索；

3. 订单操作：新增线下租赁订单、查看订单完整详情、修改订单信息、作废删除订单；

4. 支付状态区分：已支付 / 未支付可视化区分展示。

3.2.6 管理员 - 损坏信息管理模块需求

1. 登记租赁损坏建材，关联对应租赁订单；

2. 记录损坏建材名称、损坏数量、赔付金额、损坏原因；

3. 损坏记录分页查询、新增、编辑、删除、详情查看。

3.2.7 管理员 - 轮播图管理模块需求

1. 分页展示全部前台首页轮播素材，展示轮播名称、预览图片；

2. 新增、修改、删除轮播图，上传宣传图片；

3. 修改轮播排序，控制前台展示顺序。

3.2.8 个人中心模块需求

1. 前台用户：修改姓名、手机号、头像、密码，查看全部个人租赁订单；

2. 管理员：右上角头像下拉菜单，退出登录、修改管理员密码。

3.3 非功能性需求分析

3.3.1 性能需求

1. 页面首次加载响应时间≤1.2s，接口请求响应≤600ms；

2. 支持 50 人同时在线访问，列表分页加载，千条数据无卡顿；

3. 图片上传压缩处理，限制单张图片大小，避免大文件拖慢系统速度。

3.3.2 安全性需求

1. 用户密码 BCrypt 加密存储，禁止明文传输；

2. JWT 令牌设置有效时长，超时自动失效；

3. 后端接口权限拦截，前台用户无法访问管理员后台接口；

4. 前端表单、后端接口双重参数校验，过滤特殊字符，防 XSS、SQL 注入；

5. 所有数据采用逻辑删除（del_flag 字段标记），不物理删除数据，业务数据可追溯。

3.3.3 兼容性需求

后台管理系统适配 Chrome、Edge、360 极速浏览器；前台客户页面兼容主流 PC 浏览器，页面布局无错位、样式错乱。

3.3.4 易用性需求

1. 所有表单必填项标注，提交前自动校验，缺失项标红提示；

2. 新增 / 编辑统一弹窗，操作按钮区分颜色（新增蓝、修改绿、删除红）；

3. 增删改查操作完成后弹出成功 / 失败提示；

4. 分页组件统一封装，上下页、页码切换操作直观；

5. 下拉选择框数据自动联动（建材物品新增时下拉读取全部建材类型）。

3.4 系统整体业务流程

1. 客户前台流程：用户打开前台页面→无 Token 跳转前台登录→新用户点击注册填写信息完成注册→登录进入前台首页浏览轮播与建材卡片→选择建材发起租赁生成订单→在个人中心查看全部租赁订单与支付状态；

2. 管理员后台流程：管理员打开后台登录页输入账号密码登录→进入后台首页→左侧菜单栏切换各管理模块：维护建材分类、录入建材库存、管理客户租赁订单、登记损坏建材、上传首页轮播宣传图；可检索、编辑、删除各类业务数据；

3. 租赁业务闭环流程：管理员录入建材库存→客户前台浏览建材下单生成租赁订单→管理员后台查看所有订单，更新支付状态→租赁归还后登记损坏建材，记录赔付信息，完成完整租赁业务闭环。

第四章 系统总体设计

4.1 系统四层架构设计

系统采用标准前后端分离四层架构，层级解耦、独立开发维护：

4.1.1 前端表现层（Vue3）

负责页面渲染、用户交互、表单校验、图片上传、路由跳转、请求转发。基于 Vue Router 区分前台、后台两套路由，路由守卫鉴权；Axios 封装统一请求，Element Plus 渲染表格、弹窗、表单组件，Vuex 存储全局登录用户信息与 Token。

4.1.2 后端控制层（Controller）

接收前端 HTTP 请求，接收请求参数，调用对应业务层 Service 方法处理业务，统一封装返回 JSON 数据；拦截器拦截所有请求校验 Token，全局异常捕获统一返回错误信息。包含登录控制器、用户控制器、建材类型控制器、建材物品控制器、租赁订单控制器、损坏记录控制器、轮播图控制器。

4.1.3 后端业务层（Service）

处理核心业务逻辑：账号登录密码校验、建材库存增减、订单租金计算、图片上传存储、多条件分页查询、多表关联数据组装，拆分接口业务逻辑，保证 Controller 轻量化。

4.1.4 数据持久层（Mapper+MySQL）

基于 MyBatis-Plus 操作数据库，Mapper 接口映射数据表，提供通用 CRUD、分页、逻辑删除；自定义 XML 实现复杂多条件联查；MySQL 存储全部用户、建材、订单、轮播图结构化数据。

4.2 系统功能模块拆分

整体系统分为 8 大核心功能模块，模块间低耦合、高内聚：

1. 登录注册鉴权模块：前台注册、前台登录、后台管理员登录、JWT 令牌校验、路由权限拦截、退出登录；

2. 前台首页展示模块：轮播图渲染、建材卡片分页展示、顶部状态栏；

3. 用户管理模块：管理员账号管理、前台客户账号管理、用户检索、新增 / 编辑 / 删除用户；

4. 建材分类与库存模块：建材类型管理、建材物品录入、库存维护、建材图片上传、建材检索筛选；

5. 租赁订单管理模块：租赁订单新增、订单详情查看、订单修改删除、订单多条件检索、租金自动核算、支付状态维护；

6. 损坏建材登记模块：损坏记录新增、赔付金额登记、关联租赁订单、损坏记录管理；

7. 轮播图素材管理模块：前台首页宣传图上传、修改、删除、排序；

8. 个人中心模块：客户个人信息维护、密码修改、历史订单查询；管理员账号信息、密码修改。

4.3 数据库设计

4.3.1 数据库设计原则

1. 遵循数据库三大范式，减少字段冗余；

2. 所有数据表增加 del_flag 逻辑删除字段（0 正常，1 删除），禁止物理删除；

3. 统一 create_time、update_time 字段，MyBatis-Plus 自动填充创建、更新时间；

4. 主外键建立表关联：建材物品关联建材类型、租赁订单关联用户与建材、损坏记录关联租赁订单；

5. 频繁检索字段建立索引（订单编号、建材名称、用户账号），提升查询速度。

4.3.2 系统 ER 实体关系图

系统核心实体：用户（user）、建材类型（material_type）、建材物品（material）、租赁订单（rent_order）、损坏记录（damage_record）、轮播图（swiper）
实体关联关系：

1. 用户 1 对多 租赁订单：一个客户可生成多条租赁订单，一条订单归属单一客户；

2. 建材类型 1 对多 建材物品：一种建材分类下包含多种建材物品；

3. 建材物品 1 对多 租赁订单：同一款建材可产生多条租赁订单；

4. 租赁订单 1 对多 损坏记录：一个租赁订单可登记多条建材损坏记录；

5. 用户（管理员）1 对多 建材类型 / 建材 / 轮播图：管理员录入、维护所有建材、轮播素材。

4.3.3 核心数据表结构

表 1 用户表 user

表 2 建材类型表 material_type

表 3 建材物品表 material

表 4 租赁订单表 rent_order

表 5 损坏建材记录表 damage_record

表 6 轮播图表 swiper

4.4 核心业务流程详细设计

4.4.1 用户登录鉴权流程

1. 用户在登录页输入账号、密码提交登录请求；

2. 后端 Controller 接收账号密码，Service 根据账号查询 user 表；

3. BCrypt 比对前端传入加密密码与数据库密文，校验角色（管理员 / 前台客户）；

4. 校验通过，生成携带 userId、username、role 的 JWT 令牌，设置过期时间；

5. 前端接收 Token 存储至 localStorage，跳转对应页面（管理员后台 / 客户前台）；

6. 所有后续请求在请求头 Authorization 携带 Token，后端拦截器解析校验；

7. Token 失效、无 Token、角色不匹配直接返回 401，前端跳转登录页。

4.4.2 新增建材物品流程

1. 管理员进入【建材物品】页面，点击【新增】按钮弹出新增弹窗；

2. 填写必填建材名称，下拉选择已录入的建材类型，上传建材实拍图片；

3. 填写产地、租赁单价、库存数量、发货时限；

4. 前端表单校验非空项，校验价格、库存为数字；

5. 点击提交，图片上传至服务器，返回图片存储路径；

6. 后端接收全部表单参数，向 material 表插入一条新数据，create_user 为当前登录管理员 ID；

7. 插入成功弹窗提示，关闭弹窗刷新建材列表。

4.4.3 新增租赁订单流程

1. 两种下单渠道：客户前台自助下单 / 管理员后台新增线下订单；

2. 选择对应建材，填写租赁数量、租赁起止日期、配送方式；

3. 后端根据租赁天数、建材单价、租赁数量自动计算 total_amount 应付租金；

4. 生成唯一订单编号 order_no，pay_status 默认 0 未支付；

5. 向 rent_order 表插入订单数据，关联客户 user_id、建材 material_id；

6. 库存自动扣减对应 rent_num 数量，完成订单创建，刷新订单列表。

4.4.4 建材损坏登记流程

1. 管理员找到对应租赁订单，进入损坏信息模块点击新增；

2. 关联订单 ID，填写损坏建材名称、损坏数量、赔付金额、损坏原因；

3. 提交后向 damage_record 表插入记录，绑定当前管理员创建人 ID；

4. 后台可根据订单编号检索全部对应损坏赔付记录，核算门店损耗成本。

第五章 系统功能实现与界面展示

结合项目截图，分前台客户系统、管理员后台系统两大端口说明实现效果：

5.1 前台客户系统实现界面

5.1.1 前台登录页面

页面采用蓝色工业风背景，居中白色登录卡片，包含账号、密码输入框、记住密码复选框、蓝色登录按钮，底部提供注册用户跳转入口；未勾选记住密码时关闭页面清空账号缓存，登录校验失败弹出提示。

5.1.2 前台注册页面

注册表单包含：用户账号、密码、确认密码、姓名、头像上传组件、性别下拉选择、手机号、身份证号；全部输入框做非空、格式校验，两次密码不一致禁止提交；注册成功自动跳转登录页面。

5.1.3 前台首页建材展示页面

1. 顶部轮播区域：读取后台 swiper 表素材自动轮播宣传图；右上角显示当前城市、实时日期时间；

2. 左侧固定导航栏：首页、建材物品、个人中心；

3. 中部建材展示区：卡片式渲染全部建材，每张卡片展示建材实拍图、名称、分类、租赁单价，支持左右滑动切换分页；客户点击建材卡片可发起租赁下单。

5.2 管理员后台系统实现界面

5.2.1 后台管理员登录页面

桌面办公背景，居中八边形半透明登录面板，输入 admin 账号、密码，勾选记住密码，黄色登录按钮；仅管理员账号可登录进入后台管理系统，普通客户账号登录会被拦截。

5.2.2 后台系统首页

后台采用深色侧边栏 + 主内容布局：

1. 顶部导航栏：系统名称【建材租赁系统】，右上角展示当前登录 admin 头像、账号下拉菜单（退出登录）；

2. 左侧功能菜单栏：首页、用户管理、建材物品管理、租赁信息管理、轮播图管理；菜单支持折叠展开；

3. 主内容区域居中展示欢迎文字「欢迎使用建材租赁系统」。

5.2.3 建材类型管理页面

1. 顶部操作按钮：蓝色新增、蓝色详情、绿色修改、红色删除；

2. 右上角检索框：输入建材类型名称模糊搜索；

3. 数据表格：展示序号、建材类型名称，每行操作列附带详情按钮；

4. 底部分页组件：Prev/Next 切换页码，分页加载分类数据；支持批量勾选删除建材类型。

5.2.4 新增建材物品弹窗页面

弹窗白色白底，表单分为左右两栏：

• 左栏：建材名称（必填）、图片上传组件、租赁单价、发货时限下拉选择；

• 右栏：建材类型下拉（读取全部分类）、产地输入框、库存输入框；
  底部红色取消、蓝色提交按钮，提交前校验必填项，图片支持点击预览上传。

5.2.5 租赁信息订单管理列表

1. 顶部操作栏：新增、详情、修改、删除功能按钮；

2. 双条件检索框：订单编号、建材名称组合模糊搜索；

3. 订单表格完整展示全部业务字段：订单编号、建材名称、单价、分类、租赁数量、租赁起止时间、配送方式、应付金额、支付状态、客户账号、姓名、手机号；

4. 支付状态区分展示，已支付订单特殊标记；每行操作列点击详情可查看完整租赁单据；底部分页控件支持翻页检索大量订单数据。

5.2.6 轮播图管理页面

表格展示轮播序号、素材名称、图片预览缩略图，顶部绿色修改按钮，可上传替换前台首页宣传图片、调整展示排序，删除失效宣传素材。

第六章 系统测试

6.1 测试环境

6.1.1 硬件环境

测试 PC：Intel i5 处理器、16G 内存、512G 固态硬盘

6.1.2 软件环境

1. 后端：JDK1.8、MySQL8.0、SpringBoot 2.7.15、Maven3.6；

2. 前端：Node16、Vue3、Element Plus；

3. 浏览器测试：Chrome 120、Edge、360 极速浏览器。

6.2 测试方法

采用黑盒功能测试，不关注底层代码，仅基于页面操作验证业务流程；编写标准化测试用例，覆盖登录注册、建材管理、订单租赁、轮播图、权限拦截全部核心场景，记录预期结果与实际运行结果，统计系统 bug 并修复。

6.3 核心功能测试用例

用例 1：前台账号注册测试

用例 2：管理员新增建材物品测试

用例 3：租赁订单新增与检索测试

用例 4：权限拦截测试

6.4 测试结果分析

经过完整功能测试，系统全部核心业务流程可正常运行，表单校验、图片上传、分页检索、JWT 鉴权、多表关联数据操作功能符合需求设计；仅存在少量 UI 样式细微错位问题，已全部修复。系统满足中小建材租赁门店数字化管理使用要求，业务闭环完整，运行稳定无重大逻辑 bug。

第七章 总结与展望

7.1 项目总结

本文基于 SpringBoot+Vue 前后端分离架构，完成建材租赁系统完整设计与开发，区分前台客户端口与管理员后台端口，完整实现建材分类库存管理、租赁订单全生命周期管控、损坏建材赔付登记、首页宣传轮播素材维护、客户账号注册登录等核心业务功能。

开发过程中完成需求调研、架构分层设计、数据库建模、编码实现、系统全流程测试整套标准化毕业设计开发流程，实现以下成果：

1. 搭建分层清晰的前后端分离工程，整合 SpringBoot、MyBatis-Plus、Vue3、JWT 主流开发技术；

2. 设计 6 张关联业务数据表，覆盖建材租赁完整业务数据存储；

3. 实现双端口隔离访问、多角色权限控制、图片文件上传、多条件分页检索、逻辑删除、自动租金核算等通用功能；

4. 适配中小建材租赁门店线下业务场景，替代手工台账，实现建材、客户、租赁订单数字化一体化管理，提升门店经营管理效率。

第八章、项目资料

👇🏻 精彩专栏推荐订阅👇🏻 在下方专栏👇🏻不然下次找不到哟
《Java精品推荐项目》
《springboot+vue项目100套》
《ssm项目100套》
《微信小程序合集》