1.多玩具遙控&&websocket回鍋

2.綁定玩具時(shí)添加好友的最終邏輯

3.消息&&好友列表

4.chat聊天&&對(duì)話窗口

?

1.多玩具遙控&&websocket回鍋

app的4個(gè)隱藏需求:

?回顧:

?

下面看一下上一講是如何創(chuàng)建的websocket

下面,開始創(chuàng)建websocket的鏈接:

?

?下面,我們看一下如何給兩個(gè)玩具發(fā)送不同的內(nèi)容,或者相同的內(nèi)容:

輸入上邊的device_key,我們可以看到點(diǎn)擊開機(jī),成功開機(jī)了

下圖是我們開機(jī)的邏輯:模擬的智能玩具的硬件

?

我們可以在devices.py里邊找到3個(gè)校驗(yàn)的邏輯:

如果能夠找到65行的device_key就代表可以找到過了.也就屬于正常的玩具.并且返回成功以及將玩具的id返回,這樣的目的是為了更好的將玩具進(jìn)行區(qū)分.

如果沒有查找到任何的一條信息,那么走第一個(gè)else,看一下碼是不是授權(quán)的玩具碼.兩個(gè)邏輯都不能才是沒有權(quán)限

最終的邏輯是在外邊,寫一個(gè)播放:無論怎樣都會(huì)播放一段錄音

當(dāng)我們點(diǎn)擊,sendmusic這個(gè)按鈕的時(shí)候,

sendmusic也就是回顧的這一段代碼:

?

?這里邊,我們?cè)俦O(jiān)聽這個(gè)事件:

?下圖是收到內(nèi)容,并且將內(nèi)容發(fā)送過去

?

下面,我們?cè)倏匆幌潞蠖说捻憫?yīng),

一個(gè)是開機(jī),另一個(gè)是發(fā)送歌曲

?

上圖顯示的是app要走的代碼:

while上邊是app連接過程的代碼:

while部分是收發(fā)消息的過程:首先將受到的消息反序列化成字典,拿出第21行的代碼:

鍵對(duì)應(yīng)后邊的是值是websocket鏈接.

?再過來找onmessage事件:

這個(gè)地方一開始沒有寫var

?玩具端收到鏈接之后,

?我們?cè)賹?duì)message里邊的信息進(jìn)行序列化,然后獲取music的url

點(diǎn)擊發(fā)送的時(shí)候,至少應(yīng)該能夠給兩個(gè)玩具發(fā)送消息,一個(gè)叫做"小糞球",另一個(gè)叫"臭屎蛋",彈出框來

選擇器是選擇時(shí)間的.

下面我們嘗試一下加上一個(gè)菜單.

?

?

初始化上邊的li條的

保存:

?

?

43行就是用來開啟滑動(dòng)的代碼

我們需要將這行代碼放在初始化代碼里邊:很明顯下面是JavaScript代碼

這個(gè)時(shí)候,可以滑動(dòng)菜單了

?

我們只需要保留兩個(gè)就可以了,原因是我們保存了兩個(gè)玩具

如何把信息寫活???

ul&&li

我們調(diào)整一下,使展示的內(nèi)容多一點(diǎn):

我們?cè)賴L試居中

?

加上文字居中以及id

?

?

?兩個(gè)只需要留一行就行了,下面我們通過函數(shù)進(jìn)行創(chuàng)建:

?

?

?下面,我們需要再發(fā)送一個(gè)信息:

上邊,我們寫的是綁定的玩具列表我們需要的參數(shù)是user_id

我們開始在player.html里邊開始寫

寫完user_id,我們拍立在function里邊寫一個(gè)for循環(huán)進(jìn)行處理

下面,我們說一下實(shí)現(xiàn)的關(guān)系:

通過上邊的邏輯,先找user_id,再找toy_list

?下面,我們?cè)賵?zhí)行下圖的位置:

?

當(dāng)我們點(diǎn)擊"設(shè)置",再點(diǎn)擊"管理我的玩具",應(yīng)該彈出下面的內(nèi)容,我的內(nèi)容沒有出來,但是這個(gè)

?

?

執(zhí)行上圖這個(gè)函數(shù),會(huì)生成兩個(gè)標(biāo)簽.

?

上圖顯示的是原生安卓的樣式:

現(xiàn)在我們的需求是,點(diǎn)擊上邊的彈框內(nèi)容,我們要發(fā)送歌曲的.

現(xiàn)在,這個(gè)a沒有事件

?

下面找一下發(fā)送歌曲的按鈕:

向index界面發(fā)送

修改上邊字典里邊to_user里邊的參數(shù):

下面,我們還要登錄一個(gè)臭屎蛋:

我們需要輸入的是下圖中的:device_key

?

