InfoQ 极客传媒 15 周年庆征文|移动端开发之动态排行【MUI+Flask+MongoDB】

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

一，前言

今天依然有一个新需求哈，学生端要作答查看排名，目前排名似乎设置了但看不了。第一眼看到了这个需求，感觉比较困难哈，因为这是一个动态的，单纯的html是无法完成的，好巧不巧，前几天专研了很久的js，现在还是对js这个语言较为熟悉的。

困难方面：

1，积分榜的IU设计。（这个问题不是很大）

2，数据库的积分排序，请求和返回。

3，动态排名（难点）

先看一下我的成品图：

二，数据库的积分排序

find=db.mongo.find({}).sort([("jifeng", -1)])


MongoDB李的排序方法：使用 sort() 方法对数据进行排序。看上面的代码：sort() 方法可以通过参数指定排序的字段，并使用 1 和 -1 来指定排序的方式，其中 1 为升序排列，而 -1 是用于降序排列。先使用mongodb的find方法，获取全部的数据，之后，我们使用sort方法对积分进行一个大到小的排序。

2,1，bug发现

我们在使用如上代码，目前的append为现在的字典集合。我们如果直接传值append给前台就会爆一个错误：

Object of type ObjectId is not JSON serializable


这是为什么呢？这是因为ObjectId无法在服务端生成json数据

2.2,bug解决

写一个如上的类方法。吧我们的ObjectId对象，转换为我们的py对象。

return json.dumps(append,cls=JSONEncoder)


返回处理完的数据给前端。

三，前端处理

这是我们前端拿到的json数据打印的后果，现在我们来处理他！

注意：mui.post有异步传输的特性。所以注意执行的顺序。

 function(data) {
console.log("从服务端返回数据,准备判断");
pass=data;


我们在方法外定义一个pass，在返回的方法内写赋值给pass。之后我们写一个循环，循环遍历这些json数据，达到不同数据，不同输出的效果！

for (var i in pass){
}


3,1 特殊地方

因为我观察到第一二三名的icon是特殊的，所以我们循环的时候写一个判断方法：

这样就完美解决的这个问题，值得注意的一点是。这里需要一些JavaScript的基础，因为我们改为动态的排名需要我们使用JavaScript语言来写html。

四，附代码

 <script type=&quot;text/javascript&quot;>
 mui.init();
 var pass;
 mui.post('http://xxxxxx:xxxxx/paiming', {
 }, function(data) {
 console.log(&quot;从服务端返回数据,准备判断&quot;);
 //console.log(JSON.stringify(data));
 pass=data;
 }, 'json');
 
 setTimeout(function() {
 var div = document.createElement(&quot;div&quot;);
 div.className = &quot;tab-panel-item tab-active&quot;;
 document.querySelector(&quot;.tab-panel&quot;).appendChild(div);
 // console.log(pass[1]['name']);
 for (var i in pass){
 
 console.log(i);
 var div1 = document.createElement(&quot;div&quot;);
 div1.className = &quot;aui-flex b-line&quot;+ i;
 document.querySelector(&quot;.tab-active&quot;).appendChild(div1);
 
 if(i==0)
 {
 var div2 = document.createElement(&quot;div&quot;);
 div2.className = &quot;aui-ranking-text one&quot;;
 document.querySelector(&quot;.b-line&quot;+i).appendChild(div2);
 //<em>1</em>
 var em = document.createElement(&quot;em&quot;);
 em.innerHTML=&quot;1&quot;;
 document.querySelector(&quot;.one&quot;).appendChild(em);
 }
 if(i==1)
 {
 var div21 = document.createElement(&quot;div&quot;);
 div21.className = &quot;aui-ranking-text two&quot;;
 document.querySelector(&quot;.b-line&quot;+i).appendChild(div21);
 //<em>1</em>
 var em = document.createElement(&quot;em&quot;);
 em.innerHTML=&quot;2&quot;;
 document.querySelector(&quot;.two&quot;).appendChild(em);
 }
 if(i==2)
 {
 
 var div22 = document.createElement(&quot;div&quot;);
 div22.className = &quot;aui-ranking-text three&quot;;
 document.querySelector(&quot;.b-line&quot;+i).appendChild(div22);
 //<em>1</em>
 var em = document.createElement(&quot;em&quot;);
 em.innerHTML=&quot;3&quot;;
 document.querySelector(&quot;.three&quot;).appendChild(em);
 }
 
 if(i>2)
 {
 
 var j=Number(i)+1;
 // <div class=&quot;aui-ranking-text&quot;>
 // <em>4</em>
 // </div>
 var div224 = document.createElement(&quot;div&quot;);
 div224.className = &quot;aui-ranking-text&quot;;
 div224.innerHTML=&quot;<em>&quot;+j+&quot;</em>&quot;
 document.querySelector(&quot;.b-line&quot;+i).appendChild(div224);
 //<em>1</em>
 // var em = document.createElement(&quot;em&quot;);
 // em.innerHTML=i+1;
 //document.querySelector(&quot;px&quot;+i).appendChild(em);
 }
 
 //img占位
 var divimg = document.createElement(&quot;div&quot;);
 divimg.className = &quot;aui-ranking-img&quot;;
 document.querySelector(&quot;.b-line&quot;+i).appendChild(divimg);
 var name1 = document.createElement(&quot;div&quot;);
 name1.className = &quot;aui-ranking-name aui-flex-box&quot;;
 name1.innerHTML=&quot;<h2>&quot;+pass[i]['name']+&quot;<h2>&quot;+&quot;<p>&quot;+pass[i]['username']+&quot;<p>&quot;
 document.querySelector(&quot;.b-line&quot;+i).appendChild(name1);
 // <div class=&quot;aui-ranking-num&quot;>50000</div>
 var jifneg = document.createElement(&quot;div&quot;);
 jifneg.className = &quot;aui-ranking-num&quot;;
 jifneg.innerHTML=pass[i]['jifeng']
 document.querySelector(&quot;.b-line&quot;+i).appendChild(jifneg);
 var name2 = document.createElement(&quot;div&quot;);
 name2.className = &quot;aui-ranking-icon&quot;;
 document.querySelector(&quot;.b-line&quot;+i).appendChild(name2);
 
 }
 //前123特殊
 
 
 
 
 
 
 
 
 
 
 }, 500);


最后继续用MUI镇文！