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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。