現(xiàn)在我們可以從app向?yàn)g覽器也就是模擬硬件端發(fā)送音樂了

?

為了解決的徹底一點(diǎn),我們注釋下面的事件

?

?

?注釋"發(fā)送音樂"這個(gè)按鈕

?

這樣我們的硬件端,也就是在這里的瀏覽器可以看到效果了

?

?

2.綁定玩具時(shí)添加好友的最終邏輯

?

欣慰

基于mpop給多個(gè)玩具發(fā)送音樂

一個(gè)接口的復(fù)用:一個(gè)是toy_manager里邊用的,另一個(gè)是在player頁面.

也就是bind_toy_list接口

rest就經(jīng)常會(huì)用到,rest是什么,其實(shí)就是一種規(guī)范

例如下圖,后端的

?

?

聊天做的時(shí)候,需要將綁定的玩具全部刪除掉

玩具時(shí)我創(chuàng)建的問題,還有,陌生人不能隨便和孩子說話

家長(zhǎng)應(yīng)該自然和孩子創(chuàng)建好友關(guān)系.你是小主人的什么人?爸爸&&媽媽

還有就是朋友.

?

下面,我們需要制作好友的這樣的一個(gè)功能

一些隱藏的功能:

?

?

?

下面我們要對(duì)朋友列表進(jìn)行處理:

?

下面是回顧一下MONGODB的用法

@devices.route("/bind_toy", methods=["POST"]) def bind_toy():toy_info = request.form.to_dict() # {toy_name,baby_name,remark,device_key} # remark是對(duì)某人的稱呼toy_info["bind_user"] = toy_info.pop("user_id") # 誰綁定的我,也就是當(dāng)前的用戶,如何拿值?,重新刪除并命名toy_info["avatar"] = "toy.jpg" # 實(shí)際應(yīng)該正常應(yīng)該傳圖片,但是這里寫死了# 通訊錄,一個(gè)玩具只能被一個(gè)用戶綁定,但是一個(gè)用戶可以綁定一個(gè)或多個(gè)玩具app_user=MONGODB.users.find_one({"_id":ObjectId(toy_info["bind_user"])})chat_window=MONGODB.chats.insert_one({"user_list":[],"chat_list":[]})#按照下面的需求創(chuàng)建一個(gè)聊天對(duì)話框# 字典里邊的 用戶列表和聊天列表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) #聊天對(duì)話框 }]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) # 聊天對(duì)話框,因?yàn)橛玫氖且粋€(gè)窗口,因此只需要?jiǎng)?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會(huì)稍微慢一點(diǎn)點(diǎn),但是不會(huì)又太多感知到這個(gè)現(xiàn)象# MONGODB.users.update_one({"_id": ObjectId(toy_info["bind_user"])},# {"$push":{"bind_toy":str(toy.inserted_id)}} )# 我們已經(jīng)創(chuàng)建的users表,可以更新一個(gè)信息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"])

下面,我們要恢復(fù)一下數(shù)據(jù),將玩具toys表里邊的數(shù)據(jù)刪除,將users表里邊的bind_toy里邊的值刪除掉.

如果一不小心新刪除,我們需要重新創(chuàng)建,但是一定要小心這個(gè)東西很容易出錯(cuò),剛才是刪除"bind_toy"里邊的內(nèi)容

現(xiàn)在,電腦模擬手機(jī),如何確認(rèn)掃碼成功?

我們依然選擇這兩條數(shù)據(jù)

?

?我們?cè)賡can頁面,先注釋下面的兩行:

這個(gè)時(shí)候,我們?cè)俅吸c(diǎn)擊綁定,應(yīng)該直接跳轉(zhuǎn)到"創(chuàng)建你的玩具"

?

點(diǎn)擊"綁定創(chuàng)建玩具",

?

這個(gè)時(shí)候,玩具列表就有了這條信息

現(xiàn)在缺少一個(gè)數(shù)據(jù)remark,我們可以從朋友列表中找到friend_remark信息"爸爸"

下圖是toys表內(nèi)容

?

?下圖是chat表內(nèi)容:

我們可以從charts表中尋找到這個(gè)id

?

下圖是chats表內(nèi)容:

?

下邊是用戶users表里邊的bind_toy信息

下圖是　　users表信息

?

?這個(gè)就是綁定玩具時(shí)添加好友的最終邏輯.上邊的邏輯還需要捋

?

3.消息&&好友列表

?下面,我們需要做的是,在app中顯示好友的列表:

我們的目的是將"通訊錄"和好友的列表放在一起

頭像換一下,

?

?

我們對(duì)設(shè)置進(jìn)行修改

?

?現(xiàn)在,我們想要點(diǎn)擊"消息"跳轉(zhuǎn)到新的頁面,md代碼塊,以及mhe"不帶箭頭的代碼塊"

