APP 優化及積分榜進階上篇【MUI+Flask+MongoDB】

語言: CN / TW / HK

:email:如果文章知識點有錯誤的地方,請指正! 和大家一起學習

一,前言

今天又有一個小需求:如下:排行榜可以檢視班級排名。需要解決的問題: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 鎮文!