025 安居租赁 · 房屋租赁平台

安居租赁 · 房屋租赁平台

一个前后端分离的房屋租赁管理系统，覆盖房源发布与审核、看房预约、在线签约、账单缴费、评价、收藏、消息通知、投诉建议等完整业务闭环，支持租客 / 房东 / 管理员三种角色。

功能特性

功能界面预览

以下截图由无头浏览器（1280×800）基于 sql/house_rent.sql 内置演示数据自动渲染，源文件位于 docs/screenshots/。

公共页面（无需登录）

• 首页 /home：顶部导航 + 搜索入口，中部直达功能卡片，下方为最新房源轮播与平台公告，底部页脚。
  

• 房源列表 /list：按城市 / 租赁类型 / 租金范围筛选，卡片式展示封面、户型、月租、标签与收藏状态。
  

• 房源详情 /house/:id：封面轮播、价格与户型指标面板、房源标签 / 地址 / 浏览与评分、房东信息、以及「预约看房」「立即签约」「收藏」入口，下方为房源详情与租客评价。
  

• 登录 /login 与注册 /register：JWT 登录、角色差异展示，注册后自动登录并跳转。
  

租客端

• 预约看房弹窗：房源详情页「预约看房」弹出，选择看房日期时间并填写备注，提交后状态流在「我的预约」中可见。
  

• 我的预约 /appointments：租约状态流转（待确认 → 已确认 → 已完成 / 已取消），支持取消预约。
  

• 我的合同 /contracts：电子合同列表与详情（租金 / 期限 / 付款方式 / 条款），房东可解约、租客可查看账单。
  

• 我的账单 /bills：按合同生成的水电 / 租金账单，支持在线缴费并生成支付流水。
  

• 我的收藏 /favorites：一键收藏的房源合集，可直接进入详情或取消收藏。
  

• 我的评价 /comments：已签约房源发表 / 删除评价，星级 + 文字内容。
  

• 消息通知 /messages：系统消息（预约、签约、账单等提醒），支持标记已读 / 全部已读，顶栏带未读数角标。
  

• 投诉建议 /complaints：提交问题并跟进管理处回复。
  

• 个人资料 /profile：头像更换（上传）与真实姓名 / 手机号维护。
  

