简介一套完整的校园二手交易网站设计与实现项目包面向计算机相关专业毕业设计或课程设计使用者采用 Java SSM Vue 技术栈构建覆盖前台用户和后台管理员两类角色。系统包含商品浏览、二手发布、收藏下单、订单发货、求购信息以及商品、用户、订单、论坛管理等典型电商业务模块可作为 SSM 整合与前后端分离开发的参考项目。压缩包共 5 个文件大小约 25.16MB含有 Java 后端源码、前端工程、MySQL 数据库脚本、毕业论文 Word 文档与答辩 PPT并附说明文档和可导入运行的配置便于按步骤部署复现。该资源已有 125 人学习下载源码经调试可正常运行配有运行环境软件、部署视频教程和论文参考尤其适合需要快速搭建完整毕业设计或课程设计项目的学习者。1. 校园二手交易网站这套东西到底是什么又到毕设季群里最常刷到的一句话是有没有一个能跑起来、源码完整、答辩还讲得明白的 JavaWeb 项目这个标题里的校园二手交易网站恰好就是最常见的那类选择。它不是一个“新奇项目”而是一个覆盖登录注册、商品发布、浏览检索、下单交易、个人中心全链路的综合 JavaWeb 项目技术栈是 Java SSM Vue数据库落 MySQL。对做毕业设计或课程设计的同学来说它的价值在于业务不复杂但链路完整框架不花哨但每一层都能讲出东西——正好卡在“能做完”和“能讲透”之间。这篇笔记我会把架构怎么拆、表怎么建、代码怎么落、坑在哪按我做这类项目的实操顺序讲一遍。2. 架构与技术选型SSMVue 这个组合的逻辑在哪2.1 为什么说 SSM 对毕设项目仍然是一张安全牌先别急着争论 SSM 是不是过时了。你在学校课程里学的是 Spring SpringMVC MyBatis 这套教材、实验、甚至你电脑里那套黑马 JavaWeb 笔记都是按这个顺序教的那毕设用它就是最稳妥的选择。原因有两点第一SSM 是“手工程度”更高的框架组合。Spring 管对象、SpringMVC 管路由、MyBatis 管数据库增删改查每一层都要你亲手装配答辩时老师问“你这个请求是怎么从页面走到数据库的”你能顺着代码把链路指出来这种“我能讲清楚”的印象分是 Spring Boot 一键自动配置给不了的。第二SSM 的配置虽然繁琐但正因为繁琐它逼着你把 web.xml、applicationContext.xml、spring-mvc.xml 这三个文件读明白。等你会配了再看 Spring Boot 的自动配置会觉得豁然开朗。这个项目里我的常见做法是SSM 负责后端接口Vue 负责前端页面两边通过 JSON 通信。你可能会问既然都上 Vue 了为什么不干脆用 Spring Boot这就是毕设和真实项目的区别——真实项目追求开发效率毕设追求“完整展示你对 JavaWeb 的理解”。SSM 写出来的代码结构本身就是答辩材料Controller 层、Service 层、Mapper 层、Model 层每一层都是现成的讲稿。另一个实际问题评阅老师看论文时最关注的不是你的项目有多新而是“工作量够不够”。SSM 的手工装配天然带来工作量配置文件、XML Mapper、拦截器、过滤器这些都要你亲手写出来。相比之下 Spring Boot 一个注解全搞定反而显得没东西可写。所以如果你还在犹豫“用 SSM 是不是太老”我的答案是对毕设这个场景它叫成熟不叫老。2.2 Vue 在项目里到底负责什么要不要上完整工程标题里写 vue说明前端不是 JSP 了。那 Vue 在这个项目里管什么一句话管页面渲染和接口调用。你用 Vue 写组件在组件里用 axios 调后端接口拿到 JSON 数据后绑定到模板上。比如首页的商品列表就是一个典型的“页面加载 → 请求 /api/goods/list → v-for 渲染卡片”的流程。这里有个关键决策要不要用 Vue CLI 建完整工程我的建议分两种情况。如果你用的是我前面说的“前后端分离”方案——后端跑 Tomcat8080 端口前端单独跑 Node 开发服务器8080 端口——那用 Vue CLI 是合理的因为你需要 webpack 帮你做模块化和代理转发。但如果你只是把 Vue 当作页面库用直接把 vue.min.js 引入 HTML那也可以而且部署更简单把前端文件扔进 Tomcat 的 webapps 目录就行。我一般推荐毕设项目选用“折中方案”用 Vue 2 Element UI 做界面不搭完整 CLI 工程用手写 HTML 页面 vue.min.js 的方式后端接口单独提供。这样做的好处是答辩时老师问“Vue 怎么渲染数据的”你可以直接从浏览器 Network 面板打开接口响应给他看比在 IDE 里翻前端工程代码直观得多。关于 Vue 路由参数的使用这个项目里确实用得到商品详情页需要接收商品 ID常见写法是 this.$route.params.id但如果你只用 vue.min.js 不引 vue-router那就用 query 参数或直接把 ID 存在 data 里路由这块不是这个项目的重点。决定用前后端分离式还是混合式之前先想清楚一件事你的部署环境允许不允许你跑两个服务。很多学校机房电脑配置一般一个 IDEA 同时跑 Tomcat 和 Node 会卡。所以如果没有明确的分离部署需求我更建议混合式减少一整套环境的折腾成本。3. 数据库设计五张核心表撑起二手交易全流程3.1 用户、商品、订单、收藏、分类字段怎么定二手交易网站的核心业务是“有人发布商品有人浏览并下单”所以数据表不复杂但每张表的字段都得经得起推敲。我一般先建五张表用户表 user、商品表 goods、订单表 orders、收藏表 favorite、分类表 category。其中订单表是最容易出问题的——它同时关联买家、卖家、商品三方信息字段设计不好后面写 SQL 会非常痛苦。先看用户表。字段id主键自增、username用户名唯一索引、password密码存 MD5 或加盐哈希别存明文、nickname昵称、phone手机号用于联系交易、avatar头像路径、create_time注册时间。注意 phone 不是必填有些学校作业要求“手机号唯一”但现实中同一个手机号可能注册多个账号所以这里我建议普通索引就行别加唯一约束。商品表是业务的核心。字段id、user_id发布者、title标题、description描述、price价格decimal(10,2)、category_id分类外键、cover封面图路径、images多图路径用逗号分隔存、status0在售/1已售/2下架、view_count浏览量、create_time。这里 status 字段是重点——二手交易的“已售”状态不能靠删除商品实现否则订单关联不到商品信息所以状态位必须预留。订单表要特别说明。字段id、order_no订单编号唯一、goods_id商品、seller_id卖家、buyer_id买家、price成交价、status0待付款/1已付款/2已完成/3已取消、create_time、pay_time、complete_time。这里的 price 不是从商品表查来的而是下单那一刻的商品价格副本。为什么因为卖家可以改价如果订单表不存快照后续查账会对不上。收藏表和分类表相对简单。收藏表只需要 id、user_id、goods_id、create_time唯一索引建在 (user_id, goods_id) 上防止重复收藏。分类表就是 id name 两列建议预置几类数码、书籍、生活用品、衣物、运动器材、其他。3.2 表关系、逻辑外键和一条高频查询的写法学问表关系不复杂用户 1:N 商品、用户 1:N 订单、用户 M:N 商品通过收藏表关联、商品 1:N 订单。这里有一个比较反直觉的点订单表和商品表的关系在“在售”这个状态下是 1:1 的——一个商品只能被一个买家成功下单但历史订单里一个商品又可能对应多条取消记录所以严格说订单表对商品是 N:1只是在“有效订单”上加了唯一性约束。关于外键我的原则是不用物理外键只用逻辑外键。物理外键FOREIGN KEY 约束在毕设里看起来很规范但坑很多——删除商品时外键阻塞、插入订单时 MySQL 会额外校验外键、两张表数据量大了之后外键校验拖慢写入。做项目时被这个坑过一次后我就再没建过物理外键。逻辑外键就是在业务代码里保证 user_id 一定存在于 user 表由 Service 层校验。这样做还有一个好处用 Navicat 导出 SQL 时不会因为外键顺序问题导致导入失败。建库建表时有两处容易翻车。一是字符集建库语句指定 DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_general_ci否则商品标题里出现 emoji 表情时写入会报错。二是金额字段别用 float 或 double价格计算会有精度损失用 decimal(10,2)。这两点属于“老师不一定会看但出了问题很丢人”的细节。建表 SQL 骨架如下CREATE DATABASE IF NOT EXISTS campus_trade DEFAULT CHARSET utf8mb4; CREATE TABLE user ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL, password VARCHAR(64) NOT NULL, nickname VARCHAR(50), phone VARCHAR(20), avatar VARCHAR(255), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_username (username) ); CREATE TABLE goods ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, title VARCHAR(100) NOT NULL, description TEXT, price DECIMAL(10,2) NOT NULL, category_id INT, cover VARCHAR(255), images VARCHAR(1000), status TINYINT DEFAULT 0 COMMENT 0在售 1已售 2下架, view_count INT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, KEY idx_user (user_id), KEY idx_category (category_id), KEY idx_status (status) ); CREATE TABLE orders ( id INT AUTO_INCREMENT PRIMARY KEY, order_no VARCHAR(64) NOT NULL UNIQUE, goods_id INT NOT NULL, seller_id INT NOT NULL, buyer_id INT NOT NULL, price DECIMAL(10,2) NOT NULL, status TINYINT DEFAULT 0 COMMENT 0待付款 1已付款 2已完成 3已取消, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, KEY idx_goods (goods_id), KEY idx_buyer (buyer_id), KEY idx_seller (seller_id) ); CREATE TABLE favorite ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, goods_id INT NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_user_goods (user_id, goods_id) ); CREATE TABLE category ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50) NOT NULL );表建好之后最常写的一条查询是“首页商品列表带收藏状态和卖家昵称”。这条 SQL 里有两个细节一是 LEFT JOIN user 拿昵称二是用子查询查当前登录用户是否已收藏。LEFT JOIN 而不是 INNER JOIN因为商品可能关联到被删除的用户逻辑外键不校验可能出现脏数据LEFT JOIN 至少保证商品还能显示出来。这个取舍在答辩时也是能讲的点。4. 后端 SSM 实现从登录到下单的关键代码链路4.1 Controller、Service、Mapper 三层骨架代码怎么落SSM 项目的典型代码结构长这样controller 包放接口入口、service 包放业务逻辑、mapper 包放 MyBatis 的数据访问接口、model 包放实体类。我一般还会加一个 common 包放统一返回结果和异常处理。前端请求进来之后链路是 Controller → Service → Mapper → MySQL然后原路返回 JSON。先看最基础的登录接口。Controller 层只做参数接收和结果返回不写业务判断RestController RequestMapping(/api/user) public class UserController { Autowired private UserService userService; PostMapping(/login) public Result login(RequestBody User user) { User loginUser userService.login(user.getUsername(), user.getPassword()); if (loginUser ! null) { // 存入 session后续通过拦截器校验登录状态 return Result.ok(loginUser); } return Result.error(用户名或密码错误); } }Service 层处理具体逻辑查用户、比对密码、处理异常。这里有一个细节——密码比对不要在 Controller 做也不要在 Mapper 的 SQL 里做要在 Service 层做。原因是 SQL 里WHERE password ?虽然能查出用户但会把数据库报错信息和加密逻辑耦合在一起调试时很难定位。Service 层拿到用户后再比对逻辑清晰且方便打日志。Service public class UserServiceImpl implements UserService { Autowired private UserMapper userMapper; Override public User login(String username, String password) { User user userMapper.findByUsername(username); if (user ! null user.getPassword().equals(Md5Util.encode(password))) { return user; } return null; } }MyBatis 的 Mapper 接口和 XML 文件要配套。这里的坑是XML 文件的 namespace 必须写 Mapper 接口的全限定名resultType 或 resultMap 必须和实体类字段能对上。如果数据库字段是 create_time实体类属性是 createTime要么在 SQL 里起别名要么配置 mapUnderscoreToCamelCase。后者更省事在 mybatis-config.xml 里加上就行。settings setting namemapUnderscoreToCamelCase valuetrue/ setting namelogImpl valueSTDOUT_LOGGING/ /settings商品列表接口是另一个必写接口。需求是分页查询在售商品按发布时间倒序支持关键词搜索。Mapper 的 SQL 写动态条件用 if 标签拼接搜索条件。分页我不用 PageHelper 插件自己算 limit 偏移量因为毕设里引入插件要额外讲依赖手写分页反而能展示你对 SQL 的理解。4.2 订单流转与并发扣减下单接口的边界处理下单是整个项目里最容易出 bug 的地方。流程看起来简单校验商品状态、创建订单、把商品 status 改成 1。但你真的写起来会发现这个流程有三个边界必须处理商品不存在怎么办、商品是自己的怎么办、商品已售出怎么办。先看基础下单逻辑。注意我用UPDATE goods SET status 1 WHERE id ? AND status 0这个带条件的更新语句这是防止并发重复下单的关键——两个买家同时点“立即购买”只有一条 UPDATE 能命中 status0 的记录另一个更新影响行数为 0业务层据此判断失败。Transactional public Order createOrder(OrderRequest req, Integer buyerId) { Goods goods goodsMapper.findById(req.getGoodsId()); if (goods null) { throw new BizException(商品不存在); } if (goods.getUserId().equals(buyerId)) { throw new BizException(不能购买自己发布的商品); } // 关键条件更新防止并发重复下单 int updated goodsMapper.markSold(goods.getId(), buyerId); if (updated 0) { throw new BizException(商品已售出); } Order order new Order(); order.setOrderNo(generateOrderNo()); order.setGoodsId(goods.getId()); order.setSellerId(goods.getUserId()); order.setBuyerId(buyerId); order.setPrice(goods.getPrice()); order.setStatus(0); orderMapper.insert(order); return order; }这段代码里有两点要说明。一是Transactional注解——下单涉及“改商品状态”和“插入订单”两步操作要么都成功要么都失败所以事务必须加在 Service 方法上不能只加在 Mapper 上否则第一步成功后第二步异常商品状态就被改了但订单没建出来数据库里全是逻辑垃圾。但注意容器事务默认只对 RuntimeException 回滚如果你的 BizException 是受检异常事务不会回滚。所以我习惯自定义 BizException 继承 RuntimeException或者直接在注解里写rollbackFor Exception.class。二是订单号生成。别用System.currentTimeMillis()做订单号并发场景下会重复。我一般用时间戳 用户ID 随机数拼接比如20250601 buyerId UUID.randomUUID().toString().substring(0, 4)。数据库里 order_no 有唯一索引兜底真撞了会抛 DuplicateKeyException。如果你不想写这么长的字符串直接用自增 ID 当订单号也行但对外展示的订单号建议还是单独生成因为自增 ID 暴露了网站的总订单量算一个很小的信息泄露点。订单号这块属于“能做出来但没人注意”的细节答辩时提一句“为什么不用自增 ID”反而加分。再一个是数据连接池的配置。SSM 项目里连接池我用 Druid因为监控页面方便而且它对 MySQL 8 的支持比较稳定。配置里最容易被忽略的是initialSize和maxActive毕设项目的并发量很低maxActive 设 20 就够别照抄网上的 200设太大反而浪费数据库连接资源生产环境这么配没问题本地跑会拖慢启动速度。bean iddataSource classcom.alibaba.druid.pool.DruidDataSource property namedriverClassName valuecom.mysql.cj.jdbc.Driver/ property nameurl valuejdbc:mysql://localhost:3306/campus_trade?useUnicodetrueamp;characterEncodingutf8mb4amp;serverTimezoneAsia/Shanghai/ property nameusername valueroot/ property namepassword value123456/ property nameinitialSize value5/ property namemaxActive value20/ /beanJDBC URL 里的characterEncodingutf8mb4和serverTimezoneAsia/Shanghai这两个参数务必带上前者解决中文乱码后者解决 MySQL 8 的时区报错。我见过太多项目在数据库连接池配置上翻车启动报The server time zone value错误就是因为没加 serverTimezone。5. 避坑与排查毕设项目最常见的 5 个翻车现场5.1 IDEA 启动 Tomcat 报 404 或 ClassNotFoundException现象项目在 IDEA 里点了运行浏览器访问 localhost:8080 直接 404控制台报 ClassNotFoundException 或 NoClassDefFoundError。原因九成是 Artifacts 配置的问题。IDEA 里跑 Tomcat 时部署的 war exploded 包没有把 Maven 依赖的 jar 包带进去。常见情况是 pom.xml 引入了 spring-webmvc、mybatis 等依赖但 IDEA 的 Artifacts 里“Put into output root”这一步没有执行导致编译产物里只有你自己的 class 文件没有第三方库。另一个常见原因是 lib 目录没有添加IDEA 默认不会把 Maven 依赖复制到 WEB-INF/lib。解决打开 Project Structure → Artifacts选中你的 web exploded 包双击右侧的“Available Elements”里的依赖把它们加入“WEB-INF/lib”。每次新增依赖后都要检查一次这个目录。如果还不行File → Invalidate Caches 重启这是 IDEA 的老毛病。这个坑几乎每个第一次做 SSM 项目的人都会踩网上搜“idea 运行 javaweb 项目配置”能找到大量同类问题但搜索结果大多只说一半——真正重要的是 Artifacts 而不是 Run Configuration。5.2 前端 axios 请求后端接口跨域Network 面板一片红现象前端页面在 http://localhost:8080后端接口也在 http://localhost:8080浏览器却报 CORS error。等一下端口一样为什么还跨域很多人在这里搞混——如果前端 HTML 是从 IDEA 直接打开的file:// 协议或者前端单独跑在 5173、3000 端口而后端在 8080只要协议、域名、端口任一不同就是跨域。原因浏览器同源策略。前后端分离架构下这是必踩的坑除非你把前端静态文件直接放 Tomcat 里。解决最省事的方式是后端加一个 CORS 过滤器统一给响应头加上允许跨域的字段。我一般写一个简单的 Filter 类放行所有来源——毕设项目不需要精细控制来源。Component public class CorsFilter implements Filter { Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response (HttpServletResponse) res; response.setHeader(Access-Control-Allow-Origin, *); response.setHeader(Access-Control-Allow-Methods, GET, POST, PUT, DELETE, OPTIONS); response.setHeader(Access-Control-Allow-Headers, Content-Type, Authorization); chain.doFilter(req, res); } }另一种做法是在 Vue 的 devServer 里配置 proxy 代理让前端请求走相对路径由 Node 服务转发到后端。两种方式都可以但如果你最后要把前端打进 Tomcat 部署那后端 CORS 过滤器是必须保留的前端代理只在开发阶段有效。5.3 数据库中文乱码表、连接串、页面三层都得排查现象前台页面商品标题全是“”或者数据库里看正常但页面显示乱码甚至写入直接报Incorrect string value错误。原因字符集问题但有三层——数据库/表的字符集、JDBC 连接串的字符集、Tomcat 的 URI 编码。这三层任何一层不对都会出乱码。最常见的组合坑建表时没指定 utf8mb4用了 MySQL 默认的 latin1JDBC URL 里没加 characterEncodingTomcat 的 server.xml 里 Connector 没有配置 UTF-8。解决按顺序检查。第一步SHOW CREATE TABLE goods看表的 DEFAULT CHARSET不是 utf8mb4 就ALTER TABLE goods CONVERT TO CHARACTER SET utf8mb4。第二步确认 JDBC URL 里有characterEncodingutf8。第三步IDEA 里打开 conf/server.xml 的 Connector 标签加URIEncodingUTF-8。做完这三步乱码基本能解决。还有一个隐蔽的坑如果你的前端 HTML 页面没有meta charsetutf-8页面本身就不是 UTF-8 编码那后端返回的中文在浏览器里也是乱的。排查时先用浏览器的开发者工具看响应头里的 Content-Type 有没有charsetUTF-8。5.4 下单接口在并发测试下出现重复订单现象用 JMeter 或 Postman 同时发两个购买请求同一个商品生成了两条订单。原因代码里先查询商品状态再更新两个请求同时读到 status0都通过了校验。这是典型的“先查后改”并发问题归根到底是没做原子更新。解决用前面 4.2 写的UPDATE goods SET status 1 WHERE id ? AND status 0让状态的修改在数据库层面原子化。数据库的行锁会保证只有一个 UPDATE 成功另一个影响行数为 0。这种写法比在 Java 层加 synchronized 锁要靠谱——synchronized 只在单机单实例下有效而且锁的是 JVM 内的对象多实例部署就失效了。这个坑在真实项目中很常见毕设里没人压测可能暴露不出来但答辩时如果老师问“并发下单怎么防”你的回答会是一个大加分项。另外记得在 goods 表的 status 字段上建索引否则 UPDATE 的 WHERE 条件全表扫描锁的粒度就退化成表锁了性能会差很多。5.5 Vue 打包后接口路径全部 404开发环境却正常现象开发环境一切正常把前端 npm run build 的 dist 目录扔到服务器或 Tomcat 里所有接口请求都 404页面能打开但是没数据。原因开发时 axios 的 baseURL 配的是/api这个相对路径在开发环境会被 devServer 代理转发到后端 8080但打包后 dist 目录是纯静态文件没有代理服务浏览器把/api解析成了当前域名下的路径比如 http://your-server/api而你的后端不在这个地址。解决baseURL 不要写死。Vue 项目里习惯的做法是用环境变量区分开发时读.env.development里的VITE_API_BASE_URL生产时读.env.production。如果你用的是混合部署前端打进 Tomcat 和后端一起跑那 baseURL 直接写相对路径/api就行因为前后端同源了。这个问题的本质是“环境感知”问题解决思路就是环境变量。另一个细节dist 目录里的资源引用路径默认是绝对路径/static/...如果你的页面访问路径带二级目录会找不到资源需要在 vue.config.js 里把publicPath改成./。这个坑我印象很深有一次项目都交付了才发现资源路径不对因为演示时一直用的根路径。6. Vue 前端对接和本地部署验证让页面和后端真正联起来到这一步后端接口、数据库都齐了最后要解决的是前端页面怎么把这些接口用起来。以首页商品列表为例前端要做的就是页面加载时调接口、拿数组、渲染卡片。用 Vue 2 的写法核心代码大概是这样的new Vue({ el: #app, data: { goodsList: [], keyword: , currentPage: 1 }, mounted() { this.loadGoods(); }, methods: { loadGoods() { axios.get(/api/goods/list, { params: { page: this.currentPage, keyword: this.keyword } }).then(res { this.goodsList res.data.data; }); } } });模板里用 v-for 遍历 goodsList渲染商品卡片搜索框绑定 keyword点击搜索时重新调 loadGoods。这就算前后端真正联起来了。验证全流程时我习惯按“登录 → 发布商品 → 浏览首页 → 下单 → 个人中心看订单”的顺序点一遍每步打开浏览器 F12 看 Network 面板确认接口返回正常。本地部署验证全部通过后这个项目才算真正落地。这个项目我做了不止一次最深的一条教训是代码写得多烂其实没那么重要重要的是你自己能不能从头讲一遍下单的完整链路。答辩的时候老师顺着订单表问“status 从 0 到 1 是哪行代码改的”你如果能直接说出是 GoodsMapper 里的那条 UPDATE 语句这个项目的“完成度”在老师心里就已经站住了。反过来如果只会照着 PPT 念技术名词项目再漂亮也容易露怯。入门阶段容易犯的毛病就是贪多——想加 Redis、加 MQ、加 Elasticsearch结果每个都是黑匣子出了问题根本没法排查。SSM Vue 这一套跑通你对 JavaWeb 的整个请求链路、数据流转、前后端协作就有了底后面再学什么框架都不慌。希望这篇笔记帮你在毕设路上少踩几个坑。本文还有配套的精品资源点击获取