2020-10-17（学生管理系统）

学生管理系统（原生js实现）

一、系统的功能描述

系统主要想实现的一个最终的效果是：展示一个学生信息管理的界面，主要实现的js功能是三个，增加，删除，修改，查询（没有实现，有待优化），为用户展示的效果如下：

二、思路分步实现

整体结构、样式实现
分析：观察最终我们想要实现的效果，分析之后我们可以大致将目标划分为三个结构：上面的公司或者是学校的名称，左面的菜单栏以及相对应的右面的内容区域。
代码实现：

 <!-- 头部 --><div class="header"><div class="logo"><img src="./images/logo.png" alt=""><span>Duyiedu</span></div></div><!-- 左侧菜单栏 --><div class="left-menu"><dl><dt>学生管理</dt><dd>学生列表</dd><dd class="active">新增学生</dd></dl></div>

/* reset */
html,
body {height: 100%;
}body,
dl,
dd {margin: 0;
}/* header */
.header {height: 70px;background-color: #354457;/* 使得header中的文字垂直居中 */line-height: 70px;
}/* header下面的子元素logo */
.header .logo {padding-left: 20px;color: #b3bcc5;font-size: 14px;
}.header .logo img {width: 30px;height: 30px;/* 使得图片与文字对齐居中 */vertical-align: middle;
}.header .logo span {text-align: center;
}/* left-menu */
.left-menu {width: 200px;background-color: #4d5e70;height: calc(100% - 70px);float: left;
}
.left-menu dl{font-size: 14px;line-height: 40px;color: #b3bcc5;
}
.left-menu dt{text-align: left;padding-left: 10px;
}
.left-menu dd{text-align: center;
}
.left-menu dd:hover{background-color: rgba(255,255,255,0.4);color: #354457;cursor: pointer;
}
.left-menu dd.active{background-color: #ddd;color: #354457;
}

分析：1. 在实现上面的header区域的文字居中的时候，记得设置的是header，我在自己实现的时候错误地设置为了logo区域或者是子区域的line-height，无法实现文字垂直居中的效果，相对应的img应该设置vertical-align为middle来实现图片的居中。
2. 在实现左面菜单栏以及右面内容区域的宽高的时候，利用到了一个新的calc（）通过父级的百分比减去上面header区域的height值，或者是左面menu的width来实现，同时，因为要让这两个div在同一行显示，我们在这里采用的方法是浮动。在menu部分的实现过程中，我们实现的html结构没有使用传统的ul以及li，而是使用了语义化更好的dldtdd，这样做之后要注意的就是，dl，dd都有默认的margin值，我们要在重置样式表中进行删去。
3. 由于在上面使用了calc的方式，所以说我们在一开始并没有设置html和body的宽度是百分之一百的话，我们在设置了menu区域的高度之后会显示不出来。
4. 左面menu区域点击之后改变的是实现方法：2种

新增学生的实现
复习form表单的使用

<!-- 右侧内容栏 --><div class="right-content"><div class="content student-add"></div><div class="content student-list"><form id='student-add-form'><!-- 通过使用label for input id来一一对应 --><div><label for="add-name">姓名</label><input type="text" id="add-name"></div><!-- 性别 --><div><label for="">性别</label><label class="sex" for="add-male">男</label><input type="radio" name="sex" id="add-male" value="0" checked><label class="sex" for="add-female">女</label><input type="radio" name="sex" id="add-female" value="1"></div><div><label for="add-email">邮箱</label><input type="text" id="add-email"></div><div><label for="add-number">学号</label><input type="text" id="add-number"></div><div><label for="add-birth">出生年</label><input type="text" id="add-birth"></div><div><label for="add-phone">手机号</label><input type="text" id="add-phone"></div><div><label for="add-address">住址</label><input type="text" id="add-address"></div><div><label for=""></label><input type="submit" class="btn"><input type="reset" class="btn"></div></form></div></div>

form{width: 400px;/* 第一次没有居中的原因是父元素没有设置宽度 */margin: 20px auto 0px;}
/* 对于每一个表单项的设置 */
form div label:not(.sex){width: 80px;text-align: right;display: inline-block;margin-right: 10px;
}
form div{margin-top: 10px;
}
/* 设置两个按钮的样式 */
form .btn{padding: 5px 27px;cursor: pointer;margin-right: 5px;
}

