很多人学完 Vue3 的组合式 API，也写过几个 Spring Boot 的增删改查，但一到「真做一个能用的系统」就卡住：菜单怎么跟着角色变、按钮凭什么只给某些人看见、前端拿到的 token 到底该塞在哪一层、封装好的 axios 拦截器为什么总在刷新页面后失效。这门课瞄准的正是这道缝——不是再教你一遍 ref 和 @RestController，而是把一个物资管理系统从登录页一路做到权限收口。

先确认缺口在哪，再决定要不要跟

如果你对下面几件事中的任意一条答不上来，这门课对你是有效的：

  • Vue3 里把一段业务逻辑从组件抽成可复用的 composable，边界该划在哪，什么该放进 Pinia、什么不该；
  • 动态菜单和动态路由是不是一回事，后端返回菜单树之后，前端到底在哪一步把它变成 router.addRoute；
  • 按钮级权限，是靠自定义指令、还是靠一个权限判断函数，在模板里怎么写才不至于到处都是 v-if；
  • Spring Security 里 JWT 校验放在哪个过滤器，token 过期后前端怎么无感刷新而不是把用户踢回登录页。

这些问题的共同点是：单看某一端的文档都能懂，合起来做就不知道接口该谁定、状态该谁管。物资管理这个题材的好处是它足够「正常」——有物资分类、入库出库、库存盘点、角色区分，不会为了演示技术而硬造需求。

前端部分：语法糖只是起点

课程用 Vue3.2 的 <script setup> 起步，但重点不在语法糖本身，而在它带来的组织方式变化：组件里怎么只留视图、逻辑怎么下沉、TypeScript 的类型怎么从接口定义一路贯穿到表格列配置。Pinia 在这里承担的是登录态、用户信息、权限码这类跨页面的东西；Vue Router 4 负责的则是「路由表不是写死的」这件事——登录后拿到菜单再挂载，退出时清掉，刷新页面还要能恢复。

Element Plus 与 ECharts 属于绕不开的配套：前者决定表单校验、表格分页这些体力活怎么写才不啰嗦，后者在库存统计页里解决「数据怎么从后端聚合到一张图」。这些都不是炫技点，是实际交付时每天要碰的东西。

后端部分：权限不是加个注解就完事

Spring Boot 这一侧的核心是 Spring Security 与 JWT 的配合。要能回答：登录成功后 token 里放什么、放多少，为什么不该把权限列表整个塞进 token；接口鉴权是在过滤器链的哪一环做的；前端传 token 的方式变了，后端要动哪里。物资的入库出库、库存变更会牵涉事务与并发，课程里这些场景会逼着你思考「库存扣减到底该在哪一层做校验」，而不是在 Controller 里随手 if 一下。

看完应该能回答的问题

  • 一个新页面从后端菜单配置到前端可访问，中间经过哪几步？漏掉哪一步会出现「菜单有但点进去 404」？
  • 权限码在前端和后端分别被用在哪里？如果只做前端隐藏，风险是什么？
  • Pinia 里的用户状态在刷新后靠什么恢复？为什么不能只存在内存里？
  • 把组件里的业务逻辑抽成 composable 之后，哪些状态还留在组件内，为什么？
  • 库存数量被并发修改时，你的方案是怎么保证不出负数的？

配套练习建议不要只跟着敲一遍。每做完一个模块，试着把「物资」换成你熟悉的另一类对象（设备、图书、工单），只改字段不改结构，看哪些地方你会被迫改架构——那些地方就是你还没真正掌握的部分。

Vue3+SpringBoot物资管理系统实战

课程详情

课程详情

课程名称：Vue3+SpringBoot物资管理系统实战

课程适合对象

本课程适合具备以下基础知识的学员：

  • 有Vue2、Vue3组合API基础知识
  • 了解TypeScript、Spring Boot基础知识

课程涉及技术

  • CSS3
  • TypeScript
  • Vue3.2
  • Pinia
  • Vue Router4.x
  • Vite2.x
  • Element Plus
  • Spring Boot
  • jwt、token
  • Spring Security

课程收获

  • 掌握Vue3.2语法糖的使用
  • 掌握Vue3中组合API的使用
  • 掌握组件中业务逻辑抽离的方法
  • 掌握TypeScript在Vue3中的使用
  • 掌握动态菜单、动态路由、按钮权限的实现
  • vue3中全局挂载使用方式
  • vue3父子组件的使用
  • vue3中echarts的使用
  • token、权限验证
  • 掌握Pinia在实际项目中的使用方式
  • Icons图标动态生成
  • 掌握springboot开发前后端分离项目的能力
  • 掌握从0到1开发完整前后端分离项目的能力
  • 掌握Spring Security在前后端分离项目中的使用
  • 掌握jwt、token使用

