我乃嗷嗷大侠1. 项目概述：大学生租房平台的技术架构与核心价值
这个基于SpringBoot+Vue+MyBatis+MySQL技术栈的大学生租房平台，是我在指导毕业设计时反复打磨的一个实战项目。它完美诠释了现代Web开发中前后端分离架构的典型应用场景——前端用Vue构建响应式用户界面，后端通过SpringBoot提供RESTful API，MyBatis处理数据持久化，MySQL作为关系型数据库存储业务数据。
特别说明：项目源码已通过完整测试，包含详细的部署文档，即使是刚接触全栈开发的同学也能在2小时内完成本地环境搭建。
为什么选择租房平台作为教学案例？首先，租房业务模型清晰但又不失复杂度——用户管理、房源发布、预约看房、合同管理等模块涵盖了CRUD、事务处理、权限控制等企业级开发的常见需求。其次，大学生群体对租房平台的UI体验要求较高，这正好能体现Vue在构建现代化前端界面时的优势。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术栈深度解析与选型依据
2.1 SpringBoot后端框架的优势实践
选用SpringBoot 2.7.x版本主要基于三个考量：
- 自动配置特性大幅减少了XML配置，比如内置Tomcat服务器、自动扫描组件等，让开发者更专注于业务逻辑
- Starter依赖机制让整合MyBatis、Redis等组件变得极其简单，只需在pom.xml添加：
xml复制<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.2</version>
</dependency>
- Actuator模块提供了完善的健康检查端点，这对后期运维至关重要
在租房平台中，我们特别强化了Spring Security的权限控制设计。不同于简单的RBAC模型，我们实现了基于URL的动态权限校验，核心逻辑在SecurityConfig中：
java复制@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/api/landlord/**").hasRole("LANDLORD")
.antMatchers("/api/tenant/**").hasRole("TENANT")
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()));
}
2.2 Vue前端框架的工程化实践
前端采用Vue 3组合式API写法，相比Options API更利于逻辑复用。项目结构遵循企业级规范：
code复制src/
├── api/ # 所有接口请求封装
├── assets/ # 静态资源
├── components/ # 公共组件
├── composables/ # 组合式函数
├── router/ # 路由配置
├── stores/ # Pinia状态管理
├── utils/ # 工具类
└── views/ # 页面组件
房源列表页采用了虚拟滚动优化性能，关键代码如下：
vue复制<template>
<RecycleScroller
class="scroller"
:items="houseList"
:item-size="120"
key-field="id"
v-slot="{ item }"
>
<HouseCard :house="item" />
</RecycleScroller>
</template>
2.3 MyBatis的进阶应用技巧
在数据持久层，我们不仅实现了基础CRUD，还解决了几个典型问题：
- 多表联查时的结果映射问题：使用
<resultMap>定义嵌套查询
xml复制<resultMap id="HouseDetailMap" type="HouseVO">
<id property="id" column="h_id"/>
<result property="title" column="h_title"/>
<collection property="images" ofType="string">
<result column="img_url"/>
</collection>
</resultMap>
- 动态SQL构建：通过
<if>标签实现条件筛选
xml复制<select id="selectHouses" resultMap="HouseDetailMap">
SELECT * FROM houses
<where>
<if test="priceMin != null">AND price >= #{priceMin}</if>
<if test="priceMax != null">AND price <= #{priceMax}</if>
<if test="location != null">AND location LIKE CONCAT('%',#{location},'%')</if>
</where>
</select>
2.4 MySQL数据库设计要点
数据库设计遵循第三范式，主要表结构包括：
sql复制CREATE TABLE `user` (
`id` int NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(100) NOT NULL,
`role` enum('ADMIN','LANDLORD','TENANT') NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `username_UNIQUE` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
CREATE TABLE `house` (
`id` int NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL,
`price` decimal(10,2) NOT NULL,
`address` varchar(200) NOT NULL,
`landlord_id` int NOT NULL,
PRIMARY KEY (`id`),
KEY `fk_house_landlord_idx` (`landlord_id`),
CONSTRAINT `fk_house_landlord` FOREIGN KEY (`landlord_id`) REFERENCES `user` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
特别在房源搜索功能上，我们为常用查询字段建立了复合索引：
sql复制ALTER TABLE `house`
ADD INDEX `idx_search` (`price`, `location`, `create_time`);
3. 核心功能模块实现细节
3.1 用户认证与权限控制
采用JWT+Spring Security的方案，关键流程：
- 登录成功生成Token（包含用户角色信息）
java复制public String generateToken(UserDetails userDetails) {
Map<String, Object> claims = new HashMap<>();
claims.put("roles", userDetails.getAuthorities().stream()
.map(GrantedAuthority::getAuthority)
.collect(Collectors.toList()));
return Jwts.builder()
.setClaims(claims)
.setSubject(userDetails.getUsername())
.setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
.signWith(SignatureAlgorithm.HS512, SECRET)
.compact();
}
- 前端在axios拦截器中添加Token：
javascript复制service.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
3.2 房源信息管理
房东发布房源时，我们实现了多图片上传功能：
java复制@PostMapping("/houses")
public ResultVO addHouse(
@RequestPart HouseDTO houseDTO,
@RequestPart(required = false) MultipartFile[] images) {
// 保存房源基本信息
House house = convertToHouse(houseDTO);
houseMapper.insert(house);
// 处理上传图片
if (images != null) {
List<HouseImage> imageList = Arrays.stream(images)
.map(img -> {
String url = ossService.upload(img);
return new HouseImage(house.getId(), url);
})
.collect(Collectors.toList());
houseImageMapper.batchInsert(imageList);
}
return ResultVO.success(house.getId());
}
3.3 预约看房系统
采用状态机模式管理预约流程：
java复制public enum AppointmentStatus {
PENDING, // 待确认
CONFIRMED, // 已确认
CANCELLED, // 已取消
COMPLETED // 已完成
}
@Service
@Transactional
public class AppointmentService {
public void confirmAppointment(int appointmentId) {
Appointment appointment = appointmentMapper.selectById(appointmentId);
if (appointment.getStatus() != AppointmentStatus.PENDING) {
throw new IllegalStateException("只能确认待处理的预约");
}
appointment.setStatus(AppointmentStatus.CONFIRMED);
appointmentMapper.update(appointment);
// 发送确认通知
notificationService.sendConfirmation(appointment);
}
}
4. 项目部署与运维实践
4.1 开发环境快速搭建
- 后端环境准备：
bash复制# 安装JDK17
brew install openjdk@17
# 初始化数据库（Docker方式）
docker run --name rental-mysql -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 -d mysql:8.0
# 启动SpringBoot应用
mvn spring-boot:run
- 前端环境配置：
bash复制# 安装Node.js 16+
nvm install 16
# 安装依赖
npm install
# 启动开发服务器
npm run dev
4.2 生产环境部署方案
推荐使用Docker Compose编排服务：
yaml复制version: '3'
services:
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
environment:
- SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/rental
- SPRING_DATASOURCE_USERNAME=root
- SPRING_DATASOURCE_PASSWORD=123456
frontend:
build: ./frontend
ports:
- "80:80"
mysql:
image: mysql:8.0
environment:
- MYSQL_ROOT_PASSWORD=123456
- MYSQL_DATABASE=rental
volumes:
- mysql_data:/var/lib/mysql
volumes:
mysql_data:
4.3 性能优化实战记录
- 接口响应慢问题排查：
- 使用Arthas工具追踪发现房源列表查询存在N+1问题
- 解决方案：改写MyBatis查询为联表查询，响应时间从1200ms降至200ms
- 前端首屏加载优化：
- 配置路由懒加载
javascript复制const routes = [
{
path: '/houses',
component: () => import('../views/HouseList.vue')
}
]
- 启用Gzip压缩（nginx配置示例）：
nginx复制gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
5. 典型问题排查手册
5.1 跨域问题解决方案
开发环境配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*");
}
}
生产环境推荐Nginx反向代理：
nginx复制location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
5.2 MyBatis日志打印配置
在application.yml中添加：
yaml复制logging:
level:
org.mybatis: DEBUG
com.example.mapper: TRACE
配合p6spy实现完整SQL日志：
xml复制<dependency>
<groupId>p6spy</groupId>
<artifactId>p6spy</artifactId>
<version>3.9.1</version>
</dependency>
5.3 Vue路由刷新404问题
在Nginx中添加try_files配置：
nginx复制location / {
try_files $uri $uri/ /index.html;
}
6. 项目扩展方向建议
- 微服务化改造：
- 将用户服务、房源服务拆分为独立模块
- 采用Spring Cloud Alibaba实现服务治理
- 智能推荐功能：
java复制// 基于用户浏览历史的协同过滤算法
public List<House> recommendHouses(int userId) {
List<House> browsedHouses = browseHistoryMapper.selectByUser(userId);
List<Integer> similarUsers = userSimilarityMapper.findSimilarUsers(userId);
return houseMapper.selectRecommended(similarUsers);
}
- 微信小程序端开发：
- 使用Uni-app跨平台框架
- 复用现有API接口
这个项目最让我自豪的是它完整呈现了企业级应用的开发流程——从需求分析、技术选型到部署运维的全生命周期管理。建议学习者在理解基础功能后，可以尝试实现消息推送、支付对接等扩展功能，这对提升实战能力大有裨益。