温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片1. 项目背景与需求分析随着高校招生规模的扩大传统的人工管理寝室方式已难以满足日常需求。寝室分配、入住登记、退宿办理、卫生检查、报修处理等环节往往依赖纸质表格和口头沟通效率低且容易出错。开发一套基于 PythonDjangoVue 的学生寝室管理系统可以有效提升管理效率实现数据电子化和流程规范化。本系统面向三类用户角色超级管理员负责系统配置、楼栋管理、用户管理和数据统计。宿管员负责寝室分配、入住退宿办理、卫生检查和报修处理。学生可查看寝室信息、提交报修申请、查询卫生评比结果。2. 技术选型与架构设计本系统采用前后端分离架构后端基于 Django REST Framework 提供 API 接口前端使用 Vue 3 Element Plus 构建管理界面数据库选用 MySQL。2.1 技术栈清单层次技术说明后端框架Django 4.x提供 ORM、认证和 Admin 后台API 层Django REST Framework构建 RESTful 接口前端框架Vue 3组合式 API Vite 构建UI 组件Element Plus表格、表单、弹窗等组件数据库MySQL 8.0存储业务数据认证方案JWT基于 djangorestframework-simplejwt2.2 项目目录结构dormitory_management/ ├── backend/ # Django 后端 │ ├── manage.py │ ├── config/ # 项目配置 │ ├── apps/ │ │ ├── users/ # 用户模块 │ │ ├── dormitory/ # 寝室模块 │ │ └── repair/ # 报修模块 │ └── requirements.txt └── frontend/ # Vue 前端 ├── package.json ├── vite.config.js └── src/ ├── api/ # 接口封装 ├── router/ # 路由配置 ├── views/ # 页面组件 └── store/ # 状态管理3. 数据库设计系统核心数据表包括用户表、楼栋表、寝室表、入住记录表、报修单表和卫生检查表。下面给出主要表结构设计。3.1 用户表from django.contrib.auth.models import AbstractUser class User(AbstractUser): ROLE_CHOICES ( (admin, 超级管理员), (manager, 宿管员), (student, 学生), ) role models.CharField(max_length10, choicesROLE_CHOICES, defaultstudent) student_no models.CharField(max_length20, blankTrue, nullTrue) phone models.CharField(max_length11, blankTrue) class Meta: db_table sys_user3.2 寝室表class Room(models.Model): building models.CharField(max_length20, verbose_name楼栋) floor models.IntegerField(verbose_name楼层) room_no models.CharField(max_length10, verbose_name房间号) capacity models.IntegerField(default4, verbose_name容纳人数) current_count models.IntegerField(default0, verbose_name当前人数) is_full models.BooleanField(defaultFalse, verbose_name是否满员) class Meta: db_table dorm_room unique_together (building, floor, room_no) def __str__(self): return f{self.building}-{self.room_no}4. 后端接口开发后端采用 Django REST Framework 编写接口下面以寝室列表和入住登记为例说明核心实现。4.1 寝室列表接口from rest_framework import viewsets from rest_framework.permissions import IsAuthenticated from .models import Room from .serializers import RoomSerializer class RoomViewSet(viewsets.ModelViewSet): queryset Room.objects.all() serializer_class RoomSerializer permission_classes [IsAuthenticated] def get_queryset(self): queryset super().get_queryset() building self.request.query_params.get(building) if building: queryset queryset.filter(buildingbuilding) return queryset4.2 入住登记接口from rest_framework.decorators import action from rest_framework.response import Response class CheckInViewSet(viewsets.ViewSet): action(detailFalse, methods[post]) def check_in(self, request): student_id request.data.get(student_id) room_id request.data.get(room_id) room Room.objects.select_for_update().get(idroom_id) if room.current_count room.capacity: return Response({code: 400, msg: 寝室已满员}) room.current_count 1 room.is_full room.current_count room.capacity room.save() CheckInRecord.objects.create( student_idstudent_id, roomroom, check_in_datedate.today() ) return Response({code: 200, msg: 入住成功})5. 前端页面开发前端使用 Vue 3 组合式 API 开发配合 Element Plus 组件库快速搭建管理界面。下面给出核心页面示例。5.1 寝室管理页面template el-card el-table :dataroomList border stripe el-table-column propbuilding label楼栋 / el-table-column proproom_no label房间号 / el-table-column propcapacity label容纳人数 / el-table-column propcurrent_count label当前人数 / el-table-column label状态 template #defaultscope el-tag :typescope.row.is_full ? danger : success {{ scope.row.is_full ? 已满 : 有空位 }} /el-tag /template /el-table-column /el-table /el-card /template script setup import { ref, onMounted } from vue import { getRoomList } from /api/room const roomList ref([]) onMounted(async () { const res await getRoomList() roomList.value res.data }) /script5.2 报修申请页面template el-form :modelform label-width80px el-form-item label报修内容 el-input v-modelform.content typetextarea / /el-form-item el-form-item el-button typeprimary clicksubmit提交报修/el-button /el-form-item /el-form /template script setup import { reactive } from vue import { submitRepair } from /api/repair import { ElMessage } from element-plus const form reactive({ content: }) async function submit() { await submitRepair(form) ElMessage.success(报修提交成功) form.content } /script6. 系统部署与运行项目采用前后端分离部署后端运行在 Django 开发服务器或 Gunicorn前端通过 Nginx 托管静态文件并代理 API 请求。6.1 后端启动cd backend pip install -r requirements.txt python manage.py migrate python manage.py createsuperuser python manage.py runserver 0.0.0.0:80006.2 前端启动cd frontend npm install npm run dev6.3 Nginx 反向代理配置server { listen 80; server_name dorm.example.com; location / { root /var/www/frontend/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }7. 总结与扩展方向本文从需求分析、技术选型、数据库设计、后端接口、前端页面到部署运行完整介绍了基于 PythonDjangoVue 的学生寝室管理系统的开发过程。该系统实现了寝室分配、入住退宿、报修管理和卫生检查等核心功能能够有效提升高校寝室管理的信息化水平。后续可以从以下方向继续扩展接入人脸识别或校园一卡通实现无感门禁和考勤。增加数据可视化大屏展示各楼栋入住率、报修趋势等统计信息。引入消息推送机制报修进度和卫生评比结果实时通知学生。支持多校区部署通过配置中心管理不同校区的楼栋数据。