Flask中动态填充教师关联班级下拉菜单并实现关联删除

问题背景 #

我正在开发一个在线学校Web应用，管理员已能创建教师档案、创建并分配课程给教师，核心模型如下：

class Teacher(db.Model):
    teacher_username = db.Column(db.String(50), primary_key=True, nullable=False)
    password = db.Column(db.String(50), nullable=False)
    assigned_classes = db.relationship('Class', backref='teacher', lazy=True)

class Class(db.Model):
    class_id = db.Column(db.String(50), primary_key=True, nullable=False)
    teacher_username = db.Column(db.String(50), db.ForeignKey('teacher.teacher_username'), nullable=False)
    subject = db.Column(db.String(20), nullable=False)

现在需要实现一个删除教师-班级关联的视图：页面包含两个下拉框，第一个列出所有教师（功能正常），第二个要显示选中教师的已分配班级，但当前第二个下拉始终为空，即使teacher.assigned_classes能正确打印出内容。预期的HTML表单如下：

<form method="POST">
        <label for="teacher_username">Select Teacher:</label>
        <select name="teacher_username">
            <option value="">Select Teacher</option>
            {% for teacher in teachers %}
                <option value="{{ teacher.teacher_username }}" {% if teacher.teacher_username == selected_teacher %}selected{% endif %}>{{ teacher.teacher_username }}</option>
            {% endfor %}
        </select>
        <br>

        <label for="class_id">Select Class:</label>
        <select name="class_id">
            <option value="">Select Class</option>
            {% if selected_teacher %}
                {% for class in teacher.assigned_classes %}
                    <option value="{{ class.class_id }}">{{ class.class_id }}</option>
                {% endfor %}
            {% endif %}
        </select>
        <br>

        <button type="submit">Delete Class</button>
    </form>

问题分析 #

1. 模板变量错误：模板中{% if selected_teacher %}块里使用了teacher.assigned_classes，但此时模板中并没有名为teacher的对象变量——你只传递了selected_teacher（用户名字符串），没有传递对应的教师实例。
2. 实时更新缺失：纯后端渲染的方式下，切换教师下拉框需要刷新页面才能更新班级列表，若要实现无刷新实时更新，需要前端JavaScript配合AJAX请求。

解决方案 #

1. 修正后端视图，传递选中教师的实例到模板 #

修改Flask视图函数，当用户选择教师后（无论是GET请求带参数还是POST请求回显），查询对应的Teacher对象并传递给模板：

@app.route('/remove-class-assignment', methods=['GET', 'POST'])
def remove_class_assignment():
    teachers = Teacher.query.all()
    selected_teacher_obj = None
    selected_teacher = None

    if request.method == 'POST':
        # 处理删除逻辑
        teacher_username = request.form.get('teacher_username')
        class_id = request.form.get('class_id')
        if teacher_username and class_id:
            class_to_remove = Class.query.get(class_id)
            if class_to_remove and class_to_remove.teacher_username == teacher_username:
                db.session.delete(class_to_remove)
                db.session.commit()
        # 回显选中的教师
        selected_teacher = teacher_username
        if selected_teacher:
            selected_teacher_obj = Teacher.query.get(selected_teacher)
    else:
        # GET请求时，若有selected_teacher参数，查询对应教师
        selected_teacher = request.args.get('teacher_username')
        if selected_teacher:
            selected_teacher_obj = Teacher.query.get(selected_teacher)

    return render_template('remove_assignment.html', 
                           teachers=teachers,
                           selected_teacher=selected_teacher,
                           selected_teacher_obj=selected_teacher_obj)

然后修正模板中的班级下拉部分，使用selected_teacher_obj遍历班级：

<label for="class_id">Select Class:</label>
<select name="class_id">
    <option value="">Select Class</option>
    {% if selected_teacher_obj %}
        {% for class in selected_teacher_obj.assigned_classes %}
            <option value="{{ class.class_id }}">{{ class.class_id }} - {{ class.subject }}</option>
        {% endfor %}
    {% endif %}
</select>

2. 实现无刷新实时更新（可选） #

如果需要切换教师时立即更新班级下拉框而不刷新页面，添加JavaScript代码监听教师下拉的change事件，发送AJAX请求获取班级列表：

首先在后端新增一个API接口，返回指定教师的班级：

@app.route('/api/teacher-classes/<teacher_username>')
def get_teacher_classes(teacher_username):
    teacher = Teacher.query.get(teacher_username)
    if not teacher:
        return jsonify([])
    classes = [{'id': c.class_id, 'subject': c.subject} for c in teacher.assigned_classes]
    return jsonify(classes)

然后在模板中添加JavaScript：

<script>
document.querySelector('select[name="teacher_username"]').addEventListener('change', function() {
    const teacherUsername = this.value;
    const classSelect = document.querySelector('select[name="class_id"]');
    
    // 清空现有选项
    classSelect.innerHTML = '<option value="">Select Class</option>';
    
    if (!teacherUsername) return;
    
    // 发送AJAX请求
    fetch(`/api/teacher-classes/${teacherUsername}`)
        .then(response => response.json())
        .then(classes => {
            classes.forEach(cls => {
                const option = document.createElement('option');
                option.value = cls.id;
                option.textContent = `${cls.id} - ${cls.subject}`;
                classSelect.appendChild(option);
            });
        });
});
</script>

这样切换教师下拉框时，班级下拉会实时更新对应的班级列表。

3. 验证关联关系删除逻辑 #

确保删除操作符合业务需求：当前模型中Class的teacher_username是外键且不可为空，直接删除班级对象是合理的；如果需要保留班级仅解除关联，需将外键设为可空，然后修改class_to_remove.teacher_username = None再提交会话。

内容的提问来源于stack exchange，提问作者Filip Miljkovic