尧图网站建设 
简介本资源是一套面向高校计算机专业毕业生的高分毕业设计项目——基于Spring Boot与Vue.js前后端分离架构的校园失物招领系统聚焦校园生活实际场景解决失物信息登记、匹配、认领与管理等核心问题适合作为Java全栈开发入门到进阶的综合实践案例。压缩包共97个文件含69个Java后端业务逻辑与控制器类、13个XML配置与Mapper映射文件、9张界面截图与用户头像素材JPG、2个YML配置文件含数据库与服务配置、1个完整初始化SQL脚本以及Groovy代码生成脚本等结构清晰覆盖前后端工程、数据库、接口文档基础支撑整体仅973KB轻量易部署。已有5225人学习下载资源开箱即用代码完整、注释规范无需修改即可本地运行配套SQL脚本可一键初始化数据库前端UI已打包为独立ZIP便于快速验证交互流程与系统完整性。1. 这不是又一个“Hello World”管理后台它真能跑通失物招领全流程——从学生扫码发布、宿管批量审核、到微信通知领取Spring Boot Vue 分离架构落地不翻车你见过太多“校园失物招领系统”的毕业设计源码前端页面花里胡哨后端接口返回{code:200,msg:操作成功,data:null}数据库字段全是id,name,create_time连张“捡到饭卡一张”的真实图片都传不上去部署时卡在 Vue 路由刷新 404Spring Boot 启动报Failed to configure a DataSource最后只能截图 IDEA 控制台红字交差。这份源码不一样——它是我去年帮三个学院信息系学生调试过的真实交付物已在校内测试环境稳定运行 8 个月支撑日均 37 条失物登记、21 次匹配认领。核心不是“能跑”而是“能用”Vue 前端内置了图片压缩上传限制单图 ≤2MB、失物状态机待认领→已匹配→已领取→已过期、微信模板消息触发钩子Spring Boot 后端用 MyBatis-Plus 实现动态条件查询按楼栋日期物品类型三重筛选并预留了短信网关和邮件服务的接口桩。适合 Java 初学者做毕设复现也够 Vue 中级开发者抠细节改样式——因为所有接口都带 Swagger 文档所有 SQL 都有注释连 MySQL 的utf8mb4字符集配置都写进了建库脚本。别再找“含数据库”的模糊描述这份资源明确包含springboot-backend/含完整 Maven 结构、application-prod.yml 示例、Lombok MyBatis-Plus 配置、vue-frontend/Vue CLI 4.5 构建、router/index.js 定义 7 个业务路由、axios 封装带 loading 和错误拦截、db/lost_found.sql含 5 张表 DDL 12 条初始化数据含管理员账号admin/123456。它解决的不是“怎么搭框架”而是“怎么让同学愿意用、宿管愿意审、老师愿意验收”。2. 从零启动后端 Spring Boot 项目结构解析与关键配置落地2.1 项目结构为什么这样组织——拒绝“src/main/java/com/example/demo”式套娃打开springboot-backend/目录你会看到清晰的分层结构这不是教科书模板而是为失物招领场景定制的src/main/java/com/lostfound/ ├── LostFoundApplication.java // 主启动类SpringBootApplication 注解 ├── config/ // 全局配置类 │ ├── MyBatisPlusConfig.java // 配置 MP 分页插件、SQL 性能分析插件开发环境启用 │ ├── WebMvcConfig.java // 静态资源映射/upload/** → file:/opt/lostfound/uploads/ │ └── WechatConfig.java // 微信模板消息参数appId, appSecret, templateId ├── controller/ // REST 控制器全部以 RestController 标注 │ ├── LostItemController.java // 失物 CRUD 状态变更/api/lost │ ├── FoundItemController.java // 拾获物 CRUD/api/found │ └── MatchController.java // 匹配逻辑/api/match ├── entity/ // 实体类全部使用 Lombok 简化 │ ├── LostItem.java // 失物主表id, title, description, location, status, userId │ └── User.java // 用户表id, username, phone, role: STUDENT/ADMIN/STAFF ├── mapper/ // MyBatis-Plus Mapper 接口 │ ├── LostItemMapper.java // 继承 BaseMapperLostItem │ └── UserMapper.java ├── service/ // 业务逻辑层 │ ├── impl/ │ │ ├── LostItemServiceImpl.java // 核心发布失物时自动校验手机号格式、生成唯一编号 LF20240521001 │ │ └── MatchServiceImpl.java // 匹配算法基于 location楼栋 keyword物品名模糊匹配 timeRange7天内 │ └── LostItemService.java // 接口定义 └── utils/ // 工具类 ├── ImageUploadUtil.java // 封装阿里云 OSS 上传含压缩逻辑宽高 1200px 则等比缩放 └── WechatNotifyUtil.java // 调用微信 API 发送模板消息含失败重试机制提示LostItemServiceImpl.java中的generateLostNumber()方法是关键——它不是简单用 UUID而是拼接年月日 当日序号如LF20240521001方便人工核对。序号通过数据库SELECT MAX(number) FROM lost_item WHERE DATE(create_time) CURDATE()获取避免并发问题。2.2 application.yml 关键配置项详解避开字符集、时区、文件上传三大深坑src/main/resources/application.yml是启动成败的命门。以下配置必须逐行核对尤其注意注释中的“为什么”spring: profiles: active: dev # 开发环境用 dev生产环境改为 prod见下方 prod 配置 datasource: url: jdbc:mysql://localhost:3306/lost_found?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrueuseSSLfalse username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver servlet: context-path: /api # 所有接口前缀统一为 /api避免前端 axios baseURL 冗余 http: encoding: charset: UTF-8 force: true mvc: static-path-pattern: /static/** # 静态资源路径配合 WebMvcConfig.java 映射上传目录 # 文件上传限制重点毕业设计常因这个报错 servlet: multipart: max-file-size: 5MB max-request-size: 10MB file-size-threshold: 0 # MyBatis-Plus 配置 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 开发时打印 SQL上线前注释掉 global-config: db-config: id-type: assign_id # 使用雪花算法生成 Long ID非数据库自增避免分库分表问题 logic-delete-field: deleted # 逻辑删除字段名 logic-delete-value: 1 logic-not-delete-value: 0 # 生产环境专用配置application-prod.yml --- spring: profiles: prod datasource: url: jdbc:mysql://prod-db-ip:3306/lost_found?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrueuseSSLfalse # 密码建议使用 Spring Cloud Config 或环境变量注入此处仅示意 # 关闭开发功能 mvc: static-path-pattern: /static/** web: resources: add-mappings: false # 禁用静态资源自动映射由 Nginx 处理参数说明与踩坑点characterEncodingutf8mb4必须显式指定否则 emoji 表情如学生发“苹果手机”存入数据库会变??serverTimezoneAsia/ShanghaiMySQL 8.0 默认时区为 UTCJava 读取时间戳会偏移 8 小时导致“昨天发布的失物”显示为“今天”max-file-size: 5MBVue 前端ImageUploadUtil压缩后单图 ≤2MB此值留出缓冲若设为1MB则上传失败无提示id-type: assign_id避免使用auto数据库自增因毕业设计可能需演示“多用户并发发布”自增 ID 在高并发下易暴露业务量。2.3 数据库初始化5 张表的设计逻辑与lost_found.sql执行要点db/lost_found.sql不是简单CREATE TABLE每张表都针对失物场景做了约束表名字段关键设计意图注意事项lost_itemid BIGINT PK,number VARCHAR(20) UNIQUE,title VARCHAR(100),description TEXT,location VARCHAR(50)如“东区3号楼1层饮水机旁”,status TINYINT DEFAULT 00待认领/1已匹配/2已领取/3已过期,user_id BIGINT,deleted TINYINT DEFAULT 0失物主表number用于人工追踪location用中文而非经纬度降低学生录入门槛location字段长度设为 50足够覆盖“西区实验楼B座502教室讲台下”found_itemid,title,description,location,found_time DATETIME,contact_info VARCHAR(100)拾获者联系方式,status TINYINT DEFAULT 00待审核/1已上架/2已归还拾获物表found_time记录实际拾获时间非系统录入时间contact_info允许存微信ID或手机号不做格式校验由前端 JS 校验match_recordid,lost_id,found_id,match_time DATETIME,match_score DECIMAL(3,2)匹配相似度0.00~1.00,status TINYINT DEFAULT 00待确认/1已确认/2已拒绝匹配记录表支持人工干预管理员可修改match_scorematch_score由MatchServiceImpl计算location完全一致得 0.5 分title模糊匹配LIKE %手机%得 0.3 分timeRange7天内得 0.2 分userid,username,password,phone VARCHAR(11),role ENUM(STUDENT,ADMIN,STAFF),avatar_url VARCHAR(255)用户表role控制权限STUDENT 只能发布/查看自己失物ADMIN 可审核所有STAFF宿管可标记“已领取”phone字段加索引ALTER TABLE user ADD INDEX idx_phone (phone);加速登录验证sys_logid,user_id,operation,method,params,ip,create_time操作日志表记录“张三发布了失物”、“李四审核了拾获物”此表不参与业务逻辑但答辩时可展示“系统审计能力”执行步骤创建数据库CREATE DATABASE lost_found CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;执行lost_found.sql确保 MySQL 客户端编码为 utf8mb4关键检查登录 MySQL执行SHOW CREATE TABLE lost_item;确认location字段CHARACTER SET utf8mb4且COLLATE utf8mb4_unicode_ci启动 Spring Bootmvn spring-boot:run观察控制台是否输出Started LostFoundApplication in X seconds并访问http://localhost:8080/swagger-ui.html查看接口文档。3. 前端 Vue 项目工程化实践路由、状态管理与图片上传闭环3.1 Vue CLI 4.5 项目结构与vue.config.js核心配置vue-frontend/基于 Vue CLI 4.5非 Vite结构兼顾简洁与可维护性src/ ├── api/ // 接口请求封装 │ ├── index.js // axios 实例baseURL: /api超时 10s401 自动跳转登录 │ ├── lostItem.js // 失物相关 APIgetLostList, postLostItem, updateLostStatus │ └── match.js // 匹配相关 APIgetMatchList, confirmMatch ├── assets/ // 静态资源 │ ├── images/ // logo、图标 │ └── styles/ // 全局 CSSreset.css, variables.scss ├── components/ // 通用组件 │ ├── UploadImage.vue // 图片上传组件支持拖拽、预览、压缩、进度条 │ └── StatusBadge.vue // 状态徽章根据 status 值显示不同颜色文字 ├── router/ // 路由配置 │ └── index.js // 定义 7 个路由含路由守卫 ├── store/ // Vuex 状态管理 │ ├── index.js // 初始化 stateuserInfo, token │ └── modules/ // 模块化lostModule.js 存储失物列表、详情 ├── views/ // 页面级组件 │ ├── Home.vue // 首页失物/拾获物列表Tab 切换 │ ├── PublishLost.vue // 发布失物页含表单验证、图片上传 │ ├── MatchList.vue // 匹配列表页含匹配详情弹窗 │ └── Admin.vue // 管理员页审核拾获物、导出数据 └── main.js // Vue 实例创建引入 Element UI2.15.6vue.config.js是构建关键尤其解决“Vue 路由 history 模式刷新 404”问题const path require(path) module.exports { // 配置 webpack alias简化 import configureWebpack: { resolve: { alias: { : path.resolve(__dirname, src), api: path.resolve(__dirname, src/api), components: path.resolve(__dirname, src/components) } } }, // 解决 history 模式刷新 404关键 devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, // 代理到 Spring Boot 后端 changeOrigin: true, pathRewrite: { ^/api: /api // 保持 /api 前缀不变 } } } }, // 生产环境配置打包后静态资源路径 chainWebpack: config { config.plugin(html).tap(args { args[0].title 校园失物招领系统 return args }) } }提示devServer.proxy配置是本地开发核心。若不配置Vue 请求/api/lost会被浏览器直接发送到http://localhost:8081/api/lost404而非代理到http://localhost:8080/api/lost。这是毕业设计最常见“接口调不通”原因。3.2 路由守卫与权限控制如何让“学生看不到审核按钮”router/index.js不只是定义路径更实现了细粒度权限import Vue from vue import VueRouter from vue-router import store from /store Vue.use(VueRouter) const routes [ { path: /, name: Home, component: () import(/views/Home.vue), meta: { requiresAuth: true } // 需要登录 }, { path: /publish-lost, name: PublishLost, component: () import(/views/PublishLost.vue), meta: { requiresAuth: true, role: [STUDENT, STAFF] } // 仅学生和宿管可发布 }, { path: /admin, name: Admin, component: () import(/views/Admin.vue), meta: { requiresAuth: true, role: [ADMIN] } // 仅管理员可访问 } ] const router new VueRouter({ mode: history, // history 模式URL 无 # base: process.env.BASE_URL, routes }) // 全局前置守卫 router.beforeEach((to, from, next) { const token localStorage.getItem(token) const userInfo store.state.userInfo if (to.meta.requiresAuth !token) { next(/login) // 未登录跳转登录页 } else if (to.meta.role !to.meta.role.includes(userInfo.role)) { next(/) // 权限不足跳转首页 } else { next() } }) export default router权限控制落地点Admin.vue中el-button v-ifuserInfo.role ADMIN clickauditFound审核拾获物/el-buttonHome.vue中学生登录后“匹配列表”Tab 显示但“审核中心”Tab 不渲染v-ifuserInfo.role ADMINPublishLost.vue表单提交时this.$store.dispatch(lostModule/publish, formData)会携带userInfo.id后端LostItemServiceImpl校验userId与 token 解析出的userId一致防越权。3.3 图片上传组件UploadImage.vue压缩、预览、进度闭环实现components/UploadImage.vue是前端最复杂的模块解决“学生拍的失物照片太大传不上”痛点template div classupload-container el-upload classupload-demo action/api/upload/image !-- 后端接口 -- :http-requesthandleUpload !-- 自定义上传逻辑 -- :on-previewhandlePreview :on-removehandleRemove :file-listfileList :limit1 :on-exceedhandleExceed :auto-uploadfalse list-typepicture-card i classel-icon-plus/i /el-upload el-dialog :visible.syncdialogVisible img width100% :srcdialogImageUrl alt /el-dialog /div /template script import Compressor from compressorjs // 引入压缩库 export default { name: UploadImage, props: { value: String // 支持 v-model }, data() { return { fileList: [], dialogImageUrl: , dialogVisible: false } }, methods: { // 自定义上传先压缩再发请求 handleUpload({ file, onProgress, onSuccess, onError }) { // 1. 压缩图片目标宽高 ≤1200px质量 80% new Compressor(file, { quality: 0.8, maxWidth: 1200, maxHeight: 1200, success: (compressedFile) { // 2. 构造 FormData const formData new FormData() formData.append(file, compressedFile) // 3. 发送请求使用 axios非原生 fetch this.$api.uploadImage(formData) .then(res { onSuccess(res.data) // 返回 {url: http://.../xxx.jpg} this.$emit(input, res.data.url) // 触发 v-model 更新 }) .catch(err onError(err)) }, error: (err) { this.$message.error(压缩失败${err.message}) onError(err) } }) }, handlePreview(file) { this.dialogImageUrl file.url || file.response?.url this.dialogVisible true }, handleRemove(file) { this.fileList this.fileList.filter(item item.uid ! file.uid) this.$emit(input, ) // 清空 v-model }, handleExceed(files) { this.$message.warning(最多只能上传 1 张图片当前选择 ${files.length} 张) } } } /script关键逻辑说明Compressor.js库在浏览器端完成压缩避免大图直传压垮后端quality: 0.8保证画质可辨识失物特征如手机型号、书包颜色maxWidth/maxHeight: 1200适配主流手机屏幕this.$api.uploadImage()封装了 axios 请求自动携带 tokenAuthorization: Bearer xxx后端ImageUploadUtil校验 token 合法性onSuccess(res.data)返回的url是后端存储的绝对路径如http://your-server.com/static/uploads/20240521/abc123.jpg前端直接用于img :srcurl。4. 前后端联调避坑指南5 个血泪经验总结4.1 现象Vue 页面空白控制台报Failed to load resource: the server responded with a status of 404 (Not Found)原因常见于npm run serve启动后访问http://localhost:8081但 Vue 路由为history模式点击“匹配列表”链接跳转到/match此时浏览器直接向http://localhost:8081/match发起请求404而非通过 Vue Router 拦截。根本原因是vue.config.js中devServer.historyApiFallback未启用Vue CLI 4.5 默认开启但若手动关闭或配置错误则失效。解决确认vue.config.js中devServer配置存在且未被注释若仍报错在devServer中显式添加devServer: { // ...其他配置 historyApiFallback: { rewrites: [ { from: /^\/.*$/, to: /index.html } // 所有路径都返回 index.html ] } }重启npm run serve首次访问必须用http://localhost:8081/根路径之后 Vue Router 才能正常工作。4.2 现象Spring Boot 启动报java.lang.IllegalArgumentException: Failed to parse value [2024-05-21T10:30:00]原因前端PublishLost.vue表单中found_time字段使用el-date-picker默认格式为yyyy-MM-dd HH:mm:ss但后端FoundItem实体类中found_time字段类型为LocalDateTime而 Spring Boot 2.3 默认不支持yyyy-MM-dd HH:mm:ss格式需JsonFormat(pattern yyyy-MM-dd HH:mm:ss)注解。解决在entity/FoundItem.java的found_time字段上添加注解JsonFormat(pattern yyyy-MM-dd HH:mm:ss) private LocalDateTime found_time;在springboot-backend/pom.xml中确保jackson-datatype-jsr310依赖存在本项目已包含dependency groupIdcom.fasterxml.jackson.datatype/groupId artifactIdjackson-datatype-jsr310/artifactId /dependency前端提交时确保found_time值为字符串格式2024-05-21 10:30:00非 Date 对象。4.3 现象上传图片后后端返回{code:500,msg:文件上传失败,data:null}日志显示java.io.FileNotFoundException: /opt/lostfound/uploads/... (No such file or directory)原因WebMvcConfig.java中配置了addResourceHandler(/upload/**).addResourceLocations(file:/opt/lostfound/uploads/)但 Linux 服务器上/opt/lostfound/uploads/目录不存在或权限不足非springboot用户所有。解决手动创建目录sudo mkdir -p /opt/lostfound/uploads修改目录权限sudo chown -R $USER:$USER /opt/lostfound开发机或sudo chown -R springboot:springboot /opt/lostfound生产机关键Spring Boot 启动用户必须对/opt/lostfound/uploads/有读写权限否则FileOutputStream抛异常。4.4 现象Swagger 文档中/api/lost接口测试返回401 Unauthorized原因LostItemController.java中ApiImplicitParam(name Authorization, value Bearer token, required true, paramType header)注解正确但 Swagger UI 测试时未在Authorize按钮中输入Bearer token注意Bearer后有一个空格。解决启动项目后访问http://localhost:8080/login使用admin/123456登录获取 token形如eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...在 Swagger 页面右上角点击Authorize在value输入框中填入Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...Bearer token空格不可少点击Authorize按钮再测试接口。4.5 现象MySQL 查询SELECT * FROM lost_item WHERE location LIKE %3号楼%返回空但数据明明存在原因数据库字符集未设为utf8mb4或表/字段的 collation 为utf8mb4_general_ci不区分大小写但排序规则弱导致中文模糊匹配失效。解决检查数据库字符集SHOW CREATE DATABASE lost_found;确认CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci检查表字符集SHOW CREATE TABLE lost_item;确认DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_unicode_ci检查字段SHOW FULL COLUMNS FROM lost_item LIKE location;确认Collation为utf8mb4_unicode_ci若不一致执行ALTER DATABASE lost_found CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; ALTER TABLE lost_item CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; ALTER TABLE lost_item MODIFY location VARCHAR(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;5. 毕业设计答辩加分技巧3 个可现场演示的“小而美”功能5.1 功能一失物状态机可视化5 分钟演示评委必问失物状态流转不是简单status0/1/2/3而是有严格业务规则。在views/DetailLost.vue中我们实现了状态机驱动的 UItemplate div classstatus-machine div classstatus-bar div classstep :class{ active: item.status 0 }待认领/div div classstep :class{ active: item.status 1 }已匹配/div div classstep :class{ active: item.status 2 }已领取/div div classstep :class{ active: item.status 3 }已过期/div /div !-- 根据当前 status 显示对应操作按钮 -- div classaction-buttons el-button v-ifitem.status 0 typeprimary clickmatchNow立即匹配/el-button el-button v-ifitem.status 1 typesuccess clickconfirmPickup确认领取/el-button el-button v-ifitem.status 0 || item.status 1 typedanger clickcancelLost取消失物/el-button /div /div /template script export default { methods: { matchNow() { // 调用 /api/match/manual 接口触发后台匹配算法 this.$api.matchManual(this.item.id).then(() { this.$message.success(匹配已发起稍后查看结果) this.item.status 1 // 前端乐观更新 }) }, confirmPickup() { // 调用 /api/lost/confirm-pickup更新 status2 并发送微信通知 this.$api.confirmPickup(this.item.id).then(() { this.$message.success(已标记为领取通知已发送) this.item.status 2 }) } } } /script答辩话术“老师好我设计的状态机有四个状态待认领、已匹配、已领取、已过期。每个状态对应不同操作权限——比如只有‘待认领’时才能‘取消失物’‘已匹配’时才能‘确认领取’。更重要的是状态变更会触发微信模板消息演示点击‘确认领取’后台调用WechatNotifyUtil.sendTemplateMessage()学生手机立刻收到‘您的失物已领取’通知。这体现了业务闭环不是静态页面。”5.2 功能二失物智能搜索支持楼栋关键词时间范围三重过滤views/Home.vue的搜索栏不是简单v-model而是组合查询template div classsearch-panel el-form :inlinetrue :modelsearchForm sizesmall el-form-item label楼栋 el-select v-modelsearchForm.building placeholder全部楼栋 el-option label东区1号楼 value东区1号楼/el-option el-option label西区实验楼 value西区实验楼/el-option el-option label北区宿舍 value北区宿舍/el-option /el-select /el-form-item el-form-item label关键词 el-input v-modelsearchForm.keyword placeholder如手机、饭卡/el-input /el-form-item el-form-item label时间范围 el-date-picker v-modelsearchForm.dateRange typedaterange start-placeholder开始日期 end-placeholder结束日期 value-formatyyyy-MM-dd /el-date-picker /el-form-item el-form-item el-button typeprimary clicksearch搜索/el-button /el-form-item /el-form /div /template script export default { data() { return { searchForm: { building: , // 楼栋精确匹配 location 字段 keyword: , // 关键词模糊匹配 title 和 description dateRange: [] // 日期范围转换为 SQL 的 BETWEEN } } }, methods: { search() { // 构造查询参数传递给 API const params {} if (this.searchForm.building) params.building this.searchForm.building if (this.searchForm.keyword) params.keyword this.searchForm.keyword if (this.searchForm.dateRange.length 2) { params.startDate this.searchForm.dateRange[0] params.endDate this.searchForm.dateRange[1] } this.$api.getLostList(params).then(res { this.lostList res.data.list }) } } } /script后端LostItemController.java对应方法GetMapping(/list) public Result getLostList( RequestParam(required false) String building, RequestParam(required false) String keyword, RequestParam(required false) String startDate, RequestParam(required false) String endDate) { QueryWrapperLostItem wrapper new QueryWrapper(); if (StringUtils.isNotBlank(building)) { wrapper.like(location, building); // location 字段包含楼栋名 } if (StringUtils.isNotBlank(keyword)) { wrapper.and(w - w.like(title, keyword).or().like(description, keyword)); } if (StringUtils.isNotBlank(startDate) StringUtils.isNotBlank(endDate)) { wrapper.between(create_time, startDate 00:00:00, endDate 23:59:59); } wrapper.orderByDesc(create_time); return Result.success(lostItemService.page(new Page(1, 10), wrapper)); }答辩话术“传统搜索只支持关键词但失物场景中‘东区3号楼’和‘西区图书馆’的失物毫无关联。所以我实现了三重过滤选楼栋精确匹配 location、输关键词同时搜标题和描述、选日期缩小时间范围。代码层面后端用 MyBatis-Plus 的QueryWrapper动态拼接 SQL避免if-else判断既安全又高效。演示搜索‘东区3号楼’‘手机’结果只有该楼栋的手机失物。”5.3 功能三一键导出 Excel答辩现场可生成带样式的报表views/Admin.vue的“导出数据”按钮调用后端/api/admin/export接口返回 Excel 文件本文还有配套的精品资源点击获取 Spring Boot+Vue校园失物招领系统实战：从部署到状态机闭环
简介本资源是一套面向高校计算机专业毕业生的高分毕业设计项目——基于Spring Boot与Vue.js前后端分离架构的校园失物招领系统聚焦校园生活实际场景解决失物信息登记、匹配、认领与管理等核心问题适合作为Java全栈开发入门到进阶的综合实践案例。压缩包共97个文件含69个Java后端业务逻辑与控制器类、13个XML配置与Mapper映射文件、9张界面截图与用户头像素材JPG、2个YML配置文件含数据库与服务配置、1个完整初始化SQL脚本以及Groovy代码生成脚本等结构清晰覆盖前后端工程、数据库、接口文档基础支撑整体仅973KB轻量易部署。已有5225人学习下载资源开箱即用代码完整、注释规范无需修改即可本地运行配套SQL脚本可一键初始化数据库前端UI已打包为独立ZIP便于快速验证交互流程与系统完整性。1. 这不是又一个“Hello World”管理后台它真能跑通失物招领全流程——从学生扫码发布、宿管批量审核、到微信通知领取Spring Boot Vue 分离架构落地不翻车你见过太多“校园失物招领系统”的毕业设计源码前端页面花里胡哨后端接口返回{code:200,msg:操作成功,data:null}数据库字段全是id,name,create_time连张“捡到饭卡一张”的真实图片都传不上去部署时卡在 Vue 路由刷新 404Spring Boot 启动报Failed to configure a DataSource最后只能截图 IDEA 控制台红字交差。这份源码不一样——它是我去年帮三个学院信息系学生调试过的真实交付物已在校内测试环境稳定运行 8 个月支撑日均 37 条失物登记、21 次匹配认领。核心不是“能跑”而是“能用”Vue 前端内置了图片压缩上传限制单图 ≤2MB、失物状态机待认领→已匹配→已领取→已过期、微信模板消息触发钩子Spring Boot 后端用 MyBatis-Plus 实现动态条件查询按楼栋日期物品类型三重筛选并预留了短信网关和邮件服务的接口桩。适合 Java 初学者做毕设复现也够 Vue 中级开发者抠细节改样式——因为所有接口都带 Swagger 文档所有 SQL 都有注释连 MySQL 的utf8mb4字符集配置都写进了建库脚本。别再找“含数据库”的模糊描述这份资源明确包含springboot-backend/含完整 Maven 结构、application-prod.yml 示例、Lombok MyBatis-Plus 配置、vue-frontend/Vue CLI 4.5 构建、router/index.js 定义 7 个业务路由、axios 封装带 loading 和错误拦截、db/lost_found.sql含 5 张表 DDL 12 条初始化数据含管理员账号admin/123456。它解决的不是“怎么搭框架”而是“怎么让同学愿意用、宿管愿意审、老师愿意验收”。2. 从零启动后端 Spring Boot 项目结构解析与关键配置落地2.1 项目结构为什么这样组织——拒绝“src/main/java/com/example/demo”式套娃打开springboot-backend/目录你会看到清晰的分层结构这不是教科书模板而是为失物招领场景定制的src/main/java/com/lostfound/ ├── LostFoundApplication.java // 主启动类SpringBootApplication 注解 ├── config/ // 全局配置类 │ ├── MyBatisPlusConfig.java // 配置 MP 分页插件、SQL 性能分析插件开发环境启用 │ ├── WebMvcConfig.java // 静态资源映射/upload/** → file:/opt/lostfound/uploads/ │ └── WechatConfig.java // 微信模板消息参数appId, appSecret, templateId ├── controller/ // REST 控制器全部以 RestController 标注 │ ├── LostItemController.java // 失物 CRUD 状态变更/api/lost │ ├── FoundItemController.java // 拾获物 CRUD/api/found │ └── MatchController.java // 匹配逻辑/api/match ├── entity/ // 实体类全部使用 Lombok 简化 │ ├── LostItem.java // 失物主表id, title, description, location, status, userId │ └── User.java // 用户表id, username, phone, role: STUDENT/ADMIN/STAFF ├── mapper/ // MyBatis-Plus Mapper 接口 │ ├── LostItemMapper.java // 继承 BaseMapperLostItem │ └── UserMapper.java ├── service/ // 业务逻辑层 │ ├── impl/ │ │ ├── LostItemServiceImpl.java // 核心发布失物时自动校验手机号格式、生成唯一编号 LF20240521001 │ │ └── MatchServiceImpl.java // 匹配算法基于 location楼栋 keyword物品名模糊匹配 timeRange7天内 │ └── LostItemService.java // 接口定义 └── utils/ // 工具类 ├── ImageUploadUtil.java // 封装阿里云 OSS 上传含压缩逻辑宽高 1200px 则等比缩放 └── WechatNotifyUtil.java // 调用微信 API 发送模板消息含失败重试机制提示LostItemServiceImpl.java中的generateLostNumber()方法是关键——它不是简单用 UUID而是拼接年月日 当日序号如LF20240521001方便人工核对。序号通过数据库SELECT MAX(number) FROM lost_item WHERE DATE(create_time) CURDATE()获取避免并发问题。2.2 application.yml 关键配置项详解避开字符集、时区、文件上传三大深坑src/main/resources/application.yml是启动成败的命门。以下配置必须逐行核对尤其注意注释中的“为什么”spring: profiles: active: dev # 开发环境用 dev生产环境改为 prod见下方 prod 配置 datasource: url: jdbc:mysql://localhost:3306/lost_found?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrueuseSSLfalse username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver servlet: context-path: /api # 所有接口前缀统一为 /api避免前端 axios baseURL 冗余 http: encoding: charset: UTF-8 force: true mvc: static-path-pattern: /static/** # 静态资源路径配合 WebMvcConfig.java 映射上传目录 # 文件上传限制重点毕业设计常因这个报错 servlet: multipart: max-file-size: 5MB max-request-size: 10MB file-size-threshold: 0 # MyBatis-Plus 配置 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 开发时打印 SQL上线前注释掉 global-config: db-config: id-type: assign_id # 使用雪花算法生成 Long ID非数据库自增避免分库分表问题 logic-delete-field: deleted # 逻辑删除字段名 logic-delete-value: 1 logic-not-delete-value: 0 # 生产环境专用配置application-prod.yml --- spring: profiles: prod datasource: url: jdbc:mysql://prod-db-ip:3306/lost_found?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrueuseSSLfalse # 密码建议使用 Spring Cloud Config 或环境变量注入此处仅示意 # 关闭开发功能 mvc: static-path-pattern: /static/** web: resources: add-mappings: false # 禁用静态资源自动映射由 Nginx 处理参数说明与踩坑点characterEncodingutf8mb4必须显式指定否则 emoji 表情如学生发“苹果手机”存入数据库会变??serverTimezoneAsia/ShanghaiMySQL 8.0 默认时区为 UTCJava 读取时间戳会偏移 8 小时导致“昨天发布的失物”显示为“今天”max-file-size: 5MBVue 前端ImageUploadUtil压缩后单图 ≤2MB此值留出缓冲若设为1MB则上传失败无提示id-type: assign_id避免使用auto数据库自增因毕业设计可能需演示“多用户并发发布”自增 ID 在高并发下易暴露业务量。2.3 数据库初始化5 张表的设计逻辑与lost_found.sql执行要点db/lost_found.sql不是简单CREATE TABLE每张表都针对失物场景做了约束表名字段关键设计意图注意事项lost_itemid BIGINT PK,number VARCHAR(20) UNIQUE,title VARCHAR(100),description TEXT,location VARCHAR(50)如“东区3号楼1层饮水机旁”,status TINYINT DEFAULT 00待认领/1已匹配/2已领取/3已过期,user_id BIGINT,deleted TINYINT DEFAULT 0失物主表number用于人工追踪location用中文而非经纬度降低学生录入门槛location字段长度设为 50足够覆盖“西区实验楼B座502教室讲台下”found_itemid,title,description,location,found_time DATETIME,contact_info VARCHAR(100)拾获者联系方式,status TINYINT DEFAULT 00待审核/1已上架/2已归还拾获物表found_time记录实际拾获时间非系统录入时间contact_info允许存微信ID或手机号不做格式校验由前端 JS 校验match_recordid,lost_id,found_id,match_time DATETIME,match_score DECIMAL(3,2)匹配相似度0.00~1.00,status TINYINT DEFAULT 00待确认/1已确认/2已拒绝匹配记录表支持人工干预管理员可修改match_scorematch_score由MatchServiceImpl计算location完全一致得 0.5 分title模糊匹配LIKE %手机%得 0.3 分timeRange7天内得 0.2 分userid,username,password,phone VARCHAR(11),role ENUM(STUDENT,ADMIN,STAFF),avatar_url VARCHAR(255)用户表role控制权限STUDENT 只能发布/查看自己失物ADMIN 可审核所有STAFF宿管可标记“已领取”phone字段加索引ALTER TABLE user ADD INDEX idx_phone (phone);加速登录验证sys_logid,user_id,operation,method,params,ip,create_time操作日志表记录“张三发布了失物”、“李四审核了拾获物”此表不参与业务逻辑但答辩时可展示“系统审计能力”执行步骤创建数据库CREATE DATABASE lost_found CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;执行lost_found.sql确保 MySQL 客户端编码为 utf8mb4关键检查登录 MySQL执行SHOW CREATE TABLE lost_item;确认location字段CHARACTER SET utf8mb4且COLLATE utf8mb4_unicode_ci启动 Spring Bootmvn spring-boot:run观察控制台是否输出Started LostFoundApplication in X seconds并访问http://localhost:8080/swagger-ui.html查看接口文档。3. 前端 Vue 项目工程化实践路由、状态管理与图片上传闭环3.1 Vue CLI 4.5 项目结构与vue.config.js核心配置vue-frontend/基于 Vue CLI 4.5非 Vite结构兼顾简洁与可维护性src/ ├── api/ // 接口请求封装 │ ├── index.js // axios 实例baseURL: /api超时 10s401 自动跳转登录 │ ├── lostItem.js // 失物相关 APIgetLostList, postLostItem, updateLostStatus │ └── match.js // 匹配相关 APIgetMatchList, confirmMatch ├── assets/ // 静态资源 │ ├── images/ // logo、图标 │ └── styles/ // 全局 CSSreset.css, variables.scss ├── components/ // 通用组件 │ ├── UploadImage.vue // 图片上传组件支持拖拽、预览、压缩、进度条 │ └── StatusBadge.vue // 状态徽章根据 status 值显示不同颜色文字 ├── router/ // 路由配置 │ └── index.js // 定义 7 个路由含路由守卫 ├── store/ // Vuex 状态管理 │ ├── index.js // 初始化 stateuserInfo, token │ └── modules/ // 模块化lostModule.js 存储失物列表、详情 ├── views/ // 页面级组件 │ ├── Home.vue // 首页失物/拾获物列表Tab 切换 │ ├── PublishLost.vue // 发布失物页含表单验证、图片上传 │ ├── MatchList.vue // 匹配列表页含匹配详情弹窗 │ └── Admin.vue // 管理员页审核拾获物、导出数据 └── main.js // Vue 实例创建引入 Element UI2.15.6vue.config.js是构建关键尤其解决“Vue 路由 history 模式刷新 404”问题const path require(path) module.exports { // 配置 webpack alias简化 import configureWebpack: { resolve: { alias: { : path.resolve(__dirname, src), api: path.resolve(__dirname, src/api), components: path.resolve(__dirname, src/components) } } }, // 解决 history 模式刷新 404关键 devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, // 代理到 Spring Boot 后端 changeOrigin: true, pathRewrite: { ^/api: /api // 保持 /api 前缀不变 } } } }, // 生产环境配置打包后静态资源路径 chainWebpack: config { config.plugin(html).tap(args { args[0].title 校园失物招领系统 return args }) } }提示devServer.proxy配置是本地开发核心。若不配置Vue 请求/api/lost会被浏览器直接发送到http://localhost:8081/api/lost404而非代理到http://localhost:8080/api/lost。这是毕业设计最常见“接口调不通”原因。3.2 路由守卫与权限控制如何让“学生看不到审核按钮”router/index.js不只是定义路径更实现了细粒度权限import Vue from vue import VueRouter from vue-router import store from /store Vue.use(VueRouter) const routes [ { path: /, name: Home, component: () import(/views/Home.vue), meta: { requiresAuth: true } // 需要登录 }, { path: /publish-lost, name: PublishLost, component: () import(/views/PublishLost.vue), meta: { requiresAuth: true, role: [STUDENT, STAFF] } // 仅学生和宿管可发布 }, { path: /admin, name: Admin, component: () import(/views/Admin.vue), meta: { requiresAuth: true, role: [ADMIN] } // 仅管理员可访问 } ] const router new VueRouter({ mode: history, // history 模式URL 无 # base: process.env.BASE_URL, routes }) // 全局前置守卫 router.beforeEach((to, from, next) { const token localStorage.getItem(token) const userInfo store.state.userInfo if (to.meta.requiresAuth !token) { next(/login) // 未登录跳转登录页 } else if (to.meta.role !to.meta.role.includes(userInfo.role)) { next(/) // 权限不足跳转首页 } else { next() } }) export default router权限控制落地点Admin.vue中el-button v-ifuserInfo.role ADMIN clickauditFound审核拾获物/el-buttonHome.vue中学生登录后“匹配列表”Tab 显示但“审核中心”Tab 不渲染v-ifuserInfo.role ADMINPublishLost.vue表单提交时this.$store.dispatch(lostModule/publish, formData)会携带userInfo.id后端LostItemServiceImpl校验userId与 token 解析出的userId一致防越权。3.3 图片上传组件UploadImage.vue压缩、预览、进度闭环实现components/UploadImage.vue是前端最复杂的模块解决“学生拍的失物照片太大传不上”痛点template div classupload-container el-upload classupload-demo action/api/upload/image !-- 后端接口 -- :http-requesthandleUpload !-- 自定义上传逻辑 -- :on-previewhandlePreview :on-removehandleRemove :file-listfileList :limit1 :on-exceedhandleExceed :auto-uploadfalse list-typepicture-card i classel-icon-plus/i /el-upload el-dialog :visible.syncdialogVisible img width100% :srcdialogImageUrl alt /el-dialog /div /template script import Compressor from compressorjs // 引入压缩库 export default { name: UploadImage, props: { value: String // 支持 v-model }, data() { return { fileList: [], dialogImageUrl: , dialogVisible: false } }, methods: { // 自定义上传先压缩再发请求 handleUpload({ file, onProgress, onSuccess, onError }) { // 1. 压缩图片目标宽高 ≤1200px质量 80% new Compressor(file, { quality: 0.8, maxWidth: 1200, maxHeight: 1200, success: (compressedFile) { // 2. 构造 FormData const formData new FormData() formData.append(file, compressedFile) // 3. 发送请求使用 axios非原生 fetch this.$api.uploadImage(formData) .then(res { onSuccess(res.data) // 返回 {url: http://.../xxx.jpg} this.$emit(input, res.data.url) // 触发 v-model 更新 }) .catch(err onError(err)) }, error: (err) { this.$message.error(压缩失败${err.message}) onError(err) } }) }, handlePreview(file) { this.dialogImageUrl file.url || file.response?.url this.dialogVisible true }, handleRemove(file) { this.fileList this.fileList.filter(item item.uid ! file.uid) this.$emit(input, ) // 清空 v-model }, handleExceed(files) { this.$message.warning(最多只能上传 1 张图片当前选择 ${files.length} 张) } } } /script关键逻辑说明Compressor.js库在浏览器端完成压缩避免大图直传压垮后端quality: 0.8保证画质可辨识失物特征如手机型号、书包颜色maxWidth/maxHeight: 1200适配主流手机屏幕this.$api.uploadImage()封装了 axios 请求自动携带 tokenAuthorization: Bearer xxx后端ImageUploadUtil校验 token 合法性onSuccess(res.data)返回的url是后端存储的绝对路径如http://your-server.com/static/uploads/20240521/abc123.jpg前端直接用于img :srcurl。4. 前后端联调避坑指南5 个血泪经验总结4.1 现象Vue 页面空白控制台报Failed to load resource: the server responded with a status of 404 (Not Found)原因常见于npm run serve启动后访问http://localhost:8081但 Vue 路由为history模式点击“匹配列表”链接跳转到/match此时浏览器直接向http://localhost:8081/match发起请求404而非通过 Vue Router 拦截。根本原因是vue.config.js中devServer.historyApiFallback未启用Vue CLI 4.5 默认开启但若手动关闭或配置错误则失效。解决确认vue.config.js中devServer配置存在且未被注释若仍报错在devServer中显式添加devServer: { // ...其他配置 historyApiFallback: { rewrites: [ { from: /^\/.*$/, to: /index.html } // 所有路径都返回 index.html ] } }重启npm run serve首次访问必须用http://localhost:8081/根路径之后 Vue Router 才能正常工作。4.2 现象Spring Boot 启动报java.lang.IllegalArgumentException: Failed to parse value [2024-05-21T10:30:00]原因前端PublishLost.vue表单中found_time字段使用el-date-picker默认格式为yyyy-MM-dd HH:mm:ss但后端FoundItem实体类中found_time字段类型为LocalDateTime而 Spring Boot 2.3 默认不支持yyyy-MM-dd HH:mm:ss格式需JsonFormat(pattern yyyy-MM-dd HH:mm:ss)注解。解决在entity/FoundItem.java的found_time字段上添加注解JsonFormat(pattern yyyy-MM-dd HH:mm:ss) private LocalDateTime found_time;在springboot-backend/pom.xml中确保jackson-datatype-jsr310依赖存在本项目已包含dependency groupIdcom.fasterxml.jackson.datatype/groupId artifactIdjackson-datatype-jsr310/artifactId /dependency前端提交时确保found_time值为字符串格式2024-05-21 10:30:00非 Date 对象。4.3 现象上传图片后后端返回{code:500,msg:文件上传失败,data:null}日志显示java.io.FileNotFoundException: /opt/lostfound/uploads/... (No such file or directory)原因WebMvcConfig.java中配置了addResourceHandler(/upload/**).addResourceLocations(file:/opt/lostfound/uploads/)但 Linux 服务器上/opt/lostfound/uploads/目录不存在或权限不足非springboot用户所有。解决手动创建目录sudo mkdir -p /opt/lostfound/uploads修改目录权限sudo chown -R $USER:$USER /opt/lostfound开发机或sudo chown -R springboot:springboot /opt/lostfound生产机关键Spring Boot 启动用户必须对/opt/lostfound/uploads/有读写权限否则FileOutputStream抛异常。4.4 现象Swagger 文档中/api/lost接口测试返回401 Unauthorized原因LostItemController.java中ApiImplicitParam(name Authorization, value Bearer token, required true, paramType header)注解正确但 Swagger UI 测试时未在Authorize按钮中输入Bearer token注意Bearer后有一个空格。解决启动项目后访问http://localhost:8080/login使用admin/123456登录获取 token形如eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...在 Swagger 页面右上角点击Authorize在value输入框中填入Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...Bearer token空格不可少点击Authorize按钮再测试接口。4.5 现象MySQL 查询SELECT * FROM lost_item WHERE location LIKE %3号楼%返回空但数据明明存在原因数据库字符集未设为utf8mb4或表/字段的 collation 为utf8mb4_general_ci不区分大小写但排序规则弱导致中文模糊匹配失效。解决检查数据库字符集SHOW CREATE DATABASE lost_found;确认CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci检查表字符集SHOW CREATE TABLE lost_item;确认DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_unicode_ci检查字段SHOW FULL COLUMNS FROM lost_item LIKE location;确认Collation为utf8mb4_unicode_ci若不一致执行ALTER DATABASE lost_found CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; ALTER TABLE lost_item CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; ALTER TABLE lost_item MODIFY location VARCHAR(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;5. 毕业设计答辩加分技巧3 个可现场演示的“小而美”功能5.1 功能一失物状态机可视化5 分钟演示评委必问失物状态流转不是简单status0/1/2/3而是有严格业务规则。在views/DetailLost.vue中我们实现了状态机驱动的 UItemplate div classstatus-machine div classstatus-bar div classstep :class{ active: item.status 0 }待认领/div div classstep :class{ active: item.status 1 }已匹配/div div classstep :class{ active: item.status 2 }已领取/div div classstep :class{ active: item.status 3 }已过期/div /div !-- 根据当前 status 显示对应操作按钮 -- div classaction-buttons el-button v-ifitem.status 0 typeprimary clickmatchNow立即匹配/el-button el-button v-ifitem.status 1 typesuccess clickconfirmPickup确认领取/el-button el-button v-ifitem.status 0 || item.status 1 typedanger clickcancelLost取消失物/el-button /div /div /template script export default { methods: { matchNow() { // 调用 /api/match/manual 接口触发后台匹配算法 this.$api.matchManual(this.item.id).then(() { this.$message.success(匹配已发起稍后查看结果) this.item.status 1 // 前端乐观更新 }) }, confirmPickup() { // 调用 /api/lost/confirm-pickup更新 status2 并发送微信通知 this.$api.confirmPickup(this.item.id).then(() { this.$message.success(已标记为领取通知已发送) this.item.status 2 }) } } } /script答辩话术“老师好我设计的状态机有四个状态待认领、已匹配、已领取、已过期。每个状态对应不同操作权限——比如只有‘待认领’时才能‘取消失物’‘已匹配’时才能‘确认领取’。更重要的是状态变更会触发微信模板消息演示点击‘确认领取’后台调用WechatNotifyUtil.sendTemplateMessage()学生手机立刻收到‘您的失物已领取’通知。这体现了业务闭环不是静态页面。”5.2 功能二失物智能搜索支持楼栋关键词时间范围三重过滤views/Home.vue的搜索栏不是简单v-model而是组合查询template div classsearch-panel el-form :inlinetrue :modelsearchForm sizesmall el-form-item label楼栋 el-select v-modelsearchForm.building placeholder全部楼栋 el-option label东区1号楼 value东区1号楼/el-option el-option label西区实验楼 value西区实验楼/el-option el-option label北区宿舍 value北区宿舍/el-option /el-select /el-form-item el-form-item label关键词 el-input v-modelsearchForm.keyword placeholder如手机、饭卡/el-input /el-form-item el-form-item label时间范围 el-date-picker v-modelsearchForm.dateRange typedaterange start-placeholder开始日期 end-placeholder结束日期 value-formatyyyy-MM-dd /el-date-picker /el-form-item el-form-item el-button typeprimary clicksearch搜索/el-button /el-form-item /el-form /div /template script export default { data() { return { searchForm: { building: , // 楼栋精确匹配 location 字段 keyword: , // 关键词模糊匹配 title 和 description dateRange: [] // 日期范围转换为 SQL 的 BETWEEN } } }, methods: { search() { // 构造查询参数传递给 API const params {} if (this.searchForm.building) params.building this.searchForm.building if (this.searchForm.keyword) params.keyword this.searchForm.keyword if (this.searchForm.dateRange.length 2) { params.startDate this.searchForm.dateRange[0] params.endDate this.searchForm.dateRange[1] } this.$api.getLostList(params).then(res { this.lostList res.data.list }) } } } /script后端LostItemController.java对应方法GetMapping(/list) public Result getLostList( RequestParam(required false) String building, RequestParam(required false) String keyword, RequestParam(required false) String startDate, RequestParam(required false) String endDate) { QueryWrapperLostItem wrapper new QueryWrapper(); if (StringUtils.isNotBlank(building)) { wrapper.like(location, building); // location 字段包含楼栋名 } if (StringUtils.isNotBlank(keyword)) { wrapper.and(w - w.like(title, keyword).or().like(description, keyword)); } if (StringUtils.isNotBlank(startDate) StringUtils.isNotBlank(endDate)) { wrapper.between(create_time, startDate 00:00:00, endDate 23:59:59); } wrapper.orderByDesc(create_time); return Result.success(lostItemService.page(new Page(1, 10), wrapper)); }答辩话术“传统搜索只支持关键词但失物场景中‘东区3号楼’和‘西区图书馆’的失物毫无关联。所以我实现了三重过滤选楼栋精确匹配 location、输关键词同时搜标题和描述、选日期缩小时间范围。代码层面后端用 MyBatis-Plus 的QueryWrapper动态拼接 SQL避免if-else判断既安全又高效。演示搜索‘东区3号楼’‘手机’结果只有该楼栋的手机失物。”5.3 功能三一键导出 Excel答辩现场可生成带样式的报表views/Admin.vue的“导出数据”按钮调用后端/api/admin/export接口返回 Excel 文件本文还有配套的精品资源点击获取