1. 项目背景与核心价值
房屋租赁系统作为典型的B/S架构应用，在计算机专业毕业设计中具有极高的选题率。这个基于Java+Vue的技术栈组合，既体现了企业级开发的规范性，又兼顾了前端交互的现代性。我在指导毕业设计的过程中发现，这类系统最能锻炼学生的全栈开发能力——从后端的业务逻辑处理到前端的用户体验优化，每个环节都藏着值得深挖的技术要点。
这个系统最核心的价值在于它解决了传统租赁管理的三个痛点：信息不透明导致的房源匹配效率低下、纸质合同带来的管理成本高昂、人工统计造成的运营数据分析滞后。通过数字化平台，房东可以快速发布房源，租户能精准筛选条件，系统自动生成电子合同，后台实时统计各类经营数据，这正是毕业设计需要展现的"用技术解决实际问题"的能力。
2. 技术架构设计解析
2.1 整体架构设计
系统采用经典的前后端分离架构：
code复制[浏览器] ↔ [Vue前端] ↔ [SpringBoot后端] ↔ [MySQL数据库]
选择这种架构主要基于三点考虑：
- 开发效率：前后端可以并行开发，通过接口文档约定数据格式
- 性能优化：前端承担渲染压力，后端专注业务逻辑
- 扩展性：未来APP端可直接复用后端接口
我在实际开发中特别建议学生画出架构图，明确各层职责边界。常见错误是把业务逻辑写在前端，这会导致后期维护困难。
2.2 技术选型对比
| 技术组件 | 备选方案 | 选择理由 |
|---|---|---|
| 后端框架 | SpringBoot | 自动配置、内嵌Tomcat、starter生态丰富 |
| 前端框架 | Vue2 | 渐进式框架、学习曲线平缓、生态完善 |
| 数据库 | MySQL5.7 | 事务支持完善、高校实验室环境普遍配备 |
| 权限控制 | JWT | 无状态、适合前后端分离架构 |
| 地图服务 | 高德地图API | 免费额度充足、文档清晰 |
特别要提醒的是数据库版本选择。有学生尝试用MySQL8.0但遇到实验室环境不兼容的问题，最后不得不降级重做。毕业设计应以稳定为首要原则。
3. 核心功能模块实现
3.1 房源管理模块
这是系统的核心功能，涉及几个关键技术点：
-
富文本编辑器集成
使用wangEditor实现房源描述编辑，需要注意：javascript复制// 前端配置示例 const editor = new E('#editor') editor.config.uploadImgServer = '/api/upload' editor.create() -
多条件复合查询
后端需要构建动态SQL：java复制// MyBatis动态SQL示例 <select id="searchHouses" resultType="House"> SELECT * FROM house <where> <if test="priceMin != null">AND price >= #{priceMin}</if> <if test="subway != null">AND subway_line = #{subway}</if> <!-- 其他条件 --> </where> ORDER BY create_time DESC </select> -
地图坐标处理
使用高德API进行地址解析时，要注意异步回调的处理：javascript复制AMap.plugin('AMap.Geocoder', () => { const geocoder = new AMap.Geocoder() geocoder.getLocation(address, (status, result) => { if (status === 'complete') { this.form.lng = result.geocodes[0].location.lng this.form.lat = result.geocodes[0].location.lat } }) })
3.2 租赁合同模块
电子合同生成是项目的难点之一，推荐两种实现方案：
-
PDF方案
java复制// 使用itextpdf生成PDF合同 Document document = new Document(); PdfWriter.getInstance(document, new FileOutputStream("contract.pdf")); document.open(); document.add(new Paragraph("房屋租赁合同")); // 添加合同内容... document.close(); -
HTML转PDF方案
前端先渲染合同模板，再用html2pdf.js转换：javascript复制import html2pdf from 'html2pdf.js' const element = document.getElementById('contract-template') html2pdf().from(element).save()
实际开发中发现，方案2更适合动态内容较多的场景，且能保留CSS样式。
4. 数据库设计要点
4.1 主要表结构设计
houses表（房源信息）
sql复制CREATE TABLE `houses` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL,
`price` decimal(10,2) NOT NULL,
`area` int(11) DEFAULT NULL,
`room_type` varchar(20) DEFAULT NULL,
`address` varchar(255) NOT NULL,
`lng` decimal(10,6) DEFAULT NULL,
`lat` decimal(10,6) DEFAULT NULL,
`landlord_id` int(11) NOT NULL,
`status` tinyint(1) DEFAULT '1' COMMENT '1-可租 0-已租',
PRIMARY KEY (`id`),
KEY `idx_location` (`lng`,`lat`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
contracts表（租赁合同）
sql复制CREATE TABLE `contracts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`house_id` int(11) NOT NULL,
`tenant_id` int(11) NOT NULL,
`start_date` date NOT NULL,
`end_date` date NOT NULL,
`deposit` decimal(10,2) NOT NULL,
`monthly_rent` decimal(10,2) NOT NULL,
`pdf_url` varchar(255) DEFAULT NULL,
`sign_time` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
4.2 索引优化建议
- 房源表的地理位置索引（lng,lat）必须添加，否则地图附近房源查询会全表扫描
- 合同表的house_id和tenant_id需要建立外键约束
- 对于状态字段（如house.status）考虑使用枚举类型而非字符串
5. 开发中的典型问题与解决方案
5.1 跨域问题处理
前后端分离开发时必遇跨域问题，推荐两种解决方案：
-
SpringBoot配置CORS
java复制@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .maxAge(3600); } } -
Nginx反向代理
nginx复制server { listen 80; server_name localhost; location /api { proxy_pass http://backend:8080; } location / { root /usr/share/nginx/html; index index.html; } }
5.2 文件上传大小限制
系统默认限制上传文件大小，需要显式配置：
yaml复制# application.yml
spring:
servlet:
multipart:
max-file-size: 10MB
max-request-size: 20MB
同时前端需要做二次验证：
javascript复制beforeUpload(file) {
const isLt10M = file.size / 1024 / 1024 < 10
if (!isLt10M) {
this.$message.error('上传文件大小不能超过10MB!')
return false
}
return true
}
5.3 日期时间处理
前后端日期格式不一致是常见问题，推荐统一处理方案：
- 后端全局配置：
java复制@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
Jackson2ObjectMapperBuilder builder = new Jackson2ObjectMapperBuilder()
.dateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
converters.add(new MappingJackson2HttpMessageConverter(builder.build()));
}
}
- 前端使用day.js处理：
javascript复制import dayjs from 'dayjs'
const formattedDate = dayjs(rawDate).format('YYYY-MM-DD HH:mm:ss')
6. 项目部署实践
6.1 前端部署要点
-
生产环境构建命令：
bash复制
npm run build生成的dist目录包含静态资源，可直接部署到Nginx
-
解决路由刷新404问题：
nginx复制location / { try_files $uri $uri/ /index.html; }
6.2 后端部署方案
推荐两种部署方式：
-
传统JAR包部署
bash复制nohup java -jar rental-system.jar --spring.profiles.active=prod & -
Docker容器化部署
dockerfile复制FROM openjdk:8-jdk-alpine VOLUME /tmp COPY target/*.jar app.jar ENTRYPOINT ["java","-jar","/app.jar"]
建议学生在本地先测试Docker部署，避免答辩现场环境问题。
7. 答辩准备建议
根据多年指导经验，答辩时需要特别注意：
-
演示数据准备
- 准备3套测试账号（管理员、房东、租客）
- 房源图片使用真实小区照片，不要用占位图
- 合同数据要体现完整的生命周期（待签约/执行中/已到期）
-
技术亮点提炼
- 地图API集成实现
- 电子合同生成方案
- 数据库查询优化（如空间索引）
-
常见问题预演
- 如何保证房源信息的真实性？
- 系统如何防止恶意刷单？
- 如果大量用户同时查询，如何优化性能？
建议学生在答辩前做至少3次完整流程演练，包括异常情况处理（如断网情况下的表单提交）。