物品租赁系统这套源码后端SpringBoot、前端Vue、数据存MySQL属于那种“标签看上去很普通用起来真的能省事”的全栈项目。很多人在搜这种“信息管理系统源码”其实目的很明确不是要看一个玩具demo而是希望拿到一个能跑通完整租赁业务闭环的项目——物品上架、用户浏览下单、管理员审核、到期归还、库存自动恢复一条线全部串起来。它既适合正在做毕业设计的在校生也适合刚入手全栈开发的Java工程师拿来当练习样板甚至可以直接改造成公司内部的资产借用工具。这篇我就按自己的实操经验把项目结构、数据库设计、后端接口、前端页面、部署运行和常见坑一条条拆给你看。1. 项目到底做了啥租赁闭环的需求拆解与定位分析1.1 这个源码解决的不是“展示”而是“业务闭环”很多人以为“物品租赁系统”就是做一个物品列表页面配上后台管理其实大错特错。租赁系统和普通商城最大的区别在于它多了一层“时间”和“归还”的概念。商城只要把商品卖出去交易就结束了而租赁的物品归属权始终在出租方手里整个业务流程要围绕“借出—收回”这个循环来设计。所以你会看到这个源码的完整流程是这样的管理员先维护物品分类再上架物品物品属性里包含每日租金、押金、库存数量和上下架状态用户注册登录后在首页浏览可租物品点进详情页选择租赁天数系统自动计算租金加押金提交后生成订单管理员后台看到待审核订单确认没问题就审核通过此时库存真正扣减订单状态变成“租赁中”租期结束用户申请归还管理员确认归还后库存回补订单状态变成“已完成”。这个链路里值得学习的不是某个接口怎么写而是“状态机”的设计思路。订单从待审核、租赁中、已完成、已取消到已逾期每个状态都有对应的触发条件和前置动作。源码的价值就在于把这些逻辑固定成代码你拿到手能跑通看懂了就能改。1.2 三个角色的使用场景与权限边界整个项目里其实藏着三类使用者代码里通常用两种身份表示。第一类是普通用户。用户登录后能看物品列表、搜索物品、查看详情、下单租赁、在“我的订单”里查看记录并发起归还。这个视角对应的是C端体验关注点是怎么快速找到想租的东西、租金怎么算、订单什么状态。第二类是管理员。管理员负责后台管理包括用户管理、物品管理、分类管理、订单审核、归还确认。这个视角是B端运营关注点是库存数据准不准、订单有没有异常、哪些物品该下架。第三类其实就是你——开发者。你拿到源码后关注的是项目怎么跑起来、表结构怎么扩展、接口返回什么格式、权限能不能改复杂一点。权限边界这里源码基本不会引入Spring Security很多项目就是在用户表里放一个role字段0表示普通用户1表示管理员。后端接口在拦截器里判断一下当前用户角色不是管理员就直接拒绝访问。这种设计对教学项目和内部系统非常友好简单直接、代码容易读。如果是生产环境我更建议改成RBAC式的角色权限模型但这个项目里完全没必要为了设计模式而设计。2. SpringBoot后端分层结构、认证设计与事务处理重点2.1 三层架构放现在依然好用打开后端项目包结构基本是这样一个模板com.rent.system ├── RentApplication.java ├── configCORS跨域配置、JWT拦截器注册 ├── controller接口入口 ├── service │ └── impl业务逻辑 ├── mapperMyBatis的Mapper接口 ├── entity数据库表对应的实体类 ├── dto接收前端参数的传输对象 └── common统一返回Result、全局异常处理、Jwt工具类controller负责接收请求、做最基础的参数校验、调用serviceservice里面写业务规则mapper管SQL。这套三层架构被吐槽了很多年但放在这种体量的项目里依然是最合理的选择。业务逻辑不复杂、团队规模不大、开发速度要快三层结构让每个文件的职责都很好定位。真上了DDD那套反而会把整体复杂度抬上去团队如果没人熟悉领域驱动设计最后只会得到一个既没有DDD精髓又没有三层简单性的半吊子代码。接口风格是RESTful的比如物品列表GET /api/item/list、创建订单POST /api/order/create。所有接口都返回同一个Result结构public class ResultT { private Integer code; // 200成功401未登录500异常 private String msg; // 提示信息 private T data; // 业务数据 }这个设计让前后端联调非常舒服。前端拿到响应后只需要先看code再决定取data还是弹msg不需要每个接口单独处理异常结构。统一返回对象还有一个隐藏好处——后面对接网关、做日志切面的时候能少写很多适配代码。2.2 用户认证JWT而不是Session既然是前后端分离前端Vue跑在一个端口后端SpringBoot跑在另一个端口那Session方案就会撞上跨域Cookie的坑。浏览器同源策略下跨域携带Cookie需要处理CORS、withCredentials、SameSite一堆麻烦所以在前后端分离的项目里JWT是更合理的默认选择。登录流程是标准做法用户输入账号密码后端校验通过后生成一个包含用户ID、用户名、角色信息的token返回给前端前端把token存进localStorage之后每次请求都在Authorization请求头里带上后端通过拦截器解析token能解析出来就放行解析失败就返回401。拦截器的核心逻辑大概长这样Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 登录、注册接口直接放行 if (handler instanceof HandlerMethod) { HandlerMethod hm (HandlerMethod) handler; if (hm.getMethodAnnotation(PassToken.class) ! null) { return true; } } String token request.getHeader(Authorization); if (!JwtUtil.verify(token)) { response.setStatus(401); return false; } return true; } }实操中有两个细节容易被忽略。第一个是token过期时间建议设置2小时左右太短影响体验太长安全性下降。第二个是注销登录这种简单项目里直接让前端删掉本地token就算退出了后端不用维护token黑名单虽然严格说不严谨但内部系统完全够用。另外一定要记住把注册和登录接口加入白名单不然用户连登录都进不来。2.3 租赁下单与库存扣减的事务边界订单模块是整个后端代码里最值得细看的部分因为它同时操作了多张表业务规则也比较集中。下订单时后端大概要做这几件事查物品是否存在且处于可租状态、扣减库存、生成租赁订单。这三件事必须在同一个事务里完成否则就会出现“库存扣了但订单没创建成功”或“订单建了但库存没扣”这种数据错乱。Spring的解决方案就是Transactional注解把它加在service方法上方法内任何一步抛出异常前面已经执行的数据库操作全部回滚。这个理解起来容易但很多新手栽在事务方法内部的try-catch上——如果程序员自己在方法里把异常catch住不往外抛事务就不会回滚这是最容易踩的坑之一。扣减库存的SQL也值得单独说说。很多初学者习惯先查库存判断大于0再UPDATE这种写法在并发场景下会出问题两个请求同时读到库存为1都认为自己还能扣结果变成负数。正确的做法是把判断和扣减合成一条SQLUPDATE t_item SET stock stock - 1 WHERE id #{itemId} AND stock 0;执行这条UPDATE时MySQL会锁定对应的行stock 0这个条件保证并发情况下只有一个请求能成功。通过判断受影响行数如果为0就知道库存不足直接抛业务异常。这种利用数据库行锁来保证并发安全的方式是这个体量项目性价比最高的方案。金额计算也要放对位置。租赁总金额等于租赁天数乘以每日租金再加上押金。这个计算必须放在后端前端展示的金额只是预览不能作为实际金额。这样做既避免用户篡改请求参数也能保证计费规则统一。3. MySQL表设计核心表结构、字段规范与状态流转3.1 核心数据表长什么样一个标准物品租赁系统的数据库通常不会少于四张核心表分别是用户表、分类表、物品表和租赁订单表。我整理了一张简化版的字段说明照着这个思路去读源码里的SQL脚本会快很多。表名用途核心字段t_user用户与管理员id、username、password、phone、role、statust_category物品分类id、name、sortt_item租赁物品id、category_id、name、description、price_per_day、deposit、stock、cover、statust_rental_order租赁订单id、order_no、user_id、item_id、rent_days、start_date、end_date、total_amount、deposit、status、create_time物品表里的status字段通常表示上下架状态而“是否可租”更多是看stock库存数量。所以列表页的查询条件基本是status 1 AND stock 0这条SQL在首页、搜索接口里到处都会出现。订单表里的status则是整个项目最核心的状态字段从数字0到4分别表示待审核、租赁中、已完成、已取消、已逾期。3.2 字符集、金额字段与索引设计有几处字段规范做这类项目时我还是建议直接照着来都是踩过坑之后总结的。字符集要选utf8mb4排序规则用utf8mb4_general_ci或者utf8mb4_unicode_ci。原因很简单如果建库时用了老的utf8用户昵称里带个emoji表情插入数据库直接报错。这个问题在移动端注册场景尤其常见我碰到过不止一次。金额字段必须用decimal(10,2)不要用float或double。浮点数在计算机里是近似表示做金额比较和累加时经常出现0.1加0.2不等于0.3这种诡异问题。数据库层面用decimal价格计算才不会出现精度误差。索引设计上订单表的user_id和status一定要建索引因为“我的订单”和“后台订单列表”是查询频率最高的两个场景而且查询条件基本就是这两列组合。物品表的category_id也建议建索引分类筛选时用得上。外键这个事值得单独说一句。很多新手喜欢在表上建物理外键觉得数据完整性有保障但实际业务系统里我是反对用的。一个是删除数据时会被外键约束卡住另一个是高并发写入时外键会有额外的锁开销。这种项目用逻辑外键就够了关联关系由业务代码保证字段名叫category_id并不代表它一定要是物理外键。3.3 库存与订单状态怎么协同数据库层面最值得研究的就是库存和订单状态如何联动。用户下单时事务里同时要更新t_item的库存和插入t_rental_order记录此时订单状态是“待审核”。注意这个阶段库存其实还没扣真正扣库存发生在管理员审核通过的那一刻。为什么不是下单就扣因为如果用户下单后一直不付款或者管理员审核时发现物品本身有问题拒绝这笔订单提前扣库存会让其他用户白白看得到却租不了。管理员审核通过时后端要做两个动作把订单状态改成“租赁中”执行UPDATE t_item SET stock stock - 1 WHERE id ? AND stock 0。两个动作同样在事务里。归还流程是对称的用户发起归还管理员确认后订单状态改成“已完成”同时UPDATE t_item SET stock stock 1 WHERE id ?把库存加回来。如果归还时间已经超过了end_date订单状态可以直接标记为“已逾期”源码级别一般不会真去算罚金只是状态展示上给管理员一个提醒。库存回补的逻辑要小心重复提交所以归还确认的接口建议做成幂等的无论用户点多少次只有第一次调用能真正修改状态和库存后面调用直接返回已处理。4. Vue前端路由划分、Axios封装与页面交互实现4.1 页面路由与用户权限前端项目打开后Vue Router的路由表大概会覆盖这些页面路由路径页面作用访问角色/login登录页游客/register注册页游客/首页物品列表登录用户/item/:id物品详情与租赁下单登录用户/my/orders我的租赁订单普通用户/admin/items后台物品管理管理员/admin/orders后台订单审核与归还管理员/admin/users后台用户管理管理员路由守卫写在router.beforeEach里逻辑不算复杂从localStorage里拿token没有token就跳转/login如果访问的是/admin开头的路径再判断本地存的用户角色是不是管理员不是就直接拦下来。这里有一个很关键的隐患前端路由守卫只能管页面显示真正保护接口还是要后端拦截器管。前端把token传给别人别人也能以你的身份调接口所以别以为路由守卫是安全边界。4.2 Axios封装与请求拦截前端所有请求几乎都走一个统一的Axios实例创建时指定baseURL为/api。这个/api不是后端域名而是配合本地开发服务器的代理配置后面讲部署时会单独说。import axios from axios const service axios.create({ baseURL: /api, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) service.interceptors.response.use( response { const res response.data if (res.code 401) { localStorage.removeItem(token) window.location.href /login } return res }, error { return Promise.reject(error) } )请求拦截器负责在每次请求时自动带上token响应拦截器负责统一处理后端返回的code。这里我最推荐的处理方式是只要后端返回401前端就清掉本地token并且强制跳回登录页。这样用户token过期之后所有请求都会平滑地回到登录入口而不是在页面上报一堆莫名其妙的401错误。4.3 列表页、表单页与状态展示的实现套路前端页面大量依赖Element UI组件三个套路用熟了基本就把PC端管理类页面拿下了。第一个套路是列表页。把后端返回的数组塞进el-table状态字段用el-tag根据值显示不同颜色比如“待审核”显示橙色、“租赁中”显示蓝色、“已完成”显示绿色。这种状态标签的映射一般写在computed或者一个普通函数里写死一个状态字典维护起来很方便。第二个套路是弹窗表单。新增或编辑物品时用el-dialog套一个el-form通过点击按钮打开弹窗提交时先做前端校验再调接口。这里有个细节打开弹窗时一定要重置表单数据否则上一次编辑残留的数据会出现在新增弹窗里我见过不止一次这种低级bug。第三个套路是日期和金额联动。下单页面用el-date-picker选择开始日期和租赁天数前端实时展示预估费用。但最终金额以后端计算为准前端展示只是一种交互预告。5. 从零跑通项目环境版本匹配、数据库导入与前后端联调5.1 环境版本怎么选才不会翻车这个项目叫“可直接运行”但“直接”是有前提条件的环境版本必须对得上。我在帮人排查问题时发现80%的启动失败都是版本不匹配引起的。组件推荐版本说明JDK1.8 或 11SpringBoot 2.x的默认选择Maven3.6 及以上依赖管理必备MySQL5.7 或 8.08.0需要用allowPublicKeyRetrieval配置Node.js14 或 16Vue CLI项目对Node版本敏感npm6 或 8安装依赖用为什么特别强调Node版本因为Vue 2项目的依赖里经常带node-sass这个包需要在安装时编译原生的binding.nodeNode版本太新会导致编译失败报错信息还特别难懂。最稳妥的办法是Node 14或16装完依赖基本不会在这个环节卡住。JDK也一样。项目如果是基于SpringBoot 2.x开发的你用JDK 17去跑启动时会报class file has wrong version 61.0之类的不兼容错误。搞清楚项目底子是哪种SpringBoot版本再决定用几的JDK。5.2 数据库脚本导入与后端配置调整拿到源码后首先要做的一件事是去项目根目录找后缀为.sql的数据库脚本文件可能叫db_rent.sql、rent.sql或者init.sql。这个文件里包含建库、建表、插入初始数据的SQL语句是整个项目能跑起来的前提。导入方式很简单用Navicat新建一个连接执行SQL文件即可。导入完后确认数据库名与后端配置里的数据库名一致。接下来打开后端项目的application.yml核心就改动三处server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/rent_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 你的数据库密码url里几个参数我都建议保留。useSSLfalse是解决本地MySQL没有SSL证书导致连接失败的问题serverTimezoneAsia/Shanghai解决数据库时间差了8小时的问题allowPublicKeyRetrievaltrue专门解决MySQL 8.0的Public Key Retrieval is not allowed报错。这些坑如果不提前规避启动时就会一个一个蹦出来。之后用IDEA打开后端目录等Maven把依赖下载完直接运行带SpringBootApplication注解的主类。启动日志里出现“Started Application”就算后端起来了。5.3 前端代理配置与整链路验证前端目录打开后第一步是npm install装依赖。这一步如果报错90%是Node版本不对可以按前面表格里的版本调整后再试。依赖装完后修改前端项目根目录的vue.config.js配置本地代理module.exports { devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }这个代理是前后端联调的关键。前端跑在3000端口页面里请求/api/item/list时浏览器看到的还是相对路径http://localhost:3000/api/item/list没有跨域问题而devServer会在后台把这个请求转发到后端的http://localhost:8080/api/item/list。所以只要代理配置正确前端不需要单独处理CORS。启动后怎么验证系统真正跑通我建议按这个顺序走一遍先在前端页面注册一个普通用户再拿初始化的管理员账号通常admin/admin123登录后台添加物品分类、上架物品退出管理员登录用普通用户账号登录浏览物品、下单租赁再切回管理员账号进入订单管理审核这笔订单最后用普通用户账号发起归还确认仓库库存是否恢复。这一圈跑完没问题说明整个系统的核心链路是通的。6. 踩坑记录与二次开发常见问题排查和改造思路6.1 启动阶段最常见的三类报错第一类是JDK版本问题。报错class file has wrong version解决办法就是降低JDK版本或者把项目升级到SpringBoot 3.x换JDK 17但一般不推荐自己升级主版本改动量太大。第二类是端口被占用。后端启动日志提示Port 8080 was already in use要么改application.yml里的server.port要么把系统中占用8080的进程杀掉。改端口后记得同步修改前端代理的target地址。第三类是Maven依赖下载失败。国内网络环境下建议在settings.xml里配置阿里云镜像源下载速度会有质的提升。另外不要频繁删~/.m2/repository目录有些依赖重新下载更费劲。6.2 数据库连接问题速查报错信息原因解决办法Access denied for user rootlocalhost数据库密码不对检查application.yml里的passwordUnknown database rent_db数据库没创建执行SQL脚本里的CREATE DATABASEPublic Key Retrieval is not allowedMySQL 8.0安全机制url里加allowPublicKeyRetrievaltrueCommunications link failure连接超时或端口不对检查MySQL端口是否为3306Table xxx doesnt existSQL脚本没有完整导入重新执行脚本确认没有报错关于“表不存在”这个坑需要特别提醒很多人的SQL脚本是在图形化工具里双击执行的如果工具当前默认连接的库不是脚本里的目标库就会建到别的库里导致后端连的目标库没有表。只要后端报找不到表第一件事就是去看刚才执行脚本时到底连到了哪个库。6.3 接口联调问题404、401、跨域前端页面能打开但请求不到后端这个问题分三种情况。404一般是路径对不上。打开浏览器开发者工具的Network面板看请求的完整URL。如果请求落到了http://localhost:3000/api/...但代理没生效就去检查vue.config.js的代理配置和路径前缀是否匹配。401是token问题。可能原因是登录接口拿到的token没存进localStorage或者是请求拦截器没有把token加到header里。先在开发者工具里看请求头有没有Authorization字段再继续排查。跨域报错CORS的话优先用代理解决不要上来就改后端。如果一定要在后端解决写一个CorsConfig并注册过滤器注意allowedOrigins不能和allowCredentials(true)同时用通配符*这是浏览器规范的限制写*就直接报错。6.4 把源码改造成自己业务的最佳路径这个项目最大的价值是可改造性。如果你想把它变成图书借阅系统只要把t_item换成图书表把字段从price_per_day改成borrow_days把“每日租金”改成“押金”订单逻辑不用动归还链路不用动整个系统就变成图书借阅管理了。如果做工具租借、服装租赁、设备借用思路完全一样。几个高频改造点我列一下都是实际用得上的密码加密从MD5升级成BCrypt。引入spring-security-crypto依赖改注册和登录两个地方几十行代码的事。增加逾期费用计算。订单表加overdue_days和overdue_fee字段归还时根据当前时间与end_date计算。物品图片改成真正的文件上传。源码里经常是图片URL字段加默认占位图想支持真实图片可以接MinIO或者本地磁盘存储数据库只存访问路径。列表加分页。后端用MyBatis-Plus的PageHelper或者手写LIMIT/OFFSET前端配el-pagination组件。拿这个项目改造成内部工具时我最大的体会是一个能跑的全栈源码价值不在于代码本身有多高级而在于它帮你省掉了从零搭脚手架的时间。即使你最后不用SpringBoot、不用Vue把它拆开读一遍也能建立一整套“租赁业务到底需要做哪些事”的全局认知。拿到源码后第一件事不是急着启动而是花半小时把数据库表结构捋一遍把订单状态流转画一遍然后再启动你会发现自己对这个项目的理解完全不一样。
SpringBoot+Vue物品租赁系统源码：全栈业务闭环实战解析
物品租赁系统这套源码后端SpringBoot、前端Vue、数据存MySQL属于那种“标签看上去很普通用起来真的能省事”的全栈项目。很多人在搜这种“信息管理系统源码”其实目的很明确不是要看一个玩具demo而是希望拿到一个能跑通完整租赁业务闭环的项目——物品上架、用户浏览下单、管理员审核、到期归还、库存自动恢复一条线全部串起来。它既适合正在做毕业设计的在校生也适合刚入手全栈开发的Java工程师拿来当练习样板甚至可以直接改造成公司内部的资产借用工具。这篇我就按自己的实操经验把项目结构、数据库设计、后端接口、前端页面、部署运行和常见坑一条条拆给你看。1. 项目到底做了啥租赁闭环的需求拆解与定位分析1.1 这个源码解决的不是“展示”而是“业务闭环”很多人以为“物品租赁系统”就是做一个物品列表页面配上后台管理其实大错特错。租赁系统和普通商城最大的区别在于它多了一层“时间”和“归还”的概念。商城只要把商品卖出去交易就结束了而租赁的物品归属权始终在出租方手里整个业务流程要围绕“借出—收回”这个循环来设计。所以你会看到这个源码的完整流程是这样的管理员先维护物品分类再上架物品物品属性里包含每日租金、押金、库存数量和上下架状态用户注册登录后在首页浏览可租物品点进详情页选择租赁天数系统自动计算租金加押金提交后生成订单管理员后台看到待审核订单确认没问题就审核通过此时库存真正扣减订单状态变成“租赁中”租期结束用户申请归还管理员确认归还后库存回补订单状态变成“已完成”。这个链路里值得学习的不是某个接口怎么写而是“状态机”的设计思路。订单从待审核、租赁中、已完成、已取消到已逾期每个状态都有对应的触发条件和前置动作。源码的价值就在于把这些逻辑固定成代码你拿到手能跑通看懂了就能改。1.2 三个角色的使用场景与权限边界整个项目里其实藏着三类使用者代码里通常用两种身份表示。第一类是普通用户。用户登录后能看物品列表、搜索物品、查看详情、下单租赁、在“我的订单”里查看记录并发起归还。这个视角对应的是C端体验关注点是怎么快速找到想租的东西、租金怎么算、订单什么状态。第二类是管理员。管理员负责后台管理包括用户管理、物品管理、分类管理、订单审核、归还确认。这个视角是B端运营关注点是库存数据准不准、订单有没有异常、哪些物品该下架。第三类其实就是你——开发者。你拿到源码后关注的是项目怎么跑起来、表结构怎么扩展、接口返回什么格式、权限能不能改复杂一点。权限边界这里源码基本不会引入Spring Security很多项目就是在用户表里放一个role字段0表示普通用户1表示管理员。后端接口在拦截器里判断一下当前用户角色不是管理员就直接拒绝访问。这种设计对教学项目和内部系统非常友好简单直接、代码容易读。如果是生产环境我更建议改成RBAC式的角色权限模型但这个项目里完全没必要为了设计模式而设计。2. SpringBoot后端分层结构、认证设计与事务处理重点2.1 三层架构放现在依然好用打开后端项目包结构基本是这样一个模板com.rent.system ├── RentApplication.java ├── configCORS跨域配置、JWT拦截器注册 ├── controller接口入口 ├── service │ └── impl业务逻辑 ├── mapperMyBatis的Mapper接口 ├── entity数据库表对应的实体类 ├── dto接收前端参数的传输对象 └── common统一返回Result、全局异常处理、Jwt工具类controller负责接收请求、做最基础的参数校验、调用serviceservice里面写业务规则mapper管SQL。这套三层架构被吐槽了很多年但放在这种体量的项目里依然是最合理的选择。业务逻辑不复杂、团队规模不大、开发速度要快三层结构让每个文件的职责都很好定位。真上了DDD那套反而会把整体复杂度抬上去团队如果没人熟悉领域驱动设计最后只会得到一个既没有DDD精髓又没有三层简单性的半吊子代码。接口风格是RESTful的比如物品列表GET /api/item/list、创建订单POST /api/order/create。所有接口都返回同一个Result结构public class ResultT { private Integer code; // 200成功401未登录500异常 private String msg; // 提示信息 private T data; // 业务数据 }这个设计让前后端联调非常舒服。前端拿到响应后只需要先看code再决定取data还是弹msg不需要每个接口单独处理异常结构。统一返回对象还有一个隐藏好处——后面对接网关、做日志切面的时候能少写很多适配代码。2.2 用户认证JWT而不是Session既然是前后端分离前端Vue跑在一个端口后端SpringBoot跑在另一个端口那Session方案就会撞上跨域Cookie的坑。浏览器同源策略下跨域携带Cookie需要处理CORS、withCredentials、SameSite一堆麻烦所以在前后端分离的项目里JWT是更合理的默认选择。登录流程是标准做法用户输入账号密码后端校验通过后生成一个包含用户ID、用户名、角色信息的token返回给前端前端把token存进localStorage之后每次请求都在Authorization请求头里带上后端通过拦截器解析token能解析出来就放行解析失败就返回401。拦截器的核心逻辑大概长这样Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 登录、注册接口直接放行 if (handler instanceof HandlerMethod) { HandlerMethod hm (HandlerMethod) handler; if (hm.getMethodAnnotation(PassToken.class) ! null) { return true; } } String token request.getHeader(Authorization); if (!JwtUtil.verify(token)) { response.setStatus(401); return false; } return true; } }实操中有两个细节容易被忽略。第一个是token过期时间建议设置2小时左右太短影响体验太长安全性下降。第二个是注销登录这种简单项目里直接让前端删掉本地token就算退出了后端不用维护token黑名单虽然严格说不严谨但内部系统完全够用。另外一定要记住把注册和登录接口加入白名单不然用户连登录都进不来。2.3 租赁下单与库存扣减的事务边界订单模块是整个后端代码里最值得细看的部分因为它同时操作了多张表业务规则也比较集中。下订单时后端大概要做这几件事查物品是否存在且处于可租状态、扣减库存、生成租赁订单。这三件事必须在同一个事务里完成否则就会出现“库存扣了但订单没创建成功”或“订单建了但库存没扣”这种数据错乱。Spring的解决方案就是Transactional注解把它加在service方法上方法内任何一步抛出异常前面已经执行的数据库操作全部回滚。这个理解起来容易但很多新手栽在事务方法内部的try-catch上——如果程序员自己在方法里把异常catch住不往外抛事务就不会回滚这是最容易踩的坑之一。扣减库存的SQL也值得单独说说。很多初学者习惯先查库存判断大于0再UPDATE这种写法在并发场景下会出问题两个请求同时读到库存为1都认为自己还能扣结果变成负数。正确的做法是把判断和扣减合成一条SQLUPDATE t_item SET stock stock - 1 WHERE id #{itemId} AND stock 0;执行这条UPDATE时MySQL会锁定对应的行stock 0这个条件保证并发情况下只有一个请求能成功。通过判断受影响行数如果为0就知道库存不足直接抛业务异常。这种利用数据库行锁来保证并发安全的方式是这个体量项目性价比最高的方案。金额计算也要放对位置。租赁总金额等于租赁天数乘以每日租金再加上押金。这个计算必须放在后端前端展示的金额只是预览不能作为实际金额。这样做既避免用户篡改请求参数也能保证计费规则统一。3. MySQL表设计核心表结构、字段规范与状态流转3.1 核心数据表长什么样一个标准物品租赁系统的数据库通常不会少于四张核心表分别是用户表、分类表、物品表和租赁订单表。我整理了一张简化版的字段说明照着这个思路去读源码里的SQL脚本会快很多。表名用途核心字段t_user用户与管理员id、username、password、phone、role、statust_category物品分类id、name、sortt_item租赁物品id、category_id、name、description、price_per_day、deposit、stock、cover、statust_rental_order租赁订单id、order_no、user_id、item_id、rent_days、start_date、end_date、total_amount、deposit、status、create_time物品表里的status字段通常表示上下架状态而“是否可租”更多是看stock库存数量。所以列表页的查询条件基本是status 1 AND stock 0这条SQL在首页、搜索接口里到处都会出现。订单表里的status则是整个项目最核心的状态字段从数字0到4分别表示待审核、租赁中、已完成、已取消、已逾期。3.2 字符集、金额字段与索引设计有几处字段规范做这类项目时我还是建议直接照着来都是踩过坑之后总结的。字符集要选utf8mb4排序规则用utf8mb4_general_ci或者utf8mb4_unicode_ci。原因很简单如果建库时用了老的utf8用户昵称里带个emoji表情插入数据库直接报错。这个问题在移动端注册场景尤其常见我碰到过不止一次。金额字段必须用decimal(10,2)不要用float或double。浮点数在计算机里是近似表示做金额比较和累加时经常出现0.1加0.2不等于0.3这种诡异问题。数据库层面用decimal价格计算才不会出现精度误差。索引设计上订单表的user_id和status一定要建索引因为“我的订单”和“后台订单列表”是查询频率最高的两个场景而且查询条件基本就是这两列组合。物品表的category_id也建议建索引分类筛选时用得上。外键这个事值得单独说一句。很多新手喜欢在表上建物理外键觉得数据完整性有保障但实际业务系统里我是反对用的。一个是删除数据时会被外键约束卡住另一个是高并发写入时外键会有额外的锁开销。这种项目用逻辑外键就够了关联关系由业务代码保证字段名叫category_id并不代表它一定要是物理外键。3.3 库存与订单状态怎么协同数据库层面最值得研究的就是库存和订单状态如何联动。用户下单时事务里同时要更新t_item的库存和插入t_rental_order记录此时订单状态是“待审核”。注意这个阶段库存其实还没扣真正扣库存发生在管理员审核通过的那一刻。为什么不是下单就扣因为如果用户下单后一直不付款或者管理员审核时发现物品本身有问题拒绝这笔订单提前扣库存会让其他用户白白看得到却租不了。管理员审核通过时后端要做两个动作把订单状态改成“租赁中”执行UPDATE t_item SET stock stock - 1 WHERE id ? AND stock 0。两个动作同样在事务里。归还流程是对称的用户发起归还管理员确认后订单状态改成“已完成”同时UPDATE t_item SET stock stock 1 WHERE id ?把库存加回来。如果归还时间已经超过了end_date订单状态可以直接标记为“已逾期”源码级别一般不会真去算罚金只是状态展示上给管理员一个提醒。库存回补的逻辑要小心重复提交所以归还确认的接口建议做成幂等的无论用户点多少次只有第一次调用能真正修改状态和库存后面调用直接返回已处理。4. Vue前端路由划分、Axios封装与页面交互实现4.1 页面路由与用户权限前端项目打开后Vue Router的路由表大概会覆盖这些页面路由路径页面作用访问角色/login登录页游客/register注册页游客/首页物品列表登录用户/item/:id物品详情与租赁下单登录用户/my/orders我的租赁订单普通用户/admin/items后台物品管理管理员/admin/orders后台订单审核与归还管理员/admin/users后台用户管理管理员路由守卫写在router.beforeEach里逻辑不算复杂从localStorage里拿token没有token就跳转/login如果访问的是/admin开头的路径再判断本地存的用户角色是不是管理员不是就直接拦下来。这里有一个很关键的隐患前端路由守卫只能管页面显示真正保护接口还是要后端拦截器管。前端把token传给别人别人也能以你的身份调接口所以别以为路由守卫是安全边界。4.2 Axios封装与请求拦截前端所有请求几乎都走一个统一的Axios实例创建时指定baseURL为/api。这个/api不是后端域名而是配合本地开发服务器的代理配置后面讲部署时会单独说。import axios from axios const service axios.create({ baseURL: /api, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) service.interceptors.response.use( response { const res response.data if (res.code 401) { localStorage.removeItem(token) window.location.href /login } return res }, error { return Promise.reject(error) } )请求拦截器负责在每次请求时自动带上token响应拦截器负责统一处理后端返回的code。这里我最推荐的处理方式是只要后端返回401前端就清掉本地token并且强制跳回登录页。这样用户token过期之后所有请求都会平滑地回到登录入口而不是在页面上报一堆莫名其妙的401错误。4.3 列表页、表单页与状态展示的实现套路前端页面大量依赖Element UI组件三个套路用熟了基本就把PC端管理类页面拿下了。第一个套路是列表页。把后端返回的数组塞进el-table状态字段用el-tag根据值显示不同颜色比如“待审核”显示橙色、“租赁中”显示蓝色、“已完成”显示绿色。这种状态标签的映射一般写在computed或者一个普通函数里写死一个状态字典维护起来很方便。第二个套路是弹窗表单。新增或编辑物品时用el-dialog套一个el-form通过点击按钮打开弹窗提交时先做前端校验再调接口。这里有个细节打开弹窗时一定要重置表单数据否则上一次编辑残留的数据会出现在新增弹窗里我见过不止一次这种低级bug。第三个套路是日期和金额联动。下单页面用el-date-picker选择开始日期和租赁天数前端实时展示预估费用。但最终金额以后端计算为准前端展示只是一种交互预告。5. 从零跑通项目环境版本匹配、数据库导入与前后端联调5.1 环境版本怎么选才不会翻车这个项目叫“可直接运行”但“直接”是有前提条件的环境版本必须对得上。我在帮人排查问题时发现80%的启动失败都是版本不匹配引起的。组件推荐版本说明JDK1.8 或 11SpringBoot 2.x的默认选择Maven3.6 及以上依赖管理必备MySQL5.7 或 8.08.0需要用allowPublicKeyRetrieval配置Node.js14 或 16Vue CLI项目对Node版本敏感npm6 或 8安装依赖用为什么特别强调Node版本因为Vue 2项目的依赖里经常带node-sass这个包需要在安装时编译原生的binding.nodeNode版本太新会导致编译失败报错信息还特别难懂。最稳妥的办法是Node 14或16装完依赖基本不会在这个环节卡住。JDK也一样。项目如果是基于SpringBoot 2.x开发的你用JDK 17去跑启动时会报class file has wrong version 61.0之类的不兼容错误。搞清楚项目底子是哪种SpringBoot版本再决定用几的JDK。5.2 数据库脚本导入与后端配置调整拿到源码后首先要做的一件事是去项目根目录找后缀为.sql的数据库脚本文件可能叫db_rent.sql、rent.sql或者init.sql。这个文件里包含建库、建表、插入初始数据的SQL语句是整个项目能跑起来的前提。导入方式很简单用Navicat新建一个连接执行SQL文件即可。导入完后确认数据库名与后端配置里的数据库名一致。接下来打开后端项目的application.yml核心就改动三处server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/rent_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 你的数据库密码url里几个参数我都建议保留。useSSLfalse是解决本地MySQL没有SSL证书导致连接失败的问题serverTimezoneAsia/Shanghai解决数据库时间差了8小时的问题allowPublicKeyRetrievaltrue专门解决MySQL 8.0的Public Key Retrieval is not allowed报错。这些坑如果不提前规避启动时就会一个一个蹦出来。之后用IDEA打开后端目录等Maven把依赖下载完直接运行带SpringBootApplication注解的主类。启动日志里出现“Started Application”就算后端起来了。5.3 前端代理配置与整链路验证前端目录打开后第一步是npm install装依赖。这一步如果报错90%是Node版本不对可以按前面表格里的版本调整后再试。依赖装完后修改前端项目根目录的vue.config.js配置本地代理module.exports { devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }这个代理是前后端联调的关键。前端跑在3000端口页面里请求/api/item/list时浏览器看到的还是相对路径http://localhost:3000/api/item/list没有跨域问题而devServer会在后台把这个请求转发到后端的http://localhost:8080/api/item/list。所以只要代理配置正确前端不需要单独处理CORS。启动后怎么验证系统真正跑通我建议按这个顺序走一遍先在前端页面注册一个普通用户再拿初始化的管理员账号通常admin/admin123登录后台添加物品分类、上架物品退出管理员登录用普通用户账号登录浏览物品、下单租赁再切回管理员账号进入订单管理审核这笔订单最后用普通用户账号发起归还确认仓库库存是否恢复。这一圈跑完没问题说明整个系统的核心链路是通的。6. 踩坑记录与二次开发常见问题排查和改造思路6.1 启动阶段最常见的三类报错第一类是JDK版本问题。报错class file has wrong version解决办法就是降低JDK版本或者把项目升级到SpringBoot 3.x换JDK 17但一般不推荐自己升级主版本改动量太大。第二类是端口被占用。后端启动日志提示Port 8080 was already in use要么改application.yml里的server.port要么把系统中占用8080的进程杀掉。改端口后记得同步修改前端代理的target地址。第三类是Maven依赖下载失败。国内网络环境下建议在settings.xml里配置阿里云镜像源下载速度会有质的提升。另外不要频繁删~/.m2/repository目录有些依赖重新下载更费劲。6.2 数据库连接问题速查报错信息原因解决办法Access denied for user rootlocalhost数据库密码不对检查application.yml里的passwordUnknown database rent_db数据库没创建执行SQL脚本里的CREATE DATABASEPublic Key Retrieval is not allowedMySQL 8.0安全机制url里加allowPublicKeyRetrievaltrueCommunications link failure连接超时或端口不对检查MySQL端口是否为3306Table xxx doesnt existSQL脚本没有完整导入重新执行脚本确认没有报错关于“表不存在”这个坑需要特别提醒很多人的SQL脚本是在图形化工具里双击执行的如果工具当前默认连接的库不是脚本里的目标库就会建到别的库里导致后端连的目标库没有表。只要后端报找不到表第一件事就是去看刚才执行脚本时到底连到了哪个库。6.3 接口联调问题404、401、跨域前端页面能打开但请求不到后端这个问题分三种情况。404一般是路径对不上。打开浏览器开发者工具的Network面板看请求的完整URL。如果请求落到了http://localhost:3000/api/...但代理没生效就去检查vue.config.js的代理配置和路径前缀是否匹配。401是token问题。可能原因是登录接口拿到的token没存进localStorage或者是请求拦截器没有把token加到header里。先在开发者工具里看请求头有没有Authorization字段再继续排查。跨域报错CORS的话优先用代理解决不要上来就改后端。如果一定要在后端解决写一个CorsConfig并注册过滤器注意allowedOrigins不能和allowCredentials(true)同时用通配符*这是浏览器规范的限制写*就直接报错。6.4 把源码改造成自己业务的最佳路径这个项目最大的价值是可改造性。如果你想把它变成图书借阅系统只要把t_item换成图书表把字段从price_per_day改成borrow_days把“每日租金”改成“押金”订单逻辑不用动归还链路不用动整个系统就变成图书借阅管理了。如果做工具租借、服装租赁、设备借用思路完全一样。几个高频改造点我列一下都是实际用得上的密码加密从MD5升级成BCrypt。引入spring-security-crypto依赖改注册和登录两个地方几十行代码的事。增加逾期费用计算。订单表加overdue_days和overdue_fee字段归还时根据当前时间与end_date计算。物品图片改成真正的文件上传。源码里经常是图片URL字段加默认占位图想支持真实图片可以接MinIO或者本地磁盘存储数据库只存访问路径。列表加分页。后端用MyBatis-Plus的PageHelper或者手写LIMIT/OFFSET前端配el-pagination组件。拿这个项目改造成内部工具时我最大的体会是一个能跑的全栈源码价值不在于代码本身有多高级而在于它帮你省掉了从零搭脚手架的时间。即使你最后不用SpringBoot、不用Vue把它拆开读一遍也能建立一整套“租赁业务到底需要做哪些事”的全局认知。拿到源码后第一件事不是急着启动而是花半小时把数据库表结构捋一遍把订单状态流转画一遍然后再启动你会发现自己对这个项目的理解完全不一样。
