Flask+Vue.js学生选课成绩管理系统开发实践-代码聚汇网

Flask+Vue.js学生选课成绩管理系统开发实践

随缘惜情

1. 项目概述

这个基于Flask和Vue.js的学生选课成绩补考信息管理系统，是我在高校信息化建设过程中开发的一个实用项目。系统采用前后端分离架构，后端使用Python的Flask框架提供RESTful API接口，前端采用Vue.js构建单页面应用(SPA)，数据库选用MySQL配合SQLAlchemy ORM进行数据管理。

系统主要解决高校教学管理中的三个核心问题：学生选课流程管理、成绩录入与统计分析、补考名单自动生成与管理。相比传统教务系统，这个方案具有开发周期短、维护成本低、扩展性强等特点，特别适合中小型院校或作为现有系统的补充模块。

2. 系统架构设计

2.1 技术选型分析

选择Flask+Vue.js的技术组合主要基于以下考虑：

开发效率：Flask的轻量级特性可以快速搭建API服务，Vue.js的组件化开发模式能显著提升前端开发效率
学习曲线：Python和JavaScript都是高校教学常用语言，便于团队协作和后续维护
扩展性：前后端完全解耦，未来可以独立扩展任一端功能
社区支持：两者都有丰富的插件生态，如Flask-SQLAlchemy、Vuex等

2.2 架构示意图

code复制[前端Vue.js] ← HTTP → [Flask API] ← ORM → [MySQL]
       ↑                    ↑
    Vue Router          Flask-RESTful
    Vuex状态管理        JWT认证
    Axios HTTP客户端    APScheduler

2.3 模块划分

系统分为三大核心模块：

选课管理模块：处理选课申请、冲突检测、选课结果查询
成绩管理模块：成绩录入、修改、统计分析和报表生成
补考管理模块：补考名单自动生成、补考安排和结果录入

3. 后端实现详解

3.1 数据库设计

3.1.1 核心表结构

python复制class Student(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80), nullable=False)
    student_id = db.Column(db.String(20), unique=True, nullable=False)
    password = db.Column(db.String(120))  # 存储加密后的密码
    department = db.Column(db.String(50))  # 所属院系
    grade = db.Column(db.String(10))      # 年级
    
