一，前言
今天又有一个小需求：如下：排行榜可以查看班级排名。 需要解决的问题： 1，注册时候需要增加班级属性。 2，数据库需要一个小的改变。 3，为了友好性，我在个人积分榜增加了段位的显示。非常的友好。 4，排行榜增加班级排名。
二，需求一&二：增加注册的班级选择【下拉列表】
2.1，html基本样式
首先： 为了保持样式的一致性，我先写一个大的盒子，把下拉列表放进去。 下拉列表主要使用了select标签。 如下代码：
<select class="mui-h5" id="test">
<option value="">点击展开</option>
<option value="计算机1班">计算机1班</option>
<option value="计算机2班">计算机2班</option>
<option value="网络安全1班">网络安全1班</option>
<option value="网络安全1班">网络安全1班</option>
<option value="冶金1班">冶金1班</option>
<option value="冶金2班">冶金2班</option>
<option value="我是老师">我是老师</option>
</select>
上述代码块解释： 为了方便在数据库里的操作，我把value直接设计成了文字形式。 效果展示： 
2.2， js监视
下拉列表j监视方法如下
function getSelectedValue(name){
var obj=document.getElementById(name);
return obj.value;
}
如此简单，直接用其对象的value属性便可获取到。
在注册按钮里，写下如下代码，调用js监视方法，获取目前选择的value值，传递给后端。
var xxx=getSelectedValue("test");
到了现在，xxx现在存储着我们需要的目标value值。 别忘了写在mui.post，方法里，传递给后端！
2.3，flask后端修改处理
获取前端请求表单：
class_=request.form.get('class')
注意： 不要用class做为变量名，它是一个关键字。 我这里加了一个下划线。
"class":class_
加入字典集，存入数据库。
写到这里忽然想到一个bug，我必须要在注册的时候，把class做为必选项，不然空值的话，在班级的排行榜会报错。我现在去写一下！
5min后：好了，刚刚写的代码如下： 
好的，又改正了一个bug！ 测试一下： 
没啥问题，我们继续。 展示一下现在的数据库，如下： 
2.4，个人主页优化显示班级
如下代码：继续增加一个li，把它的id设置为class！
<li>
<p>班级</p>
<h4><span id="class"></span></h4>
</li>
之后就是一个老套路了。 在mui.post方法返回的方法中，
var e = data.class;
。。。
document.getElementById('class').innerHTML = e;
有js语言，追加后端返回的用户的班级信息，显示到个人主页。
效果展示： 
三，需求三：增加友好性，个人积分榜增加了段位
本需求接，上一篇文章： 因为，之前写法还是比较不错的，所以追加了段位显示，并不需要该后台的内容。我们直接来看前端：
var jifneg1 = document.createElement("div");
jifneg1.className = "aui-ranking-num1";
jifneg1.innerHTML = pass[i]['duanwei']
document.querySelector(".b-line" + i).appendChild(jifneg1);
在js循环输入端复制粘贴，修改。 将里面的duanwei循环输出。
当然，样式还是需要调一下的，不然对不齐很难受的。 随便写一个类名-》aui-ranking-num1 写一个样式。 
效果图： **说明：**因为是手机模拟器的原因，适配不是很舒服，打包到移动端就好多了！ 
四，对于需求四
为了保持我挤牙膏的写文章优良特点，我决定明天再写！
MUI镇文！
