✉️如果文章知识点有错误的地方,请指正! 和大家一起学习
今天又有一个小需求:如下:排行榜可以查看班级排名。需要解决的问题:1,注册时候需要增加班级属性。2,数据库需要一个小的改变。3,为了友好性,我在个人积分榜增加了段位的显示。非常的友好。4,排行榜增加班级排名。
首先:为了保持样式的一致性,我先写一个大的盒子,把下拉列表放进去。下拉列表主要使用了 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 直接设计成了文字形式。效果展示:
下拉列表 j 监视方法如下
function getSelectedValue(name){
var obj=document.getElementById(name);
return obj.value;
}
如此简单,直接用其对象的 value 属性便可获取到。
在注册按钮里,写下如下代码,调用 js 监视方法,获取目前选择的 value 值,传递给后端。
var xxx=getSelectedValue("test");
到了现在,xxx 现在存储着我们需要的目标 value 值。别忘了写在 mui.post,方法里,传递给后端!
获取前端请求表单:
class_=request.form.get('class')
注意:不要用 class 做为变量名,它是一个关键字。我这里加了一个下划线。
"class":class_
加入字典集,存入数据库。
写到这里忽然想到一个 bug,我必须要在注册的时候,把 class 做为必选项,不然空值的话,在班级的排行榜会报错。我现在去写一下!
5min 后:好了,刚刚写的代码如下:
好的,又改正了一个 bug!测试一下:
没啥问题,我们继续。展示一下现在的数据库,如下:
如下代码:继续增加一个 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 镇文!
领取专属 10元无门槛券
私享最新 技术干货