最近不少同学在找课程设计和毕业设计的参考项目电子设备销售网站这个题目算是非常经典的一类。它的典型技术组合就是 SSM 后端 Vue 前端商品、分类、购物车、订单、用户管理这些电商基础模块一应俱全。我最近完整梳理过一套带文档和源码的工程今天把它的设计思路、数据库表结构、前后端实现要点和实际部署中踩过的坑按我能想到的最细致程度写出来给准备做类似选题的朋友一份可以直接照着走的路书。这套东西适合两类人一是拿它当课设或毕设模板想快速理解一个前后端分离项目到底是怎么串起来的同学二是想在自己简历里加一个完整项目但不愿只背概念、希望看懂每个环节为什么这么写的开发者。即便你只有一点 Java 和前端基础按照下面的思路也能把这个项目从开发环境搭建一直跑到最终部署。1. 项目整体设计与技术选型思路1.1 为什么是 SSM Vue 这个组合先说选型。电子设备销售网站本质上是一个前后端分离的电商管理系统后端处理数据、订单、权限前端负责页面展示和交互。SSM 也就是 Spring SpringMVC MyBatis这组框架在高校教学和企业遗留系统里覆盖面非常广它把控制层、业务层、持久层分得很清楚适合用来理解 Java Web 项目的经典分层思想。Vue 负责前端组件化开发让商品列表、购物车、后台管理这类重复性高的页面变得容易维护。有人会问现在新项目不都用 Spring Boot 吗确实但很多院校的课程要求还停留在 SSM 阶段而且把 SSM 底层机制搞清楚之后再迁移到 Spring Boot 只需要半天时间。这个组合的另一个好处是网上参考资料实在太多了遇到问题基本都能搜到解决方案对新手非常友好。1.2 功能模块拆解从用户视角看这个网站分成两个端前台商城和后台管理。前台是普通用户使用的主要界面包括首页商品推荐、商品列表和搜索、商品详情、购物车、下单支付、个人中心和地址管理。后台是管理员使用的系统可以维护商品分类、发布和编辑商品、处理订单、管理用户、查看简单的销售统计。核心角色有两种普通用户和管理员。普通用户从前台注册登录浏览商品、加购、下单管理员从同一个系统登录后进入后台拥有完全不同的菜单和操作权限。权限控制虽然不复杂但它是整个项目的骨架前后端都要做校验不能只靠前端隐藏按钮。1.3 项目结构一览从源码工程看项目分成三部分数据库脚本、后端工程、前端工程。数据库脚本是建库建表的后端是 SSM 工程前端是 Vue 工程前后端通过 JSON 格式的接口交互。我自己在复现时习惯先建库再跑后端最后启动前端这样每层出问题时都能快速定位。很多人一上来就同时启动前后端界面直接报错分不清是接口没通还是页面代码写错了那是给自己添堵。2. 核心细节解析与实操要点2.1 数据库表设计表结构是整个项目的根基评审老师翻档案时一定会看设计是否合理。这个项目里通常有 8 张核心表用户表、分类表、商品表、购物车表、订单表、订单明细表、收货地址表、评论表。用户表字段一般包括 id、用户名、密码、昵称、手机号、邮箱、头像、角色、状态、创建时间。密码建议使用加盐的 MD5 或 BCrypt 存储不要明文保存这是一个非常容易被挑出来的安全问题。角色字段用来区分用户和管理员可以用role字段值为 1 表示管理员0 表示普通用户。分类表要支持层级关系电商网站的商品分类经常是“手机数码 - 手机 - 智能手机”这种树形结构所以除了 id、分类名称、排序还要加一个parent_id字段0 表示顶级分类。这样以后扩展多级分类就不用改表。商品表字段就比较多了id、分类 id、商品名称、副标题、主图、轮播图、详情描述、价格、库存、销量、上下架状态、创建时间。价格字段建议用 decimal避免浮点数精度问题。商品表和分类表通过category_id关联查询时可以用 left join 把分类名称带出来。购物车表设计要抓住两点加购数量不能直接改商品表的库存订单里的商品名称和价格要快照到订单明细表。我见过不少新手在图省事订单明细直接关联商品表商品改了价格历史订单金额也跟着变这在真实电商里是不可接受的。订单表和订单明细表是典型的一对多关系。订单表存订单编号、用户 id、总金额、支付方式、订单状态、创建时间订单明细表存订单 id、商品 id、商品名称、商品图片、单价、数量。明细表冗余商品名称和图片是为了保证订单历史稳定。收货地址表和评论表相对简单地址表存收件人信息和默认标记评论表存评分和内容关联用户和商品。2.2 后端分层与关键配置SSM 项目按 Controller、Service、Mapper 三层来组织实体类放在 entity 包通用响应封装放在 common 包工具类单独放 util 包。控制层只负责接收参数和返回结果业务逻辑写死在 Service数据库操作全部走 Mapper。接口返回格式要统一前端才能少写很多判断。我强烈建议封装一个统一的返回对象比如包含状态码、提示信息和数据三个字段。状态码 200 表示成功500 表示服务器异常401 表示未登录403 表示无权限。前端拿到响应后统一判断 status而不是每个页面单独处理。SSM 中数据源和事务配置都在 Spring 的 XML 配置文件里。数据库连接池一般用 Druid 或 C3P0配置 url、用户名、密码和初始连接数。这里特别要注意数据库版本差异如果你本机装的是 MySQL 8.0驱动要改成com.mysql.cj.jdbc.Driver并且 url 里加上serverTimezoneAsia/Shanghai和useSSLfalse不然启动会报时区错误或者 SSL 连接错误。Mapper 层要用 MyBatis配置了驼峰映射之后数据库里的create_time字段就能自动映射成实体类的createTime。这个配置很多人忽略结果 SQL 查询返回 null排查半天发现是字段名对不上。2.3 前端页面与路由设计前端 Vue 工程采用组件化思路页面放在 views 下公共部分抽成 components。常见的页面有首页、商品列表页、商品详情页、购物车页、订单确认页、个人中心页、后台管理相关页面。路由设计要分两块前台路由和后台路由。前台路由包括/home、/product/detail/:id、/cart、/order/confirm等。后台路由集中在/admin下面比如/admin/product是商品管理/admin/order是订单管理。后台所有页面要用一个 Layout 组件包裹左侧是菜单右侧是内容区。路由守卫不能少。在 Vue Router 的beforeEach里做登录判断如果访问的是需要登录的页面而本地没有存储 token就直接跳转到登录页。后台路由还要额外判断用户角色普通用户访问/admin下的页面要自动弹回前台首页。前端守卫只是提升体验真正用来管权限的是后端拦截器。状态管理建议用 Vuex 存用户信息和购物车数量。刷新页面后 Vuex 数据会清空所以要用 localStorage 持久化 token用户信息可以在登录后拉取一次存起来或者打一个接口重新获取。购物车数字这种全局状态用 Vuex 管理组件之间共享会方便很多。2.4 关键业务逻辑购物车与订单购物车流程相对直接加购时判断购物车里是不是已经有了这个商品有就把数量加一没有就插入一条新记录。前端展示时调一次查询接口把商品信息和数量一次性拿回来计算总价可以在前端算但同时要用后端返回的价格为准避免有人修改请求参数把价格改成零。下单是整个项目中最核心的逻辑它涉及多张表的写操作必须放在一个事务里。订单生成流程是这样的先从购物车中取用户选中的商品校验商品状态和库存然后生成订单主表记录生成订单明细记录再扣减商品库存最后清空对应购物车。任何一个环节抛异常整个事务回滚库存不会出现扣了但订单没生成的情况。这里有一个新手很容易踩的坑库存校验和扣减不是原子操作。如果专门写一个接口做测试看不出问题但考虑并发就会发现库存可能被扣成负数。最简单可靠的方案是在商品表的 update 语句里加条件例如update product set stock stock - #{quantity} where id #{id} and stock #{quantity}通过受影响行数判断是否扣减成功。这个细节在面试时提到会很加分。订单状态一般有待付款、已付款、已发货、已完成、已取消。后台管理员可以修改订单状态模拟发货流程。支付功能在课程设计里一般是模拟支付点击付款把状态改成已付款就行除非你想接入支付沙箱那个后面单独说。3. 实操过程与核心环节实现3.1 开发环境准备这套项目我用到的环境是JDK 8 或 11、MySQL 5.7 或 8.0、Maven 3.6 以上、Node.js 14 或以上版本、IDEA 和 VS Code。数据库工具推荐 Navicat 或 DataGrip导入 SQL 脚本之后直接检查表结构和数据比命令行直观很多。前端的 Vue 版本要看清老一点的工程用 Vue 2新一些的用 Vue 3。Vue 2 默认使用 Vue Router 3 和 Element UIVue 3 使用 Vue Router 4 和 Element Plus。如果运行时报版本不兼容最常见的现象就是页面白屏或路由不渲染大概率是把依赖版本装错了。3.2 后端工程搭建步骤先在 IDEA 里新建一个 Maven 工程填写 groupId 和 artifactId然后引入 SSM 相关的依赖。依赖清单整理如下spring-context、spring-webmvc、spring-jdbc、mybatis、mybatis-spring、mysql-connector-java、druid、javax.servlet-api、jackson-databind。Maven 会自动下载如果网不好就换国内镜像源。核心配置文件有jdbc.properties、spring-mybatis.xml、spring-mvc.xml和web.xml。spring-mybatis.xml里配数据源、SqlSessionFactory、Mapper 扫描路径、事务管理器。spring-mvc.xml里开启注解驱动、配置静态资源映射和视图解析器。注意注解扫描的时候要避免 spring 容器和 springmvc 容器重复加载同一个 Controller否则会出现一些莫名其妙的代理问题。web.xml里配置 DispatcherServlet 和 Spring 监听器。DispatcherServlet 拦截/Spring 监听器负责加载根容器。如果你的后端是用 Tomcat 启动不要忘了在打包时把依赖打进去或者配置 Maven 的 war 插件否则运行时会报类找不到。3.3 前端工程搭建步骤我之前用的前端工程是基于 Vue 2 写的创建命令是npm install -g vue/cli vue create electronic-mall-frontend创建时选择 Babel、Router、Vuex安装完后再补 Element UI 和 axiosnpm install element-ui axiosmain.js里组件和插件的注册顺序很关键Element UI 要在 Vue 根实例创建之前注册axios 要挂到 Vue 原型上这样每个组件里都可以用this.$http调用接口。接口层我建议抽出一个独立目录按模块拆分比如api/product.js、api/cart.js、api/order.js。每个文件里导出方法方法内部调用 axios返回 Promise。页面里直接import { getProductList } from /api/product这样接口地址集中管理后端改了路径只动一个文件。开发时前后端联调还要配置代理。在vue.config.js里加一段 devServer 配置把/api开头的请求转发到后端的http://localhost:8080。前端请求写/api/user/login代理会把请求转成http://localhost:8080/api/user/login从而绕过跨域问题。这是最省事的联调方案比在后端配 CORS 更灵活。3.4 前后端联调与部署联调时先测登录接口。后端接收/api/user/login请求校验用户名密码成功后返回 token 或用户信息前端把 token 存到 localStorage同时更新 Vuex 里的用户状态。接口联调无误后就可以打包。前端执行npm run build生成 dist 目录。后端用 Maven 打成 war 包扔进 Tomcat 的 webapps 目录启动后访问 Tomcat 端口。前端 dist 目录里的静态文件可以放在 Tomcat 的 webapps/ROOT 下也可以单独部署到 Nginx如果部署 Nginx要注意把/api反向代理到后端的 Tomcat同时处理 history 路由刷新的问题。数据库脚本要先导一份到 MySQL建议把初始数据也一起导入否则前台商品列表是空的展示效果差很多。初始数据要包含一个管理员账号比如用户名 admin 密码 admin方便登录后台测试。4. 常见问题与排查技巧实录4.1 跨域和代理不生效这是前后端分离项目里出现频率最高的问题报表现在浏览器控制台报Access-Control-Allow-Origin错误。解决办法优先用 vue.config.js 里的代理把/api转发到后端。代理不生效的原因一般是配置改了没重启 dev server或者请求路径没走/api前缀。如果项目要求后端支持跨域可以在 SpringMVC 里配置一个 CorsFilter或者是拦截器。注意这里有个坑自定义拦截器如果先于跨域过滤器执行预检请求 OPTIONS 就会走拦截器逻辑导致还没进入 Controller 就被拦截了。所以要在拦截器里放行 OPTIONS 请求否则 GET 和 POST 请求老是莫名其妙的失败。4.2 登录状态失效和 Token 过期网页前后端分离后Session 不是不能用但跨域和跨端口会带来 Cookie 丢失问题手机上测试更明显。建议后端直接用 Token 机制登录成功后生成一个随机串存到 Redis 或者数据库返回给前端。前端每次请求在 axios 拦截器里带上请求头Authorization后端用一个拦截器统一校验 token校验失败返回 401前端 code 为 401 时自动清理本地状态并跳转登录页。Token 校验拦截器要放行登录、注册、商品列表这些公开接口后台接口再去额外校验管理员权限。拦截器开发时容易漏掉 POST 请求体已经读取的问题如果 Controller 里用了RequestBody拦截器尽量不要再去读 InputStream不然会报 Stream closed 异常这个我在集成测试时踩过。4.3 图片上传成功了但页面显示 404这个问题的原因基本都是图片保存到了本地磁盘但 Tomcat 部署的工程目录访问不到那个路径。前端上传成功后后端返回的是一个相对路径比如/upload/2024/07/xxx.jpg如果没做静态资源映射浏览器当然 404。在 SpringMVC 里单独加一个资源映射把磁盘上的 upload 目录虚拟成/upload/**mvc:resources mapping/upload/** locationfile:/绝对路径/upload/ /这样图片才能正常访问。还要注意上传目录的读写权限Linux 服务器上如果目录权限不对上传也会失败。4.4 前端路由刷新后 404Vue Router 如果用了 history 模式刷新一个类似/product/detail/23的地址时请求发给了服务器服务器找不到对应的路径自然会返回 404。开发环境因为 dev server 处理了回退所以没问题一部署线上就报错。解决办法有三个一是改回 hash 模式地址里带个#刷新不会丢二是 Nginx 里配 fallback三是 Tomcat 里配一个转发规则把所有非静态资源的请求转发到 index.html。我用过体验最好的是 Nginx 下配一个try_files生产环境简单高效。4.5 中文乱码和时区问题中文乱码一般有几种来源数据库表编码不是 utf8mb4、Tomcat 没有配置 URIEncoding、JSON 响应格式不对。建库时直接指定CREATE DATABASE IF NOT EXISTS electronic_store DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;JSP 老项目喜欢用 utf-8但 HTML 和 Vue 编译后的文件基本不用管编码只要确认数据库、后端代码、请求头三处统一为 utf-8。时区问题前面提过MySQL 8 需要加serverTimezoneAsia/Shanghai。在 JDBC 配置里漏掉这个启动时就会收到一串长长的异常指针原因就是时区默认值不被新驱动接受。4.6 购物车数量不对或库存变负数同一账号换设备加购后数量对不上一般是没有做增量更新而是每次都把购物车数量覆盖为新提交的值。正确逻辑是在更新购物车时执行加操作quantity quantity 1而不是quantity 1。库存变成负数就是下单时没有做条件更新。排查时可以多看日志里 SQL如果看到只有select没有update或者 update 的 where 条件里没有库存判断问题基本就定位了。我在自己实现下单时用的是受影响的行数来判断如果结果为 0直接抛异常提示库存不足。5. 这个项目后续可以继续扩展的方向5.1 平滑迁移到 Spring Boot这套 SSM 项目如果只是作为学习材料不急着迁移。但如果想让它更像工作环境里的真实项目花半天把它迁移到 Spring Boot 是值得的。Spring Boot 把 XML 配置几乎全取消数据源配置简写成了application.yml里的一段配置MyBatis 注解或 XML 都支持。迁移后依赖管理和部署会更省心打包成 jar 直接用java -jar就能跑。迁移时最需要留意的是过滤器、拦截器、静态资源映射这几块的配置方式变了。把原来 web.xml 里的 Servlet 注册改成配置类把 SpringMVC 的 XML 配置改成 WebMvcConfigurer 实现其他业务代码一行都不用动。这也是很多公司升级老项目时走的路子。5.2 加入商品搜索和缓存现在的商品搜索大多是列表页模糊查询数据量小没问题。如果想让它更完善可以引入 Redis 给首页和商品列表做缓存热门商品详情也可以缓存。搜索可以用数据库的全文索引也可以接入中文分词后在内存中搜索这个看项目体量决定。缓存要特别注意数据一致性管理员修改商品信息后要主动删掉旧的缓存让下一次请求重新从数据库加载。否则前台出现改了价格但页面还是旧价格测试时一眼就能看出来。5.3 接入真实支付和物流课程设计里支付是模拟的但如果希望项目能还原真实业务可以接入支付沙箱环境流程是创建订单后请求支付接口支付回调里修改订单状态。沙箱环境不用真实扣款但整个签名、回调验签流程和真实一致。物流接入最简单的是在后台手动维护快递单号再做一个查询页面。不要一开始就去做多平台同步物流复杂度会盖过核心逻辑。5.4 改造适配移动端或小程序后台管理系统面向电脑前台商城可以适配移动端。最简单的方式是在 Vue 里用响应式布局复杂一点的可以单独做一个移动端界面。我自己试过把核心商品查询和下单流程抽出来做小程序版复用同一套后端接口工作量主要在前端页面。注意小程序上传图片、登录授权、支付调起方式都不一样后端需要稍微调整授权接口总体可控。写在最后的一些实际体会这套 SSM Vue 的项目看起来功能不算多但它是理解电商项目全流程的一个比较完整的样板。我自己在过这套工程时最大的感受是把订单流程理顺了整个后端就通了一半把路由守卫和状态管理理顺了整个前端也就通了一半。如果你拿到源码不要急着去读每个文件建议按照“建表 - 登录 - 商品列表 - 购物车 - 下单 - 后台管理”的顺序逐段调试。调试过程中多在后端 Controller 处打几个日志比闷头看代码要快得多。再提醒一个容易被忽视的点演示和答辩的时候先准备一个干净的数据环境商品图片要正常显示订单状态要能流转。很多项目功能都实现了最后败在了演示现场数据库连不上或者图片加载不出来这是非常可惜的。提前把数据库脚本跑一遍把图片资源放到正确路径把前后端启动脚本写清楚汇报流畅度会提升不少。这个项目的扩展余地很大做完基础功能后完全可以加入自己的思路比如新的营销玩法、搜索推荐、可视化统计报表等。核心业务逻辑不变前端多几个页面后端多几张表就变成了一个更有个人色彩的完整项目。希望这篇整理能让你少踩一些我踩过的坑。