跳到主要内容

根据班级、姓名或学号查询学生信息

为学生列表页添加搜索功能（支持班级 + 关键字）​

在前面的章节中，我们已经实现了学生管理的“新增”、“编辑”、“删除”和“批量删除”的功能，在这一节中，我们将为学生列表页实现一个实用且灵活的搜索功能。

搜索并不是简单的“一个输入框”，而是由多个条件组合而成。在动手编码之前，我们先把需求和逻辑理清楚。

1.明确搜索规则​

在当前的学生列表页中，搜索区域包含三个要素：

  • 班级（下拉框）
  • 姓名
  • 学号

它们之间的关系并不相同。

1️⃣ 姓名 & 学号：或（OR）关系​

用户可以：

  • 只输入姓名搜索
  • 或只输入学号搜索

也就是说：

姓名 = 关键字 OR 学号 = 关键字

2️⃣ 班级 & 关键字：并且（AND）关系​

在实际场景中，同名学生非常常见。

例如：

“一年一班的张三”

这里的含义是：

  • 班级 = 一年一班
  • 并且（AND）
  • 姓名 = 张三

因此最终的查询规则可以总结为：

班级 AND（姓名 OR 学号）

明确了这个逻辑之后，我们再来看如何落地实现。

2.表单提交方式说明​

在学生列表页中，已经存在一个搜索表单：

  • action 指向学生列表页（students）
  • 使用 GET 请求

student_list.html页面中form表单代码如下：

<form method="get" action="/students/">
    <span>班级: </span>
    <select name="grade">
        <option value="" selected="">请选择班级</option>
            {% for grade in grades %}
                <option value="{{ grade.pk }}" >
                    {{ grade.grade_name }}
                </option>
            {% endfor %}
    </select>
    <span>姓名/学号:</span>
    <input type="text" name="search">
    <input type="submit" value="搜索">
</form>

表单中包含两个关键字段：

字段类型name
班级selectgrade
关键字inputsearch

当点击「搜索」按钮时，浏览器会自动拼接 URL，例如：

/students/?grade=8&search=张三

因此，在后端我们只需要从 GET 参数 中获取这两个值即可。

3.重写 get_queryset 实现搜索逻辑​

搜索的本质，是对列表页的查询结果进行重新过滤。

在 Django 的类视图中，这正是 get_queryset 的职责。

1️⃣ 获取原始 queryset​

首先，保留父类默认的查询逻辑：

queryset = super().get_queryset()
🔒 试读结束

继续阅读完整内容

以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。

查看课程详情