房东后台（/manage/*）

• 工作台 /manage/overview：统计卡片 + ECharts 数据可视化（房源 / 预约 / 合同状态分布、近 6 个月账单趋势、热门房源 TOP5）。
  

• 房源管理 /manage/houses：本人房源列表，支持发布 / 编辑 / 上架下架。
  

• 发布房源 /manage/houses/new：完整表单（标题、城市、户型、租金押金、封面/图片上传、描述）。
  

• 预约管理 /manage/appointments：查看租客预约，确认 / 取消并通知租客。
  

• 合同管理 /manage/contracts：已签合同台账并执行解约。
  

• 账单 / 收款 /manage/bills：各合同账单明细与收款状态。
  

管理后台（admin，/manage/*）

• 用户管理 /manage/users：租客 / 房东 / 管理员账号增删改、重置密码与禁用启用。
  

• 房源审核 /manage/audits：对待审核房源进行通过 / 驳回并通知房东。
  

• 投诉处理 /manage/complaints：回复租客投诉并推进闭环。
  

• 公告管理 /manage/notices：发布 / 删除平台公告，租客端首页同步展示。
  

• 支付流水 /manage/payments：全部缴费记录查询。
  

技术栈

后端（backend/）

• Java 8（JDK 1.8）
• Spring Boot 2.7.18
• Spring Security + JWT（jjwt 0.9.1）身份认证与接口鉴权
• MyBatis-Plus 3.5.3.1
• MySQL 8.0（驱动 mysql-connector-java 8.0.22）
• Hibernate Validator 参数校验、Lombok

前端（frontend/）

• Vue 3.4（<script setup> 组合式 API）
• Vite 5.4 + @vitejs/plugin-vue
• Element Plus 2.7 + @element-plus/icons-vue
• Vue Router 4（路由级登录/角色守卫）、Pinia 2（用户状态）

环境要求

目录结构

house-rent/
├── backend/ # Spring Boot 后端
│ ├── src/main/java/com/houserent/
│ │ ├── config/ # 安全、CORS、MyBatis-Plus、数据初始化
│ │ ├── controller/ # 12 个 REST 控制器（/api/**）
│ │ ├── service/ # 业务层
│ │ ├── mapper/ # MyBatis-Plus Mapper
│ │ ├── entity/ dto/ vo/ # 实体、请求、返回对象
│ │ ├── security/ # JWT 认证链路
│ │ └── common/ # 统一返回 Result / 异常处理
│ └── src/main/resources/application.yml
├── frontend/ # Vue3 前端
│ └── src/
│ ├── api/ # 接口封装（axios 实例、按模块）
│ ├── views/front/ # 前台页面（首页/房源/预约/合同/账单等）
│ ├── views/manage/ # 后台页面（工作台/房源管理/审核/用户等）
│ ├── views/auth/ # 登录/注册
│ ├── layouts/ # 前台/后台布局
│ ├── router/ stores/ utils/ components/ styles/
│ └── main.js App.vue
├── docs/screenshots/ # 功能界面截图（README「功能界面预览」配图）
└── sql/house_rent.sql # 数据库初始化脚本（建库 + 11 张表 + 演示数据）

快速启动

1. 初始化数据库

mysql -uroot -p < sql/house_rent.sql

脚本会执行 DROP DATABASE IF EXISTS house_rent 并重建，包含 11 张表：sys_user、house、appointment、contract、bill、payment、favorite、house_comment、message、complaint、notice，并在脚本末尾自带完整的演示数据，导入一次即可直接体验所有页面（详见“演示账号”）。

2. 启动后端（端口 8080）

数据库连接、JWT 等配置在 backend/src/main/resources/application.yml：

server.port: 8080
spring.datasource.username: root
spring.datasource.password: "123456" # 按本机 MySQL 修改
jwt.secret / jwt.expire–hours # JWT 密钥与有效期（24 小时）
upload.dir: ../upload/ # 图片上传目录（相对后端运行目录）

命令行方式：

cd backend
mvn clean package -DskipTests # 打包，JDK 8
java -jar target/house-rent-backend-1.0.0.jar # 运行

或在 IDEA 中直接运行 HouseRentApplication.main。

3. 启动前端（端口 5173）

Vite 已配置开发代理，/api 自动转发到 http://localhost:8080（见 frontend/vite.config.js）。

cd frontend
npm install
npm run dev # 开发模式，访问 http://localhost:5173
npm run build # 生产构建（产物在 dist/）
npm run preview # 本地预览构建产物

访问入口

浏览器打开 http://localhost:5173 即可进入系统首页 /home（默认跳转），无需登录即可浏览房源、查看详情与公告。登录后：

• 租客/房东/管理员：继续使用前台功能（预约、签约、账单、收藏、评价、消息、投诉等）
• 房东/管理员：点击页面右上角头像菜单中的「进入房东后台/进入管理后台」进入管理端 /manage/overview
• 游客：点击右上角「登录」进入 /login 使用演示账号登录

演示账号

演示数据：4 套已上架房源（北京/上海/广州/深圳）+ 1 套待审核房源（杭州），房源均带真实图片（存放于 frontend/public/uploads/）；3 条平台公告；以及覆盖租客/房东各页面的预约、合同、账单、支付流水、收藏、评价、消息、投诉建议。上述数据统一由 sql/house_rent.sql 内置（密码为 BCrypt 密文，明文均为 123456），随脚本一次性导入，无需额外初始化。

主要页面（路由）

• 前台：/home 首页、/list 房源列表、/house/:id 房源详情、/appointments 我的预约、/contracts 我的合同、/bills 我的账单、/favorites 我的收藏、/comments 我的评价、/messages 消息通知、/complaints 投诉建议、/profile 个人资料
• 后台 /manage/*：overview 工作台（统计图表，含房源/预约/合同状态分布、近 6 个月账单趋势、热门房源 TOP5）、houses（含 houses/new、houses/:id/edit）房源管理、appointments 预约管理、contracts 合同管理、bills 账单管理、users 用户管理（admin）、audits 房源审核（admin）、complaints 投诉处理（admin）、notices 公告管理（admin）、payments 支付流水（admin）
• 登录 /login、注册 /register、404 兜底页

标注 meta.auth 的路由未登录会跳转 /login 并携带 redirect 参数；标注 meta.roles 的路由会校验角色（租客无权进入后台）。

API 一览

所有接口统一返回 Result：{ code, msg, data }，code=200 为成功；/api/auth/**、/api/house/list、/api/house/detail/**、/api/comment/house/**、/api/notice/list、/api/upload/** 免登录，其余需带 Authorization: Bearer <token>，/api/admin/** 仅管理员，/api/landlord/** 限房东/管理员。

常见问题

• 后端启动失败/连不上数据库：确认 MySQL 已启动、application.yml 中账号密码正确，且已执行 sql/house_rent.sql。
• 端口被占用：8080（后端）被占用时改 application.yml 的 server.port，并同步改 frontend/vite.config.js 的 proxy.target。
• 中文乱码：数据库使用 utf8mb4；JVM 启动可加 -Dfile.encoding=UTF-8。
• 数据缺失或想重置：演示数据随 sql/house_rent.sql 导入；如需还原，重新导入该脚本后重启后端即可。房源图片需与仓库中 frontend/public/uploads/ 目录保持一致。