Flask+Vue全栈开发房屋租赁系统实战

1. 项目概述

最近在做一个基于Flask+Vue的房屋租赁系统，采用前后端分离架构。这个项目特别适合想学习全栈开发的朋友，尤其是对Python和Vue.js都感兴趣的开发者。整个系统从数据库设计到前后端联调，涵盖了Web开发的完整流程。

作为一个有多年全栈开发经验的工程师，我发现这种前后端分离的项目结构在实际工作中非常常见。Flask作为轻量级的Python框架，特别适合快速开发API服务；而Vue.js的响应式特性则让前端开发变得高效优雅。

2. 技术选型与架构设计

2.1 后端技术栈选择

选择Flask而不是Django主要基于以下几点考虑：

1. 轻量级：Flask更灵活，适合中小型项目
2. 模块化：可以按需添加扩展
3. 学习曲线：比Django更平缓

对于数据库，我推荐MySQL而不是MongoDB，因为：

• 房屋租赁系统的数据结构比较规整
• 需要处理复杂的关联查询（如用户-房源-订单关系）
• 事务支持更完善

2.2 前端技术栈配置

Vue 3的组合式API相比选项式API有几个优势：

1. 更好的逻辑复用
2. 更灵活的组织方式
3. 更好的TypeScript支持

UI组件库选择Element Plus而不是Vant的原因是：

• Element Plus更适合PC端管理后台
• 组件更丰富成熟
• 文档和社区支持更好

3. 后端实现详解

3.1 Flask项目结构设计

一个合理的Flask项目结构应该如下：

code复制house_rental/
├── app/
│   ├── __init__.py
│   ├── models/
│   │   ├── user.py
│   │   ├── house.py
│   │   └── order.py
│   ├── routes/
│   │   ├── auth.py
│   │   ├── house.py
│   │   └── order.py
│   ├── static/
│   ├── templates/
│   └── config.py
├── migrations/
├── tests/
├── requirements.txt
└── run.py

3.2 核心功能实现

3.2.1 用户认证系统

我推荐使用JWT而不是Session，因为：

1. 更适合前后端分离架构
2. 无状态，扩展性好
3. 跨域支持更友好

实现代码示例：

python复制from flask_jwt_extended import create_access_token
from werkzeug.security import generate_password_hash

@app.route('/api/auth/register', methods=['POST'])
def register():
    data = request.get_json()
    hashed_password = generate_password_hash(data['password'])
    new_user = User(username=data['username'], password=hashed_password)
    db.session.add(new_user)
    db.session.commit()
    return jsonify({"message": "User created"}), 201

@app.route('/api/auth/login', methods=['POST'])
def login():
    data = request.get_json()
    user = User.query.filter_by(username=data['username']).first()
    if user and check_password_hash(user.password, data['password']):
        access_token = create_access_token(identity=user.id)
        return jsonify(access_token=access_token)
    return jsonify({"message": "Invalid credentials"}), 401

3.2.2 房源管理模块

房源模型设计需要考虑：

• 基本信息：标题、描述、价格
• 位置信息：地址、经纬度
• 设施信息：面积、房间数、设施列表
• 图片管理：多张图片URL

python复制class House(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    description = db.Column(db.Text)
    price = db.Column(db.Float, nullable=False)
    address = db.Column(db.String(200))
    area = db.Column(db.Float)  # 面积
    room_count = db.Column(db.Integer)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)
    owner_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    
    images = db.relationship('HouseImage', backref='house', lazy=True)
    facilities = db.relationship('Facility', secondary=house_facility, lazy='subquery')

4. 前端实现细节

4.1 Vue项目结构优化

推荐使用如下结构：

code复制src/
├── api/              # API请求封装
├── assets/           # 静态资源
├── components/       # 通用组件
├── composables/      # 组合式函数
├── router/           # 路由配置
├── stores/           # Pinia状态管理
├── styles/           # 全局样式
├── utils/            # 工具函数
├── views/            # 页面组件
├── App.vue           # 根组件
└── main.js           # 入口文件

4.2 关键页面实现

4.2.1 房源列表页

实现要点：

• 分页加载
• 筛选条件
• 排序功能
• 图片懒加载

vue复制<script setup>
import { ref, onMounted } from 'vue'
import { getHouses } from '@/api/house'

