巨蟒python全棧開發flask10 項目開始2

1.websocket異常處理

出現上圖報錯的緣由是什麼?

緣由是:websocket斷開了,因此報錯

19行接收的msg是None值,因此報錯.

打開一個文件,點擊發送音樂,出現上面的內容:

客戶端app發送的是1,瀏覽器發送的是2

to_user=toy01

to_user_socket=None

此時,to_user_socket是None裏邊沒有send 方法,天然會報錯.

 

下面,咱們會學習一種web斷開以後從新鏈接的一種機制進行處理.

 

"請確認你的眼神",左右眼

再寫一個mbo,註冊有現成的咱們直接找,就能夠了:

 

咱們在body裏邊寫入註冊框:

咱們須要在index.html裏邊的設置寫上一個id

下面咱們再寫一個,綁定頁面.,這個時候,須要綁定兩個頁面

下面進行判斷一下:

 

 

 

 

2.註冊+登陸+自動登陸

玩具備一項開機自檢的功能很是的強悍.是受權就能夠,不受權就不能夠.

下面,咱們開始寫一個登陸頁面,login.html,清空,寫代碼塊md,

由於是一個主界面,因此,咱們不可以帶箭頭,所以選擇mhe代碼塊中不帶箭頭的內容

 

寫完以後,咱們保存一下,進行同步,可是咱們須要點擊"設置",進入"login頁面"可是目前,咱們點擊設置"是沒有反應的

這個時候,咱們經過打印進行測試一下:

保存一下:

 上邊的extras去掉:而後保存一下:

重啓啓動程序:

這個時候,點擊設置,出現跳轉不過去.也就是localStorage裏邊是有值的,咱們跳轉不過去,只能在前端打印上邊的內容11111

咱們須要清空掉上邊的內容:

先寫一個清空命令,保存一下,這個時候,再註釋一下這個清空命令,一直點擊"這個設置",沒有出現界面,緣由是沒有保存login.html頁面.

 

咱們如今在上圖的界面,再點擊"返回",正常是直接退的,可是如今返回的是home頁面

 咱們能夠在login.html寫一個從新返回的函數爲空,這樣就按返回鍵,就什麼都不能返回了.

這個時候,咱們再點擊"返回",已經返回不了原來的home界面了

咱們只能點擊首頁,可是如今咱們能夠在首頁加上一個id,

咱們在上邊,先加上一個home,而後綁定一個事件:

先寫一個dga,再寫一個mop

 

 這個時候,咱們就能夠在"首頁"和"設置"之間來回切換了,可是存在的問題是,"速度可能會慢一些"

 問題:在home頁面也存在返回,就返回到了登陸頁面,所以咱們再home頁面也是須要作一下處理的.

back,只要是主菜單都是須要用這個內容的.

這個時候,點擊"返回"就不能再返回了

 

 先修改一下快捷鍵:"工具"=>"選項"

 下面,搜索"快捷"

咱們將整理修改爲Ctrl+Alt+L

python學完以後,有點強迫症,下圖中加上id

上面,咱們再寫綁定事件:

reg是子頁面,這個時候,咱們須要再次新建一個註冊頁面:

md代碼塊,mhe代碼塊選擇"帶箭頭的代碼塊"

title="註冊用戶"

 下面咱們再寫一個body

這個就是咱們事先註冊頁面的功能:

下面,咱們再在註冊頁面里加上註冊框,

 

下面再寫一個暱稱和性別,性別是須要選擇的

咱們查看一下單選框:

單選框代碼塊是mra,選擇第二個

由於性別是單選框,咱們須要寫兩個選擇其中一個:

 

保存,這個時候獲得下圖的效果:

app過審,須要不能直接寫男和女,蘋果須要審查

咱們能夠經過下圖的方式,實現數據的獲取

下面,咱們寫註冊以後能拿到的內容:

注意,下面的性別的取法是有一點點不一樣的,定義的越多,拿到的越多,而且須要經過for循環來拿這個

mdt代碼塊

 

下面,咱們再服務端新建一個user.py

套用content.py裏邊的信息,將內容寫在下面的位置

下面,咱們再在manager.py裏邊導入user.py

這個時候manager.py已經掛掉了,可是咱們能夠繼續添加內容進行處理,,導入flask裏邊的request請求

 

點擊"註冊",後邊服務端,沒有收到任何消息

沒有收到消息是後端沒有開啓運行,,開啓以後,咱們再次點擊"註冊",下面是服務端收到的消息

上圖是一些內容

