学生管理系统
本文核心词：我要去B站上班！
学生管理系统
总览图
实现了一个能完成学生增删改功能的学生管理系统，目前只使用了原生 js 实现，并且学生的查找，搜索过滤功能以及后续的登录，权限，网页动态效果等暂未实现，后续会使用 jQuery 进行项目的迭代以及新功能的实现。
布局（结构）
将整体划分为头部 .header 和主体部分 .content，头部用于放置 logo 等信息，后续实现登录后的用户信息以及用户相关功能也会放置在这。主体为系统的主要功能区，分为左侧功能目录 .left-menu 和右侧的功能页 .right-content。左侧功能目录使用 dl dt dd 实现功能分区以及功能的标题和功能项。
整体布局
样式
首先是部分样式初始化以及整体设置为占满整个页面
然后是头部的对应样式
头部样式
接着是主体内容区和左侧功能目录，给功能项的 dd 设置了指针样式 pointer 以及鼠标悬浮和点击样式
第一个功能学生列表右侧的表格样式
表格
表格样式
表格样式
第一个功能学生列表中点击编辑显示的编辑页面样式，首先将整个编辑页面 .modal 设置为固定整个屏幕，然后给编辑页面添加遮罩层 .mask 改变透明度使编辑区以外原页面依然可见，然后将编辑区 .modal-content 设置为屏幕中心位置，表单部分样式 .add-student-form 同添加学生功能表单样式
编辑页面
编辑页面样式
最后是添加学生功能页面样式
新增学生
添加学生
交互（行为）
首先是左侧功能项的点击事件绑定，包括后续的所有事件绑定都设置在 bindEvent 中，initContent 用于初始化右侧内容区，即显示对应的右侧功能区。initMenuList 用于初始化左侧导航的样式。
左侧功能栏点击事件
然后封装一个 ajaxFunc 用于与后端进行数据交互
ajax
接着是学生列表功能页中，获取学生信息并且渲染表格的功能 renderTable，使用全局变量allTableData 存储所有学生信息以便后续使用，由于后端传输的性别信息 1 为 女（female），0 为男（male），在表格中使用一个三目运算符对性别的数字进行转换。然后在编辑和删除按钮上添加了 data-index 用于标记当前按钮对应的学生信息序号，以便后续操作。
渲染表格数据
在事件绑定函数里为表格中的编辑和删除按钮绑定点击事件，编辑按钮的点击事件中调用一个编辑表单的回填函数实现编辑表单的内容自动填充。删除按钮使用 window 上的 confirm 对用户的操作进行确认，然后通过 ajaxFunc 在后端通过学号删除对应的学生信息，在删除学生信息成功后调用 renderTable 对表格重新进行渲染。
编辑和删除点击事件
学生信息编辑页面的回填功能 initEditForm，用于将现有的学生信息填入编辑区的表单中，方便用户对应进行修改。
表单回填
在事件绑定函数中添加编辑页面对学生信息进行修改后与后端的数据交互，在修改成功后同样调用 renderTable 进行表格的重新渲染以更新数据。
编辑学生信息数据交互
在编辑学生信息的数据交互中用到 getFormData 来获取 form 表单中的学生数据，其中对性别进行处理，转换为对应的0和1方便与后端的交互。
最后是新增学生信息的数据交互功能，同样在 bindEvent 中绑定，学生信息添加完毕后需要重新加载页面，直接触发学生列表的点击事件或者通过 location 的 reload 方法都能实现相应效果。
初始化函数。
初始化
对 ajax 进行数据传输稍微熟练了一些，对表单的一些数据处理更加熟练，后续还会进行迭代，未完待续。
好啦，以上就是学生管理系统全部内容，都看到这里了还不收藏一下？？搜索（我要去B站上班！）还能找到更多精彩内容。