基于 Django + Vue 的宠物服务管理系统

基于 Django + Vue 的宠物服务管理系统

宠物服务管理系统是一个为宠物主人和宠物服务提供商设计的平台，旨在提供宠物护理、医疗、寄养、美容等服务的在线管理和预约功能。系统采用 Django 作为后端框架，Vue.js 作为前端框架，实现前后端分离的开发模式。

1. 系统介绍

• 目标：为宠物主人提供便捷的宠物服务管理功能，为服务提供商提供高效的业务管理工具。
• 核心功能：
  • 用户注册与登录
  • 宠物信息管理
  • 服务预约与管理
  • 订单支付与评价
  • 服务提供商管理
• 技术栈：
  • 后端：Django + Django REST Framework
  • 前端：Vue.js + Vuex + Vue Router
  • 数据库：PostgreSQL 或 MySQL
  • 部署：Docker + Nginx

2. 应用场景

1. 宠物主人：
   • 注册并管理宠物信息。
   • 预约宠物护理、医疗、寄养、美容等服务。
   • 查看订单状态和支付费用。
   • 对服务进行评价。
2. 服务提供商：
   • 注册并管理服务信息。
   • 接收和处理预约订单。
   • 管理员工和资源。
   • 查看客户评价和反馈。

3. 原理解释

系统架构

• 前端：Vue.js 负责用户界面和交互，通过 API 与后端通信。
• 后端：Django 负责业务逻辑、数据存储和 API 提供。
• 数据库：存储用户、宠物、服务、订单等数据。

前后端交互流程

1. 用户在前端进行操作（如登录、预约）。
2. 前端通过 API 请求后端。
3. 后端处理请求并返回数据。
4. 前端根据返回数据更新界面。

算法原理流程图

用户操作 -> 前端请求 -> 后端处理 -> 数据库操作 -> 返回数据 -> 前端更新

4. 代码实现

场景 1：用户注册与登录

后端（Django）：

# models.py
from django.contrib.auth.models import AbstractUser

class User(AbstractUser):
    is_provider = models.BooleanField(default=False)

# serializers.py
from rest_framework import serializers
from .models import User

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['username', 'password', 'email', 'is_provider']
        extra_kwargs = {'password': {'write_only': True}}

    def create(self, validated_data):
        user = User.objects.create_user(**validated_data)
        return user

# views.py
from rest_framework import generics
from .models import User
from .serializers import UserSerializer

class UserCreateView(generics.CreateAPIView):
    queryset = User.objects.all()
    serializer_class = UserSerializer

前端（Vue.js）：

<template>
  <div>
    <input v-model="username" placeholder="Username">
    <input v-model="password" type="password" placeholder="Password">
    <button @click="register">Register</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async register() {
      const response = await this.$axios.post('/api/register/', {
        username: this.username,
        password: this.password
      });
      console.log(response.data);
    }
  }
};
</script>

场景 2：宠物信息管理

后端（Django）：

# models.py
class Pet(models.Model):
    owner = models.ForeignKey(User, on_delete=models.CASCADE)
    name = models.CharField(max_length=100)
    species = models.CharField(max_length=50)
    age = models.IntegerField()

# serializers.py
class PetSerializer(serializers.ModelSerializer):
    class Meta:
        model = Pet
        fields = ['id', 'name', 'species', 'age']

# views.py
class PetListView(generics.ListCreateAPIView):
    queryset = Pet.objects.all()
    serializer_class = PetSerializer

    def perform_create(self, serializer):
        serializer.save(owner=self.request.user)

前端（Vue.js）：

<template>
  <div>
    <input v-model="petName" placeholder="Pet Name">
    <input v-model="species" placeholder="Species">
    <input v-model="age" placeholder="Age">
    <button @click="addPet">Add Pet</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      petName: '',
      species: '',
      age: ''
    };
  },
  methods: {
    async addPet() {
      const response = await this.$axios.post('/api/pets/', {
        name: this.petName,
        species: this.species,
        age: this.age
      });
      console.log(response.data);
    }
  }
};
</script>

场景 3：服务预约与管理

后端（Django）：

# models.py
class Service(models.Model):
    provider = models.ForeignKey(User, on_delete=models.CASCADE)
    name = models.CharField(max_length=100)
    description = models.TextField()
    price = models.DecimalField(max_digits=10, decimal_places=2)

class Appointment(models.Model):
    pet = models.ForeignKey(Pet, on_delete=models.CASCADE)
    service = models.ForeignKey(Service, on_delete=models.CASCADE)
    date = models.DateTimeField()
    status = models.CharField(max_length=50, default='Pending')

# serializers.py
class ServiceSerializer(serializers.ModelSerializer):
    class Meta:
        model = Service
        fields = ['id', 'name', 'description', 'price']

class AppointmentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Appointment
        fields = ['id', 'pet', 'service', 'date', 'status']

# views.py
class ServiceListView(generics.ListCreateAPIView):
    queryset = Service.objects.all()
    serializer_class = ServiceSerializer

class AppointmentCreateView(generics.CreateAPIView):
    queryset = Appointment.objects.all()
    serializer_class = AppointmentSerializer

前端（Vue.js）：

<template>
  <div>
    <select v-model="selectedPet">
      <option v-for="pet in pets" :key="pet.id" :value="pet.id">{{ pet.name }}</option>
    </select>
    <select v-model="selectedService">
      <option v-for="service in services" :key="service.id" :value="service.id">{{ service.name }}</option>
    </select>
    <input v-model="date" type="datetime-local">
    <button @click="bookAppointment">Book Appointment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pets: [],
      services: [],
      selectedPet: null,
      selectedService: null,
      date: ''
    };
  },
  async created() {
    const petResponse = await this.$axios.get('/api/pets/');
    this.pets = petResponse.data;
    const serviceResponse = await this.$axios.get('/api/services/');
    this.services = serviceResponse.data;
  },
  methods: {
    async bookAppointment() {
      const response = await this.$axios.post('/api/appointments/', {
        pet: this.selectedPet,
        service: this.selectedService,
        date: this.date
      });
      console.log(response.data);
    }
  }
};
</script>

5. 测试步骤

1. 启动 Django 后端服务器。
2. 启动 Vue.js 前端开发服务器。
3. 在前端界面进行用户注册、登录、宠物信息管理、服务预约等操作。
4. 检查后端数据库是否存储了正确的数据。

6. 部署场景

• 本地开发：使用 Django 开发服务器和 Vue.js 开发服务器。
• 生产环境：使用 Docker 容器化部署，Nginx 作为反向代理。

7. 材料链接

• Django 官方文档
• Vue.js 官方文档
• Django REST Framework 官方文档

8. 总结

• 基于 Django 和 Vue.js 的宠物服务管理系统实现了前后端分离的开发模式。
• 系统提供了用户注册、宠物信息管理、服务预约等核心功能。
• 通过 Docker 和 Nginx 可以实现高效的生产环境部署。

9. 未来展望

• 移动端支持：开发移动端应用，提供更便捷的服务。
• AI 推荐：结合 AI 技术，为用户推荐个性化的宠物服务。
• 社交功能：增加宠物主人之间的社交功能，分享宠物护理经验。

通过掌握 Django 和 Vue.js 技术，你可以在宠物服务领域开发出具有实际应用价值的系统。