這個時候,咱們能夠看一下數據,登陸NoSQL客戶端:

鏈接以後,點擊刷新一下,獲得下面的內容

 很明顯,上邊的密碼是不夠安全的,所以咱們須要進行密文處理一下

首先,咱們將下面的username,複製到"搜索"裏邊,而後狀況下面右下角里邊的內容:

右擊,移除文檔,點擊"OK"

 

咱們在後端加MD5,進行處理比較容易

下面的這個博客能夠利用下面的加密方式進行處理

 

咱們先點擊,上邊的"下載MD5壓縮包"

 

咱們獲得上邊的內容是,md5.js

 咱們只須要兩部,一步導入,一步添加加密

第一步就是導入

下面,咱們保存一下,再次註冊一遍:

再次點擊"註冊",

 這個時候,咱們在mongodb裏邊看到的是密文:

下面,咱們須要,點擊註冊以後跳轉到的不是login頁面,應該是登陸狀態,下面咱們須要再寫一個監聽事件

咱們如今寫這個url,有點費勁,咱們但願能夠實現這個不要這麼麻煩,在配置文件裏邊配置一下:也就是咱們看到每一個頁面都要加載mui.init

也就是說,咱們讓整個項目均可以使用這個

下圖是修改以後的位置:

下面是,進行處理,

 

 

 

咱們獲得上邊的內容:

爲何寫app01?, 咱們看起來是個死的,其實是個動態的參數,前面有個ws

下面,咱們再login登陸界面進行添加,用戶和密碼的id

下面,咱們再在後端寫一個接口

複製,上圖紅框內的內容:

再次啓動服務端:

在註冊頁面輸入信息,

 

咱們獲得下面的信息

 下面咱們進行判斷一下:

下面,咱們再新建一個user_info.html信息

 

 

爲何寫不帶箭頭,由於和這個不肯定是"用戶信息",仍是"登陸login"頁面

 

 

 

這樣,咱們就將用戶信息傳遞到user_info.html界面了

 這個時候,咱們獲得下面的信息:

若是緩存存在,就打開用戶信息這個界面:

 

下面,咱們就能夠傳遞值user_info

 extras能夠傳遞值user_info

下面咱們再在user.py裏邊再寫一個auto_login

注意,要及時保存,退出,再次登陸,點擊"設置",咱們能夠看到下圖中的信息:

 

 下面咱們須要在user_info.html裏邊拿一點東西

在上圖中加上var處理

 注意:_id都應該是小寫的形式

上邊一直出不來這個用戶信息???

 通過我反覆找錯誤,最後終於出來了

 

 

3.user_info&&toy_manager

下面,咱們寫一個圖文列表:

刪除或者註釋掉上邊紅框的內容:

咱們再來一個圖文列表:

mli,圖片居左:

mbo代碼塊裏邊的mli,選擇第三個,咱們看到下面的效果:

只留下一個:

獲得下圖的結果:

下面,咱們就顯示"圖片","暱稱",以及真實姓名

下面咱們再app基礎上創建一個圖片文件avatar

將兩張圖片放在avatar裏邊

 

 

下面咱們修改下面的內容:

下面咱們看一下app裏邊的顯示效果:

下面,咱們再寫一個登出

修改爲紅色,而且id="logout"

 下面,咱們再寫一個登出的事件,要清除緩存的內容

 

 管理玩具通暢也須要寫在"用戶信息"這個頁面

添加一個"普通"列表:

咱們只須要留一個li標籤就能夠了

 

咱們要加上一個圖標,不然太單調了

 

上圖中的icon有圖標

保存,咱們就能夠看到下面的效果了

咱們能夠,在點擊管理的時候,直接跳轉到玩具頁面:

 

 

下面,咱們再綁定一個事件:

dga代碼塊,打開一個新的頁面:

由於是子頁面,所以不須要style了

下面,咱們再寫一個toy_manager.html頁面:

清除,而後mdo代碼塊

寫一個帶返回箭頭的mhe:

 

下面,咱們再寫一個圖文列表mli,圖片居左的

只留一個就能夠了

感受仍是有點很差看,咱們再改變一下:

新建一個文件images,放在images裏邊:

 

4.建立二維碼

咱們能夠經過程序的每一個編號生成一個惟一的二維碼進行處理:

咱們經過程序對接二維碼,而後進行處理,進行着批量處理的過程

經過二維碼API進行處理:

使用這個"聯圖二維碼"

http://qr.liantu.com/api.php?text=

