falsk 全栈 APP优化及积分榜进阶上篇【MUI+Flask+MongoDB】

 文章目录
一，前言二，需求一&二：增加注册的班级选择【下拉列表】2.1，html基本样式2.2， js监视2.3，flask后端修改处理2.4，个人主页优化显示班级
三，需求三：增加友好性，个人积分榜增加了段位四，对于需求四
‍作者简介: 大家好，我是上进小菜猪。内蒙古科技大学，大二计科。技术很菜但不放弃，努力做全栈。 热爱开发，开发软件，开发网站，开发各种东西。️ ️个人主页: 上进小菜猪的博客 系列专栏:本文写在《APP开发从0到1》专栏 ✉️如果文章知识点有错误的地方,请指正! 和大家一起学习一起进步 如果觉得博主的文章还不错的话,请三连+关注支持一下博主哦
一，前言
今天又有一个小需求：如下：排行榜可以查看班级排名。 需要解决的问题： 1，注册时候需要增加班级属性。 2，数据库需要一个小的改变。 3，为了友好性，我在个人积分榜增加了段位的显示。非常的友好。 4，排行榜增加班级排名。
二，需求一&二：增加注册的班级选择【下拉列表】
2.1，html基本样式
首先： 为了保持样式的一致性，我先写一个大的盒子，把下拉列表放进去。 下拉列表主要使用了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！
班级
之后就是一个老套路了。 在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 写一个样式。 效果图： **说明：**因为是手机模拟器的原因，适配不是很舒服，打包到移动端就好多了！
四，对于需求四
为了保持我挤牙膏的写文章优良特点，我决定明天再写！ 

参考：falsk 全栈 APP优化及积分榜进阶上篇【MUI+Flask+MongoDB】