巨蟒python全栈开发flask11项目开始3
1.多玩具遙控&&websocket回鍋
2.綁定玩具時添加好友的最終邏輯
3.消息&&好友列表
4.chat聊天&&對話窗口
?
1.多玩具遙控&&websocket回鍋
app的4個隱藏需求:
?回顧:
?
下面看一下上一講是如何創(chuàng)建的websocket
下面,開始創(chuàng)建websocket的鏈接:
?
?下面,我們看一下如何給兩個玩具發(fā)送不同的內容,或者相同的內容:
輸入上邊的device_key,我們可以看到點擊開機,成功開機了
下圖是我們開機的邏輯:模擬的智能玩具的硬件
?
我們可以在devices.py里邊找到3個校驗的邏輯:
如果能夠找到65行的device_key就代表可以找到過了.也就屬于正常的玩具.并且返回成功以及將玩具的id返回,這樣的目的是為了更好的將玩具進行區(qū)分.
如果沒有查找到任何的一條信息,那么走第一個else,看一下碼是不是授權的玩具碼.兩個邏輯都不能才是沒有權限
最終的邏輯是在外邊,寫一個播放:無論怎樣都會播放一段錄音
當我們點擊,sendmusic這個按鈕的時候,
sendmusic也就是回顧的這一段代碼:
?
?這里邊,我們再監(jiān)聽這個事件:
?下圖是收到內容,并且將內容發(fā)送過去
?
下面,我們再看一下后端的響應,
一個是開機,另一個是發(fā)送歌曲
?
上圖顯示的是app要走的代碼:
while上邊是app連接過程的代碼:
while部分是收發(fā)消息的過程:首先將受到的消息反序列化成字典,拿出第21行的代碼:
鍵對應后邊的是值是websocket鏈接.
?再過來找onmessage事件:
這個地方一開始沒有寫var
?玩具端收到鏈接之后,
?我們再對message里邊的信息進行序列化,然后獲取music的url
點擊發(fā)送的時候,至少應該能夠給兩個玩具發(fā)送消息,一個叫做"小糞球",另一個叫"臭屎蛋",彈出框來
選擇器是選擇時間的.
下面我們嘗試一下加上一個菜單.
?
?
初始化上邊的li條的
保存:
?
?
43行就是用來開啟滑動的代碼
我們需要將這行代碼放在初始化代碼里邊:很明顯下面是JavaScript代碼
這個時候,可以滑動菜單了
?
我們只需要保留兩個就可以了,原因是我們保存了兩個玩具
如何把信息寫活???
ul&&li
我們調整一下,使展示的內容多一點:
我們再嘗試居中
?
加上文字居中以及id
?
?
?兩個只需要留一行就行了,下面我們通過函數(shù)進行創(chuàng)建:
?
?
?下面,我們需要再發(fā)送一個信息:
上邊,我們寫的是綁定的玩具列表我們需要的參數(shù)是user_id
我們開始在player.html里邊開始寫
寫完user_id,我們拍立在function里邊寫一個for循環(huán)進行處理
下面,我們說一下實現(xiàn)的關系:
通過上邊的邏輯,先找user_id,再找toy_list
?下面,我們再執(zhí)行下圖的位置:
?
當我們點擊"設置",再點擊"管理我的玩具",應該彈出下面的內容,我的內容沒有出來,但是這個
?
?
執(zhí)行上圖這個函數(shù),會生成兩個標簽.
?
上圖顯示的是原生安卓的樣式:
現(xiàn)在我們的需求是,點擊上邊的彈框內容,我們要發(fā)送歌曲的.
現(xiàn)在,這個a沒有事件
?
下面找一下發(fā)送歌曲的按鈕:
向index界面發(fā)送
修改上邊字典里邊to_user里邊的參數(shù):
下面,我們還要登錄一個臭屎蛋:
我們需要輸入的是下圖中的:device_key
?
現(xiàn)在我們可以從app向瀏覽器也就是模擬硬件端發(fā)送音樂了
?
為了解決的徹底一點,我們注釋下面的事件
?
?
?注釋"發(fā)送音樂"這個按鈕
?
這樣我們的硬件端,也就是在這里的瀏覽器可以看到效果了
?
?
2.綁定玩具時添加好友的最終邏輯
?
欣慰
基于mpop給多個玩具發(fā)送音樂
一個接口的復用:一個是toy_manager里邊用的,另一個是在player頁面.
也就是bind_toy_list接口
rest就經(jīng)常會用到,rest是什么,其實就是一種規(guī)范
例如下圖,后端的
?
?
聊天做的時候,需要將綁定的玩具全部刪除掉
玩具時我創(chuàng)建的問題,還有,陌生人不能隨便和孩子說話
家長應該自然和孩子創(chuàng)建好友關系.你是小主人的什么人?爸爸&&媽媽
還有就是朋友.
?
下面,我們需要制作好友的這樣的一個功能
一些隱藏的功能:
?
?
?
下面我們要對朋友列表進行處理:
?
下面是回顧一下MONGODB的用法
@devices.route("/bind_toy", methods=["POST"]) def bind_toy():toy_info = request.form.to_dict() # {toy_name,baby_name,remark,device_key} # remark是對某人的稱呼toy_info["bind_user"] = toy_info.pop("user_id") # 誰綁定的我,也就是當前的用戶,如何拿值?,重新刪除并命名toy_info["avatar"] = "toy.jpg" # 實際應該正常應該傳圖片,但是這里寫死了# 通訊錄,一個玩具只能被一個用戶綁定,但是一個用戶可以綁定一個或多個玩具app_user=MONGODB.users.find_one({"_id":ObjectId(toy_info["bind_user"])})chat_window=MONGODB.chats.insert_one({"user_list":[],"chat_list":[]})#按照下面的需求創(chuàng)建一個聊天對話框# 字典里邊的 用戶列表和聊天列表toy_info["friend_list"] = [{"friend_id":toy_info["bind_user"],"friend_nick":app_user.get("nickname"),"friend_avatar":app_user.get("avatar"),"friend_remark":toy_info.pop("remark"),"friend_type":"app",#區(qū)分是玩具還是好友, 幼兒社交圈{app/toy}"friend_chat":str(chat_window.inserted_id) #聊天對話框 }]toy = MONGODB.toys.insert_one(toy_info)app_add_toy={"friend_id": str(toy.inserted_id),"friend_nick": toy_info.get("toy_name"),"friend_avatar": toy_info.get("avatar"),"friend_remark": toy_info.get("baby_name"),"friend_type": "toy", # 區(qū)分是玩具還是好友, 幼兒社交圈{app/toy}"friend_chat": str(chat_window.inserted_id) # 聊天對話框,因為用的是一個窗口,因此只需要創(chuàng)建一次就可以了 }app_user["friend_list"].append(app_add_toy) #插入字典app_user["bind_toy"].append(str(toy.inserted_id))MONGODB.users.update_one({"_id": ObjectId(toy_info["bind_user"])},{"$set":app_user})# $set會稍微慢一點點,但是不會又太多感知到這個現(xiàn)象# MONGODB.users.update_one({"_id": ObjectId(toy_info["bind_user"])},# {"$push":{"bind_toy":str(toy.inserted_id)}} )# 我們已經(jīng)創(chuàng)建的users表,可以更新一個信息user_list=[toy_info["bind_user"],str(toy.inserted_id)]MONGODB.chats.update_one({"_id":chat_window.inserted_id},{"$set":{"user_list":user_list}})RET["code"]=0RET["msg"]="綁定成功"RET["data"]={}return jsonify(RET) @devices.route("/bind_toy_list", methods=["POST"])下面,我們要恢復一下數(shù)據(jù),將玩具toys表里邊的數(shù)據(jù)刪除,將users表里邊的bind_toy里邊的值刪除掉.
如果一不小心新刪除,我們需要重新創(chuàng)建,但是一定要小心這個東西很容易出錯,剛才是刪除"bind_toy"里邊的內容
現(xiàn)在,電腦模擬手機,如何確認掃碼成功?
我們依然選擇這兩條數(shù)據(jù)
?
?我們再scan頁面,先注釋下面的兩行:
這個時候,我們再次點擊綁定,應該直接跳轉到"創(chuàng)建你的玩具"
?
點擊"綁定創(chuàng)建玩具",
?
這個時候,玩具列表就有了這條信息
現(xiàn)在缺少一個數(shù)據(jù)remark,我們可以從朋友列表中找到friend_remark信息"爸爸"
下圖是toys表內容
?
?下圖是chat表內容:
我們可以從charts表中尋找到這個id
?
下圖是chats表內容:
?
下邊是用戶users表里邊的bind_toy信息
下圖是 users表信息
?
?這個就是綁定玩具時添加好友的最終邏輯.上邊的邏輯還需要捋
?
3.消息&&好友列表
?下面,我們需要做的是,在app中顯示好友的列表:
我們的目的是將"通訊錄"和好友的列表放在一起
頭像換一下,
?
?
我們對設置進行修改
?
?現(xiàn)在,我們想要點擊"消息"跳轉到新的頁面,md代碼塊,以及mhe"不帶箭頭的代碼塊"
?mbo
?
下面,我們需要再寫打開這個頁面,
在index.html里邊寫一個id
?
?
這個時候,我們可以打開message頁面可,里邊什么都沒有,下面我們再在message里邊寫一個圖文列表,選擇第三個
下面,我們對圖標的三個部分一次進行替換:
我們只保留上圖中的一個ul,并且加上一個id,也就是朋友列表
下面我們再寫"發(fā)起請求"
?
我們將index.html頁面里邊的user_info信息傳遞到message.html頁面里邊:
注釋上邊的注釋的目的是,只有在登錄時候才會更新一次
?這個時候,下圖中,如果添加了一個好友就不會顯示了
?
下面,我們再寫一個接口
先在serv里邊創(chuàng)建一個friend.py的藍圖文件
然后再在devices.py注冊一下:
直接復制devices.py里邊的代碼然后改寫
?
?
?
運行,前端應該打印出數(shù)據(jù),這個地方測試沒有打印出來
?
?
下面,我們再上圖所示的位置放點信息.
將我們之前寫的常見內容復制過去:
上邊是修改的內容
?
上圖通過for循環(huán),進行循環(huán)出來
?
我們再修改上圖中的圖片:
?
?
不知道什么奇奇怪怪的問題,沒有顯示出來,可能是反應比較慢
?
語音合成聲音很奇怪,文字轉成語音很奇怪,所以這個邏輯是需要修改的,但是語音可以轉成文字,絕對不能將文字轉換成語音.
?
4.chat聊天&&對話窗口
?下面,我們當點擊上邊的內容的時候,跳轉到新的頁面,并且可以發(fā)消息
下面我們新建一個chat.html頁面,寫一個md代碼塊
打開剛才注釋的這一部分代碼:,寫上這個打開的頁面chat.html
這個時候,點擊進入新的頁面:
?
?
下面,我們再在這個頁面中導入一個css樣式:
下面我們再在mbo中寫內容:
還需要導入一個css樣式:
這個時候運行,就可以顯示下圖中的信息了.
?
?
?
?
?
?
?
?
?
上圖中的小插件,用的是tuling123的接口,不能超過100次.
我們再在下面寫一個"底部選項卡"
?
我們只需要留下圖中的一個就夠了
?
?這個時候,會變成正中間的位置:
?
?
這樣下圖中就會變成有一個小的麥克風
?
?
下面,我們再寫一個監(jiān)聽事件,
我們處理這個事件:
再寫一個ming代碼塊,替換上邊的初始化代碼塊
修改一下上圖的內容:
下面,再監(jiān)聽一個事件,也就是松開了.
這個時候,我們可以出發(fā)"點擊"和"松開"事件了
下面,我們需要處理下圖的位置了:
我們再下圖的位置已經(jīng)傳遞過了"值"
下面,我們應該在chat.html里邊接收這個值.
得到下圖的內容:
松開之后需要再創(chuàng)建一條語音消息.
我們看到上邊的兩個div是很相似的,我們在外層再添加一個id.
在下面,我們再添加一個函數(shù)進行處理:
下面,我們再寫層級關系
下面,我們需要在松開的時候進行創(chuàng)建:
?
?
這個是我們模擬自己的發(fā)送方式:
?
?下圖模擬的是兩個人,進行處理
?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/studybrother/p/10758011.html
總結
以上是生活随笔為你收集整理的巨蟒python全栈开发flask11项目开始3的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: windows快捷键十八式(win10)
- 下一篇: SDOI2016 生成魔咒