前几天后台有位读者给我留言说自己马上要交毕业设计了问有没有一套能拿得出手的Java Web项目——要求不高能跑、能改、能写进论文、答辩的时候能讲清楚就行。我第一反应就是那这套基于SpringBoot2 Vue3 MyBatis-Plus MySQL8.0的电子产品销售系统源码正好是教科书级别的答案。我不是随便说的。这套技术栈在当前Java Web开发里几乎就是“标准套餐”SpringBoot2负责后端接口Vue3负责前端页面MyBatis-Plus把数据库操作简化到极致MySQL8.0做数据持久化。它覆盖了电商类系统中用户注册登录、商品浏览、购物车、订单管理、后台管理这一整条链路既有完整的前后端分离实践也有文档辅助特别适合拿来做毕业设计、课程项目或者作为系统学习前后端分离开发的最佳入门样本。这篇博文我就从一个多年写Java后端的从业者视角把这套电子产品销售系统从头到尾拆给你看技术选型为什么这么定、数据库怎么设计、后端前端各自的核心怎么实现、本地怎么跑起来、部署怎么处理、以及常见的坑我提前帮你踩一遍。内容会比较长建议先收藏再慢慢看。1. 先从“毕设该选什么技术栈”聊起1.1 为什么是SpringBoot2 Vue3的组合很多人在选技术栈时容易走两个极端要么用纯SpringBoot写个返回页面为主的传统Web应用要么上SpringCloud全家桶。前者被导师嫌“太老”后者自己背着背着就崩了。这套系统的选型很聪明它踩在了“既有含金量又不会失控”的中间位置。SpringBoot2本身就是目前企业里存量最大、资料最多、问题答案一搜一大把的版本。相比SpringBoot3要求JDK17起步SpringBoot2配合JDK8对大家本地的开发环境更友好随便一台老电脑也能跑起来。而Vue3是现在前端的主流方向组件化开发、Composition API、响应式数据这些概念一写进论文里评审老师一看就知道你不是光会抄代码的人。前后端分离的架构也让项目的“颜值”和“层次感”都出来了。前端用Vite启动后端用8080端口提供API中间用Axios通信。你答辩时说一句“我们采用前后端分离架构前端为单页应用后端提供RESTful API”这个起评分就比传统的ServletJSP方案高出一截。1.2 MyBatis-Plus和MySQL8.0凭什么搭再说数据层。为什么选MyBatis-Plus而不是Spring Data JPA我在实际开发里两个都用过。这么说吧JPA在关联查询和复杂SQL上学习成本确实高很多刚毕业的同事天天在跟“懒加载异常”打架。而MyBatis-Plus的好处是你不需要写几十行XML单表CRUD它全包了。最简单的例子查询所有商品列表你要是手写MyBatis得写接口方法、写XML、配结果映射三件事。但MyBatis-Plus下就一行ListProduct list productMapper.selectList(null);它甚至帮你把分页、逻辑删除、自动填充这些高频需求都做成了插件这在后面章节我会详细展开。MySQL8.0这边主要看中的是性能、JSON类型支持以及窗口函数这类高级特性。对电商系统来说订单表、商品表这种典型业务场景8.0的处理能力绰绰有余。而且8.0的安装和配置在Windows、Linux下都有非常成熟的教程远程连接、数据导入导出也都方便配合Navicat或者DataGrip做可视化操作出问题也容易排查。2. 系统整体设计与数据库建模2.1 模块划分与角色权限拿到一套源码第一件事不是急着启动而是先看它的模块划分。这套电子产品销售系统的核心参与者有两位普通用户和后台管理员。用户端的核心功能是注册登录、浏览商品、按类别筛选、搜索、查看详情、加入购物车、提交订单、查看我的订单、修改个人资料。管理员端的核心功能是登录后台、商品分类管理、商品上下架与库存管理、订单发货与状态管理、用户管理、数据统计概览。这种双角色设计对于毕业设计来说非常讨巧它既有前台展示又有后台管理既能体现页面交互能力又能体现业务闭环逻辑。而且两个角色对应的权限控制实现起来不复杂一套JWT令牌 拦截器就能搞定。从代码分层来看这套系统遵循经典的三层结构Controller层负责接口暴露Service层做业务处理Mapper层做数据持久化。加上统一的返回实体类Result前端拿到的一定是{code, message, data}这种结构非常利于前后端联调。2.2 数据库设计与MySQL8.0的细节数据库表一般包括这些核心表用户表user、商品表product、商品分类表category、购物车表cart、订单表orders、订单明细表order_item、管理员表admin。商品表里通常会有主键id、商品名称、价格、库存、缩略图、分类id、上架状态、创建时间、更新时间。这里要注意的是价格字段在MySQL里建议用decimal(10,2)不要用float或double否则会出现0.10.2不等于0.3的尴尬情况。订单表和订单明细表拆分是电商系统的基础功。一张订单对应多个商品明细这样设计是为了满足“一个订单里买了好几样东西”的真实场景。如果图省事只建一张订单表把购买的商品存成字符串后期统计销售额、生成发货清单都会非常痛苦。MySQL8.0这边有几个细节值得你在论文里写一笔第一8.0的默认字符集是utf8mb4能够完整存储生僻字和emoji表情第二认证方式换成了caching_sha2_password如果想用老版本客户端连接需要执行命令修改认证插件第三8.0对窗口函数支持完善比如计算“各分类下商品销量排行”这类需求一条SQL就能搞定比在Java里循环统计不知道高到哪里去了。2.3 文档里不太会写的初始化数据很多源码会用SQL文件直接初始化数据这套系统也不例外。我在导入的时候特别留意过它的data.sql里面预置了十几个电子产品分类和几十条商品数据比如手机、笔记本、耳机、键盘这些。这不只是“方便演示”这么简单——你启动项目后页面上有内容可看购物车、订单流程能完整跑通答辩演示时不会冷场。另外一个容易被忽略的是admin表的初始账号密码以及user表的测试账号。建议启动前先把这些写进自己的笔记里答辩时演示注册、登录、下单全流程都要用到。3. 后端核心实现SpringBoot2 MyBatis-Plus3.1 分层架构与统一返回结构我见过太多号称“前后端分离”的项目结果前端页面里直接拼Java代码片段或者返回null让前端自己猜。这套系统的Controller层做得比较规范每个接口都返回统一的Result对象示例代码如下RestController RequestMapping(/api/product) public class ProductController { Resource private ProductService productService; GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, String keyword) { PageProduct page productService.queryPage(pageNum, pageSize, keyword); return Result.success(page); } }这里的Result.success()内部其实就是new Result(200, 操作成功, data)。前端拿到响应后先判断code是否为200再渲染data。这样一个统一约定能避免“这个接口返回成功字段叫flag那个接口叫successIndex”这种前后端扯皮的问题。3.2 JWT登录认证与拦截器登录模块我重点说一下因为这是整个系统里安全性的门面。用户提交用户名密码后后端用BCrypt加密算法校验密码然后把用户id和角色封装进JWT令牌返回给前端。前端把token存在localStorage里每次请求在Axios拦截器中加上Authorization: Bearer token。后端配合一个拦截器统一做token校验public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equals(request.getMethod())) { return true; } String token request.getHeader(Authorization); if (token null || !token.startsWith(Bearer )) { throw new BusinessException(401, 未登录或登录已过期); } // 解析token校验合法性 return true; } }这里有两个实操中的重点第一一定要放行OPTIONS预检请求否则前端跨域调用时浏览器会直接拦截第二拦截器里解析完token后最好把用户id放到ThreadLocal里方便Service层拿当前登录用户。3.3 MyBatis-Plus的高频用法MyBatis-Plus这块内容是这套系统实际开发效率最高的地方。我个人觉得它最香的有三件事逻辑删除、自动填充、分页插件。逻辑删除的操作就是加一个注解TableLogic private Integer deleted;之后你调用deleteById()时它执行的其实是UPDATE ... SET deleted1不会真的把数据干掉。这对订单这类业务数据特别重要万一误删至少还能恢复。自动填充则解决了我一直觉得繁琐的“每次插入都要手动set创建时间”的问题TableField(fill FieldFill.INSERT) private LocalDateTime createTime; TableField(fill FieldFill.INSERT_UPDATE) private LocalDateTime updateTime;再加上一个MetaObjectHandler实现类新增和修改操作就会自动带上时间字段。你写代码时完全可以忘记这回事它已经在后台偷偷帮你干了。分页插件也非常好用启动类里注册一下Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; }然后Service里直接page(new Page(pageNum, pageSize), wrapper)拿到分页结果。如果你需要在这套系统上做批量删除、批量插入MyBatis-Plus也提供了现成的deleteBatchIds、saveBatch方法性能比自己写for循环好得多。3.4 订单库存的并发处理思路既然是销售系统就绕不开“超卖”这个问题。虽然毕设评审不一定追问到这么深但如果你能主动讲清楚这块绝对是个加分项。这套系统里对下单扣库存的处理采用的是update条件判断int rows productMapper.reduceStock(productId, quantity); if (rows 0) { throw new BusinessException(库存不足); }对应的SQL在数据库层面的效果是UPDATE product SET stock stock - #{quantity} WHERE id #{id} AND stock #{quantity}。这样即使两个用户同时下单数据库的原子性也会保证只有一个人扣库存成功。如果你想让系统更健壮可以在此基础上引入Redis分布式锁或乐观锁这部分我在文档里也做了标注大家可以根据自己的进度和水平选择性扩展。4. 前端Vue3项目的落地要点4.1 Vue3项目初始化与依赖安装前端这套是基于Vue3 Vite构建的。你要让它在本地跑起来先确认Node.js版本在16以上然后执行npm install npm run devVite启动会默认跑到http://localhost:5173。作为对比Vue2时代常用的webpack开发服务器少说也得等个十几秒而Vite用的是原生ESM基本上秒开。这个差异你在答辩现场展示代码的时候会特别有说服力——改一行代码页面瞬间热更新体验非常顺畅。依赖方面核心组件包括Vue Router用于路由管理、Pinia用于全局状态管理、Axios用于HTTP请求、Element Plus负责后台管理界面里的表格表单按钮这些UI组件。这套组合是当前Vue3生态里最主流的一套出了任何问题都能搜到解决方案。4.2 Axios封装与Token携带前端请求层的好坏直接影响后续所有页面的开发效率。这套源码里封装了一个统一的axios实例核心代码如下const service axios.create({ baseURL: /api, timeout: 10000 }); service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers.Authorization Bearer token; } return config; }); service.interceptors.response.use( response { const res response.data; if (res.code ! 200) { ElMessage.error(res.message || 请求失败); return Promise.reject(new Error(res.message)); } return res; }, error { if (error.response error.response.status 401) { localStorage.removeItem(token); router.push(/login); } ElMessage.error(error.message || 网络错误); return Promise.reject(error); } );这里有个细节baseURL不是写成全路径而是/api配合后面的proxy配置解决跨域。这样本地开发和线上部署用同一套代码改个环境变量就行不用每个axios请求都动。响应拦截器统一处理401状态非常关键。如果token过期了直接清掉本地登录态并跳到登录页避免用户看到一堆奇怪的报错体验会好很多。4.3 动态路由与权限菜单后台管理系统的菜单权限是通过路由的route meta来控制显示的。管理员登录后前端根据它的角色去加载对应路由表。虽然这套系统只有普通用户和管理员两种角色实现方式是静态路由加路由守卫判断但你在论文里可以把“动态权限管理”的架构设计意图写清楚。路由守卫示例router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.path /login) { next(); } else if (!token) { next(/login); } else { next(); } });这里我补充一个经验权限控制的粒度要想清楚不是每个按钮都得做权限标识对毕设系统来说做到“页面级别”的权限控制已经足够。过度设计会让代码复杂度激增反而不好讲。4.4 商品展示页与购物车的核心逻辑商品展示页这块常见做法是使用Element Plus的卡片组件把每个商品包成ProductCard组件用v-for渲染成网格布局。搜索和分类筛选是通过Vue的computed计算属性配合watch监听搜索关键词实现的。这个你写论文时可以重点描写一下前端不用每次请求后端在加载出来的数据里先做本地过滤符合条件就直接展示。购物车则是典型的“响应式数据”使用场景。用Pinia定义cartStore里面存一个items数组包含商品id、名称、价格、数量、缩略图这些字段。每次点击“加入购物车”先判断items里有没有同样的商品id有就数量加一没有就push一条新纪录。因为Pinia的状态是响应式的所以任何组件只要引用了cartStore页面上的购物车角标数量就会自动刷新全程不需要手动调用更新方法。如果你卡在“Vue3的响应式为什么失效”这种问题上我可以提前给你交个底绝大多数情况都是用了类ES5的写法解构了响应式对象或者给reactive对象直接赋了新引用导致的。解决方案是用toRefs或者直接用storeToRefs。5. 从本地到部署环境配置与打包运行5.1 MySQL8.0安装与初始化配置这套系统的数据库是MySQL8.0我在本地用的是Docker启动的方式其实比安装包更快更干净。如果你机器上有Docker下面这条命令就能起一个带数据库的MySQLdocker run -d \ --name mysql8 \ -p 3306:3306 \ -e MYSQL_ROOT_PASSWORD123456 \ -e MYSQL_DATABASEelectronic_mall \ mysql:8.0启动完成后把源码里的SQL文件导入docker exec -i mysql8 mysql -uroot -p123456 electronic_mall sql/electronic_mall.sql如果你不用Docker去官网下个MySQL8.0安装包一步步装也行。但有一个坑一定要记住MySQL8.0默认的加密规则是caching_sha2_password老版本的Navicat可能连不上报错会提示Authentication plugin caching_sha2_password cannot be loaded。解决办法是执行这条命令把root账号的认证方式改掉ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 123456;5.2 后端打包与前端构建后端打包走的是Maven标准流程。在项目根目录执行mvn clean package就会在target目录下生成一个jar包。启动命令是java -jar target/electronic-mall-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod这里要提醒一点如果本地开发时用的是application-dev.yml里的一套数据库账号密码部署前一定记得改成生产环境的配置否则一上云连的都是自己电脑的MySQL端口不开放就白折腾了。前端构建命令更简单npm run build构建完成会在dist目录下生成一堆静态资源文件包括index.html、js、css这几个大类。把这整个目录部署到Nginx的html根目录下前端就算上线了。5.3 Nginx反向代理配置与上线前后端分离部署的核心问题在于“浏览器不知道什么时候该请求谁”。这时候Nginx统一收口静态资源自己返回API请求转发给后端Java服务。我贴一段自己常用的配置server { listen 80; server_name your-domain.com; root /usr/share/nginx/html; index index.html; location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { try_files $uri $uri/ /index.html; } }注意两个重点第一location /api/里的proxy_pass后面有没有带路径行为是不同的。我这里带上了http://127.0.0.1:8080等于把/api/xxx原样转发如果你的后端接口本身就有/api前缀这样配没问题。第二try_files $uri $uri/ /index.html必须写上否则用户刷新详情页时Nginx找不到实际的html文件会返回404。6. 常见问题与排查经验下面这张表是我基于实际跑这套系统以及类似项目时经常遇到的问题整理的按出现频率排个序基本都是“搜遍全网也绕不开”的坎。问题现象根因分析解决方案前端请求接口报跨域错误后端没有开启CORS配置或前端代理未生效后端加CorsFilter放行或者确保vite.config中proxy配置正确登录后刷新页面就退出token存在Pinia里刷新后状态丢失把token persistence到localStorage或用pinia-plugin-persistedstate图片加载不出来上传的图片路径是本地磁盘路径访问不到配置静态资源映射或用OSS/BASE64传图MySQL建表报语法错误本地MySQL版本偏低用了8.0语法但库版本不支持升到8.0或者把SQL里8.0专属语法去掉MyBatis-Plus分页不生效没有注册PaginationInnerInterceptor插件启动类里加MybatisPlusInterceptor的BeanElement Plus的表格列错位列配置与数据字段名不一致检查prop字段名与小写驼峰是否一致Docker里MySQL数据丢失容器删了数据就没了启动时加-v mysql_data:/var/lib/mysql挂载数据卷除了表里的我再分享两个独家经验。第一个是启动项目后端口被占用的问题在Mac/Linux上排查特别快lsof -i :8080 kill -9 PIDWindows系统就用netstat -ano | findstr 8080找到PID后在任务管理器里结束进程。第二个经验是关于“前端开发环境接口访问不通”的。如果你用Vite开发npm run dev默认跑在5173端口而页面里的axios请求是打到/api的这时必须在vite.config里配置server.proxy把/api转发到后端的8080server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }不配这个代理前端页面能打开但所有请求都会落到Vite自己的5173端口上后端Java服务一个请求都收不到页面就永远是白屏。7. 给项目做扩展的一些个人建议最后分享一点我在实际使用中的体会。这套源码本身是完整的但如果你想让它在答辩中更有竞争力有三个方向非常推荐去扩展。第一给系统增加一个简单的数据可视化大屏。管理员后台加几个Echarts图表展示每日订单量、销售额、热门商品Top10。Vue3里集成Echarts非常成熟图标在上千行的数据渲染场景下依然流畅。这个功能加的性价比极高但计算量不大写论文时还能多出一个“数据可视化模块”文档可写的内容瞬间丰富。第二把商品搜索从数据库like查询升级成全文检索。可以选一个轻量级的方案集成Elasticsearch商品表同步到ES索引里搜索效率和对分词的支持都会上一个台阶。不过这个功能需要额外搭服务如果你时间紧可以只做设计说明不落地答辩时讲清楚思路也可以。第三给订单状态增加一个定时关单的逻辑。用户在购物车下单后如果15分钟内未支付系统自动取消订单并回补库存。启动类上加EnableScheduling写一个Scheduled(cron 0 */1 * * * *)的定时任务扫描超时订单大概二三十行代码就能写完。这个功能几乎每一个真实电商系统都有写在简历上绝对是个亮点。我个人在操作这些扩展时最大的体会是不管往哪个方向扩展一定先把基础流程跑通再做新功能。很多同学一上来就改代码改完之后连原本的登录都登不上了这种情况我见得太多了。先备份再动手一步一步来稳扎稳打这个项目才能真正变成你自己的东西。