1. 项目概述与核心需求分析
这个基于Python+Flask+Vue3的大学生租房平台，本质上是一个面向高校学生的房屋租赁全流程管理系统。我在开发过程中发现，传统租房平台往往忽视学生群体的特殊需求，而这个系统正是针对以下痛点设计的：
- 学生身份验证：需要与校园认证系统对接，确保房源信息真实可靠
- 短租需求：支持学期制租赁周期，不同于社会上的年租模式
- 合租管理：多人分摊房租、水电费的特殊结算逻辑
- 报修响应：房东与学生之间的快速沟通通道
- 费用透明：清晰展示各项费用明细，避免隐形消费
技术栈选择上，采用Flask作为后端API服务框架，主要看中它的轻量级特性和与Python生态的无缝集成。Vue3作为前端框架，其组合式API特别适合构建这种多模块交互的复杂管理系统。
2. 系统架构设计
2.1 整体技术架构
code复制[前端] Vue3 + Element Plus + Axios
↓
[API层] Flask RESTful API
↓
[服务层] 业务逻辑处理
↓
[数据层] MySQL + Redis缓存
↓
[基础设施] Nginx + Docker容器化部署
2.2 数据库核心表设计
python复制# 用户表
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
student_id = db.Column(db.String(20), unique=True) # 学号
phone = db.Column(db.String(11))
# 其他字段...
# 房源表
class House(db.Model):
id = db.Column(db.Integer, primary_key=True)
landlord_id = db.Column(db.Integer, db.ForeignKey('user.id'))
address = db.Column(db.String(200))
# 特殊字段
is_student_only = db.Column(db.Boolean) # 是否仅限学生
school_distance = db.Column(db.Integer) # 距离学校距离(米)
# 报修工单表
class RepairOrder(db.Model):
STATUS_CHOICES = ['pending', 'processing', 'completed']
id = db.Column(db.Integer, primary_key=True)
house_id = db.Column(db.Integer, db.ForeignKey('house.id'))
# 其他字段...
3. 核心功能实现细节
3.1 学生身份验证模块
通过对接学校OA系统实现实名认证：
python复制@app.route('/api/auth/student', methods=['POST'])
def student_verify():
data = request.get_json()
# 模拟对接学校认证系统
response = requests.post(
'https://university-auth/api/verify',
json={'student_id': data['student_id'], 'password': data['password']}
)
if response.status_code == 200:
# 生成JWT token
token = create_access_token(identity=data['student_id'])
return jsonify({'token': token})
return jsonify({'error': '认证失败'}), 401
注意：实际开发中应采用HTTPS加密传输，且密码不应明文存储
3.2 合租费用分摊算法
python复制def calculate_shared_payment(total_amount, tenants):
"""
:param total_amount: 总金额(元)
:param tenants: 租户列表[{'id':1, 'room_size':15},...]
:return: 每人应缴金额
"""
total_size = sum(t['room_size'] for t in tenants)
return [
{
'user_id': t['id'],
'amount': round(total_amount * (t['room_size']/total_size), 2)
}
for t in tenants
]
3.3 报修工单状态机
使用状态模式实现工单流转：
python复制class RepairState:
def next_state(self):
raise NotImplementedError
class PendingState(RepairState):
def next_state(self):
return ProcessingState()
class ProcessingState(RepairState):
def next_state(self):
return CompletedState()
class CompletedState(RepairState):
def next_state(self):
return self # 终态
4. 前端关键实现
4.1 房源地图展示
使用高德地图API实现：
vue复制<template>
<div class="map-container">
<el-amap :zoom="15" :center="center">
<el-amap-marker
v-for="house in houses"
:position="[house.longitude, house.latitude]"
:key="house.id"
@click="showDetail(house)"
/>
</el-amap>
</div>
</template>
<script setup>
import { ref } from 'vue'
const center = ref([116.397428, 39.90923]) // 默认北京坐标
const houses = ref([])
// 获取房源数据
const loadHouses = async () => {
const res = await axios.get('/api/houses')
houses.value = res.data
}
</script>
4.2 费用分摊计算器
vue复制<template>
<el-form :model="form">
<el-form-item label="总金额">
<el-input-number v-model="form.total" :precision="2"/>
</el-form-item>
<!-- 房客列表 -->
<div v-for="(tenant, index) in form.tenants" :key="index">
<el-input v-model="tenant.name" placeholder="姓名"/>
<el-input-number
v-model="tenant.size"
:precision="2"
placeholder="房间面积(㎡)"
/>
</div>
<el-button @click="calculate">计算分摊</el-button>
</el-form>
<!-- 结果显示 -->
<div v-if="results.length">
<h3>分摊结果</h3>
<div v-for="(item, i) in results" :key="i">
{{ item.name }}: ￥{{ item.amount }}
</div>
</div>
</template>
5. 部署与性能优化
5.1 Docker化部署
docker-compose.yml配置示例：
yaml复制version: '3'
services:
backend:
build: ./backend
ports:
- "5000:5000"
environment:
- FLASK_ENV=production
depends_on:
- db
- redis
frontend:
build: ./frontend
ports:
- "8080:80"
db:
image: mysql:5.7
environment:
- MYSQL_ROOT_PASSWORD=root
- MYSQL_DATABASE=rental_db
redis:
image: redis:alpine
5.2 缓存策略优化
使用Redis缓存热门房源数据：
python复制from flask_redis import FlaskRedis
redis = FlaskRedis()
@app.route('/api/houses/hot')
def hot_houses():
cache_key = 'hot_houses'
data = redis.get(cache_key)
if data:
return jsonify(json.loads(data))
# 数据库查询
houses = House.query.order_by(House.view_count.desc()).limit(10).all()
result = [h.to_dict() for h in houses]
# 设置缓存(60秒过期)
redis.setex(cache_key, 60, json.dumps(result))
return jsonify(result)
6. 安全防护措施
6.1 JWT认证实现
python复制from flask_jwt_extended import JWTManager, create_access_token, jwt_required
app.config['JWT_SECRET_KEY'] = 'your-secret-key' # 生产环境应从环境变量获取
jwt = JWTManager(app)
@app.route('/api/protected')
@jwt_required()
def protected():
current_user = get_jwt_identity()
return jsonify(logged_in_as=current_user), 200
6.2 XSS防护
前端使用DOMPurify过滤用户输入：
javascript复制import DOMPurify from 'dompurify'
const clean = DOMPurify.sanitize(userInput)
7. 测试方案
7.1 后端API测试
使用pytest编写测试用例：
python复制def test_house_search(client):
# 测试搜索功能
response = client.get('/api/houses/search?keyword=清华')
assert response.status_code == 200
assert len(response.json) > 0
# 测试分页
response = client.get('/api/houses/search?page=2')
assert len(response.json['items']) == 10
7.2 前端组件测试
使用Vitest测试Vue组件：
javascript复制import { mount } from '@vue/test-utils'
import PaymentCalculator from './PaymentCalculator.vue'
test('calculates shared payment correctly', async () => {
const wrapper = mount(PaymentCalculator)
await wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('分摊结果')
})
8. 项目经验总结
在实际开发中，有几个关键点需要特别注意：
-
学生认证的真实性：建议采用学校官方API对接，避免人工审核带来的安全风险
-
费用结算的精确性：财务相关功能必须进行严格的单元测试，金额计算要精确到分
-
移动端适配：学生用户主要使用手机访问，需要优先保证移动端体验
-
高峰期性能：开学季访问量激增，需要提前做好压力测试和自动扩容方案
-
数据备份策略：租约合同等关键数据需要实施定期备份和异地容灾
这个项目完整展示了如何用Python+Flask+Vue3技术栈构建一个实用的校园服务系统。开发过程中，Flask的灵活性和Vue3的响应式特性完美配合，特别适合快速迭代开发这类垂直领域的应用系统。