Vue实现学生信息管理系统

一.页面结构

1、学生信息列表组件

编辑

添加图片注释，不超过 140 字（可选）

2、添加或修改学生信息组

编辑

添加图片注释，不超过 140 字（可选）

3、统计信息组件

编辑

添加图片注释，不超过 140 字（可选）

4、系统日志组件

编辑

添加图片注释，不超过 140 字（可选）

二、首页

1、显示两个按钮 学生信息列表按钮 和 系统日志列表按钮

2、点击 学生信息列表按钮 显示学生信息列表 且 隐藏 系统日志列表按钮

3、点击 系统日志列表按钮 显示 系统日志列表按钮 且 隐藏 学生信息列表按钮

4、首页默认显示 学生信息列表按钮

三、学生信息列表组件

2、列表上方有一个添加学生按钮

4、列表下方最右有一个 统计信息按钮

5、学生总数：使用computed 自动实时统计学生总数并显示

6、总点击数：对于学生信息列表，鼠标每点击一次，增加一次总点击数。总点击数实时显示。（@click="totleClickNum++"放到合适的标签上）

8、vue实例创建时长：统计vue实例创建毫秒时长，实时显示。（钩子函数beforeCreate和created中分别获取当前毫秒时间，并相减得到时长。）

9、添加按钮 和 修改按钮 ：点击 隐藏学生信息列表组件 且 显示 添加或修改学生信息组件

10、点击删除按钮，删除此条数据

四、添加或修改学生信息组件

1、点击添加按钮，显示 添加或修改学生信息组件 且 内容为空白

2、点击修改按钮，显示 添加或修改学生信息组件 且 内容为该条学生的信息

3、该页面包含字段：班级、姓名、英文名、性别、年龄

4、班级：可下拉选择班级，可选项为2个：软化s20-13 和 软件s20-14

5、姓名：可以为任意字符串，提交时判断为空则弹窗提示alert("姓名不能为空")。

6、姓名：自定义指令 v-color 用语姓名<input 是的输入的文字显示为蓝色

编辑

添加图片注释，不超过 140 字（可选）

7、英文名：进行严格校验，必须是全英文字母，长度必须大于等于2个英文字母且小于等于10个英文字母，否则输入框实时显示红色框，正确后恢复。（使用watch实时监控）

编辑

添加图片注释，不超过 140 字（可选）

8、英文名：提交时如果不符合如上校验，则弹窗提示alert。

9、性别：可选项为2个：男 女 校验必选。

10、年龄：必选。

11、提交按钮：所有输入不能为空。如果有空或不符合如上校验，则alert弹窗提示。且不隐藏 当前 添加或修改学生信息组件。

12、提交按钮：若所有输入校验同。对于新增数据则新增。对于修改数据则修改。隐藏 当前 添加或修改学生信息组件。

编辑

添加图片注释，不超过 140 字（可选）

五、统计信息组件

1、点击统计信息按钮 隐藏 当前 学生信息列表组件 且 显示 子组件 统计信息组件

2、显示统计的数据，包括男生数量、女生数量、全部人数

3、返回按钮：点击返回按钮，隐藏当前统计信息组件 且 显示 学生信息列表组件

编辑

添加图片注释，不超过 140 字（可选）

六、系统日志组件

1、点击系统日志列表按钮，隐藏 学生信息列表组件 且 显示 系统日志组件

2、系统日志列表组件包含字段：姓名、操作、内容、日期、时间

3、在学生信息列表组件中，点击 修改按钮 和 删除按钮，则进行系统日志记录。记录信息在系统日志列表组件中显示

七、全局配置

要求浏览器控制台 不显示vue产品提示+不显示warn警告日志+关闭vuetools插件。（开发最后执行）

代码：