class Course(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    code = db.Column(db.String(20), unique=True)  # 课程代码
    name = db.Column(db.String(100), nullable=False)
    credit = db.Column(db.Float)
    time_slot = db.Column(db.String(50))  # 上课时间，如"周一1-2节"
    capacity = db.Column(db.Integer)      # 课程容量
    teacher_id = db.Column(db.Integer, db.ForeignKey('teacher.id'))
    
class Grade(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    student_id = db.Column(db.Integer, db.ForeignKey('student.id'))
    course_id = db.Column(db.Integer, db.ForeignKey('course.id'))
    score = db.Column(db.Float)
    is_retake = db.Column(db.Boolean, default=False)
    semester = db.Column(db.String(20))   # 学期标识

3.1.2 关系设计技巧

使用db.relationship()建立模型间关联：

python复制class Student(db.Model):
    grades = db.relationship('Grade', backref='student', lazy='dynamic')

class Course(db.Model):
    grades = db.relationship('Grade', backref='course', lazy='dynamic')

为常用查询添加索引：

python复制class Grade(db.Model):
    __table_args__ = (
        db.Index('idx_student_course', 'student_id', 'course_id', unique=True),
    )

3.2 API接口实现

3.2.1 RESTful路由设计

python复制from flask_restful import Api, Resource

api = Api(app)

class GradeResource(Resource):
    def get(self, student_id):
        # 获取学生成绩
        grades = Grade.query.filter_by(student_id=student_id).all()
        return {'data': [g.to_dict() for g in grades]}
    
    def post(self):
        # 录入成绩
        data = request.get_json()
        grade = Grade(**data)
        db.session.add(grade)
        db.session.commit()
        return {'message': '成绩录入成功'}

api.add_resource(GradeResource, '/api/grades/<student_id>')

3.2.2 关键业务逻辑实现

选课冲突检测增强版：

python复制def check_schedule_conflict(student_id, new_course_id):
    # 获取学生已选课程
    selected = Grade.query.filter_by(
        student_id=student_id,
        semester=get_current_semester()
    ).join(Course).with_entities(Course.time_slot).all()
    
    # 获取新课程时间
    new_course = Course.query.get(new_course_id)
    
    # 时间冲突检测
    for slot in [s[0] for s in selected]:
        if has_time_overlap(slot, new_course.time_slot):
            return True
    
    # 容量检查
    if new_course.capacity <= Grade.query.filter_by(
        course_id=new_course_id,
        semester=get_current_semester()
    ).count():
        return '课程已满'
    
    return False

补考名单生成优化：

python复制@app.route('/api/retake_list', methods=['POST'])
@jwt_required()
def generate_retake_list():
    if not current_user.is_admin:
        return {'error': '无权限'}, 403
        
    threshold = request.json.get('threshold', 60)
    semester = request.json.get('semester', get_current_semester())
    
    # 查询需要补考的学生
    retakes = db.session.query(
        Grade.student_id,
        Student.name,
        Course.name.label('course_name'),
        Grade.score
    ).join(Student).join(Course).filter(
        Grade.score < threshold,
        Grade.semester == semester,
        Grade.is_retake == False
    ).all()
    
    # 转换为字典列表
    return jsonify([{
        'student_id': r.student_id,
        'student_name': r.name,
        'course_name': r.course_name,
        'score': r.score
    } for r in retakes])

3.3 安全与性能优化

3.3.1 JWT认证实现

python复制from flask_jwt_extended import JWTManager, create_access_token

app.config['JWT_SECRET_KEY'] = 'your-secret-key'
jwt = JWTManager(app)

@app.route('/api/login', methods=['POST'])
def login():
    username = request.json.get('username')
    password = request.json.get('password')
    
    user = Student.query.filter_by(student_id=username).first()
    if not user or not check_password(user.password, password):
        return {'error': '用户名或密码错误'}, 401
    
    # 根据角色生成不同权限的token
    access_token = create_access_token(
        identity={
            'id': user.id,
            'role': 'student'  # 实际应从用户表获取
        }
    )
    return {'access_token': access_token}

3.3.2 缓存策略

使用Flask-Caching提升性能：

python复制from flask_caching import Cache

cache = Cache(config={'CACHE_TYPE': 'SimpleCache'})
cache.init_app(app)

@app.route('/api/courses')
@cache.cached(timeout=300)  # 缓存5分钟
def get_courses():
    courses = Course.query.all()
    return jsonify([c.to_dict() for c in courses])

4. 前端实现详解

4.1 Vue项目结构优化

code复制src/
├── api/                  # API请求封装
│   ├── course.js
│   ├── grade.js
│   └── auth.js
├── components/
│   ├── course/
│   │   ├── CourseSelection.vue
│   │   └── CourseList.vue
│   ├── grade/
│   │   ├── GradeInput.vue   # 教师用成绩录入
│   │   └── GradeQuery.vue   # 学生成绩查询
│   └── retake/
│       ├── RetakeList.vue
│       └── RetakeApply.vue
├── store/
│   ├── modules/
│   │   ├── user.js       # 用户状态
│   │   ├── course.js
│   │   └── grade.js
│   └── index.js          # Vuex主文件
├── router/
│   ├── routes.js         # 路由配置
│   └── index.js
└── views/
    ├── StudentView.vue   # 学生主界面
    ├── TeacherView.vue   # 教师主界面
    └── AdminView.vue     # 管理员界面

4.2 核心组件实现

4.2.1 选课组件(CourseSelection.vue)

vue复制<template>
  <div>
    <el-table :data="availableCourses" @row-click="handleSelect">
      <el-table-column prop="code" label="课程代码"/>
      <el-table-column prop="name" label="课程名称"/>
      <el-table-column prop="credit" label="学分"/>
      <el-table-column prop="time_slot" label="上课时间"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button 
            size="small" 
            :disabled="scope.row.capacity <= scope.row.selected"
            @click="handleSelect(scope.row)">
            选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('course', ['availableCourses'])
  },
  methods: {
    async handleSelect(course) {
      try {
        const res = await this.$api.course.selectCourse({
          studentId: this.$store.state.user.id,
          courseId: course.id
        })
        this.$message.success('选课成功')
        this.$store.dispatch('course/fetchSelectedCourses')
      } catch (err) {
        this.$message.error(err.response?.data?.message || '选课失败')
      }
    }
  },
  created() {
    this.$store.dispatch('course/fetchAvailableCourses')
  }
}
</script>

4.2.2 成绩录入组件(GradeInput.vue)

