1. 项目概述:大学生租房平台的技术架构解析
这个基于Java SpringBoot+Vue3+MyBatis的租房平台系统,是专门为高校学生群体设计的在线租房解决方案。系统采用前后端分离架构,后端使用SpringBoot提供RESTful API,前端采用Vue3构建用户界面,数据持久层使用MyBatis操作MySQL数据库。这种技术组合在当前企业级应用开发中非常流行,特别适合需要快速迭代的中小型项目。
提示:这个技术栈的选择考虑了大学生开发团队的技术储备和项目实际需求。SpringBoot简化了后端开发配置,Vue3提供了现代化的前端体验,MyBatis则让数据库操作更加灵活。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心功能模块设计
2.1 用户管理模块
用户模块处理学生和房东的注册、登录和个人信息管理。采用JWT进行身份验证,密码存储使用BCrypt加密算法。用户角色分为:
- 学生用户:可以浏览房源、收藏房源、预约看房、签订电子合同
- 房东用户:可以发布房源、管理房源状态、处理预约请求
- 管理员:负责用户审核、内容审核和系统维护
用户表(user)主要字段设计:
sql复制CREATE TABLE `user` (
`id` bigint NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(100) NOT NULL,
`real_name` varchar(50) DEFAULT NULL,
`phone` varchar(20) NOT NULL,
`email` varchar(100) DEFAULT NULL,
`avatar` varchar(255) DEFAULT NULL,
`role` tinyint NOT NULL COMMENT '1-学生 2-房东 3-管理员',
`status` tinyint DEFAULT '1' COMMENT '0-禁用 1-正常',
`create_time` datetime NOT NULL,
`update_time` datetime DEFAULT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `idx_username` (`username`),
UNIQUE KEY `idx_phone` (`phone`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
2.2 房源管理模块
房源是系统的核心业务对象,包含以下关键功能:
- 多条件筛选(价格、面积、户型、距离学校距离等)
- 房源图片上传与管理(使用阿里云OSS存储)
- 房源状态管理(可租/已租/下架)
- 房源收藏功能
房源表(house)设计:
sql复制CREATE TABLE `house` (
`id` bigint NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL,
`description` text,
`price` decimal(10,2) NOT NULL,
`area` decimal(10,2) NOT NULL,
`room_type` varchar(20) NOT NULL,
`address` varchar(255) NOT NULL,
`school_distance` int DEFAULT NULL COMMENT '距离学校的米数',
`longitude` decimal(10,7) DEFAULT NULL,
`latitude` decimal(10,7) DEFAULT NULL,
`user_id` bigint NOT NULL COMMENT '房东ID',
`status` tinyint NOT NULL DEFAULT '1' COMMENT '1-可租 2-已租 3-下架',
`create_time` datetime NOT NULL,
`update_time` datetime DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `idx_user_id` (`user_id`),
KEY `idx_location` (`longitude`,`latitude`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
2.3 预约看房模块
学生用户可以预约看房时间,房东可以确认或拒绝预约。系统会通过短信和站内信通知双方预约状态变化。
预约表(appointment)设计:
sql复制CREATE TABLE `appointment` (
`id` bigint NOT NULL AUTO_INCREMENT,
`house_id` bigint NOT NULL,
`student_id` bigint NOT NULL,
`landlord_id` bigint NOT NULL,
`appoint_time` datetime NOT NULL,
`status` tinyint NOT NULL DEFAULT '0' COMMENT '0-待确认 1-已确认 2-已拒绝 3-已完成',
`message` varchar(255) DEFAULT NULL,
`create_time` datetime NOT NULL,
`update_time` datetime DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `idx_house_id` (`house_id`),
KEY `idx_student_id` (`student_id`),
KEY `idx_landlord_id` (`landlord_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. 技术实现细节
3.1 后端SpringBoot实现
后端采用三层架构设计:
- Controller层:处理HTTP请求,参数校验
- Service层:业务逻辑实现
- DAO层:数据库操作
典型的房源查询接口实现:
java复制@RestController
@RequestMapping("/api/house")
public class HouseController {
@Autowired
private HouseService houseService;
@GetMapping("/list")
public Result list(
@RequestParam(required = false) Integer minPrice,
@RequestParam(required = false) Integer maxPrice,
@RequestParam(required = false) Integer minArea,
@RequestParam(required = false) Integer maxArea,
@RequestParam(required = false) String roomType,
@RequestParam(required = false) Integer maxDistance,
@RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "10") Integer size) {
HouseQueryDTO queryDTO = new HouseQueryDTO();
queryDTO.setMinPrice(minPrice);
queryDTO.setMaxPrice(maxPrice);
queryDTO.setMinArea(minArea);
queryDTO.setMaxArea(maxArea);
queryDTO.setRoomType(roomType);
queryDTO.setMaxDistance(maxDistance);
PageInfo<HouseVO> pageInfo = houseService.queryHouses(queryDTO, page, size);
return Result.success(pageInfo);
}
}
3.2 前端Vue3实现
前端使用Vue3组合式API开发,主要技术点:
- 使用Pinia进行状态管理
- 使用Element Plus作为UI组件库
- 使用Axios进行HTTP请求
- 使用Vue Router管理路由
房源列表页面示例:
vue复制<template>
<div class="house-list">
<el-row :gutter="20">
<el-col :span="6" v-for="house in houseList" :key="house.id">
<el-card :body-style="{ padding: '0px' }">
<img :src="house.coverImage" class="house-image" />
<div style="padding: 14px;">
<span class="house-title">{{ house.title }}</span>
<div class="house-info">
<span>{{ house.roomType }} | {{ house.area }}㎡</span>
<span class="house-price">¥{{ house.price }}/月</span>
</div>
<div class="house-address">
<el-icon><Location /></el-icon>
<span>{{ house.address }}</span>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-pagination
v-model:currentPage="queryParams.page"
:page-size="queryParams.size"
layout="prev, pager, next"
:total="total"
@current-change="handlePageChange"
/>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getHouseList } from '@/api/house'
const houseList = ref([])
const total = ref(0)
const queryParams = ref({
page: 1,
size: 12
})
const loadHouses = async () => {
const res = await getHouseList(queryParams.value)
houseList.value = res.data.list
total.value = res.data.total
}
onMounted(() => {
loadHouses()
})
const handlePageChange = (page) => {
queryParams.value.page = page
loadHouses()
}
</script>
3.3 MyBatis数据访问层
使用MyBatis的注解方式和动态SQL实现灵活的数据库操作:
java复制@Mapper
public interface HouseMapper {
@SelectProvider(type = HouseSqlProvider.class, method = "queryHouses")
@Results({
@Result(property = "id", column = "id"),
@Result(property = "title", column = "title"),
@Result(property = "coverImage", column = "cover_image"),
// 其他字段映射...
})
List<HouseVO> queryHouses(@Param("query") HouseQueryDTO queryDTO);
class HouseSqlProvider {
public String queryHouses(Map<String, Object> params) {
HouseQueryDTO query = (HouseQueryDTO) params.get("query");
SQL sql = new SQL()
.SELECT("h.id, h.title, hi.url as cover_image, h.price, h.area, h.room_type, h.address")
.FROM("house h")
.LEFT_OUTER_JOIN("house_image hi ON h.id = hi.house_id AND hi.is_cover = 1")
.WHERE("h.status = 1");
if (query.getMinPrice() != null) {
sql.WHERE("h.price >= #{query.minPrice}");
}
if (query.getMaxPrice() != null) {
sql.WHERE("h.price <= #{query.maxPrice}");
}
// 其他条件...
sql.ORDER_BY("h.create_time DESC");
return sql.toString();
}
}
}
4. 系统部署与运维
4.1 开发环境搭建
-
后端环境:
- JDK 17+
- Maven 3.8+
- MySQL 8.0+
- Redis(用于缓存和会话管理)
-
前端环境:
- Node.js 16+
- npm/yarn
4.2 生产环境部署
推荐使用Docker容器化部署:
后端Dockerfile示例:
dockerfile复制FROM openjdk:17-jdk-slim
VOLUME /tmp
COPY target/rental-platform-0.0.1-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
前端Dockerfile示例:
dockerfile复制FROM node:16 as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
4.3 性能优化建议
-
数据库优化:
- 为常用查询字段添加索引
- 使用读写分离架构
- 对大表进行分表分库
-
缓存策略:
- 使用Redis缓存热点数据
- 实现多级缓存(本地缓存+分布式缓存)
-
前端优化:
- 使用CDN加速静态资源
- 实现懒加载和按需加载
- 使用Webpack进行代码分割
5. 常见问题与解决方案
5.1 跨域问题
前后端分离项目常见的跨域问题可以通过以下方式解决:
后端SpringBoot配置:
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.maxAge(3600);
}
}
5.2 文件上传大小限制
SpringBoot默认的文件上传大小限制为1MB,可以通过以下配置调整:
application.yml配置:
yaml复制spring:
servlet:
multipart:
max-file-size: 10MB
max-request-size: 10MB
5.3 MyBatis日志打印
开发阶段可以开启MyBatis的SQL日志打印,方便调试:
application.yml配置:
yaml复制logging:
level:
com.example.mapper: debug
5.4 Vue3生产环境部署问题
Vue3项目部署后可能出现空白页问题,通常是因为路由配置问题:
router/index.js配置:
javascript复制const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
nginx.conf配置:
nginx复制location / {
try_files $uri $uri/ /index.html;
}
6. 项目扩展方向
- 移动端适配:开发微信小程序或原生App版本
- 智能推荐:基于用户行为数据实现个性化房源推荐
- 电子合同:集成第三方电子签名服务
- 支付系统:对接支付宝/微信支付实现在线支付押金和租金
- 信用体系:建立学生租房信用评价系统
这个大学生租房平台项目涵盖了现代Web开发的完整技术栈,从后端API设计到前端交互实现,再到数据库设计和系统部署,是一个非常好的全栈开发实践项目。在实际开发过程中,建议采用敏捷开发方法,分阶段迭代实现功能,同时注重代码质量和系统性能优化。