在上邊鏈接後邊加上數字能夠生成惟一的二維碼

 

下面,咱們再在後端寫一個QRcode.py進行處理

下面經過requests模塊進行一些測試:

咱們能夠獲得一個200的響應

print(res.content),打印出來的就是流,下面,咱們將這個流寫入到文件裏邊:

 

 下面咱們須要配置一下"聯圖二維碼"的配置.

咱們須要將轉化以後的二維碼保存一個文件夾內:新建一個QRCode文件夾

 

 

 寫完以後,咱們還想存儲到數據庫中

 ,最後咱們再寫入到mongodb裏邊

QRcode.py代碼以下

# Author: studybrother sun
import requests
from settings import LT_URL,QR_PATH,MONGODB
from uuid import uuid4
import time,hashlib,os
def create_QR(num):
    qr_li=[]    #建立一個空列表
    for i in range(num):    #經過循環建立多個玩具
        qr_info=f"{time.time()}{uuid4()}{time.time()}"
        qr_code=hashlib.md5(qr_info.encode("utf8")).hexdigest()
        res=requests.get(LT_URL % qr_code)
        qr_img=os.path.join(QR_PATH,f"{qr_code}.jpg")
        with open(qr_img,"wb")as f:
            f.write(res.content)
        qr={"device_key":qr_code}   #將字典放在列表中
        qr_li.append(qr)   #每次寫完添加一次
        time.sleep(0.12)    #加入時間,是由於可能qps超標
    MONGODB.devices.insert_many(qr_li)#設備信息devices
if __name__ == '__main__':
    create_QR(10)   #下面測試一下

運行:

連接已經發生了改變

問題是有不少隱藏的bug,須要一點點挖掘

這個時候,連接已經有了圖片對應 :

清空原來的數據,再次運行,獲得下面的10條數據在MongoDB裏邊

 

 

5.掃碼頁面低版本

 下面咱們找一下H5plus,找一下掃描二維碼的功能

上邊的信息,看不太懂,"方法什麼的",主要是,

從最簡單的入手解決問題,如今咱們要"跳轉到新頁面"

 建立一個qr_scan,二維碼掃描.狀況,mdo代碼塊

mhe確定是帶箭頭的

下面,咱們須要綁定事件進行處理

下面咱們再寫事件

點擊"掃描綁定玩具"獲得下面的界面

 

 

看一下這個create

id是必填項

咱們從案例中找到具體的內容

直接覆蓋原來的代碼:qr_scan.html

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Barcode Example</title>
    <script type="text/javascript" >
// 擴展API加載完畢後調用onPlusReady回調函數 
document.addEventListener( "plusready", onPlusReady, false );
// 擴展API加載完畢，如今能夠正常調用擴展API
function onPlusReady() {
    var e = document.getElementById("scan");
    e.removeAttribute( "disabled" );
}
var scan = null;
function onmarked( type, result ) {
    var text = '未知: ';
    switch(type){
        case plus.barcode.QR:
        text = 'QR: ';
        break;
        case plus.barcode.EAN13:
        text = 'EAN13: ';
        break;
        case plus.barcode.EAN8:
        text = 'EAN8: ';
        break;
    }
    alert( text+result );
}
function startRecognize() {
    scan = new plus.barcode.Barcode('bcid');
    scan.onmarked = onmarked; 
}
function startScan() {
    scan.start();
}
function cancelScan() {
    scan.cancel();
}
function setFlash() {
    scan.setFlash();
}
    </script>
    <style type="text/css">
*{
    -webkit-user-select: none;
}
html,body{
    margin: 0px;
    padding: 0px;
    height: 100%;
}
#bcid {
    background:#0F0;
    height:480px;
    width:360px;
}
    </style>
    </head>
    <body >
        <input type='button' onclick='startRecognize()' value='建立掃碼控件' />
        <input type='button' onclick='startScan()' value='開始掃碼' />
        <input type='button' onclick='cancelScan()' value='取消掃碼' />
        <input type='button' onclick='setFlash()' value='開啓閃光燈' />
        <div id= "bcid"></div>
        <input type='text' id='text'/>
    </body>
</html>

View Code

這個時候,咱們能夠看到上邊的界面:

下載這個軟件,實現電腦和手機之間的鏈接

手機連接上以後,發生的變化:

 一直沒有和手機鏈接成功,緣由多是wifi的問題,用本身的電腦開啓wifi,能夠成功了.成功掃碼了.