const houses = ref([])
const loading = ref(false)
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

const fetchHouses = async () => {
  loading.value = true
  try {
    const res = await getHouses({
      page: pagination.value.page,
      pageSize: pagination.value.pageSize
    })
    houses.value = res.data
    pagination.value.total = res.total
  } finally {
    loading.value = false
  }
}

onMounted(fetchHouses)
</script>

<template>
  <div class="house-list">
    <el-table :data="houses" v-loading="loading">
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="address" label="地址" />
    </el-table>
    
    <el-pagination
      v-model:current-page="pagination.page"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="fetchHouses"
    />
  </div>
</template>

5. 前后端联调实战

5.1 API设计与规范

采用RESTful风格设计API：

• GET /api/houses - 获取房源列表
• POST /api/houses - 创建房源
• GET /api/houses/:id - 获取单个房源
• PUT /api/houses/:id - 更新房源
• DELETE /api/houses/:id - 删除房源

响应格式统一为：

json复制{
  "code": 200,
  "message": "success",
  "data": {}
}

5.2 跨域解决方案

Flask端配置CORS：

python复制from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "*"}})

或者开发环境下Vue配置代理：

js复制// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
}

6. 数据库设计与优化

6.1 完整ER图设计

核心表包括：

• users - 用户表
• houses - 房源表
• orders - 订单表
• facilities - 设施表
• house_images - 房源图片表

关系：

• 用户:房源 = 1:N
• 用户:订单 = 1:N
• 房源:订单 = 1:N
• 房源:设施 = M:N

6.2 索引优化建议

关键索引：

sql复制-- 用户表
CREATE INDEX idx_user_username ON users(username);

-- 房源表
CREATE INDEX idx_house_price ON houses(price);
CREATE INDEX idx_house_location ON houses(latitude, longitude);

-- 订单表
CREATE INDEX idx_order_user ON orders(user_id);
CREATE INDEX idx_order_house ON orders(house_id);

7. 部署与性能优化

7.1 生产环境部署

后端部署方案：

bash复制# 使用Gunicorn启动
gunicorn -w 4 -b 0.0.0.0:5000 run:app

# Nginx配置示例
location /api {
    proxy_pass http://127.0.0.1:5000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

前端部署：

bash复制npm run build
# 将dist目录内容部署到Nginx

7.2 性能优化技巧

1. 数据库查询优化：

python复制# 避免N+1查询
houses = House.query.options(
    joinedload(House.images),
    joinedload(House.facilities)
).all()

2. 使用Redis缓存：

python复制from flask_redis import FlaskRedis

redis = FlaskRedis(app)

@app.route('/api/houses')
def get_houses():
    cache_key = 'houses:list'
    cached_data = redis.get(cache_key)
    if cached_data:
        return jsonify(json.loads(cached_data))
    
    houses = House.query.all()
    result = [house.to_dict() for house in houses]
    redis.setex(cache_key, 3600, json.dumps(result))
    return jsonify(result)

8. 常见问题与解决方案

8.1 开发环境问题

1. Python包版本冲突：

bash复制# 推荐使用虚拟环境
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt

2. Vue依赖安装失败：

bash复制# 清除缓存重试
rm -rf node_modules package-lock.json
npm cache clean --force
npm install

8.2 生产环境问题

1. 静态文件404：

nginx复制# Nginx配置确保静态文件路径正确
location /static {
    alias /path/to/your/static/files;
}

2. 数据库连接池耗尽：

python复制# Flask-SQLAlchemy配置
app.config['SQLALCHEMY_POOL_SIZE'] = 20
app.config['SQLALCHEMY_POOL_RECYCLE'] = 300

9. 扩展功能建议

1. 地图集成：

• 使用高德地图API展示房源位置
• 实现附近房源搜索功能

2. 支付系统：

• 集成支付宝/微信支付
• 实现押金和租金支付流程

3. 即时通讯：

• 使用WebSocket实现租客和房东聊天
• 消息已读未读状态管理

4. 数据分析：

• 使用Matplotlib生成房源价格分布图
• 用户行为分析报表

在实际开发中，我建议先完成核心功能，再逐步添加这些扩展功能。每个新功能都应该单独创建分支开发，并通过充分的测试后再合并到主分支。