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标签。
如下代码：

<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镇文！