首先介绍学生管理页面。

页面由上到下分别为操作栏、表格（Table）与分页器（Pagination）。

操作栏

搜索功能

操作栏的左半部分是搜索组件。学生管理页面的搜索组件带有三个搜索框， 可分别检索学号、姓名与班号。它们全都支持部分检索， 但是学号和班号只支持前缀检索。 填写检索条件后回车或点击搜索按钮即可开始检索。 只填写一个搜索框，而其他留空便是单个检索； 也可填写多个，实施联合检索，多个检索条件间是布尔与的关系。 清空所有搜索框再进行检索，便会显示所有数据，这也是刚进入页面时的初始状态。

假如有如下示例数据：

则会有这样的检索情境：

• 学号检索2019得到小明和小红
• 学号检索2019，同时班号检索06330058得到小明
• 姓名检索明得到小明和阿明
• 学号检索018201826没有一条记录，虽然阿明学号包含它，但它不是前缀

执行检索后表格显示加载动画，稍后便会更新数据。 如果网速较快，加载动画可能会一闪而过。 如果网络异常或服务器故障，则会弹出错误消息，表格也不会更新。

添加功能

操作栏的右半部分有添加、删除、导入、导出四个按钮。

点击添加按钮会进入添加功能对话框。

这里的对话框也十分简单。仅需提供必要的三项信息便可创建一个学生。 创建成功后表格也会自动更新，将会显示新创建的学生。 如果新创建的学生的学号已存在于系统中，创建会失败。 注意，学号与班号并非仅包含数字，任何字符都是可以的。

删除

删除功能用于批量删除表格本页的一到多行记录。

表格每行最左端都有一个单选框， 点击它即可在选中本行与取消选中本行间进行切换。 如本页文档最上方的图片所示，多行记录可被同时选中。 点击表头最左端的单选框还可在选中全部与取消选中全部间进行切换。

点击删除按钮即会删除当前选中的所有行记录。 不过，在此之前，会弹出一个要求确认的对话框， 它会提示将要被删除的学生信息以供核对，此时取消或关闭对话框即可反悔。 成功删除后表格也会随之更新。

导出

导出功能可将满足当前检索条件的所有学生记录写入一个 Excel 文件（xlsx 格式）。 只需点击按钮，浏览器很快就会弹出文件的下载请求。 打开文件即可在第一个 Sheet 找到全部的数据。

导入

添加功能仅在创建单个学生时较为方便，而批量创建学生需要用到导入功能。 它和导出功能正好相反，它允许用户从一个 Excel 文件（xlsx 格式）中导入大量的学生记录。 如果该 Excel 文件包含多个 Sheet，它会检查每一个 Sheet 并合并从中读取的记录。 不过，它对于这个文件有一定的格式要求。每一个 Sheet 都必须包含三列数据且有一个表头： class_id、student_id、name，数据必须安排在对应的表头下且单元格格式都为常规或文本类型。 事实上，导入功能足够智能，可以自动跳过空单元格，也能接受任意的列顺序， 如下所示的数据也可正确读取，但用户最好还是按照规范的格式提供数据以避免潜在的问题。

点击导入按钮会弹出文件选择对话框，在此选好单个 Excel 文件后， 会弹出要求确认的对话框以供核验，确定后所有记录会被一次性提交至服务器保存。

表格

表格都有一个表头，描述各个列的数据类型。

ID 列显示各条记录的全局唯一的 id，它会随之新记录的创建不断递增。

最右侧的一列是操作列，不同于页面最上方的操作栏，这里的操作是针对某一行的。 点击某一行的编辑按钮即可进入编辑对话框。

它与添加对话框十分相似，不过这里的表单默认不是空的， 而是填着要编辑的那行记录的对应信息。 可以在此作出一些改动，并点击确定保存修改。

点击某一行的删除按钮即可单独删除该行记录。 这里同样会先出现一个悬浮在删除按钮下方的弹出对话框（popover）要求确认。

剩下的列便显示记录的各项信息。

鼠标指针放到表格两列间的分割线上时，指针会变成分隔图标， 此时按住左键并左右拖动即可调整两列的宽度。

分页器

学生的记录数通常很大，不可能在一页表格中得以全部显示， 所以表格默认都是分页展示的。 第一次打开页面或完成检索后，表格显示的都是第一页。 分页器会显示总记录数、当前所在页数，并允许用户改变每页记录数和 跳转到指定页数。