简介这是一套面向Java初学者与毕业设计学生的全栈库存管理系统实战项目基于SpringBootVue技术栈开发覆盖课程设计、期末大作业及毕业设计等典型教学场景解决传统库存管理手工操作效率低、数据易出错等实际问题。资源包共431个文件含117个Java后端核心类含完整注释、60个Vue前端组件、161个SVG图标资源、19个PNG/JPG界面素材、1个MySQL建库脚本sql及3个自动化部署bat脚本install/run/build整体21.12MB结构清晰、模块分明。已有61人学习下载配套提供前后端分离访问路径后台admin/dist/index.html、前台front/index.html及详细环境适配说明MySQL 5.7、Tomcat 7.x/8.x。用户可直接导入IDEA运行无需二次开发即可体验完整的商品管理、入库出库、库存预警、角色权限等业务功能附带的配置文件yml、样式文件scss/css与静态资源ico/mp4/mp3进一步降低部署门槛。 先问一个问题从网上扒下一个“基于Spring Boot Vue库存管理系统附源码、数据库”的zip包你第一件事准备做什么我见过最多的场景是——解压、用IDEA打开、点运行然后对着满屏红色报错发呆半小时最后默默关掉项目。这个包能帮到你前提是你会正确拆它、改它、跑它。这篇内容不是给你念代码而是把这类JavaWeb项目的完整套路拆开讲清楚项目结构怎么搭、后端鉴权和库存扣减怎么设计、前端Vue怎么对接、数据库表怎么建、从零跑起来要踩哪些坑。适合正在做课程设计、毕业设计或者刚接触Spring Boot Vue前后端分离项目的开发者参考。1. 先懂代码的骨架再谈跑起来1.1 一个标准Spring Boot Vue项目包里究竟装了什么zip包解压之后不要急着双击README先看目录。一个规范的前后端分离Java项目包内一般会分成三个平行的顶层模块backendSpring Boot工程、frontendVue工程、sql数据库脚本。有的项目会把sql脚本直接放在backend/src/main/resources/db目录下这也不奇怪。我建议你拿到手之后第一步做一件事按下快捷键打开文件管理器把顶层目录展开成树状图然后用5分钟把每个目录名和文件名过一遍。看到pom.xml就说明后端用的是Maven管理依赖看到package.json说明前端是Node生态看到.sql结尾的文件说明数据库脚本在这。这一步能筛掉一半的“启动失败”问题因为很多人连自己拿的是不是完整源码都没搞清楚。1.2 后端入口类在哪儿决定了你能不能启动成功Spring Boot项目一定有一个带SpringBootApplication注解的入口类名字一般叫XxxApplication.java放在backend/src/main/java下的某个包路径里。这个类是整个后端的启动钥匙。很多同学把项目导入IDEA后直接点绿色锤子结果IDEA说“没有配置”因为IDEA默认不会自动识别哪个类是Spring Boot入口类——你需要在入口类上右键选择Run或者在Application配置里设置Main class。换句话说如果你连*Application.java在哪个目录都没找到后续所有操作都是盲人摸象。还有一种更隐蔽的情况项目里存在多个Application类比如某个包下放了一个遗留的启动类你右键启动了一个不带SpringBootApplication注解的普通类然后报错no main manifest attribute。这类问题跟代码本身完全无关纯粹是没读懂工程结构。1.3 前端工程结构入口、路由、页面各司其职Vue工程的核心目录是src里面通常有main.js入口文件、App.vue根组件、router路由配置、views页面组件、api或utils接口封装。看前端代码不用全看先看三样东西一是package.json里用了哪些依赖Vue版本是2还是3UI库是Element UI还是Element Plus有没有axios二是router/index.js里配置了哪些路由三是src/api目录下封装了哪些接口。看完这三个文件整个前端的页面流转逻辑就清晰了大半。所以说这类项目的核心价值不在“代码量有多大”而在“工程结构是否标准”。你如果能独立看懂每个目录的作用这项目就算学到一半了。2. 后端Spring Boot从小白到能改库存核心逻辑2.1 分层架构Controller、Service、Mapper各管一段Spring Boot后端代码的核心是分层。你随便打开一个Java包必然能看到四层controller接口层接收HTTP请求、做参数校验、service业务层写核心业务逻辑、mapper或dao数据访问层操作数据库、entity或domain实体类对应数据库表。这个分层不是摆设。举个例子一个入库操作的请求路径是前端POST一个入库单到/api/stock/inController接收请求后把参数转成DTO对象传给Service层的stockIn方法Service里先查商品是否存在、再算库存变更然后调用Mapper层更新数据库最后把结果返回给前端。我在看这个项目的源码时最关注的是Service层。因为大部分课程设计的代码都把业务逻辑写在Controller里Controller几百行、Service空荡荡这种项目说明作者基本功不扎实。而一个合格的库存管理系统Controller只是薄薄一层壳Service层才是核心。2.2 JWT登录鉴权那些“改个密码就登不进去”的奇怪问题登录认证是JavaWeb项目绕不开的坎。这个项目里用的是JWTJSON Web Token流程不复杂用户提交用户名密码后端校验通过后生成一个token字符串返回给前端。前端拿到token后存到localStorage里。前端每次请求都带上这个token一般在请求头Authorization里。后端有个拦截器Interceptor或过滤器Filter拦截所有非登录接口验证token是否合法。token验证通过就放行不通过就返回401。实际项目中还有个容易出问题的点jwt的密钥secret写死在application.yml里。如果你下载到的项目里没有这个配置项启动虽然不会报错但认证接口一定会挂——因为框架初始化时就找不到密钥。还有一类经典问题明明登录成功了请求业务接口却一直提示“未登录”。这时候要看拦截器的放行路径是否配置了/login如果拦截器拦截了所有路径却又没有放行登录接口就会死循环式的登录失效。2.3 库存扣减与事务这地方的坑能写一万字库存管理系统的核心业务无非四个字入库、出库。但就是这看似简单的两个操作隐藏了最多逻辑难点。看这段典型的出库Service层代码大致长这样Transactional(rollbackFor Exception.class) public void stockOut(StockOutDTO dto) { // 1. 校验商品是否存在 Product product productMapper.selectById(dto.getProductId()); if (product null) { throw new BusinessException(商品不存在); } // 2. 校验库存是否充足 Stock stock stockMapper.selectByProductId(dto.getProductId()); if (stock.getQuantity() dto.getQuantity()) { throw new BusinessException(库存不足); } // 3. 扣减库存 stock.setQuantity(stock.getQuantity() - dto.getQuantity()); stockMapper.updateById(stock); // 4. 记录出库流水 StockOutRecord record new StockOutRecord(); record.setProductId(dto.getProductId()); record.setQuantity(dto.getQuantity()); record.setCreateTime(new Date()); stockOutRecordMapper.insert(record); }注意第3步和第4步库存表的数量变更和出库流水表的插入必须放在同一个事务里。也就是说要么都成功要么都失败。这就是Transactional注解存在的意义——你看到Service方法上挂着这个注解就要明白它保证的是“库存扣了但流水没记”这种事故不会发生。我在评价一个库存系统代码质量的时候就看两件事第一有没有加事务第二扣库存的时候有没有在应用层先校验库存。两者缺一个系统上线必出事故。2.4 application.yml启动失败的“重灾区”配置文件这个文件是Spring Boot项目的神经中枢。数据库地址、用户名密码、Redis连接、JWT密钥、服务器端口全在这。拿到项目后第一件事不是跑而是打开这个文件逐行检查。最常见的三个坑spring.datasource.url里的数据库名、IP地址和端口是否跟本机MySQL一致。很多人把人家项目里写的localhost:3306/inventory_db原封不动拿过来跑结果自己MySQL里根本没建这个库。spring.datasource.username/password是不是你自己本机的数据库账号密码项目作者一般习惯用root/123456你要是没改连接必然失败。MySQL驱动版本。老项目用com.mysql.jdbc.DriverMySQL 8以上要改成com.mysql.cj.jdbc.Driver同时URL后面要带上serverTimezoneAsia/Shanghai否则时区报错。提示这一小步就能拦住一半以上“启动失败”的同学。不管项目里写了什么先把自己本机的IP、端口、账号、密码对齐再谈启动。3. 前端Vue前端不只是页面更是接口对接的艺术3.1 路由与页面权限登录之后能跳转到哪些页面Vue前端的路由配置决定了一个系统有哪些页面可以访问。以我这个项目为例router/index.js里的典型配置长这样const routes [ { path: /login, component: () import(/views/Login.vue), meta: { title: 登录 } }, { path: /, component: Layout, redirect: /dashboard, children: [ { path: dashboard, name: Dashboard, component: () import(/views/Dashboard.vue), meta: { title: 首页看板, roles: [admin, user] } }, { path: product, name: Product, component: () import(/views/product/ProductList.vue), meta: { title: 商品管理, roles: [admin] } } ] } ];我建议你把路由配置文件完整看一遍把它当成“导航地图”。这个地图能告诉你两件事一是页面之间的跳转关系谁能跳到谁二是路由守卫的登录校验逻辑哪些页面必须登录才能看。很多同学跑来问“为什么我点菜单没反应”一查才知道路由配置里根本没加对应的组件路径。3.2 axios拦截器token是怎么被自动带上的前端调用后端接口不是每个页面直接fetch一下就行了正规做法是封装一个统一的axios实例然后在请求拦截器里统一注入token// api/request.js import axios from axios; import { Message } from element-ui; import router from /router; const service axios.create({ baseURL: /api, timeout: 10000 }); // 请求拦截器自动携带token service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] token; } return config; }); // 响应拦截器统一处理错误 service.interceptors.response.use( response { return response.data; }, error { if (error.response error.response.status 401) { localStorage.removeItem(token); router.push(/login); } Message.error(error.response?.data?.message || 请求失败); return Promise.reject(error); } );这段代码里有几个细节值得注意baseURL配置的是/api这就意味着前端所有请求都会拼上/api前缀那么后端接口路径也得是/api开头或者后端做了统一的前缀处理。这就是“联调”的关键前端和后端对接口路径的口径必须达成一致否则前端发/api/login后端接口是/login永远匹配不上。3.3 表格和表单商品管理页面的增删改查是怎么做的商品管理是库存系统最典型的CRUD页面。前端做这种事情已经高度模板化了页面加载时调一次查询接口拿到数据渲染成表格新增和编辑共用同一个弹窗表单提交时调用对应的接口删除点击时弹个确认框确认后调删除接口。这里面最容易被忽视的是表单校验和字段绑定。Vue Element UI里表单的v-model绑定要和后端DTO的字段名完全一致例如后端接收的参数叫productName前端表单字段也要叫productName否则提交后后端拿到的是undefined接口没有任何响应但数据就是插不进去。3.4 联调跨域前端怎么访问后端接口不被拦截开发模式下前后端是分开跑的前端跑在http://localhost:8080后端跑在http://localhost:9090跨域问题就出现了。这个项目最省事的解决方案是在vue.config.js里配置代理module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:9090, changeOrigin: true } } } };这个配置的意思是前端所有以/api开头的请求都会转发到后端的9090端口。这样一来浏览器看到的请求是同源的跨域问题在开发服务器层面就解决了。我遇到很多新手卡在这一步前端跑起来了后端也跑起来了但页面数据死活加载不出来打开浏览器控制台一看全是CORS错误。为什么会这样就是没配代理前端直接拿http://localhost:8080/api/xxx去访问了。加上这个代理配置问题立刻消失。4. 数据库设计这张表结构图比代码更值钱4.1 核心表拆解用户、商品、库存、流水库存管理系统最核心的数据库表一般是四到五张。看一个库存系统的数据库设计水平就是看这两张表库存表和流水表。典型建表脚本MySQL方言大致是-- 用户表 CREATE TABLE sys_user ( id INT NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL COMMENT 用户名, password VARCHAR(100) NOT NULL COMMENT 密码MD5加密, role VARCHAR(20) DEFAULT user COMMENT 角色, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 商品表 CREATE TABLE product ( id INT NOT NULL AUTO_INCREMENT, product_name VARCHAR(100) NOT NULL COMMENT 商品名称, spec VARCHAR(50) DEFAULT NULL COMMENT 规格, unit VARCHAR(20) DEFAULT 个 COMMENT 单位, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 库存表 CREATE TABLE stock ( id INT NOT NULL AUTO_INCREMENT, product_id INT NOT NULL COMMENT 商品ID, quantity INT NOT NULL DEFAULT 0 COMMENT 当前库存数量, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_product (product_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 出入库流水表以出库为例 CREATE TABLE stock_out_record ( id INT NOT NULL AUTO_INCREMENT, product_id INT NOT NULL, quantity INT NOT NULL COMMENT 出库数量, operator VARCHAR(50) DEFAULT NULL COMMENT 操作人, remark VARCHAR(200) DEFAULT NULL COMMENT 备注, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_product_id (product_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;四个表的分工很清楚用户表管登录商品表管商品信息库存表存当前剩余量流水表记录每一次出入库的明细。4.2 为什么库存要单独一张表不能直接写在商品表里这是一个特别值得想明白的问题。很多课程设计为了偷懒直接把quantity字段放在商品表里这就埋下了隐患商品表记录的是“商品是什么”库存表记录的是“这个商品有多少”。两者是不同维度的问题。如果混在一张表里每次查询商品列表的时候都要带上库存数量还要担心“改商品信息”和“改库存”是不是同一个更新操作逻辑混乱并发操作时也容易出问题。拆成独立表之后商品归商品库存归库存系统扩展时如果要加库存预警、多仓库管理都只需要改库存表即可。4.3 事务与索引生产环境会直接淘汰掉的设计数据库导出的SQL脚本里除了建表语句通常还有INSERT INTO的初始化数据。我看这个项目的初始化脚本时重点看它有没有默认的管理员账号例如INSERT INTO sys_user (username, password, role) VALUES (admin, e10adc3949ba59abbe56e057f20f883e, admin);这个e10adc...是123456的MD5值。所以默认登录账号通常是admin / 123456前提是逻辑没改过。另外要注意的是索引。用户表、商品表数据量几百条的时候有没有索引根本无感但一旦到了数万条WHERE product_id ?这种查询没有索引就会全表扫描响应时间直线上升。所以商表、流水表的product_id字段必须建索引这也是我在日常开发中一定会检查的点。5. 从零跑通项目完整实操步骤与报错排查5.1 本机环境准备哪些软件必须装、版本怎么选跑这个项目你本机至少要装齐这几样软件推荐版本用途JDK1.8或11编译运行后端Maven3.6以上后端依赖管理MySQL5.7或8.0数据库Node.js14以上前端运行环境IDEA或VSCode最新版开发IDE版本选择有一个原则项目里pom.xml写的Java版本是多少你就尽量装对应的JDK。很多报错源头其实就是版本不匹配比如用JDK 17跑一个为JDK 8写的项目不兼容的依赖直接报错。5.2 后端启动步骤从导入到跑起来的每一步第一步用IDEA打开后端目录backend文件夹等待Maven自动下载依赖。这一步最耗时也最容易卡住建议先检查Maven的settings.xml里有没有配置阿里云镜像mirror idaliyun/id mirrorOfcentral/mirrorOf urlhttps://maven.aliyun.com/repository/public/url /mirror没配镜像的话下载速度会让人怀疑人生。第二步打开application.yml把数据库连接改成你自己的。这里记得先去MySQL里执行sql脚本mysql -u root -p sql/inventory.sql然后确认一下表有没有建成功mysql -u root -p -e use inventory_db; show tables;第三步找到*Application.java右键运行。如果控制台出现Tomcat started on port(s): 9090之类的日志说明后端已经启动成功。5.3 前端启动步骤npm install和npm run serve打开前端目录frontend文件夹打开终端执行npm install这一步是安装前端依赖根据网速可能需要几分钟。如果报错网络超时可以执行npm config set registry https://registry.npmmirror.com然后重新npm install。装完之后执行npm run serve看到App running at: http://localhost:8080就说明前端也起来了。接下来用浏览器访问这个地址输入admin / 123456如果能看到首页看板和库存数据就说明整个项目已经跑通了。5.4 联调阶段最常遇到的三种报错前端和后端各自启动成功不代表联调没问题。我建议你在登录页面按F12打开控制台认真看Network面板专门留意以下三种报错404接口路径对不上检查代理前缀和接口路径。401token没带或者已失效检查axios拦截器和登录逻辑。500后端代码异常直接看后端控制台报的Java异常多半是空指针、SQL语法错误。联调的本质就是“用网络请求把前后端串起来”所以浏览器Network面板是你最好的老师。6. 实际操作中踩过的坑和避坑建议6.1 环境层面的坑版本不匹配导致的连锁反应我在帮别人排查这个项目启动问题时碰到的第一大坑是JDK版本和Maven版本不匹配。当时同学的电脑装的是JDK 17项目里用的是Java 8语法结果编译期报错Cannot resolve symbol var找了半天发现根本不是代码问题就是JDK版本太新。另一个坑是npm install装出来的node-sass编译失败。这个库对Node版本极其敏感Node 16以上经常装不上。解决办法是换成dart-sass即sass包或者在package.json里把版本改成适配Node的版本。6.2 数据库层面的坑时区、编码、大小写MySQL 8默认字符集是utf8mb4如果你导入的表里含中文却显示乱码八成是表建错了字符集。还有一种情况连接字符串没加serverTimezoneAsia/Shanghai启动报The server time zone value is unrecognized。这些都是有固定解决方案的不需要改代码。还有Windows环境下MySQL表名大小写敏感的问题。如果项目里TableName(stock_out_record)写的是小写但数据库里建表时用的是STOCK_OUT_RECORD就会报“表不存在”。统一用小写命名能省掉很多这类问题。6.3 业务逻辑层面的坑库存为负、并发扣减、日志不完整库存系统的业务逻辑坑比环境坑更致命。第一个坑是库存为负。如果出库操作没有校验“库存是否充足”就直接扣减业务上一旦出现超卖库存就是负数。这个问题我在代码里看到的处理方法是加校验但有些项目并没有这个保护需要你自己补。第二个坑是并发扣减。两个用户同时提交出库单都读到库存100都扣了80最后库存变成-60。解决思路有几种数据库行锁SELECT ... FOR UPDATE、乐观锁版本号字段、或者用数据库原子操作UPDATE stock SET quantity quantity - #{num} WHERE product_id #{id} AND quantity #{num}。这个项目用到的方式各有差异但你至少要有这个意识。第三个坑是日志不完整。库存系统出问题的时候如果没有流水记录排查起来会非常痛苦。所以我看系统源码时格外看重出库和入库操作有没有在流水表里留下痕迹——没有流水记录的库存系统上线等于裸奔。6.4 我个人的建议先改需求再谈优化如果你拿这个项目做课程设计或毕业设计我的建议不是直接照抄而是动手改一个对你自己有意义的模块。比如把“商品”改成“图书”加上ISBN号、出版社字段或者加上库存预警功能库存低于阈值时在首页弹个提醒。你会发现改一个功能比新写一个系统学到的东西多得多。如果只是想把项目跑起来看看效果那就按照上面的步骤一步步来遇到报错不要慌先看日志再搜索最后动手改。每解决一个报错你对这个系统的理解就深一层。库存管理系统是个经典的JavaWeb实战项目麻雀虽小五脏俱全——登录鉴权、CRUD、事务、前后端交互都有了。把这套骨架吃透以后换任何业务场景都只是换表和换字段的事。本文还有配套的精品资源点击获取
Spring Boot+Vue库存管理系统实战：从项目结构到跑通全流程
简介这是一套面向Java初学者与毕业设计学生的全栈库存管理系统实战项目基于SpringBootVue技术栈开发覆盖课程设计、期末大作业及毕业设计等典型教学场景解决传统库存管理手工操作效率低、数据易出错等实际问题。资源包共431个文件含117个Java后端核心类含完整注释、60个Vue前端组件、161个SVG图标资源、19个PNG/JPG界面素材、1个MySQL建库脚本sql及3个自动化部署bat脚本install/run/build整体21.12MB结构清晰、模块分明。已有61人学习下载配套提供前后端分离访问路径后台admin/dist/index.html、前台front/index.html及详细环境适配说明MySQL 5.7、Tomcat 7.x/8.x。用户可直接导入IDEA运行无需二次开发即可体验完整的商品管理、入库出库、库存预警、角色权限等业务功能附带的配置文件yml、样式文件scss/css与静态资源ico/mp4/mp3进一步降低部署门槛。 先问一个问题从网上扒下一个“基于Spring Boot Vue库存管理系统附源码、数据库”的zip包你第一件事准备做什么我见过最多的场景是——解压、用IDEA打开、点运行然后对着满屏红色报错发呆半小时最后默默关掉项目。这个包能帮到你前提是你会正确拆它、改它、跑它。这篇内容不是给你念代码而是把这类JavaWeb项目的完整套路拆开讲清楚项目结构怎么搭、后端鉴权和库存扣减怎么设计、前端Vue怎么对接、数据库表怎么建、从零跑起来要踩哪些坑。适合正在做课程设计、毕业设计或者刚接触Spring Boot Vue前后端分离项目的开发者参考。1. 先懂代码的骨架再谈跑起来1.1 一个标准Spring Boot Vue项目包里究竟装了什么zip包解压之后不要急着双击README先看目录。一个规范的前后端分离Java项目包内一般会分成三个平行的顶层模块backendSpring Boot工程、frontendVue工程、sql数据库脚本。有的项目会把sql脚本直接放在backend/src/main/resources/db目录下这也不奇怪。我建议你拿到手之后第一步做一件事按下快捷键打开文件管理器把顶层目录展开成树状图然后用5分钟把每个目录名和文件名过一遍。看到pom.xml就说明后端用的是Maven管理依赖看到package.json说明前端是Node生态看到.sql结尾的文件说明数据库脚本在这。这一步能筛掉一半的“启动失败”问题因为很多人连自己拿的是不是完整源码都没搞清楚。1.2 后端入口类在哪儿决定了你能不能启动成功Spring Boot项目一定有一个带SpringBootApplication注解的入口类名字一般叫XxxApplication.java放在backend/src/main/java下的某个包路径里。这个类是整个后端的启动钥匙。很多同学把项目导入IDEA后直接点绿色锤子结果IDEA说“没有配置”因为IDEA默认不会自动识别哪个类是Spring Boot入口类——你需要在入口类上右键选择Run或者在Application配置里设置Main class。换句话说如果你连*Application.java在哪个目录都没找到后续所有操作都是盲人摸象。还有一种更隐蔽的情况项目里存在多个Application类比如某个包下放了一个遗留的启动类你右键启动了一个不带SpringBootApplication注解的普通类然后报错no main manifest attribute。这类问题跟代码本身完全无关纯粹是没读懂工程结构。1.3 前端工程结构入口、路由、页面各司其职Vue工程的核心目录是src里面通常有main.js入口文件、App.vue根组件、router路由配置、views页面组件、api或utils接口封装。看前端代码不用全看先看三样东西一是package.json里用了哪些依赖Vue版本是2还是3UI库是Element UI还是Element Plus有没有axios二是router/index.js里配置了哪些路由三是src/api目录下封装了哪些接口。看完这三个文件整个前端的页面流转逻辑就清晰了大半。所以说这类项目的核心价值不在“代码量有多大”而在“工程结构是否标准”。你如果能独立看懂每个目录的作用这项目就算学到一半了。2. 后端Spring Boot从小白到能改库存核心逻辑2.1 分层架构Controller、Service、Mapper各管一段Spring Boot后端代码的核心是分层。你随便打开一个Java包必然能看到四层controller接口层接收HTTP请求、做参数校验、service业务层写核心业务逻辑、mapper或dao数据访问层操作数据库、entity或domain实体类对应数据库表。这个分层不是摆设。举个例子一个入库操作的请求路径是前端POST一个入库单到/api/stock/inController接收请求后把参数转成DTO对象传给Service层的stockIn方法Service里先查商品是否存在、再算库存变更然后调用Mapper层更新数据库最后把结果返回给前端。我在看这个项目的源码时最关注的是Service层。因为大部分课程设计的代码都把业务逻辑写在Controller里Controller几百行、Service空荡荡这种项目说明作者基本功不扎实。而一个合格的库存管理系统Controller只是薄薄一层壳Service层才是核心。2.2 JWT登录鉴权那些“改个密码就登不进去”的奇怪问题登录认证是JavaWeb项目绕不开的坎。这个项目里用的是JWTJSON Web Token流程不复杂用户提交用户名密码后端校验通过后生成一个token字符串返回给前端。前端拿到token后存到localStorage里。前端每次请求都带上这个token一般在请求头Authorization里。后端有个拦截器Interceptor或过滤器Filter拦截所有非登录接口验证token是否合法。token验证通过就放行不通过就返回401。实际项目中还有个容易出问题的点jwt的密钥secret写死在application.yml里。如果你下载到的项目里没有这个配置项启动虽然不会报错但认证接口一定会挂——因为框架初始化时就找不到密钥。还有一类经典问题明明登录成功了请求业务接口却一直提示“未登录”。这时候要看拦截器的放行路径是否配置了/login如果拦截器拦截了所有路径却又没有放行登录接口就会死循环式的登录失效。2.3 库存扣减与事务这地方的坑能写一万字库存管理系统的核心业务无非四个字入库、出库。但就是这看似简单的两个操作隐藏了最多逻辑难点。看这段典型的出库Service层代码大致长这样Transactional(rollbackFor Exception.class) public void stockOut(StockOutDTO dto) { // 1. 校验商品是否存在 Product product productMapper.selectById(dto.getProductId()); if (product null) { throw new BusinessException(商品不存在); } // 2. 校验库存是否充足 Stock stock stockMapper.selectByProductId(dto.getProductId()); if (stock.getQuantity() dto.getQuantity()) { throw new BusinessException(库存不足); } // 3. 扣减库存 stock.setQuantity(stock.getQuantity() - dto.getQuantity()); stockMapper.updateById(stock); // 4. 记录出库流水 StockOutRecord record new StockOutRecord(); record.setProductId(dto.getProductId()); record.setQuantity(dto.getQuantity()); record.setCreateTime(new Date()); stockOutRecordMapper.insert(record); }注意第3步和第4步库存表的数量变更和出库流水表的插入必须放在同一个事务里。也就是说要么都成功要么都失败。这就是Transactional注解存在的意义——你看到Service方法上挂着这个注解就要明白它保证的是“库存扣了但流水没记”这种事故不会发生。我在评价一个库存系统代码质量的时候就看两件事第一有没有加事务第二扣库存的时候有没有在应用层先校验库存。两者缺一个系统上线必出事故。2.4 application.yml启动失败的“重灾区”配置文件这个文件是Spring Boot项目的神经中枢。数据库地址、用户名密码、Redis连接、JWT密钥、服务器端口全在这。拿到项目后第一件事不是跑而是打开这个文件逐行检查。最常见的三个坑spring.datasource.url里的数据库名、IP地址和端口是否跟本机MySQL一致。很多人把人家项目里写的localhost:3306/inventory_db原封不动拿过来跑结果自己MySQL里根本没建这个库。spring.datasource.username/password是不是你自己本机的数据库账号密码项目作者一般习惯用root/123456你要是没改连接必然失败。MySQL驱动版本。老项目用com.mysql.jdbc.DriverMySQL 8以上要改成com.mysql.cj.jdbc.Driver同时URL后面要带上serverTimezoneAsia/Shanghai否则时区报错。提示这一小步就能拦住一半以上“启动失败”的同学。不管项目里写了什么先把自己本机的IP、端口、账号、密码对齐再谈启动。3. 前端Vue前端不只是页面更是接口对接的艺术3.1 路由与页面权限登录之后能跳转到哪些页面Vue前端的路由配置决定了一个系统有哪些页面可以访问。以我这个项目为例router/index.js里的典型配置长这样const routes [ { path: /login, component: () import(/views/Login.vue), meta: { title: 登录 } }, { path: /, component: Layout, redirect: /dashboard, children: [ { path: dashboard, name: Dashboard, component: () import(/views/Dashboard.vue), meta: { title: 首页看板, roles: [admin, user] } }, { path: product, name: Product, component: () import(/views/product/ProductList.vue), meta: { title: 商品管理, roles: [admin] } } ] } ];我建议你把路由配置文件完整看一遍把它当成“导航地图”。这个地图能告诉你两件事一是页面之间的跳转关系谁能跳到谁二是路由守卫的登录校验逻辑哪些页面必须登录才能看。很多同学跑来问“为什么我点菜单没反应”一查才知道路由配置里根本没加对应的组件路径。3.2 axios拦截器token是怎么被自动带上的前端调用后端接口不是每个页面直接fetch一下就行了正规做法是封装一个统一的axios实例然后在请求拦截器里统一注入token// api/request.js import axios from axios; import { Message } from element-ui; import router from /router; const service axios.create({ baseURL: /api, timeout: 10000 }); // 请求拦截器自动携带token service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] token; } return config; }); // 响应拦截器统一处理错误 service.interceptors.response.use( response { return response.data; }, error { if (error.response error.response.status 401) { localStorage.removeItem(token); router.push(/login); } Message.error(error.response?.data?.message || 请求失败); return Promise.reject(error); } );这段代码里有几个细节值得注意baseURL配置的是/api这就意味着前端所有请求都会拼上/api前缀那么后端接口路径也得是/api开头或者后端做了统一的前缀处理。这就是“联调”的关键前端和后端对接口路径的口径必须达成一致否则前端发/api/login后端接口是/login永远匹配不上。3.3 表格和表单商品管理页面的增删改查是怎么做的商品管理是库存系统最典型的CRUD页面。前端做这种事情已经高度模板化了页面加载时调一次查询接口拿到数据渲染成表格新增和编辑共用同一个弹窗表单提交时调用对应的接口删除点击时弹个确认框确认后调删除接口。这里面最容易被忽视的是表单校验和字段绑定。Vue Element UI里表单的v-model绑定要和后端DTO的字段名完全一致例如后端接收的参数叫productName前端表单字段也要叫productName否则提交后后端拿到的是undefined接口没有任何响应但数据就是插不进去。3.4 联调跨域前端怎么访问后端接口不被拦截开发模式下前后端是分开跑的前端跑在http://localhost:8080后端跑在http://localhost:9090跨域问题就出现了。这个项目最省事的解决方案是在vue.config.js里配置代理module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:9090, changeOrigin: true } } } };这个配置的意思是前端所有以/api开头的请求都会转发到后端的9090端口。这样一来浏览器看到的请求是同源的跨域问题在开发服务器层面就解决了。我遇到很多新手卡在这一步前端跑起来了后端也跑起来了但页面数据死活加载不出来打开浏览器控制台一看全是CORS错误。为什么会这样就是没配代理前端直接拿http://localhost:8080/api/xxx去访问了。加上这个代理配置问题立刻消失。4. 数据库设计这张表结构图比代码更值钱4.1 核心表拆解用户、商品、库存、流水库存管理系统最核心的数据库表一般是四到五张。看一个库存系统的数据库设计水平就是看这两张表库存表和流水表。典型建表脚本MySQL方言大致是-- 用户表 CREATE TABLE sys_user ( id INT NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL COMMENT 用户名, password VARCHAR(100) NOT NULL COMMENT 密码MD5加密, role VARCHAR(20) DEFAULT user COMMENT 角色, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 商品表 CREATE TABLE product ( id INT NOT NULL AUTO_INCREMENT, product_name VARCHAR(100) NOT NULL COMMENT 商品名称, spec VARCHAR(50) DEFAULT NULL COMMENT 规格, unit VARCHAR(20) DEFAULT 个 COMMENT 单位, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 库存表 CREATE TABLE stock ( id INT NOT NULL AUTO_INCREMENT, product_id INT NOT NULL COMMENT 商品ID, quantity INT NOT NULL DEFAULT 0 COMMENT 当前库存数量, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_product (product_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 出入库流水表以出库为例 CREATE TABLE stock_out_record ( id INT NOT NULL AUTO_INCREMENT, product_id INT NOT NULL, quantity INT NOT NULL COMMENT 出库数量, operator VARCHAR(50) DEFAULT NULL COMMENT 操作人, remark VARCHAR(200) DEFAULT NULL COMMENT 备注, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_product_id (product_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;四个表的分工很清楚用户表管登录商品表管商品信息库存表存当前剩余量流水表记录每一次出入库的明细。4.2 为什么库存要单独一张表不能直接写在商品表里这是一个特别值得想明白的问题。很多课程设计为了偷懒直接把quantity字段放在商品表里这就埋下了隐患商品表记录的是“商品是什么”库存表记录的是“这个商品有多少”。两者是不同维度的问题。如果混在一张表里每次查询商品列表的时候都要带上库存数量还要担心“改商品信息”和“改库存”是不是同一个更新操作逻辑混乱并发操作时也容易出问题。拆成独立表之后商品归商品库存归库存系统扩展时如果要加库存预警、多仓库管理都只需要改库存表即可。4.3 事务与索引生产环境会直接淘汰掉的设计数据库导出的SQL脚本里除了建表语句通常还有INSERT INTO的初始化数据。我看这个项目的初始化脚本时重点看它有没有默认的管理员账号例如INSERT INTO sys_user (username, password, role) VALUES (admin, e10adc3949ba59abbe56e057f20f883e, admin);这个e10adc...是123456的MD5值。所以默认登录账号通常是admin / 123456前提是逻辑没改过。另外要注意的是索引。用户表、商品表数据量几百条的时候有没有索引根本无感但一旦到了数万条WHERE product_id ?这种查询没有索引就会全表扫描响应时间直线上升。所以商表、流水表的product_id字段必须建索引这也是我在日常开发中一定会检查的点。5. 从零跑通项目完整实操步骤与报错排查5.1 本机环境准备哪些软件必须装、版本怎么选跑这个项目你本机至少要装齐这几样软件推荐版本用途JDK1.8或11编译运行后端Maven3.6以上后端依赖管理MySQL5.7或8.0数据库Node.js14以上前端运行环境IDEA或VSCode最新版开发IDE版本选择有一个原则项目里pom.xml写的Java版本是多少你就尽量装对应的JDK。很多报错源头其实就是版本不匹配比如用JDK 17跑一个为JDK 8写的项目不兼容的依赖直接报错。5.2 后端启动步骤从导入到跑起来的每一步第一步用IDEA打开后端目录backend文件夹等待Maven自动下载依赖。这一步最耗时也最容易卡住建议先检查Maven的settings.xml里有没有配置阿里云镜像mirror idaliyun/id mirrorOfcentral/mirrorOf urlhttps://maven.aliyun.com/repository/public/url /mirror没配镜像的话下载速度会让人怀疑人生。第二步打开application.yml把数据库连接改成你自己的。这里记得先去MySQL里执行sql脚本mysql -u root -p sql/inventory.sql然后确认一下表有没有建成功mysql -u root -p -e use inventory_db; show tables;第三步找到*Application.java右键运行。如果控制台出现Tomcat started on port(s): 9090之类的日志说明后端已经启动成功。5.3 前端启动步骤npm install和npm run serve打开前端目录frontend文件夹打开终端执行npm install这一步是安装前端依赖根据网速可能需要几分钟。如果报错网络超时可以执行npm config set registry https://registry.npmmirror.com然后重新npm install。装完之后执行npm run serve看到App running at: http://localhost:8080就说明前端也起来了。接下来用浏览器访问这个地址输入admin / 123456如果能看到首页看板和库存数据就说明整个项目已经跑通了。5.4 联调阶段最常遇到的三种报错前端和后端各自启动成功不代表联调没问题。我建议你在登录页面按F12打开控制台认真看Network面板专门留意以下三种报错404接口路径对不上检查代理前缀和接口路径。401token没带或者已失效检查axios拦截器和登录逻辑。500后端代码异常直接看后端控制台报的Java异常多半是空指针、SQL语法错误。联调的本质就是“用网络请求把前后端串起来”所以浏览器Network面板是你最好的老师。6. 实际操作中踩过的坑和避坑建议6.1 环境层面的坑版本不匹配导致的连锁反应我在帮别人排查这个项目启动问题时碰到的第一大坑是JDK版本和Maven版本不匹配。当时同学的电脑装的是JDK 17项目里用的是Java 8语法结果编译期报错Cannot resolve symbol var找了半天发现根本不是代码问题就是JDK版本太新。另一个坑是npm install装出来的node-sass编译失败。这个库对Node版本极其敏感Node 16以上经常装不上。解决办法是换成dart-sass即sass包或者在package.json里把版本改成适配Node的版本。6.2 数据库层面的坑时区、编码、大小写MySQL 8默认字符集是utf8mb4如果你导入的表里含中文却显示乱码八成是表建错了字符集。还有一种情况连接字符串没加serverTimezoneAsia/Shanghai启动报The server time zone value is unrecognized。这些都是有固定解决方案的不需要改代码。还有Windows环境下MySQL表名大小写敏感的问题。如果项目里TableName(stock_out_record)写的是小写但数据库里建表时用的是STOCK_OUT_RECORD就会报“表不存在”。统一用小写命名能省掉很多这类问题。6.3 业务逻辑层面的坑库存为负、并发扣减、日志不完整库存系统的业务逻辑坑比环境坑更致命。第一个坑是库存为负。如果出库操作没有校验“库存是否充足”就直接扣减业务上一旦出现超卖库存就是负数。这个问题我在代码里看到的处理方法是加校验但有些项目并没有这个保护需要你自己补。第二个坑是并发扣减。两个用户同时提交出库单都读到库存100都扣了80最后库存变成-60。解决思路有几种数据库行锁SELECT ... FOR UPDATE、乐观锁版本号字段、或者用数据库原子操作UPDATE stock SET quantity quantity - #{num} WHERE product_id #{id} AND quantity #{num}。这个项目用到的方式各有差异但你至少要有这个意识。第三个坑是日志不完整。库存系统出问题的时候如果没有流水记录排查起来会非常痛苦。所以我看系统源码时格外看重出库和入库操作有没有在流水表里留下痕迹——没有流水记录的库存系统上线等于裸奔。6.4 我个人的建议先改需求再谈优化如果你拿这个项目做课程设计或毕业设计我的建议不是直接照抄而是动手改一个对你自己有意义的模块。比如把“商品”改成“图书”加上ISBN号、出版社字段或者加上库存预警功能库存低于阈值时在首页弹个提醒。你会发现改一个功能比新写一个系统学到的东西多得多。如果只是想把项目跑起来看看效果那就按照上面的步骤一步步来遇到报错不要慌先看日志再搜索最后动手改。每解决一个报错你对这个系统的理解就深一层。库存管理系统是个经典的JavaWeb实战项目麻雀虽小五脏俱全——登录鉴权、CRUD、事务、前后端交互都有了。把这套骨架吃透以后换任何业务场景都只是换表和换字段的事。本文还有配套的精品资源点击获取
