资讯动态

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

发布时间:2026/8/10 8:31:02 来源:尧图企业网站定制
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_id456响应格式统一 JSON含状态码、消息体、分页元数据跨域开发环境用django-cors-headers解决跨域复合索引优化对高频查询字段建复合索引例如class House(models.Model): district models.CharField(max_length20, db_indexTrue) rent_price models.DecimalField(max_digits10, decimal_places2) 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 1Nginx 做负载均衡 开发优先级建议如果是毕设或课程项目第一阶段先把这条主线跑通用户注册登录 → 房东发布房源 → 租客搜索筛选 → 房源详情 → 收藏/预约 → 合同签订第二阶段再加支付集成支付宝/微信支付沙箱智能推荐算法地图 LBS 可视化评价系统Redis 缓存热门房源house:hot:{city}键名存点击量 Top 100 房源 IDCelery 异步任务如合同到期前 3 天短信/站内信提醒⚠️ 几个容易踩的坑Django 默认 session 存储会拖慢高并发生产环境建议换 Redis 后端​生产环境CORS_ORIGIN_ALLOW_ALL必须改为具体的白名单域名支付、合同签署等敏感操作要加审计日志操作人、时间、IP、变更前后快照

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价