基于Django+Vue的高校学生请销假系统开发实践

1. 项目背景与核心价值

学生请销假系统是高校信息化建设中的基础模块，但传统纸质审批流程存在效率低下、数据难追溯等问题。我们团队基于Python+Django和Vue.js开发了一套前后端分离的解决方案，实测将审批周期从平均3天缩短至2小时内完成。

这个系统的独特之处在于：

• 采用Django REST framework构建高可用的API服务层
• 利用Vue的响应式特性实现审批状态实时推送
• 通过PyCharm的Django模板调试功能加速开发
• 整合Flask作为微服务处理特殊审批场景

2. 技术架构设计

2.1 前后端分离方案

mermaid复制graph TD
    A[Vue前端] -->|Axios| B[Django REST]
    B --> C[PostgreSQL]
    D[Flask微服务] --> C
    B -->|Celery| E[Redis]

2.2 数据库模型设计

请假单核心模型字段包括：

python复制class LeaveRequest(models.Model):
    STUDENT_TYPES = (
        ('本科', '本科'),
        ('硕士', '硕士'),
        ('博士', '博士')
    )
    student = models.ForeignKey(User, on_delete=models.CASCADE)
    leave_type = models.CharField(max_length=20)
    start_time = models.DateTimeField()
    end_time = models.DateTimeField()
    status = models.CharField(max_length=10, default='pending')
    approver_comments = models.TextField(blank=True)

3. 关键功能实现

3.1 请假流程状态机

我们使用django-fsm实现审批状态管理：

python复制@transition(field='status', source='pending', target='approved')
def approve(self, approver):
    self.approver = approver
    self.save()

@transition(field='status', source='pending', target='rejected')
def reject(self, approver, comments):
    self.approver = approver
    self.approver_comments = comments
    self.save()

3.2 Vue动态表单生成

根据请假类型动态渲染表单组件：

javascript复制<template>
  <div v-if="formConfig[leaveType]">
    <component 
      v-for="(field, index) in formConfig[leaveType]"
      :key="index"
      :is="field.component"
      v-model="formData[field.model]"
      v-bind="field.props"
    />
  </div>
</template>

4. 开发环境配置

4.1 PyCharm专业版配置

1. 安装Python/Django插件
2. 配置Django模板语言支持
3. 启用JavaScript调试器
4. 设置Vue.js语法高亮

4.2 依赖管理

推荐使用poetry管理Python依赖：

toml复制[tool.poetry.dependencies]
python = "^3.8"
django = "^3.2"
djangorestframework = "^3.12"
celery = "^5.1"

5. 性能优化实践

5.1 数据库查询优化

使用django-debug-toolbar发现N+1查询问题：

python复制# Bad
requests = LeaveRequest.objects.all()
for r in requests:
    print(r.student.name)  # 每次循环都查询数据库

# Good
requests = LeaveRequest.objects.select_related('student').all()

5.2 Vue组件懒加载

javascript复制const LeaveHistory = () => import('./components/LeaveHistory.vue')

6. 部署方案

6.1 生产环境架构

mermaid复制graph LR
    A[Nginx] --> B[Django Gunicorn]
    A --> C[Vue静态文件]
    B --> D[PostgreSQL]
    B --> E[Redis]

6.2 Docker配置示例

dockerfile复制FROM python:3.8-slim
RUN pip install gunicorn
COPY . /app
WORKDIR /app
RUN pip install -r requirements.txt
EXPOSE 8000
CMD ["gunicorn", "core.wsgi", "-b :8000"]

7. 踩坑记录

1. 跨域问题：开发阶段需配置django-cors-headers
2. 时区处理：统一使用UTC时间存储，前端展示时转换
3. 文件上传：Vue前端需处理multipart/form-data格式
4. 权限控制：结合Django的permission_classes和Vue路由守卫

重要提示：Django的DEBUG模式在生产环境必须关闭，我们曾因此遭遇过SQL注入攻击。

8. 扩展方向

1. 接入微信小程序审批通知
2. 增加请假数据可视化分析
3. 实现智能审批规则引擎
4. 开发教师端的批量审批功能

这个项目让我们深刻体会到：技术选型需要平衡开发效率与系统扩展性。Django的ORM极大提升了开发速度，而Vue的组件化思想则让前端维护变得轻松。对于高校信息化这类需求变化快的场景，这种技术组合特别适合。