?mbo

?

下面,我們需要再寫打開這個(gè)頁面,

在index.html里邊寫一個(gè)id

?

?

這個(gè)時(shí)候,我們可以打開message頁面可,里邊什么都沒有,下面我們?cè)僭趍essage里邊寫一個(gè)圖文列表,選擇第三個(gè)

下面,我們對(duì)圖標(biāo)的三個(gè)部分一次進(jìn)行替換:

我們只保留上圖中的一個(gè)ul,并且加上一個(gè)id,也就是朋友列表

下面我們?cè)賹?#34;發(fā)起請(qǐng)求"

?

我們將index.html頁面里邊的user_info信息傳遞到message.html頁面里邊:

注釋上邊的注釋的目的是,只有在登錄時(shí)候才會(huì)更新一次

?這個(gè)時(shí)候,下圖中,如果添加了一個(gè)好友就不會(huì)顯示了

?

下面,我們?cè)賹懸粋€(gè)接口

先在serv里邊創(chuàng)建一個(gè)friend.py的藍(lán)圖文件

然后再在devices.py注冊(cè)一下:

直接復(fù)制devices.py里邊的代碼然后改寫

?

?

?

運(yùn)行,前端應(yīng)該打印出數(shù)據(jù),這個(gè)地方測(cè)試沒有打印出來

?

?

下面,我們?cè)偕蠄D所示的位置放點(diǎn)信息.

將我們之前寫的常見內(nèi)容復(fù)制過去:

上邊是修改的內(nèi)容

?

上圖通過for循環(huán),進(jìn)行循環(huán)出來

?

我們?cè)傩薷纳蠄D中的圖片:

?

?

不知道什么奇奇怪怪的問題,沒有顯示出來,可能是反應(yīng)比較慢

?

語音合成聲音很奇怪,文字轉(zhuǎn)成語音很奇怪,所以這個(gè)邏輯是需要修改的,但是語音可以轉(zhuǎn)成文字,絕對(duì)不能將文字轉(zhuǎn)換成語音.

?

4.chat聊天&&對(duì)話窗口

?下面,我們當(dāng)點(diǎn)擊上邊的內(nèi)容的時(shí)候,跳轉(zhuǎn)到新的頁面,并且可以發(fā)消息

下面我們新建一個(gè)chat.html頁面,寫一個(gè)md代碼塊

打開剛才注釋的這一部分代碼:,寫上這個(gè)打開的頁面chat.html

這個(gè)時(shí)候,點(diǎn)擊進(jìn)入新的頁面:

?

?

下面,我們?cè)僭谶@個(gè)頁面中導(dǎo)入一個(gè)css樣式:

下面我們?cè)僭趍bo中寫內(nèi)容:

還需要導(dǎo)入一個(gè)css樣式:

這個(gè)時(shí)候運(yùn)行,就可以顯示下圖中的信息了.

?

?

?

?

?

?

?

?

?

上圖中的小插件,用的是tuling123的接口,不能超過100次.

我們?cè)僭谙旅鎸懸粋€(gè)"底部選項(xiàng)卡"

?

我們只需要留下圖中的一個(gè)就夠了

?

?這個(gè)時(shí)候,會(huì)變成正中間的位置:

?

?

這樣下圖中就會(huì)變成有一個(gè)小的麥克風(fēng)

?

?

下面,我們?cè)賹懸粋€(gè)監(jiān)聽事件,

我們處理這個(gè)事件:

再寫一個(gè)ming代碼塊,替換上邊的初始化代碼塊

修改一下上圖的內(nèi)容:

下面,再監(jiān)聽一個(gè)事件,也就是松開了.

這個(gè)時(shí)候,我們可以出發(fā)"點(diǎn)擊"和"松開"事件了

下面,我們需要處理下圖的位置了:

我們?cè)傧聢D的位置已經(jīng)傳遞過了"值"

下面,我們應(yīng)該在chat.html里邊接收這個(gè)值.

得到下圖的內(nèi)容:

松開之后需要再創(chuàng)建一條語音消息.

我們看到上邊的兩個(gè)div是很相似的,我們?cè)谕鈱釉偬砑右粋€(gè)id.

在下面,我們?cè)偬砑右粋€(gè)函數(shù)進(jìn)行處理:

下面,我們?cè)賹憣蛹?jí)關(guān)系

下面,我們需要在松開的時(shí)候進(jìn)行創(chuàng)建:

?

?

這個(gè)是我們模擬自己的發(fā)送方式:

?

?下圖模擬的是兩個(gè)人,進(jìn)行處理

?

?

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/studybrother/p/10758011.html

總結(jié)

以上是生活随笔為你收集整理的巨蟒python全栈开发flask11项目开始3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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