vue复制<template>
  <div>
    <el-select v-model="selectedCourse" placeholder="选择课程">
      <el-option
        v-for="course in taughtCourses"
        :key="course.id"
        :label="course.name"
        :value="course.id">
      </el-option>
    </el-select>
    
    <el-table :data="students" v-loading="loading">
      <el-table-column prop="student_id" label="学号"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column label="成绩">
        <template #default="scope">
          <el-input-number 
            v-model="scope.row.score" 
            :min="0" :max="100" 
            :precision="1"/>
        </template>
      </el-table-column>
    </el-table>
    
    <el-button type="primary" @click="submitGrades">提交成绩</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCourse: null,
      students: [],
      loading: false
    }
  },
  computed: {
    taughtCourses() {
      return this.$store.state.course.taughtCourses
    }
  },
  watch: {
    selectedCourse(val) {
      if (val) this.fetchStudents(val)
    }
  },
  methods: {
    async fetchStudents(courseId) {
      this.loading = true
      try {
        const res = await this.$api.grade.getStudentsByCourse(courseId)
        this.students = res.data.map(s => ({
          ...s,
          score: s.score || 0
        }))
      } finally {
        this.loading = false
      }
    },
    async submitGrades() {
      try {
        await this.$api.grade.bulkUpdate({
          courseId: this.selectedCourse,
          grades: this.students.map(s => ({
            studentId: s.id,
            score: s.score
          }))
        })
        this.$message.success('成绩提交成功')
      } catch (err) {
        this.$message.error('成绩提交失败')
      }
    }
  },
  created() {
    this.$store.dispatch('course/fetchTaughtCourses')
  }
}
</script>

4.3 状态管理设计

使用Vuex进行集中状态管理：

javascript复制// store/modules/grade.js
export default {
  namespaced: true,
  state: {
    studentGrades: [],
    courseGrades: []
  },
  mutations: {
    SET_STUDENT_GRADES(state, grades) {
      state.studentGrades = grades
    },
    SET_COURSE_GRADES(state, grades) {
      state.courseGrades = grades
    }
  },
  actions: {
    async fetchStudentGrades({ commit }, studentId) {
      const res = await api.getGradesByStudent(studentId)
      commit('SET_STUDENT_GRADES', res.data)
    },
    async fetchCourseGrades({ commit }, courseId) {
      const res = await api.getGradesByCourse(courseId)
      commit('SET_COURSE_GRADES', res.data)
    }
  },
  getters: {
    failedGrades: state => {
      return state.studentGrades.filter(g => g.score < 60)
    }
  }
}

5. 系统部署方案

5.1 开发环境配置

后端环境：

bash复制# 创建虚拟环境
python -m venv venv
source venv/bin/activate  # Linux/Mac
venv\Scripts\activate     # Windows

# 安装依赖
pip install flask flask-sqlalchemy flask-migrate flask-jwt-extended flask-caching

# 数据库迁移
flask db init
flask db migrate -m "initial migration"
flask db upgrade

前端环境：

bash复制# 安装Vue CLI
npm install -g @vue/cli

# 创建项目
vue create student-system-frontend

# 添加必要依赖
npm install axios vuex vue-router element-ui echarts

5.2 生产环境部署

后端部署(Nginx + Gunicorn)：

安装Gunicorn：
```
bash复制pip install gunicorn
```

创建Gunicorn启动文件gunicorn_conf.py：

python复制bind = "0.0.0.0:5000"
workers = 4
worker_class = "gevent"

Nginx配置示例：