课程目录

01 课程介绍与项目演示.mp4
02 创建前端项目.mp4
03 项目安装路由.mp4
04 项目安装Element-Plus.mp4
05 pinia安装与基础入门.mp4
06 主页布局讲解.mp4
07 左侧导航菜单制作讲解.mp4
08 菜单logo制作讲解.mp4
09 左侧菜单与路由配置.mp4
10 左侧菜单展开与收缩制作.mp4
11 面包屑导航制作.mp4
12 选项卡制作1.mp4
13 选项卡制作2.mp4
14 项目安装axios.mp4
15 弹框组件的封装.mp4
16 权限相关数据库设计.mp4
17 后端多模块项目创建.mp4
18 项目依赖的引入.mp4
19 项目整合MyBatis-Plus.mp4
20 角色管理模块接口开发.mp4
21 角色管理模块业务抽离.mp4
22 新增角色页面制作与对接.mp4
23 角色列列表制作与对接.mp4
24 通用工具封装与全局挂载.mp4
25 角色编辑、删除接口对接.mp4
26 用户管理模块接口开发.mp4
27 新增员工角色数据获取.mp4
28 新增用户页面制作与对接1.mp4
29 新增用户页面制作与对接2.mp4
30 用户列表页面制作与对接.mp4
31 编辑、删除用户接口对接.mp4
32 用户管理模块bug解决.mp4
33 菜单管理模块接口开发.mp4
34 新增菜单页面制作.mp4
35 上级菜单页面制作与新增对接.mp4
36 菜单管理列表制作与对接.mp4
37 菜单编辑、删除接口对接.mp4
38 物资管理模块数据库表设计.mp4
39 物资分类接口开发.mp4
40 新增分类页面制作与对接.mp4
41 分类列表页面制作与对接.mp4
42 分类编辑、删除接口对接.mp4
43 物资信息接口开发.mp4
44 新增物资页面制作.mp4
45 新增物资分类对接.mp4
46 物资图片上传讲解1.mp4
47 物资图片上传讲解2.mp4
48 物资信息列表制作与对接.mp4
49 编辑、删除物资接口对接.mp4
50 物资入库页面制作1.mp4
51 物资入库页面制作2.mp4
52 物资入库选择商品对接.mp4
53 物资信息加入.mp4
54 物资入库数据库表设计.mp4
55 物资入库接口开发.mp4
56 物资入库接口对接.mp4
57 物资入库记录接口开发.mp4
58 物资入库记录列表制作与对接.mp4
59 物资入库审核对接.mp4
60 物资发放页面制作.mp4
61 物资发放数据库表设计.mp4
62 物资发放接口开发.mp4
63 物资发放接口对接.mp4
64 物资发放记录接口开发与对接.mp4
65 物资发放审核接口开发与对接.mp4
66 解决库存问题.mp4
67 公告管理模块数据库表设计.mp4
68 公告管理模块接口开发.mp4
69 新增公告页面制作.mp4
70 公告列表页面制作与对接.mp4
71 公告编辑、删除对接.mp4
72 项目整合echarts.mp4
73 首页数据统计对接.mp4
74 首页统计图接口开发与对接.mp4
75 首页公告列表对接.mp4
76 登录页面制作.mp4
77 登录验证码对接讲解.mp4
78 登录接口开发.mp4
79 角色分配权限树回显接口开发.mp4
80 分配权限树制作与对接.mp4
81 pinia持久化操作.mp4
82 分配权限树保存与对接.mp4
83 获取用户信息接口开发.mp4
84 获取用户菜单接口开发.mp4
85 动态路由生成讲解.mp4
86 用户信息接口对接.mp4
87 权限验证流程讲解.mp4
88 用户退出登录讲解.mp4
89 按钮权限讲解.mp4
90 用户修改密码功能.mp4
91 导出用户excel讲解.mp4
92 物资信息导出excel讲解.mp4
93 物资入库、发放单打印讲解.mp4
94 项目整合spring-security.mp4
95 用户认证讲解(登录).mp4
96 用户授权对接讲解.mp4
97 自定义认证失败处理器.mp4
98 token验证讲解.mp4
99 密码加密改进.mp4
100 解决图片、导出excel的问题.mp4
101 系统功能图
102 系统数据库脚本
103 课程笔记资料
104 课程源码