(一個晚上過去了)

 上邊的ApowerMirror是一個能夠投影的軟件,可是,輸入密碼,本身會變黑,防止密碼泄露

.

6.掃描二維碼&&數據校驗

 這個時候,咱們就能夠掃碼進行處理了,能夠獲得

 

下面,咱們想要修改一下二維碼的樣式,改爲mui相關樣式

在app裏邊新建一個scan,md代碼塊,mhe(帶箭頭的代碼塊)

 

下面,咱們找一下這個qr_scan示例代碼以及事件:

 

將上邊的兩行代碼,都放在scan.html裏邊:

這個時候,咱們玩具管理,跳轉到scan.html頁面裏邊:

點擊,掃碼,出現下圖的錯誤:

咱們應該寫在mplus裏邊寫

修改以後,出現上圖中的錯誤:

註釋上邊這一行

 查看一下原來程序中的源碼:

咱們追加到scan裏邊:

放開註釋行:

源碼中有一個bcid

咱們將源碼,放在圖示位置:

bcid有高寬,咱們須要本身定義:

只有限制二維碼大小才行

 

這個時候,二維碼,才能開始掃碼

咱們能夠先刪掉圖示的位置:

反正也看不懂,先刪掉

咱們直接打開,這個結果::

 掃完碼,底部就能夠出來內容了

toast也就是一種提示框的意思:

 

咱們想要的效果,是掃完以後,關閉掃描頁面,

添加上圖的mui.back();代碼以後, 這個時候掃描二維碼,跳轉到一開始的界面:

 

咱們須要鑑定,是否是咱們數據庫中的二維碼,這個時候纔會有價值,下面咱們再後端進行再在serv裏邊建立一個py藍圖文件

咱們能夠,套用user.py裏邊的信息

下面開始發送數據在前端:

這個時候,咱們須要在後端的manager裏邊將藍圖註冊一下藍圖

 

修改完成後,咱們隨便掃一個碼,看一下前端app能不能打印出內容:

這樣既能夠掃描成,也能夠掃描失敗了

如今,咱們不想每次都掃碼,先每次給一個值處理

註釋,而且保存這個嗎,之後擴展,再打開

這個時候,咱們再掃碼,就會永遠掃碼成功

上圖是,咱們再打印消息

這個時候,咱們開始能夠掃碼了

 

7.綁定玩具

 掃碼成功該幹什麼?

下面,咱們開始綁定一個玩具

新建一個bing_toy.html

咱們須要在第二個框,裏邊寫上註冊框,在login.html裏邊拿現成的就能夠了

 

 

 

 

 

 

下面咱們再剛纔的scan.html裏邊掃碼成功就開啓

 

這個時候,咱們點擊掃碼,能夠打開下圖

 

下面,咱們再修改一下綁定事件:

post,要麼是發送請求,要麼是打開新窗口,這兩種方式:

 

 

 

下面,咱們傳遞數據,下圖是bind_toy.html頁面

下面,咱們再寫後端的界面:

下面,咱們再在devices.py裏邊寫綁定玩具

拿到玩具信息,而且再加上一些信息

咱們的目的,就是,更方便的操做後端信息:

 

 下面,保存,運行,開始掃碼:存在一點問題:

 

 

刪除上圖的代碼:

 

這個時候,掃描能夠出來正確的"建立你的玩具了"

輸入上邊的內容,點擊"綁定建立玩具"

這個時候,咱們看到"服務端請求成功了"

找了半天錯誤,最後先後端都從新啓動變好了,上圖是傳遞回來的數據

 

 

 

 

咱們綁定以後應該顯示,綁定幾個顯示幾個

toy.jpg

咱們將下載的圖片放在,avatar裏邊

 

 

咱們須要只要一點擊進入這個"toy_manager.html"裏邊,就能拿到玩具列表

 

 下面,咱們仍是須要在devices裏邊寫一個接口:綁定的玩具列表

 注意上圖的第32行

下面,再作一下修改

咱們拿到"源源",怎麼處理這個數據?

 咱們須要添加一個圖文列表和id

咱們再home頁面中,建立過一個相似的頁面:

這個建立內容的,大的函數

咱們將這個函數放在toy.manager.html頁面的script的上邊

咱們須要將下圖的這個位置註釋掉

修改上圖的形參爲toy_info

上邊玩具名,下邊寶寶名字,左邊是玩具的頭像

寫完以後,咱們須要將列表進行for循環一下:

這個時候,咱們從新啓動,而且從新登陸,看一下能不能出來結果:

由此,咱們能夠獲得結果,注意下圖的位置不要寫錯了

 

修改爲圓形的圖片:

這個時候,就變圓了,若是綁定完成,咱們須要跳轉到一個頁面:

下面,咱們再次綁定一個玩具,看一下效果

上一個,咱們選擇尾號的是9b,下面咱們選擇5a

點擊綁定建立玩具,獲得下面的內容

其實綁定邏輯裏邊還有一個邏輯,那就是添加好友的邏輯

8.玩具開機

 如今咱們啓動玩具,只要玩具已啓動就能訪問websocket,

上圖中的websocket並非玩具id鏈接上的

上圖顯示的是咱們建立的兩個玩具

咱們須要用859e進行鏈接

咱們想要經過key,拿裏邊的_id的值

下面,咱們再看一個隱藏的需求:

下面,咱們但願合成上邊的三句話:

咱們用一下第六天的內容,文本轉聲音文件:text2audio.py

打印出流和mp3文件:

咱們再合成一個NoBind.mp3文件:

生成第三句話

 

 最後,咱們將生成的文件,放在music文件夾裏邊

 

 

 下面,咱們將玩具只要一開機,咱們執行一個視圖函數:

咱們先將,下面的幾行先註釋掉:

下面,咱們寫一個按鈕,開機

下面,咱們再寫一個函數

下面,咱們再在後端新建一個靜態文件:static,把jquery文件放在裏邊

 

下面咱們再發送信息,經過ajax,這裏是$post

咱們經過"火狐瀏覽器進行發送信息"

 

咱們先放一個正確的device_key

 

 點擊"開機",在控制檯中打印出了Success.mp3

如今咱們想要播放出來

 

這個時候,咱們再次點擊開機:要先刷新一下瀏覽器才行

下面再找一個受權的可是沒有綁定:

下面的是一個沒有受權的地址:

 

 科大訊飛的合成工具很NB的

點完開機,咱們就應該去鏈接,那麼咱們拿什麼去鏈接呢?咱們應該拿玩具的id進行鏈接

 

 

 

線面咱們再在devices.py裏邊寫一個玩具的id,當玩具傳遞成功以後.

 

 在火狐瀏覽器中,先輸入一個錯誤的id

沒有綁定的地址:

下面,咱們用正常的值進行處理

 

這個時候,咱們獲得正確的結果:

這個時候,咱們斷開ws_serv.py,從新鏈接,

有可能隨時致使服務器崩盤,咱們如何讓用戶無感知的鏈接:

websocket有斷開重連機制,

重啓ws_serv,這個時候再次鏈接瀏覽器

可是,這個時候ws依然能夠訪問成功,見下圖:

這個就是斷開重連機制.

 

咱們斷開ws_serv,

 

瀏覽器,也就是硬件端,也就在很慢的創建鏈接,其實很難達到遞歸深度,只要咱們再次鏈接就能夠了

這個時候,咱們就能夠從新創建鏈接了

其實這個遞歸是有坑的,咱們若是新建一個,就會變成一個新的,就很差時了,所以咱們用遞歸能夠避免這個小坑.

這個遞歸,也就是websocket重連機制.

 

9.AppWebsocket斷開重練&&MuiFire調用WS事件.

 下面咱們讓用戶也使用websocket機制進行處理.下面測試,咱們用夜神

咱們想要用戶一登陸app,就能夠鏈接websocket,隨時保持用戶和服務器之間鏈接

咱們將websocket頁面寫在index界面比較合理

下面咱們叫它一上就鏈接上

 

咱們看到上圖是在登陸.

登陸成功,應該如何處理呢?

 

 

 下面,咱們發歌,怎麼發呢?

咱們想要區分玩具發送,明天處理.

咱們如今處理,隨便給一個發送"小糞球",這個分地方先寫死

 

咱們先用5a對應的id　　5cc070f027c41e4d8891fe52

 

下面,咱們再用fire時間進行處理:

打包以前必定要替換

下面,咱們在最後進行監聽一下:

 

 渡盡劫波兄弟在,相逢一笑泯恩仇!完工

 

重啓先後端項目,瀏覽器端先放入玩具的device_key,HBuilder放_id信息

 下面,咱們作一下區分一下:

下面,咱們在傳遞一下;(這個是專門針對瀏覽器進行的操做)

 雖然與實際業務沒有什麼關係,可是目的就是作好區分工做

 

 

再次開機,輸入下面的內容

 d056b7666e43bf1b4e19b3d9b4552b5a