### 开发基于 Vue 和 Django 的教室预约系统 要开发一个基于 Vue 和 Django 并使用 MySQL 数据库的教室预约系统，以下是具体的实现方法： #### 后端部分 (Django) 1. **环境配置** 需要在服务器环境中安装 Python、Django 及其他必要的依赖项。确保已安装 `mysqlclient` 或者 `pymysql` 来连接 MySQL 数据库[^1]。 2. **创建 Django 项目** 使用命令行工具初始化一个新的 Django 项目： ```bash django-admin startproject classroom_booking_system ``` 3. **设置数据库连接** 修改 `settings.py` 文件中的 DATABASES 设置以支持 MySQL 连接： ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'classroom_db', # 替换为实际数据库名称 'USER': 'root', # 替换为实际用户名 'PASSWORD': '', # 替换为实际密码 'HOST': 'localhost', # 默认主机名 'PORT': '3306' # 默认端口 } } ``` 4. **定义模型** 创建一个名为 `booking` 的应用，并在其中定义教室预订相关的数据表结构： ```python from django.db import models class Classroom(models.Model): name = models.CharField(max_length=100, unique=True) capacity = models.IntegerField() def __str__(self): return self.name class Booking(models.Model): user_name = models.CharField(max_length=100) classroom = models.ForeignKey(Classroom, on_delete=models.CASCADE) booking_date = models.DateField() time_slot = models.TimeField() def __str__(self): return f"{self.user_name} booked {self.classroom} at {self.booking_date}" ``` 5. **迁移数据库** 执行以下命令生成并应用数据库迁移文件： ```bash python manage.py makemigrations python manage.py migrate ``` 6. **REST API 接口** 安装 `djangorestframework` 库并通过序列化器暴露 RESTful API 接口： ```python from rest_framework import serializers, viewsets from .models import Classroom, Booking class ClassroomSerializer(serializers.ModelSerializer): class Meta: model = Classroom fields = '__all__' class BookingSerializer(serializers.ModelSerializer): class Meta: model = Booking fields = '__all__' class ClassroomViewSet(viewsets.ModelViewSet): queryset = Classroom.objects.all() serializer_class = ClassroomSerializer class BookingViewSet(viewsets.ModelViewSet): queryset = Booking.objects.all() serializer_class = BookingSerializer ``` 7. **注册视图集** 将视图集注册到 URL 路由中以便前端调用： ```python from django.urls import path, include from rest_framework.routers import DefaultRouter from .views import ClassroomViewSet, BookingViewSet router = DefaultRouter() router.register(r'classrooms', ClassroomViewSet) router.register(r'bookings', BookingViewSet) urlpatterns = [ path('', include(router.urls)), ] ``` --- #### 前端部分 (Vue.js) 1. **创建 Vue 项目** 使用 Vue CLI 初始化一个新的 Vue 项目： ```bash vue create frontend cd frontend npm install axios --save ``` 2. **编写组件** 编写两个核心组件分别用于显示可用教室列表和提交预定请求： ```html <!-- src/components/ClassroomList.vue --> <template> <div> <h2>Available Classrooms</h2> <ul> <li v-for="classroom in classrooms" :key="classroom.id"> {{ classroom.name }} (Capacity: {{ classroom.capacity }}) </li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { classrooms: [] }; }, mounted() { axios.get('http://<backend-url>/api/classrooms/') .then(response => this.classrooms = response.data); } }; </script> ``` ```html <!-- src/components/CreateBooking.vue --> <template> <form @submit.prevent="createBooking"> <label>User Name:</label><br/> <input type="text" v-model="userName"/><br/><br/> <label>Select Classroom:</label><br/> <select v-model="selectedClassroom"> <option v-for="c in classrooms" :value="c">{{ c.name }}</option> </select><br/><br/> <button>Create Booking</button> </form> </template> <script> import axios from 'axios'; export default { props: ['classrooms'], data() { return { userName: '', selectedClassroom: null, }; }, methods: { async createBooking() { await axios.post('http://<backend-url>/api/bookings/', { user_name: this.userName, classroom: this.selectedClassroom.id, booking_date: new Date().toISOString(), time_slot: new Date().toLocaleTimeString() }); alert('Booking created successfully!'); } } }; </script> ``` 3. **集成前后端** 在 Vue 中引入这两个组件并将它们嵌入主界面布局中。 --- #### 测试与部署 完成以上步骤后，可以通过本地调试或者云托管服务（如 AWS Elastic Beanstalk 或 Heroku）将应用程序上线运行。 ```bash # 启动 Django 后端 python manage.py runserver # 启动 Vue 前端 npm run serve ``` --- ###