python 全栈开发，Day132(玩具管理页面,控制玩具通讯录,基于请求的好友关系建立)...
生活随笔
收集整理的這篇文章主要介紹了
python 全栈开发，Day132(玩具管理页面,控制玩具通讯录,基于请求的好友关系建立)...
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?
先下載github代碼，下面的操作，都是基于這個版本來的！
https://github.com/987334176/Intelligent_toy/archive/v1.5.zip
注意：由于涉及到版權(quán)問題，此附件沒有圖片和音樂。請參考鏈接，手動采集一下！
請參考鏈接：
https://www.cnblogs.com/xiao987334176/p/9647993.html#autoid-3-4-0
?
一、玩具管理頁面
點擊下面的標簽，頁面還沒有反應(yīng)。
?
點擊之后，需要進入玩具管理頁面！
進入HBuilder項目MyApp，新建文件toy_info.html
?
修改?toy_info.html
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/mui.css" /></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">玩具詳情</h1></header><div class="mui-content"><div class="mui-row" style="text-align: center;"><img src="" id="avatar" style="width: 300px;height: 300px;border-radius: 50%;" /></div><ul class="mui-table-view"><li class="mui-table-view-cell">玩具名稱 ：<span id="toy_name"></span></li><li class="mui-table-view-cell">所屬主人 ：<span id="baby_name"></span></li><li class="mui-table-view-cell">設(shè)備編號 ：<span id="device_id"></span></li></ul></div></body><script src="js/mui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">mui.init()var Sdata = null;mui.plusReady(function() {Sdata = plus.webview.currentWebview();mui.post(window.serv + "/toy_info", {toy_id: Sdata.toy_id},function(data) {console.log(JSON.stringify(data));document.getElementById("avatar").src = "avatar/" + data.data.avatar;document.getElementById("toy_name").innerText = data.data.toy_name;document.getElementById("baby_name").innerText = data.data.baby_name;document.getElementById("device_id").innerText = data.data.device_id;});})</script></html>View Code
?
修改?toy_manager.html，點擊時，打開玩具管理頁面
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/mui.css" /></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">管理我的玩具</h1></header><div class="mui-content"><ul class="mui-table-view" id="toy_list"><li class="mui-table-view-cell mui-media"><a id="add_toy"><img class="mui-media-object mui-pull-left" src="images/add.png"><div class="mui-media-body">你還沒有玩具<p class="mui-ellipsis">點擊此處掃描二維碼添加玩具</p></div></a></li></ul></div></body><script src="js/mui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">mui.init();mui.plusReady(function(){// 發(fā)送POST請求，訪問玩具列表mui.post(window.serv + "/toy_list",{user_id:plus.storage.getItem("user")},function(data){console.log(JSON.stringify(data));// for循環(huán)玩具列表for (var i = 0; i < data.data.length; i++) {// 調(diào)用自定義函數(shù),渲染玩具列表create_content(data.data[i]);}})});function create_content(content) { //玩具列表var litag = document.createElement("li");litag.className = "mui-table-view-cell mui-media";var atag = document.createElement("a");atag.id = content._id;atag.onclick = function() {console.log(this.id);open_toy_info(this.id); //打開玩具管理頁面}var imgtag = document.createElement("img");imgtag.className = "mui-media-object mui-pull-left";imgtag.style = "border-radius: 50%;width: 45px;height: 45px; "imgtag.src = "avatar/" + content.avatar;var divtag = document.createElement("div");divtag.className = "mui-media-body";divtag.innerText = content.baby_name;var ptag = document.createElement("p");ptag.className = "mui-ellipsis";ptag.innerText = content.toy_name;litag.appendChild(atag);atag.appendChild(imgtag);atag.appendChild(divtag);divtag.appendChild(ptag);document.getElementById("toy_list").appendChild(litag);}document.getElementById("add_toy").addEventListener("tap", function() {mui.openWindow({url: "qrcode.html",id: "qrcode.html",})});function open_toy_info(toy_id) { //打開玩具管理頁面mui.openWindow({url: "toy_info.html",id: "toy_info.html",extras: {toy_id: toy_id}})}</script></html>View Code
?
進入flask后端，修改?serv-->toys.py，增加接口
from flask import Blueprint, request, jsonify from setting import MONGO_DB from setting import RET from bson import ObjectIdtoy = Blueprint("toy", __name__)@toy.route("/toy_list", methods=["POST"]) def toy_list(): # 玩具列表user_id = request.form.get("user_id") # 用戶id# 查看用戶信息user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})bind_toy = user_info.get("bind_toy") # 獲取綁定的玩具bind_toy_id = [] # 玩具列表for toy_id in bind_toy: # 獲取玩具列表中的所有玩具id bind_toy_id.append(ObjectId(toy_id))# 一次性查詢多個玩具toys_list = list(MONGO_DB.toys.find({"_id": {"$in": bind_toy_id}}))for index,item in enumerate(toys_list):# 將_id轉(zhuǎn)換為字符串toys_list[index]["_id"] = str(item.get("_id"))RET["code"] = 0RET["msg"] = ""RET["data"] = toys_listreturn jsonify(RET)@toy.route("/device_toy_id", methods=["POST"]) def device_toy_id(): # 驗證設(shè)備idRET["code"] = 0RET["msg"] = "開機成功"RET["data"] = {}device_id = request.form.get("device_id") # 獲取設(shè)備id# 判斷設(shè)備id是否在設(shè)備表中if MONGO_DB.devices.find_one({"device_id": device_id}):# 查詢設(shè)備id是否在玩具表中toy_info = MONGO_DB.toys.find_one({"device_id": device_id})if toy_info:# RET添加鍵值,獲取玩具idRET["data"]["toy_id"] = str(toy_info.get("_id"))# 音頻文件RET["data"]["audio"] = "success.mp3"return jsonify(RET)else:# 已授權(quán)的設(shè)備,但是沒有綁定主人RET["msg"] = "找小主人"RET["data"]["audio"] = "Nobind.mp3"return jsonify(RET)else:# 不在設(shè)備表中，說明是未授權(quán)，或者是冒牌的！RET["msg"] = "聯(lián)系玩具廠"RET["data"]["audio"] = "Nodevice.mp3"return jsonify(RET)@toy.route("/toy_info", methods=["POST"]) def toy_info(): # 玩具管理頁面toy_id = request.form.get("toy_id")toy = MONGO_DB.toys.find_one({"_id":ObjectId(toy_id)})toy["_id"] = str(toy.get("_id"))RET["code"] = 0RET["msg"] = ""RET["data"] = toyreturn jsonify(RET)View Code
?
重啟?manager.py，使用模擬器訪問，效果如下：
?
二、控制玩具通訊錄
玩具管理頁面，還需要展示 通訊錄。
修改?toy_info.html
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/mui.css" /></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">玩具詳情</h1></header><div class="mui-content"><div class="mui-row" style="text-align: center;"><img src="" id="avatar" style="width: 300px;height: 300px;border-radius: 50%;" /></div><ul class="mui-table-view"><li class="mui-table-view-cell">玩具名稱 ：<span id="toy_name"></span></li><li class="mui-table-view-cell">所屬主人 ：<span id="baby_name"></span></li><li class="mui-table-view-cell">設(shè)備編號 ：<span id="device_id"></span></li></ul><div class="mui-row" style="text-align: center;">玩具通訊錄</div><ul class="mui-table-view mui-grid-view" id="contacts"><li class="mui-table-view-cell mui-media mui-col-xs-3"><a id="add_friend"><img class="mui-media-object" src="images/add.png" style="border-radius: 50%;width: 75px;height: 75px;"><div class="mui-media-body">添加好友</div></a></li></ul></div></body><script src="js/mui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">mui.init()var Sdata = null;mui.plusReady(function() {Sdata = plus.webview.currentWebview();mui.post(window.serv + "/toy_info", {toy_id: Sdata.toy_id},function(data) {console.log(JSON.stringify(data));document.getElementById("avatar").src = "avatar/" + data.data.avatar;document.getElementById("toy_name").innerText = data.data.toy_name;document.getElementById("baby_name").innerText = data.data.baby_name;document.getElementById("device_id").innerText = data.data.device_id;for(var i = 0; i < data.data.friend_list.length; i++) {create_friend(data.data.friend_list[i]);}});});function create_friend(friend) {var litag = document.createElement("li");litag.className = "mui-table-view-cell mui-media mui-col-xs-3";var atag = document.createElement("a");atag.id = friend.friend_idvar imgtag = document.createElement("img");imgtag.className = "mui-media-object";imgtag.style.borderRadius = "50%";imgtag.style.width = "75px";imgtag.style.height = "75px";imgtag.src = "avatar/" + friend.friend_avatar;var divtag = document.createElement("div");divtag.innerText = friend.friend_remark;divtag.className = "mui-media-body";litag.appendChild(atag);atag.appendChild(imgtag);atag.appendChild(divtag);document.getElementById("contacts").appendChild(litag);}</script></html>View Code
?
使用模擬器訪問，效果如下：
?
三、基于請求的好友關(guān)系建立
加好友流程圖
?
?
同意流程圖
?
修改?qrcode.html
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/mui.css" /></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">掃描玩具二維碼</h1></header><div class="mui-content"><div style="height: 550px;" id="qr"></div></div></body><script src="js/mui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">mui.init()var Sdata = null;mui.plusReady(function() {Sdata = plus.webview.currentWebview(); // var barcode = new plus.barcode.Barcode('qr'); // // plus.webview.currentWebview().append(barcode); // barcode.onmarked = chenggong; // barcode.start();chenggong(0,"864aad3ca55d9fe9bdcbef70e174fc3f")})function chenggong(type, code) {mui.post(window.serv + "/yanzheng_qr", {device_id: code},function(data) {console.log(JSON.stringify(data));mui.toast(data.msg);if(data.code == 2) {mui.back();}if(data.code == 1) {//加好友的小邏輯 跳轉(zhuǎn)到加好友頁面 if(Sdata.toy_id) {//1.玩具 添加好友 toys toysmui.openWindow({url: "add_req.html",id: "add_req.html",extras: {req_type: "toy",user_id: Sdata.toy_id,friend_id: data.data.toy_id}})} else {// 2.手機app 添加好友 users toysmui.openWindow({url: "add_req.html",id: "add_req.html",extras: {req_type: "user",user_id: plus.storage.getItem("user"),friend_id: data.data.toy_id}})}}if(data.code == 0) {//今天的邏輯 創(chuàng)建玩具 綁定用戶 成為玩具的第一個好友//1.創(chuàng)建玩具：打開創(chuàng)建玩具的頁面if(Sdata.toy_id) {mui.back()} else {mui.openWindow({url: "bind_toy.html",id: "bind_toy.html",extras: {device_id: code}})}}})}</script></html>View Code
?
修改 toy_info.html
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/mui.css" /></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">玩具詳情</h1></header><div class="mui-content"><div class="mui-row" style="text-align: center;"><img src="" id="avatar" style="width: 300px;height: 300px;border-radius: 50%;" /></div><ul class="mui-table-view"><li class="mui-table-view-cell">玩具名稱 ：<span id="toy_name"></span></li><li class="mui-table-view-cell">所屬主人 ：<span id="baby_name"></span></li><li class="mui-table-view-cell">設(shè)備編號 ：<span id="device_id"></span></li></ul><div class="mui-row" style="text-align: center;">玩具通訊錄</div><ul class="mui-table-view mui-grid-view" id="contacts"><li class="mui-table-view-cell mui-media mui-col-xs-3"><a id="add_friend"><img class="mui-media-object" src="images/add.png" style="border-radius: 50%;width: 75px;height: 75px;"><div class="mui-media-body">添加好友</div></a></li></ul></div></body><script src="js/mui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">mui.init()var Sdata = null;mui.plusReady(function() {Sdata = plus.webview.currentWebview();mui.post(window.serv + "/toy_info", {toy_id: Sdata.toy_id},function(data) {console.log(JSON.stringify(data));document.getElementById("avatar").src = "avatar/" + data.data.avatar;document.getElementById("toy_name").innerText = data.data.toy_name;document.getElementById("baby_name").innerText = data.data.baby_name;document.getElementById("device_id").innerText = data.data.device_id;for(var i = 0; i < data.data.friend_list.length; i++) {create_friend(data.data.friend_list[i]);}});})function create_friend(friend) {var litag = document.createElement("li");litag.className = "mui-table-view-cell mui-media mui-col-xs-3";var atag = document.createElement("a");atag.id = friend.friend_idvar imgtag = document.createElement("img");imgtag.className = "mui-media-object";imgtag.style.borderRadius = "50%";imgtag.style.width = "75px";imgtag.style.height = "75px";imgtag.src = "avatar/" + friend.friend_avatar;var divtag = document.createElement("div");divtag.innerText = friend.friend_remark;divtag.className = "mui-media-body";litag.appendChild(atag);atag.appendChild(imgtag);atag.appendChild(divtag);document.getElementById("contacts").appendChild(litag);}document.getElementById("add_friend").addEventListener("tap", function() {mui.openWindow({url: "qrcode.html",id: "qrcode.html",extras:{toy_id:Sdata.toy_id}})})</script></html>View Code
?
進入flask項目，修改devices.py，修改 yanzheng_qr函數(shù)
from flask import Blueprint, request, jsonify from setting import MONGO_DB from setting import RET from bson import ObjectIddevs = Blueprint("devs", __name__)@devs.route("/yanzheng_qr", methods=["POST"]) def yanzheng_qr(): # 驗證二維碼device_id = request.form.get("device_id") # 獲取設(shè)備idif MONGO_DB.devices.find_one({"device_id": device_id}): # 從數(shù)據(jù)庫中查詢設(shè)備id# 查詢該玩具是不是已被用戶綁定toy_info = MONGO_DB.toys.find_one({"device_id": device_id})# 未綁定開啟綁定邏輯if not toy_info:RET["code"] = 0RET["msg"] = "感謝購買本公司產(chǎn)品"RET["data"] = {}# 如果被綁定加好友邏輯開啟if toy_info:RET["code"] = 1RET["msg"] = "添加好友"RET["data"] = {"toy_id": str(toy_info.get("_id"))}else:RET["code"] = 2RET["msg"] = "二貨，這不是本公司設(shè)備，快去買正版!"RET["data"] = {}return jsonify(RET)@devs.route("/bind_toy", methods=["POST"]) def bind_toy(): # 綁定玩具chat_window = MONGO_DB.chat.insert_one({}) # 插入一個空數(shù)據(jù)chat_id = chat_window.inserted_id # 獲取聊天id user_id = request.form.get("user_id") # 用戶idres = MONGO_DB.users.find_one({"_id": ObjectId(user_id)}) # 查詢用戶id是否存在 device_id = request.form.get("device_id") # 設(shè)備idtoy_name = request.form.get("toy_name") # 玩具的昵稱baby_name = request.form.get("baby_name") # 小主人的名字remark = request.form.get("remark") # 玩具主人對您的稱呼gender = request.form.get("gender") # 性別 toy_info = {"device_id": device_id,"toy_name": toy_name,"baby_name": baby_name,"gender": gender,"avatar": "boy.jpg" if gender == 1 else "girl.jpg",# 綁定用戶"bind_user": str(res.get("_id")),# 第一個好友"friend_list": [{"friend_id": str(res.get("_id")), # 好友id"friend_name": res.get("nickname"), # 好友昵稱"friend_remark": remark, # 好友稱呼"friend_avatar": res.get("avatar"), # 好友頭像"friend_chat": str(chat_id), # 好友聊天id }]}toy_res = MONGO_DB.toys.insert_one(toy_info) # 插入玩具表數(shù)據(jù)if res.get("friend_list"): # 判斷用戶好友列表是否為空# 追加好友res["bind_toy"].append(str(toy_res.inserted_id))res["friend_list"].append({"friend_id": str(toy_res.inserted_id),"friend_name": toy_name,"friend_remark": baby_name,"friend_avatar": toy_info.get("avatar"),"friend_chat": str(chat_id),})else:# 更新好友res["bind_toy"] = [str(toy_res.inserted_id)]res["friend_list"] = [{"friend_id": str(toy_res.inserted_id),"friend_name": toy_name,"friend_remark": baby_name,"friend_avatar": toy_info.get("avatar"),"friend_chat": str(chat_id),}]MONGO_DB.users.update_one({"_id": ObjectId(user_id)}, {"$set": res}) # 更新用戶記錄# 更新聊天表# user_list有2個值。第一個是玩具id，第2個是用戶id# 這樣，用戶和玩具就能通訊了MONGO_DB.chat.update_one({"_id": chat_id},{"$set":{"user_list":[str(toy_res.inserted_id),str(res.get("_id"))]}})RET["code"] = 0RET["msg"] = "綁定成功"RET["data"] = {}return jsonify(RET)View Code
?
修改?serv-->friend.py，增加add_req函數(shù)
from flask import Blueprint, request, jsonify from setting import MONGO_DB from setting import RET from bson import ObjectIdfri = Blueprint("fri", __name__)@fri.route("/friend_list", methods=["POST"]) def friend_list(): # 好友列表user_id = request.form.get("user_id")# 查詢用戶id信息res = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})friend_list = res.get("friend_list") # 獲取好友列表 RET["code"] = 0RET["msg"] = ""RET["data"] = friend_listreturn jsonify(RET)@fri.route("/add_req", methods=["POST"]) def add_req():user_id = request.form.get("user_id") # 有可能是 toy_id or user_idfriend_id = request.form.get("friend_id") # 100%是toy_idreq_type = request.form.get("req_type")req_msg = request.form.get("req_msg") # 描述remark = request.form.get("remark") # 備注if req_type == "toy":user_info = MONGO_DB.toys.find_one({"_id": ObjectId(user_id)})else:user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})req_str = {"req_user": str(user_info.get("_id")),"req_type": req_type,"req_toy": friend_id,"req_msg": req_msg,"avatar": user_info.get("avatar"),"user_remark": remark,# 昵稱，玩具是沒有的"user_nick": user_info.get("nickname") if user_info.get("nickname") else user_info.get("baby_name"),# 狀態(tài)，1通過，2拒絕,0中間狀態(tài)(可切換到1和2)。"status": 0}MONGO_DB.req.insert_one(req_str)RET["code"] = 0RET["msg"] = "請求發(fā)送成功"RET["data"] = {}return jsonify(RET)View Code
?
進入HBuilder項目MyApp，新建文件add_req.html
?
修改?add_req.html
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/mui.css" /></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">請求加為好友</h1></header><div class="mui-content"><form class="mui-input-group"><div class="mui-input-row"><label>請求內(nèi)容</label><input type="text" class="mui-input-clear" placeholder="快來打個招呼把" id="req_content"></div><div class="mui-input-row"><label>好友備注</label><input type="text" class="mui-input-clear" placeholder="給好友起的響亮的2B名字" id="remark"></div><div class="mui-button-row"><button type="button" class="mui-btn mui-btn-primary" id="send_req">發(fā)送請求</button><button type="button" class="mui-btn mui-btn-danger mui-action-back">取消</button></div></form></div><script src="js/mui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">mui.init()var Sdata = null;mui.plusReady(function() {Sdata = plus.webview.currentWebview();})document.getElementById("send_req").addEventListener("tap", function() {mui.post(window.serv + "/add_req", {user_id: Sdata.user_id,req_type: Sdata.req_type,friend_id: Sdata.friend_id,req_msg: document.getElementById("req_content").value,remark: document.getElementById("remark").value},function(data) {console.log(JSON.stringify(data));})})</script></body></html>View Code
?
修改 index.html，將 底部選項卡中的 郵件，改為 好友請求
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><script src="js/mui.js"></script><link href="css/mui.min.css" rel="stylesheet" /></head><body><!--底部選項卡--><nav class="mui-bar mui-bar-tab"><a class="mui-tab-item mui-active" id="index"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首頁</span></a><a class="mui-tab-item" id="message"><span class="mui-icon mui-icon-chat"><span class="mui-badge mui-badge-red" id="msg_count">0</span></span><span class="mui-tab-label">消息</span></a><a class="mui-tab-item" id="req"><span class="mui-icon mui-icon-email"></span><span class="mui-tab-label">好友請求</span></a><a class="mui-tab-item" id="login"><span class="mui-icon mui-icon-gear"></span><span class="mui-tab-label">設(shè)置</span></a></nav></body><script type="text/javascript" charset="utf-8">var ws = null; // websocket對象var msg_data = null; // 消息數(shù)據(jù)mui.init({subpages: [{url: "main.html",id: "main.html",styles: window.styles}]});mui.plusReady(function() {// console.log(JSON.stringify(plus.webview.currentWebview()))if(plus.storage.getItem("user")) { // 判斷是否登錄console.log('已結(jié)登錄了！');//連接websocket連接ws = new WebSocket("ws://" + window.ws_serv + "/app/" + plus.storage.getItem("user"))// 發(fā)送post請求console.log(window.serv + "/get_msg_list");mui.post(// 訪問消息列表window.serv + "/get_msg_list", {user_id: plus.storage.getItem("user")},function(data) {console.log(JSON.stringify(data));// {"code":0,"data":{"5ba0f1f2e12532418089bf88":1,"count":1},"msg":""}msg_data = data.data;// 修改消息選項卡的角標數(shù)字document.getElementById("msg_count").innerText = msg_data.count;});// 客戶端接收服務(wù)端數(shù)據(jù)時觸發(fā)ws.onmessage = function(data) {console.log(data.data);var msg = JSON.parse(data.data);var chat = plus.webview.getWebviewById("chat.html");mui.fire(chat, "new_msg", { // 向chat.html傳值data: msg});var msg_count = document.getElementById("msg_count");// 當前頁面加1msg_count.innerText = parseInt(msg_count.innerText) + 1;// 加1,用于message.html顯示msg_data[msg.from_user]++;};}// 自動重連ws.onclose = function() {window.location.reload();}});// 消息document.getElementById("message").addEventListener("tap", function() {mui.openWindow({url: "message.html",id: "message.html",styles: window.styles,extras: {// 傳輸用戶id,給message.htmluser_id: plus.storage.getItem("user"),msg_data: msg_data,// "data":{"5ba0f1f2e12532418089bf88":1,"count":1}}})});document.getElementById("index").addEventListener("tap", function() {mui.openWindow({url: "main.html",id: "main.html",styles: window.styles})})document.getElementById("req").addEventListener("tap", function() {mui.openWindow({url: "req_list.html",id: "req_list.html",styles: window.styles})})document.getElementById("login").addEventListener("tap", function() {// 自動登錄,判斷storage中的user存在，就跳轉(zhuǎn)到user_info，否則跳轉(zhuǎn)loginif(plus.storage.getItem("user")) {mui.openWindow({url: "user_info.html",id: "user_info.html",styles: window.styles,extras: {user_id: plus.storage.getItem("user")}})} else {mui.openWindow({url: "login.html",id: "login.html",styles: window.styles})}})document.addEventListener("login", function(data) {// fire事件接收消息，使用data.detail// index是為做顯示區(qū)分mui.toast("index" + data.detail.msg)});document.addEventListener("send_music", function(data) { //監(jiān)聽send_music事件var music_name = data.detail.music_name; //獲取player.html使用fire發(fā)送的music_name值var toy_id = data.detail.toy_id; //獲取發(fā)送的玩具idsend_str = { //構(gòu)造數(shù)據(jù)data: music_name,to_user: toy_id, // 目標用戶,這里統(tǒng)一格式msg_type: "music", // 類型為音樂}// 發(fā)送數(shù)據(jù)給后端，注意要json序列化ws.send(JSON.stringify(send_str));});document.addEventListener("send_msg", function(data) { //發(fā)送消息var filename = data.detail.filenamevar to_user = data.detail.to_usersend_str = {to_user: to_user}ws.send(JSON.stringify(send_str))plus.io.resolveLocalFileSystemURL(filename, function(entry) {// 可通過entry對象操作test.html文件 entry.file(function(file) {// FileReader文件系統(tǒng)中的讀取文件對象，用于獲取文件的內(nèi)容var fileReader = new plus.io.FileReader();// alert("getFile:" + JSON.stringify(file));// readAsDataURL: 以URL編碼格式讀取文件數(shù)據(jù)內(nèi)容fileReader.readAsDataURL(file, 'utf-8');// onloadend: 文件讀取操作完成時的回調(diào)函數(shù)fileReader.onloadend = function(evt) {console.log(evt.target.result);var b = dataURLtoBlob(evt.target.result);ws.send(b); // 發(fā)送blob數(shù)據(jù)}// alert(file.size + '--' + file.name)});});});// 監(jiān)聽cut_msg_count事件,由message.html向index.html執(zhí)行firedocument.addEventListener("cut_msg_count", function(data) {var msg_count = document.getElementById("msg_count");var cut = parseInt(data.detail.cut); // parseInt表示強制轉(zhuǎn)換var count = parseInt(msg_count.innerText); // 默認獲取innerText是字符串,需要強制轉(zhuǎn)換msg_count.innerText = count - cut; // 總數(shù) 減去 點擊聊天會話的數(shù)量,比如小甜甜的});function dataURLtoBlob(dataurl) { // 數(shù)據(jù)轉(zhuǎn)換為Blob// 邏輯很復(fù)雜,這里不解釋了。直接用就可以了！var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while(n--) {u8arr[n] = bstr.charCodeAt(n);}var a = new Blob([u8arr], {type: mime});return a}</script></html>View Code
?
新建文件?req_list.html
?
修改?req_list.html
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/mui.css" /></head><body><header class="mui-bar mui-bar-nav"><h1 class="mui-title">玩具的好友請求</h1></header><div class="mui-content" ><ul class="mui-table-view" id="req_list"></ul></div></body><script src="js/mui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">mui.init()mui.plusReady(function(){mui.post(window.serv + "/req_list",{user_id:plus.storage.getItem("user")},function(data){console.log(JSON.stringify(data));for (var i = 0; i < data.data.length; i++) {create_req(data.data[i])}})})function create_req(req){ var litag = document.createElement("li");litag.className = "mui-table-view-cell mui-media";var atag = document.createElement("a");atag.id = req._id;// 點擊事件 周一把這兒寫了 綁定事件atag.onclick = function(){console.log(this.id);open_req(this.id);}var imgtag = document.createElement("img");imgtag.className = "mui-media-object mui-pull-left";imgtag.src = "avatar/" + req.avatar;var divtag = document.createElement("div");divtag.className = "mui-media-body";divtag.innerText = req.user_nick;var ptag = document.createElement("p");ptag.className = "mui-ellipsis";ptag.innerText = req.req_msg;litag.appendChild(atag);atag.appendChild(imgtag);atag.appendChild(divtag);divtag.appendChild(ptag);document.getElementById("req_list").appendChild(litag);}function open_req(req_id){mui.openWindow({url:"acc_ref_req.html",id:"acc_ref_req.html",extras:{req_id:req_id}})}</script> </html>View Code
?
進入 flask項目，修改?serv-->friend.py，增加函數(shù) req_list
from flask import Blueprint, request, jsonify from setting import MONGO_DB from setting import RET from bson import ObjectIdfri = Blueprint("fri", __name__)@fri.route("/friend_list", methods=["POST"]) def friend_list(): # 好友列表user_id = request.form.get("user_id")# 查詢用戶id信息res = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})friend_list = res.get("friend_list") # 獲取好友列表 RET["code"] = 0RET["msg"] = ""RET["data"] = friend_listreturn jsonify(RET)@fri.route("/add_req", methods=["POST"]) def add_req(): # 添加好友請求user_id = request.form.get("user_id") # 有可能是 toy_id or user_idfriend_id = request.form.get("friend_id") # 100%是toy_idreq_type = request.form.get("req_type")req_msg = request.form.get("req_msg") # 描述remark = request.form.get("remark") # 備注if req_type == "toy":user_info = MONGO_DB.toys.find_one({"_id": ObjectId(user_id)})else:user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})req_str = {"req_user": str(user_info.get("_id")),"req_type": req_type,"req_toy": friend_id,"req_msg": req_msg,"avatar": user_info.get("avatar"),"user_remark": remark,# 昵稱，玩具是沒有的"user_nick": user_info.get("nickname") if user_info.get("nickname") else user_info.get("baby_name"),# 狀態(tài)，1通過，2拒絕,0中間狀態(tài)(可切換到1和2)。"status": 0}MONGO_DB.req.insert_one(req_str)RET["code"] = 0RET["msg"] = "請求發(fā)送成功"RET["data"] = {}return jsonify(RET)@fri.route("/req_list", methods=["POST"]) def req_list(): # 添加請求列表user_id = request.form.get("user_id")user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})bind_toy = user_info.get("bind_toy")reqs = list(MONGO_DB.req.find({"req_toy": {"$in": bind_toy}, "status": 0}))for index, req in enumerate(reqs):reqs[index]["_id"] = str(req.get("_id"))RET["code"] = 0RET["msg"] = ""RET["data"] = reqsreturn jsonify(RET)View Code
?
用戶收到 添加好友請求后，還可以拒絕請求。
進入HBuilder項目MyApp，新建文件acc_ref_req.html
?
修改文件?acc_ref_req.html
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/mui.css" /></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">處理好友請求</h1></header><div class="mui-content"><ul class="mui-table-view"><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="" id="avatar"><div class="mui-media-body"><span id="user_nick"></span><p class="mui-ellipsis" id="req_msg"></p></div></a></li></ul><form class="mui-input-group"><div class="mui-input-row"><label>好友備注</label><input type="text" class="mui-input-clear" placeholder="給好友起的響亮的2B名字" id="remark"></div><div class="mui-button-row"><button type="button" class="mui-btn mui-btn-primary" id="ido">I Do</button><button type="button" class="mui-btn mui-btn-danger mui-action-back" id="goodman">好人卡</button></div></form></div></body><script src="js/mui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">mui.init()var Sdata = null;mui.plusReady(function() {Sdata = plus.webview.currentWebview();mui.post(window.serv + "/get_req", {req_id: Sdata.req_id},function(data) {console.log(JSON.stringify(data));document.getElementById("avatar").src = "avatar/" + data.data.avatar;document.getElementById("user_nick").innerText = data.data.user_nick;document.getElementById("req_msg").innerText = data.data.req_msg;})})document.getElementById("ido").addEventListener("tap", function() {var remark = document.getElementById("remark").value;mui.post(window.serv + "/acc_req", {req_id: Sdata.req_id,remark:remark},function(data) {console.log(JSON.stringify(data));})})document.getElementById("goodman").addEventListener("tap", function() {mui.post(window.serv + "/ref_req", {req_id: Sdata.req_id},function(data) {console.log(JSON.stringify(data));})})</script></html>View Code
?
修改 qrcode.html，這里應(yīng)該要掃描玩具二維碼的。但是太麻煩了，直接固定設(shè)備編號！
固定設(shè)備編號為 小豆芽，發(fā)給后端。因為當前web玩具是小甜甜。它需要增加對方才行！
<!doctype html> <html lang="en"><head><meta charset="UTF-8" /><title>Document</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/mui.css" /></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">掃描玩具二維碼</h1></header><div class="mui-content"><div style="height: 550px;" id="qr"></div></div></body><script src="js/mui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">mui.init()var Sdata = null;mui.plusReady(function() {Sdata = plus.webview.currentWebview(); // var barcode = new plus.barcode.Barcode('qr'); // // plus.webview.currentWebview().append(barcode); // barcode.onmarked = chenggong; // barcode.start();// 臨時改為小豆芽的設(shè)備id,從MongoDB中的toys表查詢chenggong(0,"02cc0fc7490b6ee08c31f38ac7a375eb")})function chenggong(type, code) {mui.post(window.serv + "/yanzheng_qr", {device_id: code},function(data) {console.log(JSON.stringify(data));mui.toast(data.msg);if(data.code == 2) {mui.back();}if(data.code == 1) {//加好友的小邏輯 跳轉(zhuǎn)到加好友頁面 if(Sdata.toy_id) {//1.玩具 添加好友 toys toysmui.openWindow({url: "add_req.html",id: "add_req.html",extras: {req_type: "toy",user_id: Sdata.toy_id,friend_id: data.data.toy_id}})} else {// 2.手機app 添加好友 users toysmui.openWindow({url: "add_req.html",id: "add_req.html",extras: {req_type: "user",user_id: plus.storage.getItem("user"),friend_id: data.data.toy_id}})}}if(data.code == 0) {//今天的邏輯 創(chuàng)建玩具 綁定用戶 成為玩具的第一個好友//1.創(chuàng)建玩具：打開創(chuàng)建玩具的頁面if(Sdata.toy_id) {mui.back()} else {mui.openWindow({url: "bind_toy.html",id: "bind_toy.html",extras: {device_id: code}})}}})}</script></html>View Code
?
進入flask項目，修改?serv-->friend.py，增加函數(shù)get_req，acc_req，ref_req
from flask import Blueprint, request, jsonify from setting import MONGO_DB from setting import RET from bson import ObjectIdfri = Blueprint("fri", __name__)@fri.route("/friend_list", methods=["POST"]) def friend_list(): # 好友列表user_id = request.form.get("user_id")# 查詢用戶id信息res = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})friend_list = res.get("friend_list") # 獲取好友列表 RET["code"] = 0RET["msg"] = ""RET["data"] = friend_listreturn jsonify(RET)@fri.route("/add_req", methods=["POST"]) def add_req(): # 添加好友請求user_id = request.form.get("user_id") # 有可能是 toy_id or user_idfriend_id = request.form.get("friend_id") # 100%是toy_idreq_type = request.form.get("req_type")req_msg = request.form.get("req_msg") # 描述remark = request.form.get("remark") # 備注if req_type == "toy":user_info = MONGO_DB.toys.find_one({"_id": ObjectId(user_id)})else:user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})req_str = {"req_user": str(user_info.get("_id")),"req_type": req_type,"req_toy": friend_id,"req_msg": req_msg,"avatar": user_info.get("avatar"),"user_remark": remark,# 昵稱，玩具是沒有的"user_nick": user_info.get("nickname") if user_info.get("nickname") else user_info.get("baby_name"),# 狀態(tài)，1通過，2拒絕,0中間狀態(tài)(可切換到1和2)。"status": 0}MONGO_DB.req.insert_one(req_str)RET["code"] = 0RET["msg"] = "請求發(fā)送成功"RET["data"] = {}return jsonify(RET)@fri.route("/req_list", methods=["POST"]) def req_list(): # 添加請求列表user_id = request.form.get("user_id")user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})bind_toy = user_info.get("bind_toy")reqs = list(MONGO_DB.req.find({"req_toy": {"$in": bind_toy}, "status": 0}))for index, req in enumerate(reqs):reqs[index]["_id"] = str(req.get("_id"))RET["code"] = 0RET["msg"] = ""RET["data"] = reqsreturn jsonify(RET)@fri.route("/get_req", methods=["POST"]) def get_req(): # 獲取好友請求req_id = request.form.get("req_id")req_info = MONGO_DB.req.find_one({"_id": ObjectId(req_id)})req_info["_id"] = str(req_info.get("_id"))RET["code"] = 0RET["msg"] = ""RET["data"] = req_inforeturn jsonify(RET)@fri.route("/acc_req", methods=["POST"]) def acc_req(): # 允許好友請求req_id = request.form.get("req_id")remark = request.form.get("remark")req_info = MONGO_DB.req.find_one({"_id": ObjectId(req_id)})# 1. 為 user 或 toy 添加 toyif req_info.get("req_type") == "toy":user_info = MONGO_DB.toys.find_one({"_id": ObjectId(req_info.get("req_user"))})else:user_info = MONGO_DB.users.find_one({"_id": ObjectId(req_info.get("req_user"))})toy = MONGO_DB.toys.find_one({"_id": ObjectId(req_info.get("req_toy"))})chat_window = MONGO_DB.chat.insert_one({"user_list": [str(toy.get("_id")), str(user_info.get("_id"))]})friend_info = {"friend_id": str(toy.get("_id")),"friend_name": toy.get("baby_name"),"friend_remark": req_info.get("user_remark"),"friend_avatar": toy.get("avatar"),"friend_chat": str(chat_window.inserted_id)}if req_info.get("req_type") == "toy":MONGO_DB.toys.update_one({"_id": ObjectId(req_info.get("req_user"))},{"$push": {"friend_list": friend_info}})else:MONGO_DB.users.update_one({"_id": ObjectId(req_info.get("req_user"))},{"$push": {"friend_list": friend_info}})# 2. 為 toy 添加 user 或 toyuser_name = user_info.get("nickname") if user_info.get("nickname") else user_info.get("baby_name")friend_info2 = {"friend_id": str(user_info.get("_id")),"friend_name": user_name,# 同意方的備注"friend_remark": remark if remark else user_name,"friend_avatar": user_info.get("avatar"),"friend_chat": str(chat_window.inserted_id)}MONGO_DB.toys.update_one({"_id": ObjectId(req_info.get("req_toy"))},{"$push": {"friend_list": friend_info2}})RET["code"] = 0RET["msg"] = f"添加好友{remark}成功"RET["data"] = {}MONGO_DB.req.update_one({"_id": ObjectId(req_id)}, {"$set": {"status": 1}})return jsonify(RET)@fri.route("/ref_req", methods=["POST"]) def ref_req(): # 拒絕好友請req_id = request.form.get("req_id")MONGO_DB.req.update_one({"_id": ObjectId(req_id)}, {"$set": {"status": 2}})RET["code"] = 0RET["msg"] = "已拒絕好友請求"RET["data"] = {}return jsonify(RET)View Code
重啟?manager.py
?
使用模擬器訪問，點擊添加好友，效果如下：
?
輸入表單數(shù)據(jù)，效果如下：
?
點擊發(fā)送請求，查看Pycharm控制臺輸出：
192.168.11.25 - - [25/Sep/2018 20:49:47] "POST /add_req HTTP/1.1" 200 -
請求成功了
?
查看表 req，發(fā)現(xiàn)有一條記錄
?
點擊底部選項卡的 好友請求--> 小甜甜
?
?
?輸入好友備注，點擊 I Do
?
?
?查看Pycharm
192.168.11.25 - - [25/Sep/2018 21:05:46] "POST /acc_req HTTP/1.1" 200 -
?
返回管理我的玩具，點擊小甜甜，效果如下：
發(fā)現(xiàn)多了一個好友
?
查看玩具表，查看 friend_list字段。有2個記錄
/* 1 createdAt:2018/9/19 下午5:53:08*/ {"_id" : ObjectId("5ba21c84e1253229c4acbd12"),"device_id" : "02cc0fc7490b6ee08c31f38ac7a375eb","toy_name" : "豆芽","baby_name" : "小豆芽","gender" : "2","avatar" : "girl.jpg","bind_user" : "5b9bb768e1253281608e96eb","friend_list" : [{"friend_id" : "5b9bb768e1253281608e96eb","friend_name" : "xiao","friend_remark" : "小魚","friend_avatar" : "boy.jpg","friend_chat" : "5ba21c84e1253229c4acbd11","user_type" : "user"},{"friend_id" : "5ba0f1f2e12532418089bf88","friend_name" : "小甜甜","friend_remark" : "小甜甜","friend_avatar" : "girl.jpg","friend_chat" : "5bab7c19e125327ffc804459","user_type" : "toy"}] },/* 2 createdAt:2018/9/18 下午8:39:14*/ {"_id" : ObjectId("5ba0f1f2e12532418089bf88"),"device_id" : "01f9bf1bac93eddd8397d0455abbeddb","toy_name" : "小可愛","baby_name" : "小甜甜","gender" : "2","avatar" : "girl.jpg","bind_user" : "5b9bb768e1253281608e96eb","friend_list" : [{"friend_id" : "5b9bb768e1253281608e96eb","friend_name" : "xiao","friend_remark" : "小魚","friend_avatar" : "boy.jpg","friend_chat" : "5ba21c84e1253229c4acbd11","user_type" : "user"},{"friend_id" : "5ba21c84e1253229c4acbd12","friend_name" : "小豆芽","friend_remark" : "豆芽","friend_avatar" : "girl.jpg","friend_chat" : "5bab7c19e125327ffc804459","user_type" : "toy"}] }View Code
會發(fā)現(xiàn)，小甜甜和小豆芽，互為好友了！
?
今日總結(jié)：
1.玩具管理頁面mui組件 ：msl : 圖文表格2.控制玩具通訊錄3.基于請求的好友關(guān)系建立發(fā)送請求：帶上自己的所有信息 + 請求信息接收請求：可以看到自己的所有消息雙方添加好友：同意：1.判斷自己是玩具還是用戶2.查詢好友的信息3.建立好友的信息（friend_list 中的元素）4.將建立的好友信息存放在自己的friend_list中5.建立自己的信息（好友的friend_list 中的元素）6.將建立的自己信息存放在好友的friend_list中7.將請求的狀態(tài)改為 1View Code
?
完整代碼，參考github:
https://github.com/987334176/Intelligent_toy/archive/v1.6.zip
注意：qrcode.html，固定設(shè)備編號為 小豆芽。需要修正一下！
?
轉(zhuǎn)載于:https://www.cnblogs.com/xiao987334176/p/9700878.html
總結(jié)
以上是生活随笔為你收集整理的python 全栈开发，Day132(玩具管理页面,控制玩具通讯录,基于请求的好友关系建立)...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 链式表的按序号查找
- 下一篇： 配置用户通过Telnet登录设备的身份认