✉️如果文章知识点有错误的地方,请指正! 和大家一起学习

一，前言

今天又有一个小需求：如下：排行榜可以查看班级排名。需要解决的问题：1，注册时候需要增加班级属性。2，数据库需要一个小的改变。3，为了友好性，我在个人积分榜增加了段位的显示。非常的友好。4，排行榜增加班级排名。

二，需求一 &二：增加注册的班级选择【下拉列表】

2.1，html 基本样式

首先：为了保持样式的一致性，我先写一个大的盒子，把下拉列表放进去。下拉列表主要使用了 select 标签。如下代码：

<select class="mui-h5" style="margin:auto; color:#000;" 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 镇文！