分析：html：在设置表单的时候，通过label中for与input中的id值相对应的方式来实现一一对应的映射，在实现性别选项的时候，要注意input要添加一个name属性相同为sex来表示他们一道题目，最后设置按钮的时候将input中的type属性设置为submit以及reset。
css：注意在设置label的宽度的时候要将他变成行块元素。
学生列表的实现
前后端数据的对应

解释：用户在input框输入的内容与后端提供的接口名称相对应。

新增学生的实现思路绑定点击事件->获取表单数据->对表单数据进行校验->将符合要求的表单数据进行转化为字符串（接口文档中要求的格式）->通过ajax进行传递->根据返回信息进行跳转到学生列表

在用户点击提交按钮后，需要获取到表单的数据来传递到后端提供的接口（添加一个学生）

** 4.在进行将数据对象转化为字符串之前先要进行数据校验，比如说必须有的值但是用户没有输入，用户输入不符合规范的值要提醒用户并进行修改**

5.我们获取到的数据通过ajax函数传递到后端，但是需要认真观察ajax函数中对于每一个参数的要求！

分析：此时对数据进行打印，观察到是一个对象，但是观察**到ajax函数中对数据的要求是key=value&**的形式，所以我们需要对数据进行处理。

此时对数据对数据进行打印，观察是不是我们想要的数据

注意在访问接口的时候要仔细，此时需要凭借上我们的appkey

在上面的操作顺利进行之后，我们需要得到添加成功学生信息的标志，并且进行跳转到学生列表的界面

下面进行跳转到学生信息页面
这里再次对ajax中的回调函数进行说明：回调函数使我们前端在进行网络请求之后，后端对我们的请求进行处理返回的数据，可以用形参res来进行处理。这里我们在判断我们的新增学生信息成功添加在后台之后，我们进行跳转页面。
1.首先进行在点击左侧新增学生或者是学生列表，显示相对应的右侧内容区


// 判断当点击新增学生或者是学生列表的时候，对应的div展示出来
var id = e.target.getAttribute('data-id');
// console.log(id);var content = document.getElementById(id);// 注意在细节方面的处理,这个content在右侧内容区
var shows = document.querySelectorAll('.right-content .content');
for (var i = 0; i < shows.length; i++) {// console.log(00000)shows[i].classList.remove('show-content');
}
content.classList.add('show-content');

2.实现只有在添加成功的时候进行跳转(利用ajax的回调函数)

下面实现的是学生列表界面及其相对应的编辑和删除功能

html：首先观察到应该是一个table元素及其子项的实现，所以说应该明确table标签的使用。

分析：创建的效果如下（还没有添加css）

观察到有一个标题项目，其余的都是学生信息，那么我们就知道利用thead生成标题，然后利用tbody生成一个学生信息的内容（先生成一个进行样式的设计，之后通过js根据后台提供的数据动态生成），tbody中tr是一行，th是每列，而在tbody中，tr是每一行，然后td是每一列。
css:设置一些简单的样式，这里不进行赘述。

/* 为下面的table设置样式 */
.right-content #student-list table{width: 100%;text-align: center;line-height: 30px;font-style: 14px;
}
.right-content #student-list table thead{background-color: #e3e8ee;color: #646987;
}
.right-content #student-list table tbody{background-color: #fff;
}
.right-content #student-list table .btn{padding: 5px 5px;color: #fff;cursor: pointer;
}
.right-content #student-list table .btn.edit{background-color: green;
}
.right-content #student-list table .btn.delete{background-color: red;
}

js部分：思路流程：获取table当中的数据->获取表格当中的数据之后进行数据渲染

获取table当中的数据:要想获取表格当中的数据，我们必须通过ajax经过网络请求获得，我们依照上面先查看接口，最终在回调函数中得到后端给我们的数据。
查询所有学生的接口

观察到在上面的请求参数中，appkey是一个必须的参数，所以通过ajax获取到表格当中的数据的函数如下

在控制台打印输出此时获取到的数据
对获取到的数据进行数据渲染：我们在渲染数据的时候，可以通过es6的模板字符串进行渲染（主要是感觉方便，字符串的拼接的话，每一行都需要转义字符，在内部写变量的时候也不是很方便）

