Flask+Vue房屋租赁系统开发实战-代码聚汇网

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

被ldy取笑·2026-07-31·阅读 48 GEO检测（免费）

FlaskVue.js房屋租赁系统

|难度：普通|阅读约 19 分钟

1. 项目背景与技术选型

房屋租赁系统作为典型的Web应用，涉及用户管理、房源展示、订单处理等核心功能模块。采用前后端分离架构能够充分发挥现代Web开发的优势，而Python+Flask+Vue的组合恰好能满足这一需求。

Flask作为Python轻量级Web框架，相比Django更加灵活，特别适合中小型项目的快速开发。它提供了路由、模板引擎等核心功能，同时通过扩展机制可以按需添加数据库支持、表单验证等组件。对于租赁系统这类业务逻辑明确但功能模块不算特别复杂的项目，Flask能够保持代码简洁的同时提供足够的扩展性。

Vue.js作为前端框架的选择则主要基于其渐进式特性和优秀的开发体验。租赁系统需要频繁的DOM操作和状态管理，Vue的响应式数据和组件化开发能够显著提升开发效率。特别是对于房源展示、筛选这类需要动态交互的页面，Vue的单文件组件（SFC）模式让前端开发更加模块化。

PyCharm作为开发IDE，提供了对Python和JavaScript的完整支持，其专业版还内置了Vue.js工具链。调试器、代码补全和版本控制集成等功能对于全栈开发尤其重要。在租赁系统开发中，PyCharm可以帮助我们高效地同时管理后端Flask代码和前端Vue组件。

技术选型心得：对于中小型项目，避免过度设计很重要。Flask+Vue的组合既保证了开发效率，又不会引入不必要的复杂性。实际开发中，我们团队曾尝试用Django REST Framework+Vue，发现对于租赁系统这类规模的项目，Django有些功能用不上反而增加了学习成本。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 开发环境搭建与配置

2.1 Python环境准备

推荐使用Python 3.8+版本，这是目前大多数库都兼容的稳定版本。通过pyenv或conda管理多个Python版本是个好习惯：

bash复制# 使用conda创建虚拟环境
conda create -n rental python=3.8
conda activate rental

关键依赖安装：

bash复制pip install flask flask-sqlalchemy flask-cors flask-migrate

2.2 Vue开发环境配置

建议使用Vue CLI 4.x版本创建项目：

bash复制npm install -g @vue/cli
vue create rental-frontend

选择手动配置时，建议包含：

Babel
Router
Vuex
CSS Pre-processors (Sass/SCSS)
Linter/Formatter (ESLint + Prettier)

2.3 PyCharm项目配置技巧

使用PyCharm专业版以获得完整的Vue支持
配置Python解释器指向创建的conda环境
启用JavaScript和Vue.js插件
设置运行配置：
- 后端：Flask开发服务器
- 前端：npm run serve
配置Live Template快速生成Flask路由和Vue组件

环境配置常见问题：新手常遇到前端无法访问后端API的问题，这通常是由于CORS限制。解决方法是在Flask中配置flask-cors扩展：

python复制from flask_cors import CORS
app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "*"}})

3. 数据库设计与后端实现

3.1 数据模型设计

租赁系统核心实体包括用户、房源、订单等。使用SQLAlchemy作为ORM工具：

python复制from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    # 其他字段...

class Property(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(120), nullable=False)
    price = db.Column(db.Float, nullable=False)
    # 关联用户
    owner_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    owner = db.relationship('User', backref='properties')
    # 其他字段...

