Web前端机试测试：学生信息管理系统

一、语言和环境

A、实现语言
- Html
- Css
- Js
- Jquery
- BootStrap
B、环境要求
- Windows
- 谷歌/火狐浏览器

二、功能要求

使用前端技术，实现网页版的学生信息管理，包括登录功能，图书信息的展示、添加图书、删除图书的操作，具体要求如下：

登录页面
- 如图所示，正确的账号: 'admin', 密码: '123456'
- 该页面需要设置页面背景图，背景图由老师提供.
- 如果账号密码正确，则点击登录，进入到 'main.html' 页面。
- 反之，弹出错误信息的警告框.
图书信息展示
- 如图所示，默认暂时4条图书信息（选择列、图书编号、图片、名称、操作列）。
- 新增图书的功能。如图所示，点击新增按钮，弹出信息输入框，包含编号、图片URL和姓名信息。
- 点击确定时，要进行录入信息的校验，校验规则为所有的输入框不能为空;
- 如果校验不通过，在点击确定时显示错误提醒，如图所示；
- 如果一切正确，当点击确定按钮时，新增的图书应该在页面中显示!
- 结果如下所示:
单条信息删除
- 点击每行后的操作栏中的删除按钮，可以删除当前行。删除前，要进行对话框提醒，询问是否确认删除。完成删除后，表格中被删除的信息消失，如图所示。
批量信息删除
- 通过每行前的复选按钮，可以选择要被删除的那些行，或者通过全选按钮选择所有行。选择完毕后，点击表格下的删除按钮进行删除。在删除之前，要询问是非确认删除。删除完毕后，被删除的行在表格中消失，如图所示。

三、评分标准

| 序号 | 考评项目 | 分值 | |---|---|---| | 1 | 表格展示效果 | 10 | | 2 | 按钮展示效果 | 5 | | 3 | 颜色和图标 | 5 | | 4 | 新增弹出框展示 | 15 | | 5 | 新增信息校验 | 5 | | 6 | 信息提交中展示 | 5 | | 7 | 取消新增 | 5 | | 8 | 完成新增，信息添加到表格 | 10 | | 9 | 单条信息删除提醒 | 5 | | 10 | 完成单条删除，删除表格中的行 | 10 | | 11 | 复选框勾选效果 | 5 | | 12 | 全选勾选效果 | 5 | | 13 | 取消勾选效果 | 5 | | 14 | 完成批量删除，删除表格中的行 | 10 |

内容: 总共100分，根据评分标准进行评分。具体评分标准如下：

表格展示效果：根据要求展示图书信息的表格，包括选择列、图书编号、图片、名称、操作列，展示效果正确、清晰，得分范围0-10分。
按钮展示效果：登录页面和图书信息页面的按钮展示效果正确、清晰，得分范围0-5分。
颜色和图标：页面元素的颜色和图标使用合理，美观，得分范围0-5分。
新增弹出框展示：点击新增按钮后，弹出新增信息的输入框，展示效果正确，得分范围0-15分。
新增信息校验：对新增信息的校验规则进行正确实现，包括所有输入框不能为空，得分范围0-5分。
信息提交中展示：在新增信息提交过程中，展示信息提交中的状态，得分范围0-5分。
取消新增：在新增信息的输入框中，点击取消按钮，可以取消新增操作，得分范围0-5分。
完成新增，信息添加到表格：在新增信息的输入框中，点击确定按钮，将新增的图书信息正确添加到表格中，得分范围0-10分。
单条信息删除提醒：点击删除按钮时，弹出删除对话框进行确认删除，得分范围0-5分。
完成单条删除，删除表格中的行：确认删除后，正确删除表格中的对应行，得分范围0-10分。
复选框勾选效果：通过复选框可以选择要被删除的行，勾选效果正确，得分范围0-5分。
全选勾选效果：通过全选按钮可以选择所有行，勾选效果正确，得分范围0-5分。
取消勾选效果：取消复选框和全选按钮的勾选效果，得分范围0-5分。
完成批量删除，删除表格中的行：选择完毕后，点击删除按钮，正确删除表格中被选择的行，得分范围0-10分。

根据以上评分标准，对每个项目进行评分，最终得出总分。