APP開發之進階完善篇【題小滿APP】【MUI+Flask+MongoDB+H5】

語言: CN / TW / HK

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第2天,點選檢視活動詳情

一,前言

最近幾天都在加緊開發app,沒有花時間去記錄部落格,現在剛完成了一個遊戲積分排名的功能。暫時閒下來記錄一下這幾天寫的東西,當然有些開發的細節記不太清楚了,大體的記錄一下。

二,增加簽到模組

2.1,前端設計

前端設計比較簡單,我充當UI設計了一張一般般的圖片,之後設計了一個登入按鈕。 寫了應該js監控點選事件,作用於前後端的互動。 先來一個效果圖吧: 在這裡插入圖片描述

```bash document.getElementById('sign').addEventListener('tap', function() { mui.post('http://XXXXXXXXXXX/sign', { "flag": '1', }, function(data) {

            console.log("從服務端返回資料,準備判斷");
            console.log(data.flagx);

                if(data.flagx=='1'){
                    $('.dialog').fadeIn()
                    flag=false;
                };
                if(flag)
                {
                if(data.flagx=='0')
                {
                    mui.toast("題小滿提醒您:今天已經簽到過了,不要貪心哦!");
                };

            }

``` 上面程式碼塊解釋: 因為網路安全的原因,發起請求埠已經去掉了。 這裡就是一個簡單的Ajax。其實沒有什麼需要講的。 注意一下mui.post是框架封裝的一個ajax,其實是差不多的。 這裡寫了一個if(flag)的作用是防止多次請求,返回多次,爆了一個不太友好的bug問題。寫了一個標識排除了一下子。

2.2,後端設計

後端設計到的資料庫內容比較多。 資料庫設計: 增加了一個sign_day欄位。這個欄位我設計為了應該字串以;來分割不同的日期值。(PS:這裡的作用是為了判斷今天或者某天的日期是不是已經簽到過了,防止刷分。)

遇到一個bug: 因為之前有了一定的使用者資料,如果這個時候來獲取到sign_day就會因為該條資訊沒有這個欄位而報錯。

處理方法:

bash try: judge['sign_day'] except: db.mongo.update_one( find_name, {'$set':{"sign_day":None} } ) x寫一個嘗試獲取,如果報錯說明這是以前的使用者,我們給他加一個欄位。

bash now = str(datetime.date.today()) 上述程式碼解釋: 這裡我使用了python的date模組,獲取到今天的日期,轉化為str儲存到now變數裡。

bash if(now in str(judge['sign_day'])): return jsonify({"stayus":200,"mag":"今天已經簽到過了哦!","flagx":'0'}) 上述程式碼塊解釋: 這裡是一個判斷分支: 如果今天的日期已經在sign_day欄位裡存在了,說明今天已經簽到過了,這樣的話不會執行新增積分操作。 根據上文:其他情況的話:

bash if(judge['sign_day']==None): sign_str=now 上述程式碼塊解釋: 這裡這樣設計的原因是:因為我的資料庫是用;為分隔符來標識的,所以當某一個使用者是第一次進行簽到操作的話,我們需要直接賦值now變數現在的目標值。

bash elif(judge['sign_day']!=None): sign_str=judge['sign_day'] sign_str=sign_str+";"+now 上述程式碼塊解釋: 這一塊對應上文的if語句。這裡當然就是某一個使用者不是第一次進行簽到操作。 這裡當然要進行一個;的操作來區分不同的日期。

bash sign_jifeng=judge['jifeng']+8 我這裡設計的是如果簽到成功的話,該使用者的積分加8分。

bash db.mongo.update_one( find_name, {'$set':{"sign_day":sign_str,"jifeng":sign_jifeng} } ) 上述程式碼塊解釋: 當然,上述需要做的都已經做完了,接下來就是一個更新資料庫的操作。 學過MongoDB的人都知道,我們以使用者名稱為目標建,更新我們的sign_day【儲存日期欄位】和jifeng【簽到成功積分+8的操作】。

bash return jsonify({"stayus":200,"mag":"成功簽到,計入積分!","flagx":'1'}) 最後我們處理完後端的一系列操作,傳遞值給前端,做為響應。

此部分成功上線通過測試!

三,增加日曆功能

此處,模組為存前端建設,主要運用了JavaScript語言處理一系列的問題操作。 先上效果圖: 在這裡插入圖片描述 部分程式碼展示: 這部分是一個日曆的動態演算法,沒有什麼好說的。 在這裡插入圖片描述

四,近期更新日誌

近期更新功能: ———————————————————————————————— 1.增加簽到功能 在這裡插入圖片描述

2,增加日曆功能 在這裡插入圖片描述

3,增加遊戲模組 在這裡插入圖片描述 在這裡插入圖片描述

4,增加翻譯功能 (申請了百度翻譯api)

在這裡插入圖片描述

5,增加天氣功能(申請了和風天氣api) 在這裡插入圖片描述

6,增加填空答題功能 在這裡插入圖片描述

7,樣式優化

在這裡插入圖片描述

五,本文內容程式碼附錄:

後端主要程式碼: ```bash

簽到模組

@app.route("/xxx",methods=['POST','GET']) def xxx(): find_name={"username":session['username']} judge=db.mongo.find_one(find_name) try: judge['sign_day'] except: db.mongo.update_one( find_name, {'$set':{"sign_day":None} } ) flag = request.form.get('flag') now = str(datetime.date.today()) sign_str='' if(now in str(judge['sign_day'])): return jsonify({"stayus":200,"mag":"今天已經簽到過了哦!","flagx":'0'}) else: if(judge['sign_day']==None): sign_str=now elif(judge['sign_day']!=None): sign_str=judge['sign_day'] sign_str=sign_str+";"+now

    sign_jifeng=judge['jifeng']+8
    db.mongo.update_one(
        find_name,
        {'$set':{"sign_day":sign_str,"jifeng":sign_jifeng}
         }
    )
    return jsonify({"stayus":200,"mag":"成功簽到,計入積分!","flagx":'1'})

```

前端主要程式碼:

```bash

```

六,後言

本次就先記錄一下前倆個更新內容,太多了寫不完,之後有時間我繼續記錄哈。

在這裡插入圖片描述