class Order(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    property_id = db.Column(db.Integer, db.ForeignKey('property.id'))
    tenant_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    start_date = db.Column(db.DateTime)
    end_date = db.Column(db.DateTime)
    # 其他字段...

3.2 RESTful API设计

采用蓝图组织路由，示例用户模块：

python复制from flask import Blueprint, request, jsonify

user_bp = Blueprint('user', __name__, url_prefix='/api/user')

@user_bp.route('/register', methods=['POST'])
def register():
    data = request.get_json()
    # 验证和处理数据
    new_user = User(username=data['username'])
    db.session.add(new_user)
    db.session.commit()
    return jsonify({'message': 'User created'}), 201

关键API端点设计：

GET /api/properties - 房源列表
POST /api/properties - 发布房源
GET /api/properties/ - 房源详情
POST /api/orders - 创建订单
GET /api/users//orders - 用户订单列表

3.3 认证与授权

使用Flask-JWT-Extended实现JWT认证：

python复制from flask_jwt_extended import JWTManager, create_access_token

app.config['JWT_SECRET_KEY'] = 'your-secret-key'
jwt = JWTManager(app)

@user_bp.route('/login', methods=['POST'])
def login():
    username = request.json.get('username')
    user = User.query.filter_by(username=username).first()
    if user and check_password(user.password, request.json.get('password')):
        access_token = create_access_token(identity=user.id)
        return jsonify(access_token=access_token)
    return jsonify({"msg": "Bad credentials"}), 401

安全提示：生产环境务必使用强密钥，并考虑添加刷新令牌机制。我们项目曾因弱密钥导致安全漏洞，教训深刻。

4. 前端Vue实现与交互设计

4.1 前端项目结构

推荐的项目结构：

code复制src/
├── api/          # API请求封装
├── assets/       # 静态资源
├── components/   # 公共组件
│   ├── PropertyCard.vue
│   ├── SearchFilter.vue
│   └── ...
├── router/       # 路由配置
├── store/        # Vuex状态管理
├── views/        # 页面组件
│   ├── Home.vue
│   ├── PropertyDetail.vue
│   └── ...
└── App.vue       # 根组件

4.2 房源列表实现

使用axios调用后端API：

javascript复制// api/property.js
import axios from 'axios'

export default {
  fetchProperties(params) {
    return axios.get('/api/properties', { params })
  }
}

在Vue组件中使用：

vue复制<template>
  <div class="property-list">
    <PropertyCard 
      v-for="property in properties" 
      :key="property.id"
      :property="property"
    />
    <Pagination 
      :current="page"
      :total="total"
      @change="handlePageChange"
    />
  </div>
</template>

<script>
import PropertyCard from '@/components/PropertyCard'
import propertyAPI from '@/api/property'

export default {
  components: { PropertyCard },
  data() {
    return {
      properties: [],
      page: 1,
      total: 0
    }
  },
  async created() {
    await this.loadProperties()
  },
  methods: {
    async loadProperties() {
      const res = await propertyAPI.fetchProperties({
        page: this.page
      })
      this.properties = res.data.items
      this.total = res.data.total
    },
    handlePageChange(page) {
      this.page = page
      this.loadProperties()
    }
  }
}
</script>

4.3 地图集成实践

租赁系统通常需要展示房源位置，可以使用腾讯地图Web SDK：

在index.html中引入SDK：

html复制<script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

创建地图组件：

vue复制<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  props: ['locations'],
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const center = new TMap.LatLng(39.908802, 116.397502)
      this.map = new TMap.Map('map-container', {
        center,
        zoom: 12
      })
      this.markers = this.locations.map(loc => {
        return new TMap.Marker({
          position: new TMap.LatLng(loc.lat, loc.lng),
          map: this.map
        })
      })
    }
  }
}
</script>

性能优化：当地图点较多时，考虑使用点聚合（MarkerCluster）技术。我们项目在展示100+房源时，未优化的地图导致了明显的性能问题。

5. 前后端联调与部署

5.1 开发环境联调

配置vue.config.js解决跨域：

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

5.2 生产环境部署方案

后端部署

使用Gunicorn+Nginx部署Flask应用：

bash复制pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:5000 wsgi:app

Nginx配置示例：

code复制server {
    listen 80;
    server_name yourdomain.com;

    location /api {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
    }

    location / {
        root /path/to/vue/dist;
        try_files $uri $uri/ /index.html;
    }
}

前端部署

构建静态文件：

bash复制npm run build

将dist目录内容部署到Nginx或CDN。

5.3 持续集成实践

示例GitLab CI配置：

yaml复制stages:
  - test
  - build
  - deploy

backend-test:
  stage: test
  script:
    - pip install -r requirements.txt
    - pytest

frontend-build:
  stage: build
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/

deploy-prod:
  stage: deploy
  script:
    - scp -r dist/* user@server:/var/www/rental
    - ssh user@server "systemctl restart nginx"
  only:
    - master

部署经验：首次部署时务必检查静态文件路径和Nginx权限设置。我们曾因路径错误导致前端加载失败，浪费了半天排查时间。