nginx复制server {
    listen 80;
    server_name yourdomain.com;
    
    location /api {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    location / {
        root /path/to/vue/dist;
        try_files $uri $uri/ /index.html;
    }
}

前端部署：

构建生产版本：
```
bash复制npm run build
```
将dist目录内容部署到Nginx或CDN

5.3 数据库备份策略

设置定期备份脚本backup.sh：

bash复制#!/bin/bash
DATE=$(date +%Y%m%d)
BACKUP_DIR="/path/to/backups"
DB_USER="your_db_user"
DB_NAME="student_system"

mysqldump -u $DB_USER -p $DB_NAME > $BACKUP_DIR/$DB_NAME-$DATE.sql
find $BACKUP_DIR -type f -mtime +7 -exec rm {} \;  # 删除7天前的备份

添加到crontab每天凌晨执行：

bash复制0 3 * * * /path/to/backup.sh

6. 开发经验与优化建议

6.1 踩坑实录

跨域问题：开发时前后端分离导致的CORS问题

解决方案：Flask配置CORS

python复制from flask_cors import CORS
CORS(app, resources={r"/api/*": {"origins": "*"}})

JWT过期处理：前端需要处理token过期自动刷新

实现方案：使用axios拦截器

javascript复制axios.interceptors.response.use(response => response, error => {
  if (error.response.status === 401) {
    return refreshToken().then(() => {
      return axios(error.config)
    })
  }
  return Promise.reject(error)
})

并发选课冲突：多个学生同时选课可能导致超选

解决方案：数据库事务+乐观锁

python复制def select_course(student_id, course_id):
    try:
        db.session.begin()
        
        # 检查容量
        course = Course.query.with_for_update().get(course_id)
        if course.capacity <= Grade.query.filter_by(course_id=course_id).count():
            raise Exception('课程已满')
            
        # 创建选课记录
        grade = Grade(student_id=student_id, course_id=course_id)
        db.session.add(grade)
        db.session.commit()
        
        return True
    except:
        db.session.rollback()
        return False

6.2 性能优化技巧

数据库查询优化：
- 使用joinedload避免N+1查询问题
```
python复制grades = Grade.query.options(db.joinedload(Grade.student)).all()
```
- 添加适当的数据库索引

前端懒加载：

javascript复制// 路由配置中使用懒加载
const GradeQuery = () => import('./views/GradeQuery.vue')

API响应压缩：

python复制from flask_compress import Compress
Compress(app)

6.3 扩展建议

微服务化改造：将选课、成绩、补考拆分为独立服务
引入Redis：缓存热点数据如课程列表、学生课表
添加消息队列：使用Celery处理耗时操作如成绩统计分析
数据可视化增强：集成更多ECharts图表类型
移动端适配：开发配套微信小程序或H5版本

7. 测试方案设计

7.1 单元测试示例

后端测试(使用pytest)：

python复制def test_grade_api(client, db_session):
    # 准备测试数据
    student = Student(name='张三', student_id='2023001')
    course = Course(name='Python编程', credit=3)
    db_session.add_all([student, course])
    db_session.commit()
    
    # 测试成绩录入
    resp = client.post('/api/grades', json={
        'student_id': student.id,
        'course_id': course.id,
        'score': 85.5
    })
    assert resp.status_code == 200
    
    # 测试成绩查询
    resp = client.get(f'/api/grades/{student.id}')
    assert resp.status_code == 200
    assert len(resp.json['data']) == 1
    assert resp.json['data'][0]['score'] == 85.5

前端测试(使用Jest)：

javascript复制import { shallowMount } from '@vue/test-utils'
import GradeQuery from '@/components/GradeQuery.vue'

describe('GradeQuery.vue', () => {
  it('正确显示成绩数据', async () => {
    const wrapper = shallowMount(GradeQuery, {
      mocks: {
        $store: {
          state: {
            user: { id: 1 }
          },
          dispatch: jest.fn()
        },
        $api: {
          grade: {
            getByStudent: jest.fn().mockResolvedValue({
              data: [
                { course_name: '数学', score: 90 },
                { course_name: '英语', score: 85 }
              ]
            })
          }
        }
      }
    })
    
    await wrapper.vm.$nextTick()
    expect(wrapper.findAll('el-table-column').length).toBe(3)
    expect(wrapper.text()).toContain('数学')
  })
})

7.2 压力测试建议

使用Locust进行API压力测试：

python复制from locust import HttpUser, task, between

class GradeSystemUser(HttpUser):
    wait_time = between(1, 3)
    
    @task
    def query_grades(self):
        self.client.get("/api/grades/1", headers={
            "Authorization": "Bearer xxx"
        })
    
    @task(3)
    def select_course(self):
        self.client.post("/api/courses/select", json={
            "student_id": 1,
            "course_id": 1
        })

测试关键指标：

并发100用户时的API响应时间
数据库连接池使用情况
服务器资源占用(CPU、内存)

7.3 安全测试要点

SQL注入测试：尝试在输入框中注入SQL语句
XSS测试：检查是否对用户输入进行了转义
权限测试：尝试用学生账号访问教师接口
敏感数据暴露：检查API响应是否包含不必要的信息
密码安全：确保密码加密存储(如bcrypt)

8. 项目总结与反思

在实际开发过程中，有几个关键点值得特别注意：

事务管理：成绩修改等关键操作必须放在事务中，避免数据不一致
批量操作优化：如批量录入成绩时，应考虑使用批量插入而非循环单条插入
日志记录：关键业务操作如成绩修改应记录详细日志
输入验证：前端验证不能替代后端验证，必须双重验证
文档编写：API文档应使用Swagger等工具自动生成

一个特别实用的技巧是在开发阶段启用SQLAlchemy的echo模式，可以方便地查看生成的SQL语句：

python复制app.config['SQLALCHEMY_ECHO'] = True

对于需要处理大量数据的操作(如生成全年级成绩单)，建议：

使用分页查询
考虑后台任务处理
提供进度查询接口
结果缓存到文件供下载

最后，在部署时一定要记得关闭调试模式并设置强密钥：

python复制app.config['DEBUG'] = False
app.config['SECRET_KEY'] = 'complex-secret-key-here'
app.config['JWT_SECRET_KEY'] = 'another-complex-key'