简介本资源是一套面向计算机专业本科生的2025届毕业设计实战项目——大学校园跳蚤市场平台聚焦高校二手交易场景完整覆盖需求分析、前后端开发、数据库设计与部署实践适用于Java全栈入门到进阶学习者及课程设计/毕设选题参考。压缩包共4个文件47.03MB含1个功能演示录屏MP4直观展示商品浏览、发布、下单全流程、1个结构清晰的源码ZIPSpringBoot3后端Vue.js3双端前台、1个MySQL8建库建表SQL脚本含用户、商品、订单等核心表结构与示例数据、1份详实的需求文档DOCX含功能模块划分、角色权限说明与业务流程图。目前已有138人学习下载配套B站启动教程与系统录屏双视频降低环境配置门槛代码分层规范、注释完整数据库设计兼顾扩展性与校园场景特性是理解电商类系统从0到1落地的优质教学级案例。1. 为什么一个「大学校园跳蚤市场平台」值得用 SpringBoot3 Vue.js3 做毕业设计不是所有毕业设计都扛得住答辩现场的三连问数据怎么存并发怎么压前端怎么和后端对齐接口而「大学校园跳蚤市场平台」恰恰是检验工程能力的黄金切口——它不追求百万级 QPS但必须真实覆盖用户注册、商品发布、图片上传、即时沟通、订单状态流转、多角色权限学生/管理员/审核员等完整闭环它不依赖复杂算法却天然暴露事务一致性如库存扣减订单生成消息通知、文件安全学生上传的二手教材封面/电子产品实拍图需防 XSS 和越权访问、前后端协作规范比如商品列表分页参数命名是否统一为page而非pageNum等硬核细节。用 SpringBoot3 而非 2.x不是为了“新”而是必须直面 Jakarta EE 9 命名空间迁移javax.*→jakarta.*、GraalVM 原生镜像兼容性、更严格的默认 CSRF 策略选 Vue.js3 则绕不开 Composition API 对响应式逻辑的封装能力——比如「发布商品时实时校验标题长度并同步更新剩余字数」这种交互在 Options API 里要散落在data、methods、watch三处而在setup()里能聚合成一个可复用的useTitleCounter组合式函数。这正是 2025 届计算机/软件工程专业学生最该拿得出手的「小而全、严而实」的技术落地方案。2. 搭建 SpringBoot3 后端从 IDEA 创建项目到 RESTful 接口落地2.1 在 IDEA 中创建 SpringBoot3 项目的最小可行配置SpringBoot3 要求 JDK17且必须使用 Spring Initializr 的 3.x 版本非 legacy。在 IDEA 2024.1 中新建项目时关键操作如下Project SDK选择已安装的 JDK17 或 JDK21推荐 JDK21因 SpringBoot3.2 对其支持更成熟Spring Boot Version明确选3.2.12截至 2025 年初的稳定版避免选-SNAPSHOT或RCDependencies勾选以下四项精简原则不加 MyBatis-Plus、不加 Lombok、不加 Security Starter先跑通再加固Spring WebSpring Data JPAH2 Database开发阶段内存数据库免装 MySQLValidation用于NotBlank等注解校验提示若创建后pom.xml中出现spring-boot-starter-parent版本为3.1.x请手动改为3.2.12并确认java.version为17或21。否则启动时会报java.lang.NoClassDefFoundError: jakarta/servlet/Filter——这是 Jakarta EE 迁移不彻底的典型症状。2.1.1 验证项目能否启动写一个最简 Controller// src/main/java/com/example/flea/HelloController.java RestController RequestMapping(/api) public class HelloController { GetMapping(/health) public MapString, Object healthCheck() { return Map.of( status, UP, timestamp, System.currentTimeMillis(), spring-boot-version, 3.2.12 ); } }启动应用后访问http://localhost:8080/api/health返回 JSON 即表示基础环境就绪。注意SpringBoot3 默认关闭了/actuator/health的暴露此接口是手动编写的轻量替代方案专为毕业设计答辩演示准备——评委能一眼看到版本号和时间戳比单纯返回Hello World更显工程意识。2.2 设计核心实体与 JPA 映射紧扣跳蚤市场业务语义跳蚤市场本质是 C2C 交易实体关系必须反映校园场景约束。例如学生账号必须绑定学号唯一且不可改商品图片存储路径需按用户 ID 分目录隔离订单状态流转需严格限定如“已下单”不能直接跳转“已评价”。JPA 实体设计如下// src/main/java/com/example/flea/entity/User.java Entity Table(name t_user) public class User { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; Column(unique true, nullable false, length 20) // 学号最长20位 private String studentId; // 关键字段学号非 username Column(nullable false, length 50) private String realName; Column(unique true, nullable false, length 100) private String email; Column(length 255) private String avatarUrl; // 头像地址如 /upload/avatar/202411001.jpg // getter/setter 省略 }// src/main/java/com/example/flea/entity/Commodity.java Entity Table(name t_commodity) public class Commodity { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; Column(nullable false, length 100) private String title; // 商品标题 Column(columnDefinition TEXT) // 长文本存商品描述 private String description; Column(nullable false, precision 10, scale 2) private BigDecimal price; // 价格精确到分 Column(name user_id, nullable false) private Long userId; // 外键指向 t_user.id不建 ManyToOne避免懒加载陷阱 Column(name status, nullable false, length 20) Enumerated(EnumType.STRING) private CommodityStatus status; // 枚举ON_SALE, SOLD_OUT, DELETED Column(name created_time, nullable false, updatable false) CreationTimestamp private LocalDateTime createdTime; // getter/setter 省略 } // 枚举类定义 public enum CommodityStatus { ON_SALE, // 在售 SOLD_OUT, // 已售出 DELETED // 已下架软删除 }注意Commodity中未使用ManyToOne关联User而是用userId字段存外键值。这是毕业设计阶段的务实选择——避免 JPA 懒加载导致 N1 查询如查 10 个商品触发 10 次用户查询也规避了JsonIgnore循环引用问题。后续如需查用户信息用JpaRepository.findById()单独查即可逻辑清晰答辩时易解释。2.3 实现商品 CRUD 接口用 Spring Data JPA 自定义 SQL 控制精度RESTful 接口需严格遵循资源命名规范/api/commodities集合和/api/commodities/{id}单个。关键点在于分页查询和状态过滤// src/main/java/com/example/flea/repository/CommodityRepository.java Repository public interface CommodityRepository extends JpaRepositoryCommodity, Long { // 自定义 JPQL 查询只查在售商品按创建时间倒序支持分页 Query(SELECT c FROM Commodity c WHERE c.status :status ORDER BY c.createdTime DESC) PageCommodity findOnSale(Param(status) CommodityStatus status, Pageable pageable); // 原生 SQL 查询按标题模糊搜索防 SQL 注入用 ?1 占位符 Query(value SELECT * FROM t_commodity WHERE status ?1 AND title LIKE %?2%, nativeQuery true) ListCommodity searchByTitle(CommodityStatus status, String keyword); }// src/main/java/com/example/flea/controller/CommodityController.java RestController RequestMapping(/api/commodities) public class CommodityController { private final CommodityRepository commodityRepository; public CommodityController(CommodityRepository commodityRepository) { this.commodityRepository commodityRepository; } // GET /api/commodities?page0size10statusON_SALE GetMapping public ResponseEntityPageCommodity listCommodities( RequestParam(defaultValue 0) int page, RequestParam(defaultValue 10) int size, RequestParam(defaultValue ON_SALE) CommodityStatus status) { Pageable pageable PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, createdTime)); PageCommodity result commodityRepository.findOnSale(status, pageable); return ResponseEntity.ok(result); } // POST /api/commodities PostMapping public ResponseEntityCommodity createCommodity(RequestBody Commodity commodity) { // 强制设置状态为 ON_SALE防止前端传入非法值 commodity.setStatus(CommodityStatus.ON_SALE); commodity.setCreatedTime(LocalDateTime.now()); Commodity saved commodityRepository.save(commodity); return ResponseEntity.status(HttpStatus.CREATED).body(saved); } }参数名类型必填说明示例pageint否页码从 0 开始0表示第一页sizeint否每页数量10为默认值statusstring否商品状态枚举值ON_SALE、SOLD_OUT3. 构建 Vue.js3 前端从 Vite 初始化到商品列表组件化开发3.1 使用 Vite 创建 Vue3 项目并集成 Axios 与路由Vue.js3 官方推荐 Vite 构建工具启动速度远超 Vue CLI。终端执行npm create vitelatest flea-frontend -- --template vue cd flea-frontend npm install npm install axios vue-router4 pinia2关键配置文件修改src/router/index.js定义路由守卫确保未登录用户无法访问/publish页面import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue import PublishView from ../views/PublishView.vue const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomeView }, { path: /publish, name: publish, component: PublishView, beforeEnter: (to, from, next) { // 简单模拟登录态检查 localStorage 是否有 token const token localStorage.getItem(auth_token) if (token) { next() } else { next({ name: login }) // 跳转登录页 } } } ] }) export default routersrc/utils/request.js封装 Axios统一处理 baseURL 和错误import axios from axios const request axios.create({ baseURL: http://localhost:8080/api, // 后端 SpringBoot 地址 timeout: 10000 }) // 请求拦截器自动携带 token request.interceptors.request.use(config { const token localStorage.getItem(auth_token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器统一错误处理 request.interceptors.response.use( response response, error { if (error.response?.status 401) { localStorage.removeItem(auth_token) window.location.href /login } return Promise.reject(error) } ) export default request3.2 开发商品列表页面Composition API Pinia 状态管理HomeView.vue是首页核心是「分页加载商品」和「状态筛选」。使用defineComponent和ref/onMounted实现!-- src/views/HomeView.vue -- script setup import { ref, onMounted } from vue import request from /utils/request.js import { useCommodityStore } from /stores/commodity.js const store useCommodityStore() const page ref(0) const size ref(10) const status ref(ON_SALE) const loading ref(false) // 加载商品列表 const loadCommodities async () { loading.value true try { const res await request.get(/commodities, { params: { page: page.value, size: size.value, status: status.value } }) store.setCommodities(res.data.content) // 存入 Pinia store store.setTotalPages(res.data.totalPages) } catch (err) { console.error(加载商品失败:, err) } finally { loading.value false } } onMounted(() { loadCommodities() }) /script template div classcontainer h2在售商品/h2 div classfilter-bar select v-modelstatus changeloadCommodities option valueON_SALE在售/option option valueSOLD_OUT已售出/option /select /div div v-ifloading classloading加载中.../div div v-else classcommodity-grid div v-foritem in store.commodities :keyitem.id classcommodity-card img :srcitem.imageUrl || /placeholder.jpg alt商品图 / h3{{ item.title }}/h3 p classprice¥{{ item.price }}/p p classdesc{{ item.description.substring(0, 50) }}.../p /div /div /div /template3.2.1 Pinia Store 封装商品状态解耦组件逻辑src/stores/commodity.js定义全局商品状态避免父子组件 props 层层传递import { defineStore } from pinia export const useCommodityStore defineStore(commodity, { state: () ({ commodities: [], totalPages: 0 }), actions: { setCommodities(list) { this.commodities list }, setTotalPages(total) { this.totalPages total } } })提示Vue.js3 的ref响应式变量在模板中无需.value但 JS 逻辑中必须加。Pinia 的state是 reactive 对象直接赋值即可触发更新。这种组合让代码既符合 Vue3 最佳实践又便于答辩时讲解「为什么不用 Vuex」——Pinia 更轻量、TypeScript 支持更好、API 更简洁。4. 前后端联调与关键功能实现图片上传、JWT 登录、权限控制4.1 实现学生头像与商品图片上传SpringBoot3 文件接收与 Vue3 FormData 构建跳蚤市场强依赖图片但 SpringBoot3 默认限制单文件大小为 1MB。需在application.yml中放宽# src/main/resources/application.yml spring: servlet: context-path: /api web: resources: static-locations: classpath:/static/ # 文件上传配置 servlet: multipart: max-file-size: 5MB max-request-size: 10MB后端 Controller 接收 MultipartFile// src/main/java/com/example/flea/controller/FileController.java RestController RequestMapping(/api/files) public class FileController { private static final String UPLOAD_DIR uploads/; PostMapping(/avatar) public ResponseEntityMapString, String uploadAvatar( RequestParam(file) MultipartFile file, RequestParam(userId) Long userId) { try { String originalFilename file.getOriginalFilename(); String extension FilenameUtils.getExtension(originalFilename); String filename userId _avatar. extension; Path uploadPath Paths.get(UPLOAD_DIR, avatar); Files.createDirectories(uploadPath); Path targetLocation uploadPath.resolve(filename); file.transferTo(targetLocation); String url /upload/avatar/ filename; MapString, String result Map.of(url, url); return ResponseEntity.ok(result); } catch (Exception e) { return ResponseEntity.badRequest().build(); } } }Vue3 前端调用注意FormData的 key 名必须与后端RequestParam一致// src/composables/useUpload.js import { ref } from vue import request from /utils/request.js export function useUpload() { const uploading ref(false) const uploadAvatar async (file, userId) { uploading.value true const formData new FormData() formData.append(file, file) // key 必须是 file formData.append(userId, userId) // key 必须是 userId try { const res await request.post(/files/avatar, formData, { headers: { Content-Type: multipart/form-data } }) return res.data.url } finally { uploading.value false } } return { uploading, uploadAvatar } }注意Vue3 中FormData的append方法第二个参数是File对象来自input typefile的event.target.files[0]不是 base64 字符串。若传错类型后端MultipartFile会为空返回 400 错误。4.2 基于 JWT 的登录鉴权SpringBoot3 Security 配置要点毕业设计不必实现 OAuth2 复杂流程JWT 足够。添加依赖!-- pom.xml -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-security/artifactId /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.12.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.12.5/version scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.12.5/version scoperuntime/scope /dependencySecurity 配置类精简版仅放行/api/login和静态资源Configuration EnableWebSecurity public class SecurityConfig { Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .csrf(csrf - csrf.disable()) // 毕业设计可关但需向评委说明原因 .authorizeHttpRequests(authz - authz .requestMatchers(/api/login, /api/files/**, /h2-console/**).permitAll() .requestMatchers(/api/**).authenticated() .anyRequest().permitAll() ) .sessionManagement(session - session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)); return http.build(); } Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); } }登录接口返回 JWT TokenPostMapping(/login) public ResponseEntityMapString, String login(RequestBody LoginRequest request) { // 1. 校验用户名密码此处简化为查学号 User user userRepository.findByStudentId(request.getStudentId()) .orElseThrow(() - new BadCredentialsException(学号不存在)); // 2. 生成 JWT有效期 24 小时 String jwt Jwts.builder() .subject(user.getStudentId()) .claim(realName, user.getRealName()) .issuedAt(new Date()) .expiration(new Date(System.currentTimeMillis() 24 * 60 * 60 * 1000)) .signWith(SignatureAlgorithm.HS256, your-secret-key-here) .compact(); MapString, String result Map.of(token, jwt); return ResponseEntity.ok(result); }Vue3 登录成功后存 token// src/views/LoginView.vue const login async () { try { const res await request.post(/login, { studentId, password }) localStorage.setItem(auth_token, res.data.token) router.push(/) } catch (err) { alert(登录失败 err.response?.data?.message) } }4.3 角色权限控制用枚举 拦截器区分学生与管理员校园跳蚤市场需区分普通学生只能删自己发布的商品和管理员可删任意商品。SpringBoot3 中不建议用PreAuthorize注解需开启 AOP增加复杂度改用方法级校验// src/main/java/com/example/flea/service/CommodityService.java Service public class CommodityService { private final CommodityRepository commodityRepository; private final UserRepository userRepository; public CommodityService(CommodityRepository commodityRepository, UserRepository userRepository) { this.commodityRepository commodityRepository; this.userRepository userRepository; } // 删除商品校验 userId 是否匹配 public void deleteCommodity(Long id, Long currentUserId) { Commodity commodity commodityRepository.findById(id) .orElseThrow(() - new RuntimeException(商品不存在)); // 普通学生只能删自己的商品 if (!commodity.getUserId().equals(currentUserId)) { // 检查是否为管理员学号以 ADMIN_ 开头 User user userRepository.findById(currentUserId).orElse(null); if (user null || !user.getStudentId().startsWith(ADMIN_)) { throw new AccessDeniedException(无权限删除此商品); } } commodity.setStatus(CommodityStatus.DELETED); commodityRepository.save(commodity); } }前端按钮根据角色显示!-- 商品卡片内 -- button v-ifitem.userId currentUser.id clickdeleteSelf(item.id) 删除我的商品 /button button v-else-ifisAdmin clickdeleteAny(item.id) 管理员删除 /button5. 毕业设计交付与答辩技巧ER 图绘制、部署验证、高频面试题预判5.1 数据库 ER 图绘制用 draw.io 导出 PNG 并嵌入论文标注关键约束毕业设计论文必须包含 ER 图。不要用 PowerDesigner 等重型工具推荐在线 draw.iodiagrams.net理由免费、导出 PNG 清晰、支持中文、可直接拖拽生成标准 Crows Foot 符号。核心实体关系如下t_user用户表与t_commodity商品表一对多一个用户发多个商品连线标注1..*外键user_id在t_commodity中。t_commodity与t_order订单表一对多一个商品可被多次购买但实际是多对多一个订单含多个商品需引入关联表t_order_item。t_user与t_order一对多一个用户下多个订单外键buyer_id和seller_id分别指向t_user.id。提示draw.io 中右键实体 → “Edit Style” → 添加html1可支持换行导出时选 “PNG” 格式分辨率设为2两倍清晰插入 Word 论文后尺寸调整为宽度 15 厘米自动适配 A4 页面。答辩时评委若问“为什么没做商品收藏功能”可答“当前 ER 图已覆盖核心交易链路收藏属于增值功能可在二期迭代中通过新增t_favorite表实现符合软件工程渐进式开发原则。”5.2 本地打包部署验证SpringBoot3 打 jar 包 Vue3 build 静态文件毕业设计需证明“能跑起来”。步骤如下后端打包mvn clean package -DskipTests生成target/flea-market-0.0.1-SNAPSHOT.jar前端构建npm run build生成dist/目录合并部署将dist/内所有文件复制到 SpringBootsrc/main/resources/static/下覆盖原 static运行 jar 包java -jar target/flea-market-0.0.1-SNAPSHOT.jar此时访问http://localhost:8080即打开 Vue 前端所有 API 自动代理到/api路径。验证点打开浏览器开发者工具 → Network 标签 → 切换到Fetch/XHR→ 点击“在售商品”确认请求 URL 为http://localhost:8080/api/commodities状态码200查看 Response Headers →Content-Type: application/json确认是 JSON 响应而非 HTML5.3 预判 Java 面试题从毕业设计代码中提炼 3 个必答技术点答辩老师常从你的代码出发提问。以下是基于本项目可立即作答的高频题面试问题回答要点结合本项目代码关键代码位置SpringBoot3 和 SpringBoot2 的主要区别重点说 Jakarta EE 迁移javax.servlet→jakarta.servlet所以pom.xml中spring-boot-starter-web依赖隐式引入的是jakarta.servlet-api另外ConfigurationProperties默认开启 relaxed bindingserver.port可写成server.port8080或server.port: 8080pom.xml、application.ymlJPA 中ManyToOne和外键字段哪种方式更好在毕业设计规模下用外键字段如userId更可控避免懒加载 N1 问题减少JsonIgnore配置序列化 JSON 时字段名清晰userId: 123而非user: {id:123}。若未来扩展需关联查询再用ManyToOne(fetch FetchType.EAGER)Commodity.java第 22 行Vue3 的ref和reactive有什么区别ref用于基本类型string/number和单个对象模板中自动解包{{ count }}reactive用于复杂对象必须用const { x, y } toRefs(obj)才能在模板中解包。本项目page用refPinia store 用reactive状态HomeView.vue第 5 行、commodity.js第 3 行最后一步把flea-market-0.0.1-SNAPSHOT.jar和src/main/resources/application.yml脱敏后打包为毕业设计_跳蚤市场_源码.zip放在 GitHub 公开仓库设为私有亦可README.md 中写清「技术栈、运行步骤、截图」——这比任何 PPT 都更能证明你真的做过。本文还有配套的精品资源点击获取
简介本资源是一套面向计算机专业本科生的2025届毕业设计实战项目——大学校园跳蚤市场平台聚焦高校二手交易场景完整覆盖需求分析、前后端开发、数据库设计与部署实践适用于Java全栈入门到进阶学习者及课程设计/毕设选题参考。压缩包共4个文件47.03MB含1个功能演示录屏MP4直观展示商品浏览、发布、下单全流程、1个结构清晰的源码ZIPSpringBoot3后端Vue.js3双端前台、1个MySQL8建库建表SQL脚本含用户、商品、订单等核心表结构与示例数据、1份详实的需求文档DOCX含功能模块划分、角色权限说明与业务流程图。目前已有138人学习下载配套B站启动教程与系统录屏双视频降低环境配置门槛代码分层规范、注释完整数据库设计兼顾扩展性与校园场景特性是理解电商类系统从0到1落地的优质教学级案例。1. 为什么一个「大学校园跳蚤市场平台」值得用 SpringBoot3 Vue.js3 做毕业设计不是所有毕业设计都扛得住答辩现场的三连问数据怎么存并发怎么压前端怎么和后端对齐接口而「大学校园跳蚤市场平台」恰恰是检验工程能力的黄金切口——它不追求百万级 QPS但必须真实覆盖用户注册、商品发布、图片上传、即时沟通、订单状态流转、多角色权限学生/管理员/审核员等完整闭环它不依赖复杂算法却天然暴露事务一致性如库存扣减订单生成消息通知、文件安全学生上传的二手教材封面/电子产品实拍图需防 XSS 和越权访问、前后端协作规范比如商品列表分页参数命名是否统一为page而非pageNum等硬核细节。用 SpringBoot3 而非 2.x不是为了“新”而是必须直面 Jakarta EE 9 命名空间迁移javax.*→jakarta.*、GraalVM 原生镜像兼容性、更严格的默认 CSRF 策略选 Vue.js3 则绕不开 Composition API 对响应式逻辑的封装能力——比如「发布商品时实时校验标题长度并同步更新剩余字数」这种交互在 Options API 里要散落在data、methods、watch三处而在setup()里能聚合成一个可复用的useTitleCounter组合式函数。这正是 2025 届计算机/软件工程专业学生最该拿得出手的「小而全、严而实」的技术落地方案。2. 搭建 SpringBoot3 后端从 IDEA 创建项目到 RESTful 接口落地2.1 在 IDEA 中创建 SpringBoot3 项目的最小可行配置SpringBoot3 要求 JDK17且必须使用 Spring Initializr 的 3.x 版本非 legacy。在 IDEA 2024.1 中新建项目时关键操作如下Project SDK选择已安装的 JDK17 或 JDK21推荐 JDK21因 SpringBoot3.2 对其支持更成熟Spring Boot Version明确选3.2.12截至 2025 年初的稳定版避免选-SNAPSHOT或RCDependencies勾选以下四项精简原则不加 MyBatis-Plus、不加 Lombok、不加 Security Starter先跑通再加固Spring WebSpring Data JPAH2 Database开发阶段内存数据库免装 MySQLValidation用于NotBlank等注解校验提示若创建后pom.xml中出现spring-boot-starter-parent版本为3.1.x请手动改为3.2.12并确认java.version为17或21。否则启动时会报java.lang.NoClassDefFoundError: jakarta/servlet/Filter——这是 Jakarta EE 迁移不彻底的典型症状。2.1.1 验证项目能否启动写一个最简 Controller// src/main/java/com/example/flea/HelloController.java RestController RequestMapping(/api) public class HelloController { GetMapping(/health) public MapString, Object healthCheck() { return Map.of( status, UP, timestamp, System.currentTimeMillis(), spring-boot-version, 3.2.12 ); } }启动应用后访问http://localhost:8080/api/health返回 JSON 即表示基础环境就绪。注意SpringBoot3 默认关闭了/actuator/health的暴露此接口是手动编写的轻量替代方案专为毕业设计答辩演示准备——评委能一眼看到版本号和时间戳比单纯返回Hello World更显工程意识。2.2 设计核心实体与 JPA 映射紧扣跳蚤市场业务语义跳蚤市场本质是 C2C 交易实体关系必须反映校园场景约束。例如学生账号必须绑定学号唯一且不可改商品图片存储路径需按用户 ID 分目录隔离订单状态流转需严格限定如“已下单”不能直接跳转“已评价”。JPA 实体设计如下// src/main/java/com/example/flea/entity/User.java Entity Table(name t_user) public class User { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; Column(unique true, nullable false, length 20) // 学号最长20位 private String studentId; // 关键字段学号非 username Column(nullable false, length 50) private String realName; Column(unique true, nullable false, length 100) private String email; Column(length 255) private String avatarUrl; // 头像地址如 /upload/avatar/202411001.jpg // getter/setter 省略 }// src/main/java/com/example/flea/entity/Commodity.java Entity Table(name t_commodity) public class Commodity { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; Column(nullable false, length 100) private String title; // 商品标题 Column(columnDefinition TEXT) // 长文本存商品描述 private String description; Column(nullable false, precision 10, scale 2) private BigDecimal price; // 价格精确到分 Column(name user_id, nullable false) private Long userId; // 外键指向 t_user.id不建 ManyToOne避免懒加载陷阱 Column(name status, nullable false, length 20) Enumerated(EnumType.STRING) private CommodityStatus status; // 枚举ON_SALE, SOLD_OUT, DELETED Column(name created_time, nullable false, updatable false) CreationTimestamp private LocalDateTime createdTime; // getter/setter 省略 } // 枚举类定义 public enum CommodityStatus { ON_SALE, // 在售 SOLD_OUT, // 已售出 DELETED // 已下架软删除 }注意Commodity中未使用ManyToOne关联User而是用userId字段存外键值。这是毕业设计阶段的务实选择——避免 JPA 懒加载导致 N1 查询如查 10 个商品触发 10 次用户查询也规避了JsonIgnore循环引用问题。后续如需查用户信息用JpaRepository.findById()单独查即可逻辑清晰答辩时易解释。2.3 实现商品 CRUD 接口用 Spring Data JPA 自定义 SQL 控制精度RESTful 接口需严格遵循资源命名规范/api/commodities集合和/api/commodities/{id}单个。关键点在于分页查询和状态过滤// src/main/java/com/example/flea/repository/CommodityRepository.java Repository public interface CommodityRepository extends JpaRepositoryCommodity, Long { // 自定义 JPQL 查询只查在售商品按创建时间倒序支持分页 Query(SELECT c FROM Commodity c WHERE c.status :status ORDER BY c.createdTime DESC) PageCommodity findOnSale(Param(status) CommodityStatus status, Pageable pageable); // 原生 SQL 查询按标题模糊搜索防 SQL 注入用 ?1 占位符 Query(value SELECT * FROM t_commodity WHERE status ?1 AND title LIKE %?2%, nativeQuery true) ListCommodity searchByTitle(CommodityStatus status, String keyword); }// src/main/java/com/example/flea/controller/CommodityController.java RestController RequestMapping(/api/commodities) public class CommodityController { private final CommodityRepository commodityRepository; public CommodityController(CommodityRepository commodityRepository) { this.commodityRepository commodityRepository; } // GET /api/commodities?page0size10statusON_SALE GetMapping public ResponseEntityPageCommodity listCommodities( RequestParam(defaultValue 0) int page, RequestParam(defaultValue 10) int size, RequestParam(defaultValue ON_SALE) CommodityStatus status) { Pageable pageable PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, createdTime)); PageCommodity result commodityRepository.findOnSale(status, pageable); return ResponseEntity.ok(result); } // POST /api/commodities PostMapping public ResponseEntityCommodity createCommodity(RequestBody Commodity commodity) { // 强制设置状态为 ON_SALE防止前端传入非法值 commodity.setStatus(CommodityStatus.ON_SALE); commodity.setCreatedTime(LocalDateTime.now()); Commodity saved commodityRepository.save(commodity); return ResponseEntity.status(HttpStatus.CREATED).body(saved); } }参数名类型必填说明示例pageint否页码从 0 开始0表示第一页sizeint否每页数量10为默认值statusstring否商品状态枚举值ON_SALE、SOLD_OUT3. 构建 Vue.js3 前端从 Vite 初始化到商品列表组件化开发3.1 使用 Vite 创建 Vue3 项目并集成 Axios 与路由Vue.js3 官方推荐 Vite 构建工具启动速度远超 Vue CLI。终端执行npm create vitelatest flea-frontend -- --template vue cd flea-frontend npm install npm install axios vue-router4 pinia2关键配置文件修改src/router/index.js定义路由守卫确保未登录用户无法访问/publish页面import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue import PublishView from ../views/PublishView.vue const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomeView }, { path: /publish, name: publish, component: PublishView, beforeEnter: (to, from, next) { // 简单模拟登录态检查 localStorage 是否有 token const token localStorage.getItem(auth_token) if (token) { next() } else { next({ name: login }) // 跳转登录页 } } } ] }) export default routersrc/utils/request.js封装 Axios统一处理 baseURL 和错误import axios from axios const request axios.create({ baseURL: http://localhost:8080/api, // 后端 SpringBoot 地址 timeout: 10000 }) // 请求拦截器自动携带 token request.interceptors.request.use(config { const token localStorage.getItem(auth_token) if (token) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器统一错误处理 request.interceptors.response.use( response response, error { if (error.response?.status 401) { localStorage.removeItem(auth_token) window.location.href /login } return Promise.reject(error) } ) export default request3.2 开发商品列表页面Composition API Pinia 状态管理HomeView.vue是首页核心是「分页加载商品」和「状态筛选」。使用defineComponent和ref/onMounted实现!-- src/views/HomeView.vue -- script setup import { ref, onMounted } from vue import request from /utils/request.js import { useCommodityStore } from /stores/commodity.js const store useCommodityStore() const page ref(0) const size ref(10) const status ref(ON_SALE) const loading ref(false) // 加载商品列表 const loadCommodities async () { loading.value true try { const res await request.get(/commodities, { params: { page: page.value, size: size.value, status: status.value } }) store.setCommodities(res.data.content) // 存入 Pinia store store.setTotalPages(res.data.totalPages) } catch (err) { console.error(加载商品失败:, err) } finally { loading.value false } } onMounted(() { loadCommodities() }) /script template div classcontainer h2在售商品/h2 div classfilter-bar select v-modelstatus changeloadCommodities option valueON_SALE在售/option option valueSOLD_OUT已售出/option /select /div div v-ifloading classloading加载中.../div div v-else classcommodity-grid div v-foritem in store.commodities :keyitem.id classcommodity-card img :srcitem.imageUrl || /placeholder.jpg alt商品图 / h3{{ item.title }}/h3 p classprice¥{{ item.price }}/p p classdesc{{ item.description.substring(0, 50) }}.../p /div /div /div /template3.2.1 Pinia Store 封装商品状态解耦组件逻辑src/stores/commodity.js定义全局商品状态避免父子组件 props 层层传递import { defineStore } from pinia export const useCommodityStore defineStore(commodity, { state: () ({ commodities: [], totalPages: 0 }), actions: { setCommodities(list) { this.commodities list }, setTotalPages(total) { this.totalPages total } } })提示Vue.js3 的ref响应式变量在模板中无需.value但 JS 逻辑中必须加。Pinia 的state是 reactive 对象直接赋值即可触发更新。这种组合让代码既符合 Vue3 最佳实践又便于答辩时讲解「为什么不用 Vuex」——Pinia 更轻量、TypeScript 支持更好、API 更简洁。4. 前后端联调与关键功能实现图片上传、JWT 登录、权限控制4.1 实现学生头像与商品图片上传SpringBoot3 文件接收与 Vue3 FormData 构建跳蚤市场强依赖图片但 SpringBoot3 默认限制单文件大小为 1MB。需在application.yml中放宽# src/main/resources/application.yml spring: servlet: context-path: /api web: resources: static-locations: classpath:/static/ # 文件上传配置 servlet: multipart: max-file-size: 5MB max-request-size: 10MB后端 Controller 接收 MultipartFile// src/main/java/com/example/flea/controller/FileController.java RestController RequestMapping(/api/files) public class FileController { private static final String UPLOAD_DIR uploads/; PostMapping(/avatar) public ResponseEntityMapString, String uploadAvatar( RequestParam(file) MultipartFile file, RequestParam(userId) Long userId) { try { String originalFilename file.getOriginalFilename(); String extension FilenameUtils.getExtension(originalFilename); String filename userId _avatar. extension; Path uploadPath Paths.get(UPLOAD_DIR, avatar); Files.createDirectories(uploadPath); Path targetLocation uploadPath.resolve(filename); file.transferTo(targetLocation); String url /upload/avatar/ filename; MapString, String result Map.of(url, url); return ResponseEntity.ok(result); } catch (Exception e) { return ResponseEntity.badRequest().build(); } } }Vue3 前端调用注意FormData的 key 名必须与后端RequestParam一致// src/composables/useUpload.js import { ref } from vue import request from /utils/request.js export function useUpload() { const uploading ref(false) const uploadAvatar async (file, userId) { uploading.value true const formData new FormData() formData.append(file, file) // key 必须是 file formData.append(userId, userId) // key 必须是 userId try { const res await request.post(/files/avatar, formData, { headers: { Content-Type: multipart/form-data } }) return res.data.url } finally { uploading.value false } } return { uploading, uploadAvatar } }注意Vue3 中FormData的append方法第二个参数是File对象来自input typefile的event.target.files[0]不是 base64 字符串。若传错类型后端MultipartFile会为空返回 400 错误。4.2 基于 JWT 的登录鉴权SpringBoot3 Security 配置要点毕业设计不必实现 OAuth2 复杂流程JWT 足够。添加依赖!-- pom.xml -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-security/artifactId /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.12.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.12.5/version scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.12.5/version scoperuntime/scope /dependencySecurity 配置类精简版仅放行/api/login和静态资源Configuration EnableWebSecurity public class SecurityConfig { Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .csrf(csrf - csrf.disable()) // 毕业设计可关但需向评委说明原因 .authorizeHttpRequests(authz - authz .requestMatchers(/api/login, /api/files/**, /h2-console/**).permitAll() .requestMatchers(/api/**).authenticated() .anyRequest().permitAll() ) .sessionManagement(session - session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)); return http.build(); } Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); } }登录接口返回 JWT TokenPostMapping(/login) public ResponseEntityMapString, String login(RequestBody LoginRequest request) { // 1. 校验用户名密码此处简化为查学号 User user userRepository.findByStudentId(request.getStudentId()) .orElseThrow(() - new BadCredentialsException(学号不存在)); // 2. 生成 JWT有效期 24 小时 String jwt Jwts.builder() .subject(user.getStudentId()) .claim(realName, user.getRealName()) .issuedAt(new Date()) .expiration(new Date(System.currentTimeMillis() 24 * 60 * 60 * 1000)) .signWith(SignatureAlgorithm.HS256, your-secret-key-here) .compact(); MapString, String result Map.of(token, jwt); return ResponseEntity.ok(result); }Vue3 登录成功后存 token// src/views/LoginView.vue const login async () { try { const res await request.post(/login, { studentId, password }) localStorage.setItem(auth_token, res.data.token) router.push(/) } catch (err) { alert(登录失败 err.response?.data?.message) } }4.3 角色权限控制用枚举 拦截器区分学生与管理员校园跳蚤市场需区分普通学生只能删自己发布的商品和管理员可删任意商品。SpringBoot3 中不建议用PreAuthorize注解需开启 AOP增加复杂度改用方法级校验// src/main/java/com/example/flea/service/CommodityService.java Service public class CommodityService { private final CommodityRepository commodityRepository; private final UserRepository userRepository; public CommodityService(CommodityRepository commodityRepository, UserRepository userRepository) { this.commodityRepository commodityRepository; this.userRepository userRepository; } // 删除商品校验 userId 是否匹配 public void deleteCommodity(Long id, Long currentUserId) { Commodity commodity commodityRepository.findById(id) .orElseThrow(() - new RuntimeException(商品不存在)); // 普通学生只能删自己的商品 if (!commodity.getUserId().equals(currentUserId)) { // 检查是否为管理员学号以 ADMIN_ 开头 User user userRepository.findById(currentUserId).orElse(null); if (user null || !user.getStudentId().startsWith(ADMIN_)) { throw new AccessDeniedException(无权限删除此商品); } } commodity.setStatus(CommodityStatus.DELETED); commodityRepository.save(commodity); } }前端按钮根据角色显示!-- 商品卡片内 -- button v-ifitem.userId currentUser.id clickdeleteSelf(item.id) 删除我的商品 /button button v-else-ifisAdmin clickdeleteAny(item.id) 管理员删除 /button5. 毕业设计交付与答辩技巧ER 图绘制、部署验证、高频面试题预判5.1 数据库 ER 图绘制用 draw.io 导出 PNG 并嵌入论文标注关键约束毕业设计论文必须包含 ER 图。不要用 PowerDesigner 等重型工具推荐在线 draw.iodiagrams.net理由免费、导出 PNG 清晰、支持中文、可直接拖拽生成标准 Crows Foot 符号。核心实体关系如下t_user用户表与t_commodity商品表一对多一个用户发多个商品连线标注1..*外键user_id在t_commodity中。t_commodity与t_order订单表一对多一个商品可被多次购买但实际是多对多一个订单含多个商品需引入关联表t_order_item。t_user与t_order一对多一个用户下多个订单外键buyer_id和seller_id分别指向t_user.id。提示draw.io 中右键实体 → “Edit Style” → 添加html1可支持换行导出时选 “PNG” 格式分辨率设为2两倍清晰插入 Word 论文后尺寸调整为宽度 15 厘米自动适配 A4 页面。答辩时评委若问“为什么没做商品收藏功能”可答“当前 ER 图已覆盖核心交易链路收藏属于增值功能可在二期迭代中通过新增t_favorite表实现符合软件工程渐进式开发原则。”5.2 本地打包部署验证SpringBoot3 打 jar 包 Vue3 build 静态文件毕业设计需证明“能跑起来”。步骤如下后端打包mvn clean package -DskipTests生成target/flea-market-0.0.1-SNAPSHOT.jar前端构建npm run build生成dist/目录合并部署将dist/内所有文件复制到 SpringBootsrc/main/resources/static/下覆盖原 static运行 jar 包java -jar target/flea-market-0.0.1-SNAPSHOT.jar此时访问http://localhost:8080即打开 Vue 前端所有 API 自动代理到/api路径。验证点打开浏览器开发者工具 → Network 标签 → 切换到Fetch/XHR→ 点击“在售商品”确认请求 URL 为http://localhost:8080/api/commodities状态码200查看 Response Headers →Content-Type: application/json确认是 JSON 响应而非 HTML5.3 预判 Java 面试题从毕业设计代码中提炼 3 个必答技术点答辩老师常从你的代码出发提问。以下是基于本项目可立即作答的高频题面试问题回答要点结合本项目代码关键代码位置SpringBoot3 和 SpringBoot2 的主要区别重点说 Jakarta EE 迁移javax.servlet→jakarta.servlet所以pom.xml中spring-boot-starter-web依赖隐式引入的是jakarta.servlet-api另外ConfigurationProperties默认开启 relaxed bindingserver.port可写成server.port8080或server.port: 8080pom.xml、application.ymlJPA 中ManyToOne和外键字段哪种方式更好在毕业设计规模下用外键字段如userId更可控避免懒加载 N1 问题减少JsonIgnore配置序列化 JSON 时字段名清晰userId: 123而非user: {id:123}。若未来扩展需关联查询再用ManyToOne(fetch FetchType.EAGER)Commodity.java第 22 行Vue3 的ref和reactive有什么区别ref用于基本类型string/number和单个对象模板中自动解包{{ count }}reactive用于复杂对象必须用const { x, y } toRefs(obj)才能在模板中解包。本项目page用refPinia store 用reactive状态HomeView.vue第 5 行、commodity.js第 3 行最后一步把flea-market-0.0.1-SNAPSHOT.jar和src/main/resources/application.yml脱敏后打包为毕业设计_跳蚤市场_源码.zip放在 GitHub 公开仓库设为私有亦可README.md 中写清「技术栈、运行步骤、截图」——这比任何 PPT 都更能证明你真的做过。本文还有配套的精品资源点击获取
