移动端开发之动态排行【MUI+Flask+MongoDB】

文章目录

👨‍💻作者简介: 大家好，我是上进小菜猪。内蒙古科技大学，大二计科。技术很菜但不放弃，努力做全栈。 热爱开发，开发软件，开发网站，开发各种东西。🛳️
🛳️个人主页: 上进小菜猪的博客
📗系列专栏:本文写在《APP开发从0到1》专栏 ✉️如果文章知识点有错误的地方,请指正! 和大家一起学习一起进步🎈
🔥如果觉得博主的文章还不错的话,请👍三连+关注支持👍一下博主哦

一，前言

今天依然有一个新需求哈，学生端要作答查看排名，目前排名似乎设置了但看不了。
第一眼看到了这个需求，感觉比较困难哈，因为这是一个动态的，单纯的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="text/javascript">
        mui.init();
        var pass;
        mui.post('http://xxxxxx:xxxxx/paiming', {}, function(data){
            console.log("从服务端返回数据,准备判断");
            //console.log(JSON.stringify(data));pass=data;}, 'json');
        
        setTimeout(function(){
            var div = document.createElement("div");
            div.className ="tab-panel-item tab-active";
            document.querySelector(".tab-panel").appendChild(div);
            // console.log(pass[1]['name']);for(var i in pass){
                
                console.log(i);
                var div1 = document.createElement("div");
                div1.className ="aui-flex b-line"+ i;
                document.querySelector(".tab-active").appendChild(div1);
                
                if(i==0){
                    var div2 = document.createElement("div");
                    div2.className ="aui-ranking-text one";
                    document.querySelector(".b-line"+i).appendChild(div2);
                    //<em>1</em>
                    var em = document.createElement("em");
                    em.innerHTML="1";
                    document.querySelector(".one").appendChild(em);}
                if(i==1){
                    var div21 = document.createElement("div");
                    div21.className ="aui-ranking-text two";
                    document.querySelector(".b-line"+i).appendChild(div21);
                    //<em>1</em>
                    var em = document.createElement("em");
                    em.innerHTML="2";
                    document.querySelector(".two").appendChild(em);}
                if(i==2){
                    
                    var div22 = document.createElement("div");
                    div22.className ="aui-ranking-text three";
                    document.querySelector(".b-line"+i).appendChild(div22);
                    //<em>1</em>
                    var em = document.createElement("em");
                    em.innerHTML="3";
                    document.querySelector(".three").appendChild(em);}
                
                if(i>2){
                    
                    var j=Number(i)+1;
                    // <div class="aui-ranking-text">
                    //     <em>4</em>
                    // </div>
                    var div224 = document.createElement("div");
                    div224.className ="aui-ranking-text";
                    div224.innerHTML="<em>"+j+"</em>"
                    document.querySelector(".b-line"+i).appendChild(div224);
                    //<em>1</em>
                    // var em = document.createElement("em");
                    // em.innerHTML=i+1;
                    //document.querySelector("px"+i).appendChild(em);}
                
                //img占位
                var divimg = document.createElement("div");
                divimg.className ="aui-ranking-img";
                document.querySelector(".b-line"+i).appendChild(divimg);
                var name1 = document.createElement("div");
                name1.className ="aui-ranking-name aui-flex-box";
                name1.innerHTML="<h2>"+pass[i]['name']+"<h2>"+"<p>"+pass[i]['username']+"<p>"
                document.querySelector(".b-line"+i).appendChild(name1);
                // <div class="aui-ranking-num">50000</div>
                var jifneg = document.createElement("div");
                jifneg.className ="aui-ranking-num";
                jifneg.innerHTML=pass[i]['jifeng']
                document.querySelector(".b-line"+i).appendChild(jifneg);
                var name2 = document.createElement("div");
                name2.className ="aui-ranking-icon";
                document.querySelector(".b-line"+i).appendChild(name2);}
            //前123特殊
            
            
            
            
            
            
            
            
            
            
        }, 500);

最后继续用MUI镇文！