每年到这个时间点总有一批计算机相关专业的同学开始焦虑两件事一是毕业设计题目怎么定二是定了题目之后系统到底怎么做。我平时接触了不少这类咨询发现“基于SpringBootVue的大学生租房平台管理系统”是出镜率非常高的一个题。这题确实值得做——技术上覆盖了Java后端、关系型数据库、前端框架、前后端交互这些核心知识点业务上又贴近校园生活理解和演示都比较轻松。这篇文章我就结合自己做过的类似项目把整套系统的设计与实现拆开讲清楚。从前端页面到后端接口从数据库表设计到环境部署再到那些书本上不会写但你实际动手一定会踩的坑都会覆盖到。内容比较多建议先收藏再慢慢看。1. 大学生租房平台的整体设计与技术选型思路1.1 为什么选SpringBootVue这套组合先聊一个多数人纠结的问题技术栈到底怎么定。租房平台是个典型的Web信息管理系统核心是无非是房源信息的展示、搜索、预约、订单、评价这些业务并发量和数据量都不算大它考验的是CRUD的规范性、业务逻辑的完整度以及你对主流框架的掌握程度。SpringBoot Vue MySQL MyBatis这套组合恰好是当前Java后端开发中最常见、招聘市场上需求量最大的技术栈之一。SpringBoot帮你省掉了SSH时代那一大堆XML配置内嵌Tomcat让项目可以直接跑起来MyBatis的SQL控制粒度很细适合你在毕业设计里展示自己对SQL和数据库优化的理解Vue做前端SPA应用体验比传统JSP好得多而且Vue的教程和社区资料非常丰富遇到问题基本都能搜到答案。这套组合还有一个隐形优势评阅老师一看就知道你做的是一个规范的、紧跟主流技术的项目不会说你技术老旧。反过来如果你拿一个纯JSPServlet的项目哪怕功能全都做完了答辩时也容易被动。1.2 系统的业务定位与角色划分大学生租房平台关键词是“大学生”。这意味着业务和通用的租房网站比如贝壳、自如有区别房源应当集中在高校周边价格区间更贴近学生预算租客主体是学生房东可能同时也是学校附近的居民或二房东。因此在设计时我建议你不必追求大而全而是把精力放在“贴合大学生租房的场景细节”上。系统的用户角色我建议按下面三种来划分租客学生注册登录、浏览房源、按区域/价格/户型筛选、收藏房源、预约看房、提交订单、发表评价。房东注册登录、发布房源、管理房源上下架、查看预约申请、处理订单、回复评价。管理员用户管理、房源审核防止虚假房源、公告管理、数据统计、投诉处理。三个角色对应三套页面和操作权限。这也是项目里最有含金量的地方——权限设计如果做清楚了整套系统的骨架基本就立住了后面的代码不过是往下填肉而已。1.3 功能模块怎么拆才算完整我在设计这个项目时把功能拆成了前台和后台两个大模块。前台给租客和房东用后台给管理员用前后端通过RESTful接口通信。前台模块包括用户注册与登录、房源列表展示分页条件筛选、房源详情页看房轮播图、户型图、收藏房源、预约看房申请、订单管理、个人中心资料修改、密码修改、看房记录、公告列表浏览、评价与投诉。后台模块包括仪表盘统计面板房源总数、用户总数、订单总数、房源审核管理、用户管理禁用/启用、公告管理、订单管理、评价管理。这一块功能不复杂核心是把每个列表页面做规范加上分页和搜索就行。功能清单出来后不要急着写代码。先对着清单画用例图、ER图、原型草图哪怕手画都行。花半天时间把这一步做扎实了后面能少写一星期的垃圾代码。2. 数据库设计表结构、字段规范与核心SQL2.1 核心表结构与字段设计数据库是整系统的基础。我见过太多同学表都没设计好就上来写代码结果做到一半发现少张表、缺字段返回去改改到崩溃。租房平台我建议设计这些表user用户表id、username、password记得加密存储、phone、email、role区分租客/房东/管理员、avatar、status启用/禁用、create_timehouse房源表id、landlord_id关联房东、title房源标题、description描述、cover封面图URL、images多图建议用逗号分隔或JSON串、price月租金、area面积、bedroom_num几室、hall_num几厅、bathroom_num几卫、address、community小区名、location楼层/朝向、status待审核/已上架/已下架、view_count浏览量、create_timefavorite收藏表id、user_id、house_id、create_time加一个唯一索引uk_user_house防止重复收藏appointment看房预约表id、house_id、tenant_id、appointment_time、remark、status待确认/已确认/已取消/已完成order_table订单表id、order_no生成唯一订单号、house_id、tenant_id、landlord_id、duration租期月数、total_amount总金额、status待支付/已支付/已取消/已入住/已退租、create_timecomment评价表id、house_id、user_id、content、rating评分1~5、reply_content房东回复、create_timenotice公告表id、title、content、create_time2.2 订单号与金额字段的精度处理订单号我建议不要用自增ID直接展示给用户太容易被猜到业务量了。我写项目时用的是时间戳加随机数的方式yyyyMMddHHmmss 4位随机数。如果是生产环境这就有些不讲究了但做毕业设计重点是展示你对“全局唯一业务编号”的理解这个方法完全够用也方便演示。金额字段必须使用DECIMAL(10,2)别用FLOAT和DOUBLE——这个坑我踩过浮点数算钱的时候会有精度丢失比如9.9元在数据库里存成9.899999。单据、对账这种事分毫都不能差所以钱就是DECIMAL没商量。时间字段建议全部设成datetime类型在插入时利用MySQL的DEFAULT CURRENT_TIMESTAMP自动填充。这样做省事而且日志型字段比如create_time你根本不需要在Java层手动set值。2.3 核心SQL编写与索引建议MyBatis的定位是半自动ORMSQL写法完全由你把控。这是优势也是责任。列表页的“多条件筛选”看起来简单其实很能体现SQL功底。比如房源搜索条件可能有关键词标题/小区名、最低价、最高价、几室、朝向、排序默认最新/价格从低到高。这里我用动态SQL来处理where标签自动处理多余的AND写起来干净利落select idselectHouseList resultTypecom.rent.entity.House SELECT h.*, u.username AS landlord_name FROM house h LEFT JOIN user u ON h.landlord_id u.id where h.status 1 if testkeyword ! null and keyword ! AND (h.title LIKE CONCAT(%, #{keyword}, %) OR h.community LIKE CONCAT(%, #{keyword}, %)) /if if testminPrice ! null AND h.price gt; #{minPrice} /if if testmaxPrice ! null AND h.price lt; #{maxPrice} /if if testbedroomNum ! null AND h.bedroom_num #{bedroomNum} /if /where choose when testsortType price_asc ORDER BY h.price ASC /when otherwise ORDER BY h.create_time DESC /otherwise /choose /select这里是MyBatis动态SQL最典型的应用场景。需要注意、在XML中不能直接写要转义成lt;、gt;或者用![CDATA[ ]]包起来这一点写的时候忘了就直接报SQL语法错误排查得你怀疑人生。索引方面house表的主键ID是聚簇索引status和create_time建议加上二级索引因为列表页高频查询条件就是这两个字段。order_table的tenant_id和landlord_id加普通索引用于“我的订单”查询。别加太多索引虽好多了一个影响写入性能还占磁盘每个表三五个就够了。3. 后端实现SpringBoot与MyBatis的关键细节3.1 项目初始化与依赖版本搭配创建SpringBoot项目这里IDEA里选Spring Initializr就行。有一个广泛存在的问题是SpringBoot版本太高——很多同学默认选了最新的正式版结果发现依赖冲突、版本不兼容之类问题一大堆其实没什么必要。我的建议是选2.7.x或3.0.x这类稳定版本配合对应版本的MyBatis Starter即可。我常用的依赖配置参考dependencies !-- SpringBoot Web -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis Starter -- dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.2/version /dependency !-- MySQL驱动 -- dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency !-- Lombok减少getter/setter模板代码 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies这里给一个小建议不管用什么笔写代码都建议引入Lombok。实体类的Data注解一下就行省出来的时间干点什么都好。3.2 配置文件与MyBatis集成SpringBoot的核心配置都在application.yml里。数据源、MyBatis映射路径、日志打印、端口号这些都是在这里配置。下面是我常用的配置模板直接照着改就行server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/rent_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你自己的密码 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.rent.entity configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl这里有两个细节要特别提第一个是map-underscore-to-camel-case: true。数据库字段都是下划线风格create_timeJava实体类都是驼峰风格createTime开启这个配置后MyBatis自动帮你做映射不然你得挨个写resultMap代码量大一倍且毫无意义。第二个是log-impl配成StdOutImpl。开发阶段把SQL打印到控制台你能清清楚楚看到MyBatis帮你拼出来的SQL长什么样排查问题会顺利非常多。3.3 登录鉴权与密码安全系统有登录注册就一定绕不开会话管理和密码存储两个问题。密码存储别用明文别用MD5。MD5已经是上古时代的加密方式了彩虹表一查就破。最基础的做法是加盐哈希我习惯用Spring Security里自带的BCryptPasswordEncoder哪怕你不引入完整Spring Security也可以单独把这个类拿出来用。注册时把明文密码加密成哈希值存进数据库登录时matches()校验这个思路对毕业设计来说足够规范和亮眼。登录状态管理常见的有两种方案Session和JWT。我建议用JWT。理由很简单整套系统是前后端分离架构后端和前端不同端口Session天然跨域麻烦而JWT是无状态的前端把Token存到localStorage里每次请求带上Authorization头即可。实现也不复杂登录成功后用jjwt库签发一个Tokenpayload里带上用户ID和角色写一个拦截器校验Token并解析出当前用户信息放到ThreadLocal或者直接拼进请求参数里。下面写一个简单的JWT工具类核心方法public class JwtUtil { private static final String SECRET_KEY 你的项目自定义密钥; public static String generateToken(Integer userId, String role) { return Jwts.builder() .claim(userId, userId) .claim(role, role) .setExpiration(new Date(System.currentTimeMillis() 1000 * 60 * 60 * 24)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); } public static Claims parseToken(String token) { return Jwts.parser() .setSigningKey(SECRET_KEY) .parseClaimsJws(token) .getBody(); } }当然JWT也有需要注意的地方密钥别写死在前端代码里过期时间别设太长一天即可一旦签发在过期前无法主动撤销所以做退出登录时前端直接删Token即可。这些都是答辩时能讲出来的点提前记好。3.4 接口设计规范与统一返回体接口负责前后端沟通格式不统一会非常痛苦。我强烈建议一开始就定一个统一的返回体比如{ code: 200, message: 操作成功, data: { } }后端封装一个ResultT类所有接口都返回这个结构。前端在Axios响应拦截器里统一处理code如果是200就取data否则弹错误信息。这样写的好处是接口层不需要关心前端怎么展示前端的错误处理逻辑也集中在一个地方不重复。接口路径的设计也要有规律比如POST /api/user/register注册POST /api/user/login登录GET /api/house/list房源分页搜索GET /api/house/{id}房源详情POST /api/appointment提交预约GET /api/order/my我的订单GET /api/admin/stats后台统计全部使用/api前缀通过Controller的RequestMapping按模块区分目录结构也非常清晰——controller、service、mapper、entity、config、util、common一个标准的分层结构一眼看去就是受过训练的工程化写法。4. 前端实现Vue项目的搭建与核心页面4.1 环境准备与项目初始化前端开发的第一步是装Node.js。很多同学用个旧版本一路装到最后才发现问题我这里直接说建议Node.js装LTS版本比如18.x或20.xnpm随Node自带。装完在命令行验证node -v npm -v然后基于Vue CLI或Vite创建项目。对于这个脚手架级别的项目我建议直接用Vite启动快、配置少而且Vite是当前官方推荐的构建工具。执行npm create vuelatest # 或者 npm create vitelatest rent-web -- --template vue项目创建后会问你需不需要Vue Router、Pinia这些插件。直接用Yes省得后面手动加。接着安装项目需要的核心依赖cd rent-web npm install npm install axios element-plusElement Plus是目前Vue3生态里最成熟好用的UI组件库表格、表单、弹窗、分页这些组件开箱即用非常适合快速搭建后台管理系统和C端展示页。用Vue2的选Element UI用Vue3的一定要选element-plus别搞混了。装依赖的时候给新手提个醒如果npm install特别慢大概率是没配国内镜像源。配一下淘宝镜像速度立竿见影npm config set registry https://registry.npmmirror.com4.2 前端目录结构与路由设计前端的项目结构是决定代码可维护性的关键。我的习惯是这样组织src/ api/ # 接口请求封装按模块分文件 assets/ # 静态资源 components/ # 公共组件轮播图、搜索栏、房源卡片等 router/ # 路由配置 store/ # 全局状态管理当前用户信息等 views/ # 页面组件 front/ # 前台页面首页、房源列表、房源详情、预约页、个人中心 admin/ # 后台页面仪表盘、用户管理、房源审核、公告管理 App.vue main.js路由配置里最核心的是路由守卫。前端页面不能光靠“不显示入口”来控制权限要在路由层面做拦截没有Token就不能进需要登录的页面角色不是admin就不能访问后台页面。实现代码如下router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else if (to.meta.role admin localStorage.getItem(role) ! admin) { next(/) } else { next() } })4.3 Axios封装与跨域问题前后端联调第一个遇到的问题必然是CORS跨域。前端跑在5173端口后端跑在8080端口浏览器默认会拦截这种跨端口请求。解决跨域有两个常见方案我建议两边同时做后端方案在SpringBoot写一个CORS配置类允许所有来源、方法和请求头放开拦截Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }前端方案在Vite的vite.config.js里配置代理让前端请求/api时自动转发到http://localhost:8080export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })这样前端代码里请求路径写/api/house/list就行浏览器看到的是同源请求就不会触发CORS了。Axios请求封装这块也要做。统一设置baseURL、请求超时时间、请求拦截器加Token、响应拦截器统一处理错误码import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.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 { ElMessage.error(网络请求异常请稍后再试) return Promise.reject(error) } ) export default request4.4 前台核心页面实现要点首页。我建议包含顶部导航栏、搜索区域、推荐房源列表调用后端接口按浏览数TOP N、最新公告模块。页面组件拆分成NavBar.vue、SearchBar.vue、HouseCard.vue这样列表页和首页可以复用HouseCard组件。房源列表页。核心是左侧筛选栏加右侧房源卡片网格。筛选条件包括区域选择下拉框、租金区间两个输入框、户型选择按钮组、排序方式下拉框。每次筛选条件变就重新发请求拿到新数据刷新列表。这里集成分页组件Element Plus的el-pagination把当前页和总记录数和后端返回的数据对接好就行。房源详情页。展示房源大图轮播el-carousel、基本信息列表、房东信息卡片、右侧的预约按钮和收藏按钮。详情页顶部要有个面包屑导航底部是户型描述和房屋配置等长文本。登录注册页。登录和注册做成一个页面切换的两个表单。注册时区分“我是租客/我是房东”决定role字段的值。登录成功后把Token、用户ID、用户名、角色都存进localStorage并跳转到用户原打算访问的页面。5. 前后端联调测试与打包部署5.1 接口联调的完整流程前后端分离项目联调是绕不开的环节。一定要等后端接口写完再联调效率太低了我的经验是后端写完一个模块联调一个模块。比如房源模块先把房源列表、详情、搜索三个接口做好前端马上对接这三个接口没问题再继续写收藏和预约功能。联调时最常用的工具是SwaggerSpringDoc或springfox。引入依赖后访问http://localhost:8080/swagger-ui.html就能看到所有接口的列表、参数说明、返回值结构前端照着文档调接口效率比互相问高很多。还有一个很实在的建议接口返回的数据结构和前端页面要展示的字段之间在设计时就要对齐。后端返回createTime前端展示用createTime不要在后端返回create_time前端再手动转驼峰多一层转换就多一层出错的概率。5.2 Maven打包与前端构建后端项目在IDEA右侧Maven面板双击package生成jar包后直接丢到服务器上运行mvn clean package -DskipTests java -jar rent-backend-0.0.1-SNAPSHOT.jar前端项目需要构建生产包npm run build构建完成后生成dist目录里面是纯静态文件可以独立部署到Nginx。如果你不想部署两个服务前端静态服务后端Java服务可以做一个很取巧的方案前端构建后的dist目录直接丢进SpringBoot的src/main/resources/static目录下重新打包SpringBoot会自动把里面的index.html作为静态首页。这样一个jar包搞定全部部署起来极其轻便。虽然生产环境不推荐这么做前端静态资源和后端应用混在一起不方便独立扩容但作为毕业设计演示确实非常方便。5.3 演示环境的种子数据准备系统开发完成后要为演示准备种子数据。没有数据的空系统界面看起来就像个半成品评阅老师的印象分会大打折扣。我建议至少准备用户一个管理员账号admin、两个房东账号、三五个租客账号房源八到十二套房源覆盖不同的租金段比如800-2500元、不同户型单间、一室一厅、两室一厅、不同区域大学城南门、东门、地铁站附近图片网上找一些免费可商用的室内实拍图或者是AI生成的室内效果图统一尺寸订单/评价两三笔已完成的历史订单和对应的评价记录让数据看起来是“用过的”准备种子数据有两条路写一个data.sql文件配置Spring的sql.init.mode自动加载或者写一个DataInitializer类在项目启动时通过Service层插入。如果数据关联复杂房源关联房东ID、订单关联房源和租客后者更可靠因为可以在Java代码里通过已有数据的ID来动态建立关联。6. 常见问题与踩坑实录6.1 数据库连接与字符集问题现象项目启动报Unknown character set: utf8mb4或者插入中文数据变成???。原因MySQL 5.5及更低版本不支持utf8mb4字符集或者数据库连接URL里没有指定characterEncodingutf8。还有一个常见场景MySQL 8要求驱动类名是com.mysql.cj.jdbc.DriverMySQL 5.x是com.mysql.jdbc.Driver混用就会报错。处理连接URL统一加上?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai建库时指定字符集CREATE DATABASE rent_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;6.2 MyBatis中数字与字符串的比较现象写SQL时字段类型是VARCHAR比如status存的是0、1参数传的是Integer1直接比较判断不出结果。原因MySQL中对字符串和数字比较会做隐式转换但转换规则不一定符合预期更常见的是在MyBatis动态SQL中if teststatus 1比较的是Java层面的Integer和Integer没问题但SQL写成WHERE status #{status}时status在数据库里是字符型参数如果是数字1MySQL会尝试把VARCHAR列转成数字再比一旦字段有非数字内容查询就会出诡异问题。处理最稳的做法是数据库设计时就统一数据类型——状态码属于“枚举值”用TINYINT或CHAR(1)都行但要保持一致接口层参数类型和实体类属性类型也要统一别一会儿传数字一会儿传字符串。如果实在没法改表在SQL里显式转换WHERE status CAST(#{status} AS CHAR)。6.3 前端页面加载慢与白屏现象启动前端项目后访问页面白屏控制台报错或者打包后首页加载特别慢白屏好几秒。原因白屏大概率是路由模式问题——Vue Router用了history模式但静态服务器没有配置try_files回退到index.html刷新子路由时就404白屏。加载慢是构建产物过大element-plus全量引入加上大图片首次加载JS包有好几MB。处理开发环境用默认的路由模式就行如果用了createWebHistory在测试环境的Nginx里加上这条配置location / { try_files $uri $uri/ /index.html; }构建优化方面Element Plus按需引入、路由懒加载、图片放到图床或压缩后再引入这些手段都能大幅减少首屏时间。
SpringBoot+Vue大学生租房平台：从设计到部署的完整实现指南
每年到这个时间点总有一批计算机相关专业的同学开始焦虑两件事一是毕业设计题目怎么定二是定了题目之后系统到底怎么做。我平时接触了不少这类咨询发现“基于SpringBootVue的大学生租房平台管理系统”是出镜率非常高的一个题。这题确实值得做——技术上覆盖了Java后端、关系型数据库、前端框架、前后端交互这些核心知识点业务上又贴近校园生活理解和演示都比较轻松。这篇文章我就结合自己做过的类似项目把整套系统的设计与实现拆开讲清楚。从前端页面到后端接口从数据库表设计到环境部署再到那些书本上不会写但你实际动手一定会踩的坑都会覆盖到。内容比较多建议先收藏再慢慢看。1. 大学生租房平台的整体设计与技术选型思路1.1 为什么选SpringBootVue这套组合先聊一个多数人纠结的问题技术栈到底怎么定。租房平台是个典型的Web信息管理系统核心是无非是房源信息的展示、搜索、预约、订单、评价这些业务并发量和数据量都不算大它考验的是CRUD的规范性、业务逻辑的完整度以及你对主流框架的掌握程度。SpringBoot Vue MySQL MyBatis这套组合恰好是当前Java后端开发中最常见、招聘市场上需求量最大的技术栈之一。SpringBoot帮你省掉了SSH时代那一大堆XML配置内嵌Tomcat让项目可以直接跑起来MyBatis的SQL控制粒度很细适合你在毕业设计里展示自己对SQL和数据库优化的理解Vue做前端SPA应用体验比传统JSP好得多而且Vue的教程和社区资料非常丰富遇到问题基本都能搜到答案。这套组合还有一个隐形优势评阅老师一看就知道你做的是一个规范的、紧跟主流技术的项目不会说你技术老旧。反过来如果你拿一个纯JSPServlet的项目哪怕功能全都做完了答辩时也容易被动。1.2 系统的业务定位与角色划分大学生租房平台关键词是“大学生”。这意味着业务和通用的租房网站比如贝壳、自如有区别房源应当集中在高校周边价格区间更贴近学生预算租客主体是学生房东可能同时也是学校附近的居民或二房东。因此在设计时我建议你不必追求大而全而是把精力放在“贴合大学生租房的场景细节”上。系统的用户角色我建议按下面三种来划分租客学生注册登录、浏览房源、按区域/价格/户型筛选、收藏房源、预约看房、提交订单、发表评价。房东注册登录、发布房源、管理房源上下架、查看预约申请、处理订单、回复评价。管理员用户管理、房源审核防止虚假房源、公告管理、数据统计、投诉处理。三个角色对应三套页面和操作权限。这也是项目里最有含金量的地方——权限设计如果做清楚了整套系统的骨架基本就立住了后面的代码不过是往下填肉而已。1.3 功能模块怎么拆才算完整我在设计这个项目时把功能拆成了前台和后台两个大模块。前台给租客和房东用后台给管理员用前后端通过RESTful接口通信。前台模块包括用户注册与登录、房源列表展示分页条件筛选、房源详情页看房轮播图、户型图、收藏房源、预约看房申请、订单管理、个人中心资料修改、密码修改、看房记录、公告列表浏览、评价与投诉。后台模块包括仪表盘统计面板房源总数、用户总数、订单总数、房源审核管理、用户管理禁用/启用、公告管理、订单管理、评价管理。这一块功能不复杂核心是把每个列表页面做规范加上分页和搜索就行。功能清单出来后不要急着写代码。先对着清单画用例图、ER图、原型草图哪怕手画都行。花半天时间把这一步做扎实了后面能少写一星期的垃圾代码。2. 数据库设计表结构、字段规范与核心SQL2.1 核心表结构与字段设计数据库是整系统的基础。我见过太多同学表都没设计好就上来写代码结果做到一半发现少张表、缺字段返回去改改到崩溃。租房平台我建议设计这些表user用户表id、username、password记得加密存储、phone、email、role区分租客/房东/管理员、avatar、status启用/禁用、create_timehouse房源表id、landlord_id关联房东、title房源标题、description描述、cover封面图URL、images多图建议用逗号分隔或JSON串、price月租金、area面积、bedroom_num几室、hall_num几厅、bathroom_num几卫、address、community小区名、location楼层/朝向、status待审核/已上架/已下架、view_count浏览量、create_timefavorite收藏表id、user_id、house_id、create_time加一个唯一索引uk_user_house防止重复收藏appointment看房预约表id、house_id、tenant_id、appointment_time、remark、status待确认/已确认/已取消/已完成order_table订单表id、order_no生成唯一订单号、house_id、tenant_id、landlord_id、duration租期月数、total_amount总金额、status待支付/已支付/已取消/已入住/已退租、create_timecomment评价表id、house_id、user_id、content、rating评分1~5、reply_content房东回复、create_timenotice公告表id、title、content、create_time2.2 订单号与金额字段的精度处理订单号我建议不要用自增ID直接展示给用户太容易被猜到业务量了。我写项目时用的是时间戳加随机数的方式yyyyMMddHHmmss 4位随机数。如果是生产环境这就有些不讲究了但做毕业设计重点是展示你对“全局唯一业务编号”的理解这个方法完全够用也方便演示。金额字段必须使用DECIMAL(10,2)别用FLOAT和DOUBLE——这个坑我踩过浮点数算钱的时候会有精度丢失比如9.9元在数据库里存成9.899999。单据、对账这种事分毫都不能差所以钱就是DECIMAL没商量。时间字段建议全部设成datetime类型在插入时利用MySQL的DEFAULT CURRENT_TIMESTAMP自动填充。这样做省事而且日志型字段比如create_time你根本不需要在Java层手动set值。2.3 核心SQL编写与索引建议MyBatis的定位是半自动ORMSQL写法完全由你把控。这是优势也是责任。列表页的“多条件筛选”看起来简单其实很能体现SQL功底。比如房源搜索条件可能有关键词标题/小区名、最低价、最高价、几室、朝向、排序默认最新/价格从低到高。这里我用动态SQL来处理where标签自动处理多余的AND写起来干净利落select idselectHouseList resultTypecom.rent.entity.House SELECT h.*, u.username AS landlord_name FROM house h LEFT JOIN user u ON h.landlord_id u.id where h.status 1 if testkeyword ! null and keyword ! AND (h.title LIKE CONCAT(%, #{keyword}, %) OR h.community LIKE CONCAT(%, #{keyword}, %)) /if if testminPrice ! null AND h.price gt; #{minPrice} /if if testmaxPrice ! null AND h.price lt; #{maxPrice} /if if testbedroomNum ! null AND h.bedroom_num #{bedroomNum} /if /where choose when testsortType price_asc ORDER BY h.price ASC /when otherwise ORDER BY h.create_time DESC /otherwise /choose /select这里是MyBatis动态SQL最典型的应用场景。需要注意、在XML中不能直接写要转义成lt;、gt;或者用![CDATA[ ]]包起来这一点写的时候忘了就直接报SQL语法错误排查得你怀疑人生。索引方面house表的主键ID是聚簇索引status和create_time建议加上二级索引因为列表页高频查询条件就是这两个字段。order_table的tenant_id和landlord_id加普通索引用于“我的订单”查询。别加太多索引虽好多了一个影响写入性能还占磁盘每个表三五个就够了。3. 后端实现SpringBoot与MyBatis的关键细节3.1 项目初始化与依赖版本搭配创建SpringBoot项目这里IDEA里选Spring Initializr就行。有一个广泛存在的问题是SpringBoot版本太高——很多同学默认选了最新的正式版结果发现依赖冲突、版本不兼容之类问题一大堆其实没什么必要。我的建议是选2.7.x或3.0.x这类稳定版本配合对应版本的MyBatis Starter即可。我常用的依赖配置参考dependencies !-- SpringBoot Web -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis Starter -- dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.3.2/version /dependency !-- MySQL驱动 -- dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency !-- Lombok减少getter/setter模板代码 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies这里给一个小建议不管用什么笔写代码都建议引入Lombok。实体类的Data注解一下就行省出来的时间干点什么都好。3.2 配置文件与MyBatis集成SpringBoot的核心配置都在application.yml里。数据源、MyBatis映射路径、日志打印、端口号这些都是在这里配置。下面是我常用的配置模板直接照着改就行server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/rent_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你自己的密码 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.rent.entity configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl这里有两个细节要特别提第一个是map-underscore-to-camel-case: true。数据库字段都是下划线风格create_timeJava实体类都是驼峰风格createTime开启这个配置后MyBatis自动帮你做映射不然你得挨个写resultMap代码量大一倍且毫无意义。第二个是log-impl配成StdOutImpl。开发阶段把SQL打印到控制台你能清清楚楚看到MyBatis帮你拼出来的SQL长什么样排查问题会顺利非常多。3.3 登录鉴权与密码安全系统有登录注册就一定绕不开会话管理和密码存储两个问题。密码存储别用明文别用MD5。MD5已经是上古时代的加密方式了彩虹表一查就破。最基础的做法是加盐哈希我习惯用Spring Security里自带的BCryptPasswordEncoder哪怕你不引入完整Spring Security也可以单独把这个类拿出来用。注册时把明文密码加密成哈希值存进数据库登录时matches()校验这个思路对毕业设计来说足够规范和亮眼。登录状态管理常见的有两种方案Session和JWT。我建议用JWT。理由很简单整套系统是前后端分离架构后端和前端不同端口Session天然跨域麻烦而JWT是无状态的前端把Token存到localStorage里每次请求带上Authorization头即可。实现也不复杂登录成功后用jjwt库签发一个Tokenpayload里带上用户ID和角色写一个拦截器校验Token并解析出当前用户信息放到ThreadLocal或者直接拼进请求参数里。下面写一个简单的JWT工具类核心方法public class JwtUtil { private static final String SECRET_KEY 你的项目自定义密钥; public static String generateToken(Integer userId, String role) { return Jwts.builder() .claim(userId, userId) .claim(role, role) .setExpiration(new Date(System.currentTimeMillis() 1000 * 60 * 60 * 24)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); } public static Claims parseToken(String token) { return Jwts.parser() .setSigningKey(SECRET_KEY) .parseClaimsJws(token) .getBody(); } }当然JWT也有需要注意的地方密钥别写死在前端代码里过期时间别设太长一天即可一旦签发在过期前无法主动撤销所以做退出登录时前端直接删Token即可。这些都是答辩时能讲出来的点提前记好。3.4 接口设计规范与统一返回体接口负责前后端沟通格式不统一会非常痛苦。我强烈建议一开始就定一个统一的返回体比如{ code: 200, message: 操作成功, data: { } }后端封装一个ResultT类所有接口都返回这个结构。前端在Axios响应拦截器里统一处理code如果是200就取data否则弹错误信息。这样写的好处是接口层不需要关心前端怎么展示前端的错误处理逻辑也集中在一个地方不重复。接口路径的设计也要有规律比如POST /api/user/register注册POST /api/user/login登录GET /api/house/list房源分页搜索GET /api/house/{id}房源详情POST /api/appointment提交预约GET /api/order/my我的订单GET /api/admin/stats后台统计全部使用/api前缀通过Controller的RequestMapping按模块区分目录结构也非常清晰——controller、service、mapper、entity、config、util、common一个标准的分层结构一眼看去就是受过训练的工程化写法。4. 前端实现Vue项目的搭建与核心页面4.1 环境准备与项目初始化前端开发的第一步是装Node.js。很多同学用个旧版本一路装到最后才发现问题我这里直接说建议Node.js装LTS版本比如18.x或20.xnpm随Node自带。装完在命令行验证node -v npm -v然后基于Vue CLI或Vite创建项目。对于这个脚手架级别的项目我建议直接用Vite启动快、配置少而且Vite是当前官方推荐的构建工具。执行npm create vuelatest # 或者 npm create vitelatest rent-web -- --template vue项目创建后会问你需不需要Vue Router、Pinia这些插件。直接用Yes省得后面手动加。接着安装项目需要的核心依赖cd rent-web npm install npm install axios element-plusElement Plus是目前Vue3生态里最成熟好用的UI组件库表格、表单、弹窗、分页这些组件开箱即用非常适合快速搭建后台管理系统和C端展示页。用Vue2的选Element UI用Vue3的一定要选element-plus别搞混了。装依赖的时候给新手提个醒如果npm install特别慢大概率是没配国内镜像源。配一下淘宝镜像速度立竿见影npm config set registry https://registry.npmmirror.com4.2 前端目录结构与路由设计前端的项目结构是决定代码可维护性的关键。我的习惯是这样组织src/ api/ # 接口请求封装按模块分文件 assets/ # 静态资源 components/ # 公共组件轮播图、搜索栏、房源卡片等 router/ # 路由配置 store/ # 全局状态管理当前用户信息等 views/ # 页面组件 front/ # 前台页面首页、房源列表、房源详情、预约页、个人中心 admin/ # 后台页面仪表盘、用户管理、房源审核、公告管理 App.vue main.js路由配置里最核心的是路由守卫。前端页面不能光靠“不显示入口”来控制权限要在路由层面做拦截没有Token就不能进需要登录的页面角色不是admin就不能访问后台页面。实现代码如下router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else if (to.meta.role admin localStorage.getItem(role) ! admin) { next(/) } else { next() } })4.3 Axios封装与跨域问题前后端联调第一个遇到的问题必然是CORS跨域。前端跑在5173端口后端跑在8080端口浏览器默认会拦截这种跨端口请求。解决跨域有两个常见方案我建议两边同时做后端方案在SpringBoot写一个CORS配置类允许所有来源、方法和请求头放开拦截Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }前端方案在Vite的vite.config.js里配置代理让前端请求/api时自动转发到http://localhost:8080export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })这样前端代码里请求路径写/api/house/list就行浏览器看到的是同源请求就不会触发CORS了。Axios请求封装这块也要做。统一设置baseURL、请求超时时间、请求拦截器加Token、响应拦截器统一处理错误码import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) request.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 { ElMessage.error(网络请求异常请稍后再试) return Promise.reject(error) } ) export default request4.4 前台核心页面实现要点首页。我建议包含顶部导航栏、搜索区域、推荐房源列表调用后端接口按浏览数TOP N、最新公告模块。页面组件拆分成NavBar.vue、SearchBar.vue、HouseCard.vue这样列表页和首页可以复用HouseCard组件。房源列表页。核心是左侧筛选栏加右侧房源卡片网格。筛选条件包括区域选择下拉框、租金区间两个输入框、户型选择按钮组、排序方式下拉框。每次筛选条件变就重新发请求拿到新数据刷新列表。这里集成分页组件Element Plus的el-pagination把当前页和总记录数和后端返回的数据对接好就行。房源详情页。展示房源大图轮播el-carousel、基本信息列表、房东信息卡片、右侧的预约按钮和收藏按钮。详情页顶部要有个面包屑导航底部是户型描述和房屋配置等长文本。登录注册页。登录和注册做成一个页面切换的两个表单。注册时区分“我是租客/我是房东”决定role字段的值。登录成功后把Token、用户ID、用户名、角色都存进localStorage并跳转到用户原打算访问的页面。5. 前后端联调测试与打包部署5.1 接口联调的完整流程前后端分离项目联调是绕不开的环节。一定要等后端接口写完再联调效率太低了我的经验是后端写完一个模块联调一个模块。比如房源模块先把房源列表、详情、搜索三个接口做好前端马上对接这三个接口没问题再继续写收藏和预约功能。联调时最常用的工具是SwaggerSpringDoc或springfox。引入依赖后访问http://localhost:8080/swagger-ui.html就能看到所有接口的列表、参数说明、返回值结构前端照着文档调接口效率比互相问高很多。还有一个很实在的建议接口返回的数据结构和前端页面要展示的字段之间在设计时就要对齐。后端返回createTime前端展示用createTime不要在后端返回create_time前端再手动转驼峰多一层转换就多一层出错的概率。5.2 Maven打包与前端构建后端项目在IDEA右侧Maven面板双击package生成jar包后直接丢到服务器上运行mvn clean package -DskipTests java -jar rent-backend-0.0.1-SNAPSHOT.jar前端项目需要构建生产包npm run build构建完成后生成dist目录里面是纯静态文件可以独立部署到Nginx。如果你不想部署两个服务前端静态服务后端Java服务可以做一个很取巧的方案前端构建后的dist目录直接丢进SpringBoot的src/main/resources/static目录下重新打包SpringBoot会自动把里面的index.html作为静态首页。这样一个jar包搞定全部部署起来极其轻便。虽然生产环境不推荐这么做前端静态资源和后端应用混在一起不方便独立扩容但作为毕业设计演示确实非常方便。5.3 演示环境的种子数据准备系统开发完成后要为演示准备种子数据。没有数据的空系统界面看起来就像个半成品评阅老师的印象分会大打折扣。我建议至少准备用户一个管理员账号admin、两个房东账号、三五个租客账号房源八到十二套房源覆盖不同的租金段比如800-2500元、不同户型单间、一室一厅、两室一厅、不同区域大学城南门、东门、地铁站附近图片网上找一些免费可商用的室内实拍图或者是AI生成的室内效果图统一尺寸订单/评价两三笔已完成的历史订单和对应的评价记录让数据看起来是“用过的”准备种子数据有两条路写一个data.sql文件配置Spring的sql.init.mode自动加载或者写一个DataInitializer类在项目启动时通过Service层插入。如果数据关联复杂房源关联房东ID、订单关联房源和租客后者更可靠因为可以在Java代码里通过已有数据的ID来动态建立关联。6. 常见问题与踩坑实录6.1 数据库连接与字符集问题现象项目启动报Unknown character set: utf8mb4或者插入中文数据变成???。原因MySQL 5.5及更低版本不支持utf8mb4字符集或者数据库连接URL里没有指定characterEncodingutf8。还有一个常见场景MySQL 8要求驱动类名是com.mysql.cj.jdbc.DriverMySQL 5.x是com.mysql.jdbc.Driver混用就会报错。处理连接URL统一加上?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai建库时指定字符集CREATE DATABASE rent_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;6.2 MyBatis中数字与字符串的比较现象写SQL时字段类型是VARCHAR比如status存的是0、1参数传的是Integer1直接比较判断不出结果。原因MySQL中对字符串和数字比较会做隐式转换但转换规则不一定符合预期更常见的是在MyBatis动态SQL中if teststatus 1比较的是Java层面的Integer和Integer没问题但SQL写成WHERE status #{status}时status在数据库里是字符型参数如果是数字1MySQL会尝试把VARCHAR列转成数字再比一旦字段有非数字内容查询就会出诡异问题。处理最稳的做法是数据库设计时就统一数据类型——状态码属于“枚举值”用TINYINT或CHAR(1)都行但要保持一致接口层参数类型和实体类属性类型也要统一别一会儿传数字一会儿传字符串。如果实在没法改表在SQL里显式转换WHERE status CAST(#{status} AS CHAR)。6.3 前端页面加载慢与白屏现象启动前端项目后访问页面白屏控制台报错或者打包后首页加载特别慢白屏好几秒。原因白屏大概率是路由模式问题——Vue Router用了history模式但静态服务器没有配置try_files回退到index.html刷新子路由时就404白屏。加载慢是构建产物过大element-plus全量引入加上大图片首次加载JS包有好几MB。处理开发环境用默认的路由模式就行如果用了createWebHistory在测试环境的Nginx里加上这条配置location / { try_files $uri $uri/ /index.html; }构建优化方面Element Plus按需引入、路由懒加载、图片放到图床或压缩后再引入这些手段都能大幅减少首屏时间。
