Python+Vue全栈开发学生请销假系统实战-代码聚汇网

Python+Vue全栈开发学生请销假系统实战

2021在职mba·2026-07-31·阅读 44 GEO检测（免费）

PythonVue.js全栈开发

|难度：普通|阅读约 15 分钟

1. 项目概述：Python+Vue学生请销假系统设计理念

这个全栈项目采用Python作为后端核心语言，搭配Vue.js前端框架，构建了一套符合现代高校管理需求的学生请假系统。我在实际开发中发现，传统纸质请假流程存在审批效率低、记录查询困难、数据统计缺失等痛点，而市面上的通用OA系统又往往无法满足教育场景的特殊需求。

系统采用前后端分离架构，后端提供RESTful API接口，前端通过axios进行数据交互。这种架构选择主要基于三点考虑：首先，分离架构便于团队分工协作；其次，API接口使系统具备更好的扩展性；最后，Vue的响应式特性能够提供更流畅的用户体验。实测下来，这种技术组合在开发效率和运行性能上达到了很好的平衡。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术栈选型深度解析

2.1 后端框架抉择：Django vs Flask

在Python后端框架选择上，我对比了Django和Flask的适用场景：

特性	Django优势	Flask优势	本项目选择
开发速度	内置Admin、ORM等全套方案	灵活轻量	Django（管理需求强）
数据库支持	完善ORM支持多数据库	需搭配SQLAlchemy	Django（数据复杂）
扩展性	功能完善但略显笨重	插件式扩展更灵活	混合使用
学习曲线	概念较多入门稍难	简单易上手	-

最终采用Django作为主框架，但在部分微服务模块使用Flask实现。比如请假审批流使用Django的Model-Form-View体系快速搭建，而实时消息通知则用Flask+SocketIO实现更轻量的解决方案。

2.2 前端技术栈配置要点

Vue 3的组合式API相比选项式API更适合复杂交互场景。在请假表单页面，我采用了以下关键技术点：

javascript复制// 请假类型动态表单示例
const formState = reactive({
  leaveType: '病假',
  medicalProof: computed(() => formState.leaveType === '病假'),
  startDate: '',
  endDate: '',
  duration: computed(() => calculateDuration())
})

function calculateDuration() {
  // 计算请假天数逻辑
}

特别要注意的是：

使用Vuex/Pinia进行状态管理时，避免直接修改store中的状态
路由懒加载能显著提升首屏速度
表单验证推荐使用VeeValidate+自定义规则

3. 核心功能模块实现

3.1 多级审批工作流设计

系统支持辅导员→院系领导→校领导三级审批流程，通过Django的有限状态机实现：

python复制# models.py
class LeaveRequest(models.Model):
    STATES = (
        ('draft', '草稿'),
        ('submitted', '已提交'),
        ('approved', '辅导员通过'),
        ('rejected', '已拒绝')
    )
    state = FSMField(default='draft', choices=STATES)
    
    @transition(field=state, source='draft', target='submitted')
    def submit(self):
        pass

    @transition(field=state, source='submitted', target='approved')
    def approve(self):
        pass

关键实现细节：

使用django-fsm实现状态管理
每个状态变更触发信号通知相关人员
审批历史自动记录到审计表

3.2 实时消息通知方案

结合WebSocket和轮询两种方式实现可靠通知：

重要状态变更（如审批通过）使用SocketIO实时推送
普通通知采用前端每5分钟轮询API
移动端适配使用Firebase Cloud Messaging

python复制# consumers.py
class NotificationConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        await self.accept()
        await self.channel_layer.group_add(
            f"user_{self.scope['user'].id}",
            self.channel_name
        )

4. 开发环境配置指南

4.1 PyCharm专业版高效配置

启用Django支持：File → Settings → Languages & Frameworks → Django
配置Vue.js插件：安装Vue.js插件并配置Node interpreter
数据库工具：配置PostgreSQL数据源并关联Django模型
推荐开启Live Template功能快速生成DRF序列化器

避坑提示：社区版PyCharm不支持Django模板调试，建议使用专业版

4.2 前后端联调技巧

使用vue.config.js配置代理解决跨域：

javascript复制devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true
    }
  }
}

Django CORS配置：

python复制INSTALLED_APPS += ['corsheaders']
MIDDLEWARE.insert(2, 'corsheaders.middleware.CorsMiddleware')
CORS_ORIGIN_WHITELIST = ['http://localhost:8080']

5. 典型问题排查实录

5.1 数据库连接池耗尽问题

现象：高并发时出现"too many connections"错误

解决方案：

使用django-db-geventpool优化连接池
配置PostgreSQL最大连接数：

sql复制ALTER SYSTEM SET max_connections = 200;

5.2 Vue打包后静态资源404

根本原因：Django的static路径与Vue的assets路径冲突

修复步骤：

修改vue.config.js输出路径：

javascript复制publicPath: process.env.NODE_ENV === 'production'
  ? '/static/frontend/'
  : '/'

配置Django模板：

html复制{% load static %}
<script src="{% static 'frontend/js/chunk-vendors.js' %}"></script>

6. 性能优化实践

6.1 数据库查询优化

使用select_related/prefetch_related减少查询次数：

python复制LeaveRequest.objects.select_related(
    'student__class'
).prefetch_related(
    'approvals__teacher'
)

添加关键字段索引：

python复制class Meta:
    indexes = [
        models.Index(fields=['student', 'status']),
    ]

6.2 前端懒加载策略

路由级代码分割：

javascript复制const Approval = () => import('./views/Approval.vue')

图片懒加载：

html复制<img v-lazy="require('@/assets/urgent.png')" alt="紧急标识">

7. 安全防护措施

7.1 防SQL注入与XSS

Django ORM已提供SQL注入防护
前端使用DOMPurify净化HTML输入：

javascript复制import DOMPurify from 'dompurify'
content: DOMPurify.sanitize(unsafeHtml)

7.2 权限控制方案

Django后端使用permission_classes：

python复制@permission_classes([IsAuthenticated, IsApprover])
def approve(request):
    pass

Vue前端动态路由：

javascript复制{
  path: '/admin',
  component: AdminPanel,
  meta: { requiresAuth: true, roles: ['admin'] }
}

8. 项目部署实践

8.1 生产环境部署架构

推荐方案：

前端：Nginx + Vue静态资源
后端：Gunicorn + Django
数据库：PostgreSQL主从
缓存：Redis集群

8.2 Docker化部署示例

dockerfile复制# backend/Dockerfile
FROM python:3.9
RUN pip install gunicorn
COPY requirements.txt .
RUN pip install -r requirements.txt
CMD ["gunicorn", "core.wsgi:application", "--bind", "0.0.0.0:8000"]

部署注意事项：

使用.env文件管理敏感配置
设置适当的gunicorn worker数量（通常2*CPU+1）
配置日志轮转防止磁盘占满

9. 扩展功能设计思路

9.1 微信小程序接入方案

使用uni-app跨平台框架
后端新增小程序认证接口：

python复制class WechatAuth(APIView):
    def post(self, request):
        code = request.data.get('code')
        # 调用微信API获取openid

9.2 大数据分析模块

基于请假数据构建预测模型：

使用pandas进行数据清洗
构建请假趋势预测模型：

python复制from statsmodels.tsa.arima.model import ARIMA
model = ARIMA(data, order=(1,1,1))
results = model.fit()

这个项目从技术选型到最终部署，每个环节都有值得深入探讨的细节。我在实际开发中最深的体会是：文档和测试代码的重要性往往被低估。建议在项目初期就建立完善的API文档（如Swagger）和单元测试体系，这会为后续迭代节省大量时间