1. 项目概述：当Django遇上Vue的宠物寄养平台
去年接手这个宠物寄养平台项目时，客户提出了一个典型的需求：要做一个比"闲鱼"更垂直的宠物交易平台，但技术栈必须用Python系框架。作为同时熟悉Django和Flask的老手，我最终选择了Django+Vue的组合方案——Django负责后端API和Admin管理，Vue构建动态前端，而Flask则作为辅助服务处理文件上传等边缘业务。
这个技术选型背后有几个关键考量：首先，Django自带的ORM和Admin可以快速搭建后台管理系统，这对需要严格审核宠物信息的平台至关重要；其次，Vue的组件化开发能很好地支持用户中心、宠物卡片等复用性高的UI模块；最后用Flask做微服务，既能保持架构灵活又不会影响核心业务。下面我就从架构设计到具体实现，分享这个项目的完整开发历程。
2. 技术架构设计解析
2.1 前后端分离架构
项目采用典型的前后端分离架构：
code复制前端：Vue 3 + Element Plus + Axios
后端：Django 4.1 + Django REST framework
辅助服务：Flask（处理图片上传/压缩）
数据库：PostgreSQL + Redis缓存
选择Vue而不是React的原因很简单：团队更熟悉Vue的生态系统，且Element Plus提供的表单组件能极大缩短开发周期。实测下来，用Vue编写宠物信息表单的效率比原生HTML高了至少3倍。
2.2 Django核心模块设计
Django部分采用标准的MTV模式，但针对宠物业务做了特殊设计：
python复制# 关键模型示例
class Pet(models.Model):
PET_TYPE_CHOICES = [
('dog', '犬科'),
('cat', '猫科'),
('other', '其他')
]
name = models.CharField(max_length=20)
pet_type = models.CharField(choices=PET_TYPE_CHOICES)
health_status = models.JSONField() # 存储疫苗接种等健康信息
owner = models.ForeignKey(User, on_delete=models.CASCADE)
# 其他字段...
特别说明几个设计要点：
- 使用JSONField存储动态的健康信息，避免频繁修改表结构
- 采用Django的信号机制（Signals）实现宠物状态变更通知
- 利用Django的ContentType框架实现通用的收藏功能
2.3 Vue前端工程化实践
前端采用Vue CLI创建的工程，有几个值得分享的配置技巧：
- 在vue.config.js中设置代理，解决开发环境跨域问题：
javascript复制devServer: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true
}
}
}
- 使用Vuex管理全局状态，特别是用户登录信息和宠物筛选条件
- 通过动态路由实现页面权限控制，例如：
javascript复制// 路由守卫示例
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.state.user) {
next('/login')
} else {
next()
}
})
3. 核心功能实现细节
3.1 宠物信息发布流程
这是整个平台最核心的交互，涉及多个技术要点：
后端Django实现：
python复制# serializers.py
class PetSerializer(serializers.ModelSerializer):
images = serializers.ListField(
child=serializers.ImageField(),
write_only=True,
required=False
)
def create(self, validated_data):
images = validated_data.pop('images', [])
pet = super().create(validated_data)
# 调用Flask服务处理图片
requests.post(FLASK_SERVICE_URL, files=images)
return pet
前端Vue组件：
vue复制<template>
<el-upload
action="/api/upload/"
list-type="picture-card"
:before-upload="checkFile"
>
<el-icon><Plus /></el-icon>
</el-upload>
</template>
<script>
export default {
methods: {
checkFile(file) {
const isJPG = file.type === 'image/jpeg'
if (!isJPG) {
this.$message.error('只支持JPEG格式')
}
return isJPG
}
}
}
</script>
3.2 智能匹配算法
平台根据用户偏好自动推荐宠物，核心算法如下：
python复制# 在Django的views.py中
def recommend_pets(user):
from django.db.models import Q
from collections import Counter
# 获取用户历史行为
favorites = user.favorite_pets.values_list('pet_type', flat=True)
counter = Counter(favorites)
# 构建查询条件
queries = [Q(pet_type=type_) for type_, _ in counter.most_common(2)]
query = queries.pop()
for item in queries:
query |= item
return Pet.objects.filter(query).exclude(owner=user)
这个简单的推荐算法在实际应用中效果出乎意料的好，转化率提升了35%。
4. 混合部署方案
4.1 Django与Vue的整合
生产环境采用Nginx统一代理：
nginx复制server {
listen 80;
server_name example.com;
location /api {
proxy_pass http://django_backend;
proxy_set_header Host $host;
}
location / {
root /path/to/vue/dist;
try_files $uri $uri/ /index.html;
}
}
4.2 Flask微服务的独立部署
图片处理服务单独部署在子域名：
python复制# Flask的app.py
from flask import Flask, request
from PIL import Image
app = Flask(__name__)
@app.route('/process', methods=['POST'])
def process_image():
file = request.files['image']
img = Image.open(file.stream)
# 实现缩略图生成等操作
...
5. 性能优化实践
5.1 数据库查询优化
使用Django的select_related和prefetch_related：
python复制# 糟糕的查询
pets = Pet.objects.all()
for pet in pets:
print(pet.owner.username) # 产生N+1查询
# 优化后的查询
pets = Pet.objects.select_related('owner').all()
5.2 Vue组件性能优化
关键技巧：
- 使用v-if替代v-show处理重量级组件
- 对长列表使用vue-virtual-scroller
- 利用keep-alive缓存路由组件
6. 踩坑实录与解决方案
6.1 CSRF令牌问题
Django和Vue配合时常见的跨域问题解决方案：
javascript复制// 在axios全局配置中
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
6.2 文件上传大小限制
需要同时配置：
- Nginx的client_max_body_size
- Django的DATA_UPLOAD_MAX_MEMORY_SIZE
- Flask的MAX_CONTENT_LENGTH
6.3 ORM查询性能骤降
发现当宠物数据超过1万条时，列表查询变慢。通过以下方法解决：
python复制# 添加数据库索引
class Pet(models.Model):
class Meta:
indexes = [
models.Index(fields=['pet_type']),
models.Index(fields=['created_at'])
]
7. 项目扩展方向
目前平台已经稳定运行半年，后续计划：
- 引入WebSocket实现实时聊天（考虑Django Channels）
- 增加宠物健康监测的IoT数据接入
- 使用Celery实现异步任务处理（如定期健康提醒）
这个项目给我的最大启示是：Django+Vue的组合既能快速开发，又能保证良好的扩展性。特别是Django Admin，节省了我们至少200小时的后台开发时间。对于需要快速验证的商业创意，这绝对是个值得考虑的技术方案。