实现过程中存在的问题：
1.在获取tbody的时候，我又忘记了这是一个类数组，所以说没有写[0]，这样无法选择到
2.tbody.innnerHtml 第一次我这么写是错误的，正确的写法应该是tbody.innerHTML
3.我所写的循环方法是最基本的for循环，这样在写的时候要先获取到每一个数组元素data[i]，然后再进行对象的属性的选取，这样才是正确的，实际上可以进行优化，即使用foreach(function(ele,index.self){
})这样直接向美琪姐一样，直接item.想要的属性。
这样就实现了，效果如下

最后实现的功能是编辑和删除功能的实现

首先我们发现在最终的效果是在点击编辑的时候，应该出现一个弹框，里面放入的是当前我们选择的编辑内容的学生展示信息，我们在这里先实现html+css。
html+css:是一个基本的实现，主要是结构上首先用一个大的dialog进行包裹，在里面的内容区放入我们的form表单。
下面实现点击编辑按钮之后出现dialog框

出现dialog框之后就是表格数据的回填

存储了当前学生的唯一index之后，我们进行数据的回填

此时在点击编辑之后获取到当前的数据

实现修改一个学生的信息

分析：在获取到传入的后台提供的修改成功的信息之后，我们接下来应该该完成的事情应该是，隐藏掉这个dialog框，然后重新加载我们修改之后的学生列表。

分析：注意在此时绑定点击事件的时候需要在上面点击编辑按钮的外部，否则就会出现事件的冒泡，使得classlist在删除show之后又增加。
删除功能的实现

分析：在删除一个学生的时候，还是像和编辑一个学生一样，首先要获取到索引值，才能知道我们要删除的是哪一个学生，在弹出一个弹出框在用户知道自己要删除之后，才可以进行删除，而删除同样也是在后端的数据库中进行删除，所以我们此时要查看后端提供给我们的接口文档进行取舍

得到上面的两个必须删除的信息之后我们在调用ajax函数的时候，在data是要进行字符串的拼接，最后在回调函数中会根据res.status是否为success，重新渲染界面，即调用getTableData()，重新向接口请求最新的数据。

三、总结与反思

总结：这个项目的完成才是一个真真正正的一个学习之后的一个比较贴近于现实生活中的例子的实现，在听过一次老师的讲解之后，我本来在课上感觉难度并不是很大，都可以听明白，但是在自己实际操作的过程中，出现了各种各样在博客中提到的一些低级错误，真正体验到了怎么样去调试bug（在调试bug这一方面，我个人还是倾向于console.log()）某一个自己觉得不对的问题，然后从里向外一次打印，这样去找出自己的问题。
思路总结：在写完项目之后，回头去看，如果把这个项目交给我，从0开始实现的话，我认为我还是有一定的问题，在这次写完一个在当前比较有思维难度的小项目之后，我认为学习至少三遍，第一遍跟随老师的思路有一个大致的认知，第二遍时自己写博客，写反思，写项目过程中存在的问题，第三遍是自己完完全全的从0开始写这个项目，我觉得才可以将老师的知识更多地转化为自己的知识。
思路总结：上面有点跑题了，学生管理系统的项目实现，还是老师说的那样，还是结构、行为、样式相分离的原则。
html+css:

当我们在拿到这个设计稿的时候，为他们划分结构，脑海中进行样式的可能联想以及之前写过的一些类似的某些结构demo，比如说项目的话，结构大致可以分为三个部分上，下左，下右，然后在左面是一个选项卡的功能，右面是一个内容区。（其实就是一个选项卡的扩展加上上面的header区域）
js：js部分主要实现了三个功能块，这就不像普普通通的选项卡了，这让我联想到了辉哥的和平精英官网的模仿（非常重要!important），三个功能是：新增学生，编辑一个学生，删除一个学生，以及动态实时的更新数据

反思
本次还没有完完全全自己实现，这是一个很大的问题，之后还需要自己再进行深加工
在进行数据校验的时候，处理字符串的功能还不是很完善，仍然需要优化
之后可以自己新增一个登录的接口，使得只有管理人员才可以登入
当学生很多的时候，是进行分页处理，还是滚动条的设置？
注重效率，实际上这个项目以及博客的写作用了3天的晚上（每晚2h+），能不能提高思路的清晰度？