Django + MySQL + Vue 实现在线租房平台

2026/8/10 8:32:14 拓冰建站浏览量

Django + MySQL + Vue 是做在线租房平台非常成熟的全栈组合：Django REST Framework 写 API、MySQL 存业务数据、Vue 3 做前端 SPA，前后端完全分离，开发、测试、部署都能解耦。下面给你一套能直接落地的方案，从架构到表结构到开发步骤一气呵成。

🏗️ 整体架构

采用前后端分离的五层架构，这是目前租房类系统最主流的玩法：

Vue 3 SPA (Element Plus + Axios + Vue Router + Pinia) ↓ HTTP / JWT Django REST Framework API 层 ↓ ORM MySQL 8.0 (主库) + Redis (缓存/会话，可选)

前端：Vue 3 + Vue Router + Pinia + Element Plus + Axios，复杂可视化可加 ECharts
后端：Django 4.x + DRF，负责 API、鉴权、业务逻辑
数据库：MySQL 8.0 存结构化数据（用户、房源、订单、评价等）
可选增强：Redis 缓存热门房源、Celery 处理异步任务（消息通知、到期提醒）、MongoDB 存非结构化数据（用户评价、图片）

💡 如果只做课程设计/毕设，Redis、Celery、MongoDB 都可以先不上，单 Django + MySQL + Vue 就能跑通核心链路。

📊 数据库核心表设计

遵循第三范式，消除冗余。核心表如下：

表名	关键字段	说明
User	user_id, username, encrypted_pwd, role_type(1租客/2房东/3管理员), mobile, is_active	用户主表，密码加密存储
House	house_id, landlord_id(FK), title, rent_price, address, area_size, house_status(0未租/1已租/2下架), publish_time	房源主表
HouseImage	image_id, house_id(FK), image_path	房源图片一对多
RentalApplication	application_id, tenant_id(FK), house_id(FK), apply_time, status	租房申请
RentalContract	contract_id, landlord_id, tenant_id, house_id, lease_term, rent_amount, payment_method	租赁合同
RentPayment	payment_id, contract_id(FK), amount, payment_date, status(paid/pending/overdue)	租金支付记录
Review	review_id, reviewer_id, reviewed_id, house_id, content, rating	评价表
Collection	collection_id, user_id, house_id, collect_time	用户收藏

设计要点：

房源与房东通过landlord_id外键关联，一个房东可发布多套房源
地理位置建议拆成省/市/区三级字典表，用外键关联，方便按区域检索
合同表只存user_id，不要冗余用户姓名，保持范式
房源表的status字段要用 Django 的choices约束

🧩 核心功能模块

参考成熟的租房平台（如贝壳、58同城）以及材料中的模块划分，建议分为五大模块：

用户管理：注册/登录/个人信息/实名认证，JWT 认证，密码 PBKDF2 加密
房源管理：发布、编辑、下架、图片上传（Pillow 处理缩略图）
搜索与筛选：按价格区间、城市/区域、户型、面积、配套设施多维度筛选，RESTful 风格路由如/houses/
订单与支付：租房申请 → 合同生成 → 周期性账单（月付/季付/年付）→ 支付状态流转
评价系统：租后双向评价 + 评分

可选进阶模块：

智能推荐：基于内容的推荐 + 协同过滤，用 scikit-learn 实现
地图集成：接入高德/百度地图 API 做房源 LBS 可视化
实时消息：Django Channels + WebSocket 做房东租客即时通讯
数据可视化：ECharts 做租金走势、房源热度分析大屏

🛠️ 后端 API 设计关键点

用 DRF 的 ViewSet 快速构建 CRUD 接口，几个核心约定：

# settings.py 关键配置 REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_simplejwt.authentication.JWTAuthentication', ), 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticated', ), }

认证：djangorestframework-simplejwt签发 JWT，前端通过Authorization: Bearer <token>携带
权限：IsOwnerOrReadOnly控制房东只能编辑自己的房源
路由规范：/api/houses/、/api/houses/{id}/、/api/contracts/123/、/api/payments/?tenant_id=456
响应格式：统一 JSON，含状态码、消息体、分页元数据
跨域：开发环境用django-cors-headers解决跨域
复合索引优化：对高频查询字段建复合索引，例如：

class House(models.Model): district = models.CharField(max_length=20, db_index=True) rent_price = models.DecimalField(max_digits=10, decimal_places=2) class Meta: indexes = [ models.Index(fields=['district', 'rent_price']), ]

材料显示这种索引策略能使"朝阳区 5000 元以下"这类复合查询响应时间从 1.2 秒降到 0.15 秒。

🎨 前端 Vue 模块划分

src/ ├── api/ # Axios 封装，按模块拆分接口 ├── router/ # Vue Router 路由表 ├── stores/ # Pinia 状态管理（用户态、收藏态） ├── views/ │ ├── Home.vue # 首页 + 房源列表 + 筛选 │ ├── HouseDetail.vue # 房源详情 │ ├── Login.vue / Register.vue │ ├── Landlord/ # 房东中心：发布房源、合同管理 │ ├── Tenant/ # 租客中心：我的预约、合同、支付 │ └── Admin/ # 管理后台 └── components/ # 房源卡片、筛选器、分页等复用组件

关键技术点：

Axios 拦截器统一注入 JWT、处理 401 跳登录
Pinia 管理用户登录态和收藏列表
房源列表用虚拟滚动优化长列表性能
图片上传用Element Plus Upload组件

🚀 开发步骤（从零到上线）

环境准备：安装 Python、Django、Vue CLI、MySQL，创建两个独立工程
数据库设计：Django 中定义 Model →makemigrations→migrate同步到 MySQL
后端 API 开发：ViewSet + Serializer 实现各模块 CRUD，配置 JWT
前端页面开发：Vue 组件 + 路由 + Axios 联调
核心业务串联：注册登录 → 发布房源 → 搜索筛选 → 预约看房 → 签合同 → 支付
测试：单元测试（pytest）、接口测试（Postman）、必要时的压力测试（JMeter）
部署：
- 后端：Gunicorn + Nginx（生产环境务必 HTTPS）
- 前端：npm run build打包后由 Nginx 托管
- 容器化：Docker Compose 编排 Django + MySQL + Nginx
- 推荐部署方案：Gunicorn worker 数 = CPU 核心数 × 2 + 1，Nginx 做负载均衡

📌 开发优先级建议

如果是毕设或课程项目，第一阶段先把这条主线跑通：

用户注册登录 → 房东发布房源 → 租客搜索筛选 → 房源详情 → 收藏/预约 → 合同签订

第二阶段再加：

支付集成（支付宝/微信支付沙箱）
智能推荐算法
地图 LBS 可视化
评价系统
Redis 缓存热门房源（house:hot:{city}键名存点击量 Top 100 房源 ID）
Celery 异步任务（如合同到期前 3 天短信/站内信提醒）

⚠️ 几个容易踩的坑：
Django 默认 session 存储会拖慢高并发，生产环境建议换 Redis 后端
生产环境CORS_ORIGIN_ALLOW_ALL必须改为具体的白名单域名
支付、合同签署等敏感操作要加审计日志（操作人、时间、IP、变更前后快照）

建站实战干货