先下载github代码，下面的操作，都是基于这个版本来的！

https://github.com/987334176/Intelligent_toy/archive/v1.5.zip

注意：由于涉及到版权问题，此附件没有图片和音乐。请参考链接，手动采集一下！

请参考链接：

https://www.cnblogs.com/xiao987334176/p/9647993.html#autoid-3-4-0

一、玩具管理页面

点击下面的标签，页面还没有反应。

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图1

点击之后，需要进入玩具管理页面！

进入HBuilder项目MyApp，新建文件toy_info.html

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图2

修改 toy_info.html

  1. <!doctype html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Document</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link rel="stylesheet" type="text/css" href="css/mui.css" />
  9.     </head>
  11.     <body>
  12.         <header class="mui-bar mui-bar-nav">
  13.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  14.             <h1 class="mui-title">玩具详情</h1>
  15.         </header>
  16.         <div class="mui-content">
  17.             <div class="mui-row" style="text-align: center;">
  18.                 <img src="" id="avatar" style="width: 300px;height: 300px;border-radius: 50%;" />
  19.             </div>
  20.             <ul class="mui-table-view">
  21.                 <li class="mui-table-view-cell">
  22.                     玩具名称 ：<span id="toy_name"></span>
  23.                 </li>
  24.                 <li class="mui-table-view-cell">
  25.                     所属主人 ：<span id="baby_name"></span>
  26.                 </li>
  27.                 <li class="mui-table-view-cell">
  28.                     设备编号 ：<span id="device_id"></span>
  29.                 </li>
  30.             </ul>
  32.         </div>
  33.     </body>
  34.     <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  35.     <script type="text/javascript">
  36.         mui.init()
  37.         var Sdata = null;
  38.         mui.plusReady(function() {
  39.             Sdata = plus.webview.currentWebview();
  40.             mui.post(
  41.                 window.serv + "/toy_info", {
  42.                     toy_id: Sdata.toy_id
  43.                 },
  44.                 function(data) {
  45.                     console.log(JSON.stringify(data));
  46.                     document.getElementById("avatar").src = "avatar/" + data.data.avatar;
  47.                     document.getElementById("toy_name").innerText = data.data.toy_name;
  48.                     document.getElementById("baby_name").innerText = data.data.baby_name;
  49.                     document.getElementById("device_id").innerText = data.data.device_id;
  52.                 }
  53.             );
  54.         })
  56.     </script>
  58. </html>

修改 toy_manager.html，点击时，打开玩具管理页面

  1. <!doctype html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Document</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link rel="stylesheet" type="text/css" href="css/mui.css" />
  9.     </head>
  11.     <body>
  12.         <header class="mui-bar mui-bar-nav">
  13.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  14.             <h1 class="mui-title">管理我的玩具</h1>
  15.         </header>
  16.         <div class="mui-content">
  17.             <ul class="mui-table-view" id="toy_list">
  18.                 <li class="mui-table-view-cell mui-media">
  19.                     <a id="add_toy">
  20.                         <img class="mui-media-object mui-pull-left" src="images/add.png">
  21.                         <div class="mui-media-body">
  22.                             你还没有玩具
  23.                             <p class="mui-ellipsis">点击此处扫描二维码添加玩具</p>
  24.                         </div>
  25.                     </a>
  26.                 </li>
  27.             </ul>
  28.         </div>
  29.     </body>
  30.     <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  31.     <script type="text/javascript">
  32.         mui.init();
  33.         mui.plusReady(function(){
  34.             // 发送POST请求，访问玩具列表
  35.             mui.post(
  36.                 window.serv + "/toy_list",
  37.                 {user_id:plus.storage.getItem("user")},
  38.                 function(data){
  39.                     console.log(JSON.stringify(data));
  40.                     // for循环玩具列表
  41.                     for (var i = 0; i < data.data.length; i++) {
  42.                         // 调用自定义函数,渲染玩具列表
  43.                         create_content(data.data[i]);
  44.                     }
  45.                 }
  46.             )
  47.         });
  49.         function create_content(content) {  //玩具列表
  50.             var litag = document.createElement("li");
  51.             litag.className = "mui-table-view-cell mui-media";
  52.             var atag = document.createElement("a");
  53.             atag.id = content._id;
  54.             atag.onclick = function() {
  55.                 console.log(this.id);
  56.                 open_toy_info(this.id);  //打开玩具管理页面
  57.             }
  59.             var imgtag = document.createElement("img");
  60.             imgtag.className = "mui-media-object mui-pull-left";
  61.             imgtag.style = "border-radius: 50%;width: 45px;height: 45px; "
  62.             imgtag.src = "avatar/" + content.avatar;
  64.             var divtag = document.createElement("div");
  65.             divtag.className = "mui-media-body";
  66.             divtag.innerText = content.baby_name;
  67.             var ptag = document.createElement("p");
  68.             ptag.className = "mui-ellipsis";
  69.             ptag.innerText = content.toy_name;
  71.             litag.appendChild(atag);
  72.             atag.appendChild(imgtag);
  73.             atag.appendChild(divtag);
  74.             divtag.appendChild(ptag);
  76.             document.getElementById("toy_list").appendChild(litag);
  78.         }
  80.         document.getElementById("add_toy").addEventListener("tap", function() {
  81.             mui.openWindow({
  82.                 url: "qrcode.html",
  83.                 id: "qrcode.html",
  84.             })
  85.         });
  87.         function open_toy_info(toy_id) {  //打开玩具管理页面
  88.             mui.openWindow({
  89.                 url: "toy_info.html",
  90.                 id: "toy_info.html",
  91.                 extras: {
  92.                     toy_id: toy_id
  93.                 }
  94.             })
  95.         }
  96.     </script>
  98. </html>

进入flask后端，修改 serv—>toys.py，增加接口

  1. from flask import Blueprint, request, jsonify
  2. from setting import MONGO_DB
  3. from setting import RET
  4. from bson import ObjectId
  6. toy = Blueprint("toy", __name__)
  9. @toy.route("/toy_list", methods=["POST"])
  10. def toy_list():  # 玩具列表
  11.     user_id = request.form.get("user_id")  # 用户id
  12.     # 查看用户信息
  13.     user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})
  14.     bind_toy = user_info.get("bind_toy")  # 获取绑定的玩具
  15.     bind_toy_id = []  # 玩具列表
  16.     for toy_id in bind_toy:  # 获取玩具列表中的所有玩具id
  17.         bind_toy_id.append(ObjectId(toy_id))
  19.     # 一次性查询多个玩具
  20.     toys_list = list(MONGO_DB.toys.find({"_id": {"$in": bind_toy_id}}))
  22.     for index,item in enumerate(toys_list):
  23.         # 将_id转换为字符串
  24.         toys_list[index]["_id"] = str(item.get("_id"))
  26.     RET["code"] = 0
  27.     RET["msg"] = ""
  28.     RET["data"] = toys_list
  30.     return jsonify(RET)
  33. @toy.route("/device_toy_id", methods=["POST"])
  34. def device_toy_id():  # 验证设备id
  35.     RET["code"] = 0
  36.     RET["msg"] = "开机成功"
  37.     RET["data"] = {}
  39.     device_id = request.form.get("device_id")  # 获取设备id
  41.     # 判断设备id是否在设备表中
  42.     if MONGO_DB.devices.find_one({"device_id": device_id}):
  43.         # 查询设备id是否在玩具表中
  44.         toy_info = MONGO_DB.toys.find_one({"device_id": device_id})
  45.         if toy_info:
  46.             # RET添加键值,获取玩具id
  47.             RET["data"]["toy_id"] = str(toy_info.get("_id"))
  48.             # 音频文件
  49.             RET["data"]["audio"] = "success.mp3"
  50.             return jsonify(RET)
  51.         else:
  52.             # 已授权的设备,但是没有绑定主人
  53.             RET["msg"] = "找小主人"
  54.             RET["data"]["audio"] = "Nobind.mp3"
  55.             return jsonify(RET)
  56.     else:
  57.         # 不在设备表中，说明是未授权，或者是冒牌的！
  58.         RET["msg"] = "联系玩具厂"
  59.         RET["data"]["audio"] = "Nodevice.mp3"
  60.         return jsonify(RET)
  63. @toy.route("/toy_info", methods=["POST"])
  64. def toy_info():  # 玩具管理页面
  65.     toy_id = request.form.get("toy_id")
  66.     toy = MONGO_DB.toys.find_one({"_id":ObjectId(toy_id)})
  68.     toy["_id"] = str(toy.get("_id"))
  70.     RET["code"] = 0
  71.     RET["msg"] = ""
  72.     RET["data"] = toy
  74.     return jsonify(RET)

重启 manager.py，使用模拟器访问，效果如下：

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图3

二、控制玩具通讯录

玩具管理页面，还需要展示 通讯录。

修改 toy_info.html

  1. <!doctype html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Document</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link rel="stylesheet" type="text/css" href="css/mui.css" />
  9.     </head>
  11.     <body>
  12.         <header class="mui-bar mui-bar-nav">
  13.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  14.             <h1 class="mui-title">玩具详情</h1>
  15.         </header>
  16.         <div class="mui-content">
  17.             <div class="mui-row" style="text-align: center;">
  18.                 <img src="" id="avatar" style="width: 300px;height: 300px;border-radius: 50%;" />
  19.             </div>
  20.             <ul class="mui-table-view">
  21.                 <li class="mui-table-view-cell">
  22.                     玩具名称 ：<span id="toy_name"></span>
  23.                 </li>
  24.                 <li class="mui-table-view-cell">
  25.                     所属主人 ：<span id="baby_name"></span>
  26.                 </li>
  27.                 <li class="mui-table-view-cell">
  28.                     设备编号 ：<span id="device_id"></span>
  29.                 </li>
  30.             </ul>
  31.             <div class="mui-row" style="text-align: center;">
  32.                 玩具通讯录
  33.             </div>
  34.             <ul class="mui-table-view mui-grid-view" id="contacts">
  35.                 <li class="mui-table-view-cell mui-media mui-col-xs-3">
  36.                     <a id="add_friend">
  37.                         <img class="mui-media-object" src="images/add.png" style="border-radius: 50%;width: 75px;height: 75px;">
  38.                         <div class="mui-media-body">添加好友</div>
  39.                     </a>
  40.                 </li>
  41.             </ul>
  42.         </div>
  43.     </body>
  44.     <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  45.     <script type="text/javascript">
  46.         mui.init()
  47.         var Sdata = null;
  48.         mui.plusReady(function() {
  49.             Sdata = plus.webview.currentWebview();
  50.             mui.post(
  51.                 window.serv + "/toy_info", {
  52.                     toy_id: Sdata.toy_id
  53.                 },
  54.                 function(data) {
  55.                     console.log(JSON.stringify(data));
  56.                     document.getElementById("avatar").src = "avatar/" + data.data.avatar;
  57.                     document.getElementById("toy_name").innerText = data.data.toy_name;
  58.                     document.getElementById("baby_name").innerText = data.data.baby_name;
  59.                     document.getElementById("device_id").innerText = data.data.device_id;
  61.                     for(var i = 0; i < data.data.friend_list.length; i++) {
  62.                         create_friend(data.data.friend_list[i]);
  63.                     }
  65.                 }
  66.             );
  67.         });
  68.         function create_friend(friend) {
  69.             var litag = document.createElement("li");
  70.             litag.className = "mui-table-view-cell mui-media mui-col-xs-3";
  71.             var atag = document.createElement("a");
  72.             atag.id = friend.friend_id
  73.             var imgtag = document.createElement("img");
  74.             imgtag.className = "mui-media-object";
  75.             imgtag.style.borderRadius = "50%";
  76.             imgtag.style.width = "75px";
  77.             imgtag.style.height = "75px";
  79.             imgtag.src = "avatar/" + friend.friend_avatar;
  80.             var divtag = document.createElement("div");
  81.             divtag.innerText = friend.friend_remark;
  82.             divtag.className = "mui-media-body";
  84.             litag.appendChild(atag);
  85.             atag.appendChild(imgtag);
  86.             atag.appendChild(divtag);
  88.             document.getElementById("contacts").appendChild(litag);
  90.         }
  92.     </script>
  94. </html>

使用模拟器访问，效果如下：

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图4

三、基于请求的好友关系建立

加好友流程图

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图5

同意流程图

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图6

修改 qrcode.html

  1. <!doctype html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Document</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link rel="stylesheet" type="text/css" href="css/mui.css" />
  9.     </head>
  11.     <body>
  12.         <header class="mui-bar mui-bar-nav">
  13.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  14.             <h1 class="mui-title">扫描玩具二维码</h1>
  15.         </header>
  16.         <div class="mui-content">
  17.             <div style="height: 550px;" id="qr"></div>
  18.         </div>
  20.     </body>
  21.     <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  22.     <script type="text/javascript">
  23.         mui.init()
  24.         var Sdata = null;
  25.         mui.plusReady(function() {
  26.             Sdata = plus.webview.currentWebview();
  27. //            var barcode = new plus.barcode.Barcode('qr');
  28. //            //      plus.webview.currentWebview().append(barcode);
  29. //            barcode.onmarked = chenggong;
  30. //            barcode.start();
  32.             chenggong(0,"864aad3ca55d9fe9bdcbef70e174fc3f")
  33.         })
  35.         function chenggong(type, code) {
  36.             mui.post(
  37.                 window.serv + "/yanzheng_qr", {
  38.                     device_id: code
  39.                 },
  40.                 function(data) {
  41.                     console.log(JSON.stringify(data));
  42.                     mui.toast(data.msg);
  43.                     if(data.code == 2) {
  44.                         mui.back();
  45.                     }
  46.                     if(data.code == 1) {
  47.                         //加好友的小逻辑 跳转到加好友页面    
  48.                         if(Sdata.toy_id) {
  49.                             //1.玩具 添加好友 toys toys
  50.                             mui.openWindow({
  51.                                 url: "add_req.html",
  52.                                 id: "add_req.html",
  53.                                 extras: {
  54.                                     req_type: "toy",
  55.                                     user_id: Sdata.toy_id,
  56.                                     friend_id: data.data.toy_id
  57.                                 }
  58.                             })
  59.                         } else {
  60.                             // 2.手机app 添加好友 users toys
  61.                             mui.openWindow({
  62.                                 url: "add_req.html",
  63.                                 id: "add_req.html",
  64.                                 extras: {
  65.                                     req_type: "user",
  66.                                     user_id: plus.storage.getItem("user"),
  67.                                     friend_id: data.data.toy_id
  68.                                 }
  69.                             })
  70.                         }
  72.                     }
  73.                     if(data.code == 0) {
  74.                         //今天的逻辑 创建玩具 绑定用户 成为玩具的第一个好友
  75.                         //1.创建玩具：打开创建玩具的页面
  76.                         if(Sdata.toy_id) {
  77.                             mui.back()
  78.                         } else {
  79.                             mui.openWindow({
  80.                                 url: "bind_toy.html",
  81.                                 id: "bind_toy.html",
  82.                                 extras: {
  83.                                     device_id: code
  84.                                 }
  85.                             })
  86.                         }
  88.                     }
  89.                 }
  90.             )
  91.         }
  92.     </script>
  94. </html>

修改 toy_info.html

  1. <!doctype html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Document</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link rel="stylesheet" type="text/css" href="css/mui.css" />
  9.     </head>
  11.     <body>
  12.         <header class="mui-bar mui-bar-nav">
  13.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  14.             <h1 class="mui-title">玩具详情</h1>
  15.         </header>
  16.         <div class="mui-content">
  17.             <div class="mui-row" style="text-align: center;">
  18.                 <img src="" id="avatar" style="width: 300px;height: 300px;border-radius: 50%;" />
  19.             </div>
  20.             <ul class="mui-table-view">
  21.                 <li class="mui-table-view-cell">
  22.                     玩具名称 ：<span id="toy_name"></span>
  23.                 </li>
  24.                 <li class="mui-table-view-cell">
  25.                     所属主人 ：<span id="baby_name"></span>
  26.                 </li>
  27.                 <li class="mui-table-view-cell">
  28.                     设备编号 ：<span id="device_id"></span>
  29.                 </li>
  30.             </ul>
  31.             <div class="mui-row" style="text-align: center;">
  32.                 玩具通讯录
  33.             </div>
  34.             <ul class="mui-table-view mui-grid-view" id="contacts">
  35.                 <li class="mui-table-view-cell mui-media mui-col-xs-3">
  36.                     <a id="add_friend">
  37.                         <img class="mui-media-object" src="images/add.png" style="border-radius: 50%;width: 75px;height: 75px;">
  38.                         <div class="mui-media-body">添加好友</div>
  39.                     </a>
  40.                 </li>
  41.             </ul>
  42.         </div>
  43.     </body>
  44.     <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  45.     <script type="text/javascript">
  46.         mui.init()
  47.         var Sdata = null;
  48.         mui.plusReady(function() {
  49.             Sdata = plus.webview.currentWebview();
  50.             mui.post(
  51.                 window.serv + "/toy_info", {
  52.                     toy_id: Sdata.toy_id
  53.                 },
  54.                 function(data) {
  55.                     console.log(JSON.stringify(data));
  56.                     document.getElementById("avatar").src = "avatar/" + data.data.avatar;
  57.                     document.getElementById("toy_name").innerText = data.data.toy_name;
  58.                     document.getElementById("baby_name").innerText = data.data.baby_name;
  59.                     document.getElementById("device_id").innerText = data.data.device_id;
  61.                     for(var i = 0; i < data.data.friend_list.length; i++) {
  62.                         create_friend(data.data.friend_list[i]);
  63.                     }
  64.                 }
  65.             );
  66.         })
  68.         function create_friend(friend) {
  69.             var litag = document.createElement("li");
  70.             litag.className = "mui-table-view-cell mui-media mui-col-xs-3";
  71.             var atag = document.createElement("a");
  72.             atag.id = friend.friend_id
  73.             var imgtag = document.createElement("img");
  74.             imgtag.className = "mui-media-object";
  75.             imgtag.style.borderRadius = "50%";
  76.             imgtag.style.width = "75px";
  77.             imgtag.style.height = "75px";
  79.             imgtag.src = "avatar/" + friend.friend_avatar;
  80.             var divtag = document.createElement("div");
  81.             divtag.innerText = friend.friend_remark;
  82.             divtag.className = "mui-media-body";
  84.             litag.appendChild(atag);
  85.             atag.appendChild(imgtag);
  86.             atag.appendChild(divtag);
  88.             document.getElementById("contacts").appendChild(litag);
  90.         }
  92.         document.getElementById("add_friend").addEventListener("tap", function() {
  93.             mui.openWindow({
  94.                 url: "qrcode.html",
  95.                 id: "qrcode.html",
  96.                 extras:{
  97.                     toy_id:Sdata.toy_id
  98.                 }
  99.             })
  100.         })
  101.     </script>
  103. </html>

进入flask项目，修改devices.py，修改 yanzheng_qr函数

  1. from flask import Blueprint, request, jsonify
  2. from setting import MONGO_DB
  3. from setting import RET
  4. from bson import ObjectId
  6. devs = Blueprint("devs", __name__)
  9. @devs.route("/yanzheng_qr", methods=["POST"])
  10. def yanzheng_qr():  # 验证二维码
  11.     device_id = request.form.get("device_id")  # 获取设备id
  12.     if MONGO_DB.devices.find_one({"device_id": device_id}):  # 从数据库中查询设备id
  13.         # 查询该玩具是不是已被用户绑定
  14.         toy_info = MONGO_DB.toys.find_one({"device_id": device_id})
  15.         # 未绑定开启绑定逻辑
  16.         if not toy_info:
  17.             RET["code"] = 0
  18.             RET["msg"] = "感谢购买本公司产品"
  19.             RET["data"] = {}
  21.         # 如果被绑定加好友逻辑开启
  22.         if toy_info:
  23.             RET["code"] = 1
  24.             RET["msg"] = "添加好友"
  25.             RET["data"] = {"toy_id": str(toy_info.get("_id"))}
  27.     else:
  28.         RET["code"] = 2
  29.         RET["msg"] = "二货，这不是本公司设备，快去买正版!"
  30.         RET["data"] = {}
  32.     return jsonify(RET)
  35. @devs.route("/bind_toy", methods=["POST"])
  36. def bind_toy():  # 绑定玩具
  37.     chat_window = MONGO_DB.chat.insert_one({})  # 插入一个空数据
  38.     chat_id = chat_window.inserted_id  # 获取聊天id
  40.     user_id = request.form.get("user_id")  # 用户id
  41.     res = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})  # 查询用户id是否存在
  43.     device_id = request.form.get("device_id")  # 设备id
  44.     toy_name = request.form.get("toy_name")  # 玩具的昵称
  45.     baby_name = request.form.get("baby_name")  # 小主人的名字
  46.     remark = request.form.get("remark")  # 玩具主人对您的称呼
  47.     gender = request.form.get("gender")  # 性别
  49.     toy_info = {
  50.         "device_id": device_id,
  51.         "toy_name": toy_name,
  52.         "baby_name": baby_name,
  53.         "gender": gender,
  54.         "avatar": "boy.jpg" if gender == 1 else "girl.jpg",
  55.         # 绑定用户
  56.         "bind_user": str(res.get("_id")),
  57.         # 第一个好友
  58.         "friend_list": [{
  59.             "friend_id": str(res.get("_id")),  # 好友id
  60.             "friend_name": res.get("nickname"),  # 好友昵称
  61.             "friend_remark": remark,  # 好友称呼
  62.             "friend_avatar": res.get("avatar"),  # 好友头像
  63.             "friend_chat": str(chat_id),  # 好友聊天id
  64.         }]
  65.     }
  67.     toy_res = MONGO_DB.toys.insert_one(toy_info)  # 插入玩具表数据
  69.     if res.get("friend_list"):  # 判断用户好友列表是否为空
  70.         # 追加好友
  71.         res["bind_toy"].append(str(toy_res.inserted_id))
  72.         res["friend_list"].append({
  73.             "friend_id": str(toy_res.inserted_id),
  74.             "friend_name": toy_name,
  75.             "friend_remark": baby_name,
  76.             "friend_avatar": toy_info.get("avatar"),
  77.             "friend_chat": str(chat_id),
  78.         })
  79.     else:
  80.         # 更新好友
  81.         res["bind_toy"] = [str(toy_res.inserted_id)]
  82.         res["friend_list"] = [{
  83.             "friend_id": str(toy_res.inserted_id),
  84.             "friend_name": toy_name,
  85.             "friend_remark": baby_name,
  86.             "friend_avatar": toy_info.get("avatar"),
  87.             "friend_chat": str(chat_id),
  88.         }]
  90.     MONGO_DB.users.update_one({"_id": ObjectId(user_id)}, {"$set": res})  # 更新用户记录
  92.     # 更新聊天表
  93.     # user_list有2个值。第一个是玩具id，第2个是用户id
  94.     # 这样，用户和玩具就能通讯了
  95.     MONGO_DB.chat.update_one({"_id": chat_id},
  96.                              {"$set":
  97.                                   {"user_list":
  98.                                        [str(toy_res.inserted_id),
  99.                                         str(res.get("_id"))]}})
  101.     RET["code"] = 0
  102.     RET["msg"] = "绑定成功"
  103.     RET["data"] = {}
  105.     return jsonify(RET)

修改 serv—>friend.py，增加add_req函数

  1. from flask import Blueprint, request, jsonify
  2. from setting import MONGO_DB
  3. from setting import RET
  4. from bson import ObjectId
  6. fri = Blueprint("fri", __name__)
  9. @fri.route("/friend_list", methods=["POST"])
  10. def friend_list():  # 好友列表
  11.     user_id = request.form.get("user_id")
  12.     # 查询用户id信息
  13.     res = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})
  14.     friend_list = res.get("friend_list")  # 获取好友列表
  16.     RET["code"] = 0
  17.     RET["msg"] = ""
  18.     RET["data"] = friend_list
  20.     return jsonify(RET)
  22. @fri.route("/add_req", methods=["POST"])
  23. def add_req():
  24.     user_id = request.form.get("user_id")  # 有可能是 toy_id or user_id
  25.     friend_id = request.form.get("friend_id")  # 100%是toy_id
  26.     req_type = request.form.get("req_type")
  27.     req_msg = request.form.get("req_msg")  # 描述
  28.     remark = request.form.get("remark")  # 备注
  30.     if req_type == "toy":
  31.         user_info = MONGO_DB.toys.find_one({"_id": ObjectId(user_id)})
  32.     else:
  33.         user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})
  35.     req_str = {
  36.         "req_user": str(user_info.get("_id")),
  37.         "req_type": req_type,
  38.         "req_toy": friend_id,
  39.         "req_msg": req_msg,
  40.         "avatar": user_info.get("avatar"),
  41.         "user_remark": remark,
  42.         # 昵称，玩具是没有的
  43.         "user_nick": user_info.get("nickname") if user_info.get("nickname") else user_info.get("baby_name"),
  44.         # 状态，1通过，2拒绝,0中间状态(可切换到1和2)。
  45.         "status": 0
  46.     }
  48.     MONGO_DB.req.insert_one(req_str)
  50.     RET["code"] = 0
  51.     RET["msg"] = "请求发送成功"
  52.     RET["data"] = {}
  54.     return jsonify(RET)

进入HBuilder项目MyApp，新建文件add_req.html

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图7

修改 add_req.html

  1. <!doctype html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Document</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link rel="stylesheet" type="text/css" href="css/mui.css" />
  9.     </head>
  11.     <body>
  12.         <header class="mui-bar mui-bar-nav">
  13.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  14.             <h1 class="mui-title">请求加为好友</h1>
  15.         </header>
  16.         <div class="mui-content">
  17.             <form class="mui-input-group">
  18.                 <div class="mui-input-row">
  19.                     <label>请求内容</label>
  20.                     <input type="text" class="mui-input-clear" placeholder="快来打个招呼把" id="req_content">
  21.                 </div>
  22.                 <div class="mui-input-row">
  23.                     <label>好友备注</label>
  24.                     <input type="text" class="mui-input-clear" placeholder="给好友起的响亮的2B名字" id="remark">
  25.                 </div>
  26.                 <div class="mui-button-row">
  27.                     <button type="button" class="mui-btn mui-btn-primary" id="send_req">发送请求</button>
  28.                     <button type="button" class="mui-btn mui-btn-danger mui-action-back">取消</button>
  29.                 </div>
  30.             </form>
  31.         </div>
  32.         <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  33.         <script type="text/javascript">
  34.             mui.init()
  35.             var Sdata = null;
  36.             mui.plusReady(function() {
  37.                 Sdata = plus.webview.currentWebview();
  39.             })
  41.             document.getElementById("send_req").addEventListener("tap", function() {
  42.                 mui.post(
  43.                     window.serv + "/add_req", {
  44.                         user_id: Sdata.user_id,
  45.                         req_type: Sdata.req_type,
  46.                         friend_id: Sdata.friend_id,
  47.                         req_msg: document.getElementById("req_content").value,
  48.                         remark: document.getElementById("remark").value
  49.                     },
  50.                     function(data) {
  51.                         console.log(JSON.stringify(data));
  53.                     }
  54.                 )
  55.             })
  56.         </script>
  57.     </body>
  59. </html>

修改 index.html，将 底部选项卡中的 邮件，改为 好友请求

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <title></title>
  8.         <script src="js/mui.js"></script>
  9.         <link href="css/mui.min.css" rel="stylesheet" />
  10.     </head>
  12.     <body>
  13.         <!--底部选项卡-->
  14.         <nav class="mui-bar mui-bar-tab">
  15.             <a class="mui-tab-item mui-active" id="index">
  16.                 <span class="mui-icon mui-icon-home"></span>
  17.                 <span class="mui-tab-label">首页</span>
  18.             </a>
  19.             <a class="mui-tab-item" id="message">
  20.                 <span class="mui-icon mui-icon-chat">
  21.                     <span class="mui-badge mui-badge-red" id="msg_count">0</span>
  22.                 </span>
  23.                 <span class="mui-tab-label">消息</span>
  24.             </a>
  25.             <a class="mui-tab-item" id="req">
  26.                 <span class="mui-icon mui-icon-email"></span>
  27.                 <span class="mui-tab-label">好友请求</span>
  28.             </a>
  29.             <a class="mui-tab-item" id="login">
  30.                 <span class="mui-icon mui-icon-gear"></span>
  31.                 <span class="mui-tab-label">设置</span>
  32.             </a>
  33.         </nav>
  34.     </body>
  35.     <script type="text/javascript" charset="utf-8">
  36.         var ws = null; // websocket对象
  37.         var msg_data = null;  // 消息数据
  38.         mui.init({
  39.             subpages: [{
  40.                 url: "main.html",
  41.                 id: "main.html",
  42.                 styles: window.styles
  43.             }]
  44.         });
  45.         mui.plusReady(function() {
  46.             //            console.log(JSON.stringify(plus.webview.currentWebview()))
  47.             if(plus.storage.getItem("user")) { // 判断是否登录
  48.                 console.log('已结登录了！');
  49.                 //连接websocket连接
  50.                 ws = new WebSocket("ws://" + window.ws_serv + "/app/" + plus.storage.getItem("user"))
  52.                 // 发送post请求
  53.                 console.log(window.serv + "/get_msg_list");
  54.                 mui.post(
  55.                     // 访问消息列表
  56.                     window.serv + "/get_msg_list", {
  57.                         user_id: plus.storage.getItem("user")
  58.                     },
  59.                     function(data) {
  60.                         console.log(JSON.stringify(data));
  61.                         //  {"code":0,"data":{"5ba0f1f2e12532418089bf88":1,"count":1},"msg":""}
  62.                         msg_data = data.data;
  63.                         // 修改消息选项卡的角标数字
  64.                         document.getElementById("msg_count").innerText = msg_data.count;
  65.                     }
  66.                 );
  68.                 // 客户端接收服务端数据时触发
  69.                 ws.onmessage = function(data) {
  70.                     console.log(data.data);
  71.                     var msg = JSON.parse(data.data);
  72.                     var chat = plus.webview.getWebviewById("chat.html");
  73.                     mui.fire(chat, "new_msg", {  // 向chat.html传值
  74.                         data: msg
  75.                     });
  76.                     var msg_count = document.getElementById("msg_count");
  77.                     // 当前页面加1
  78.                     msg_count.innerText = parseInt(msg_count.innerText) + 1;
  79.                     // 加1,用于message.html显示
  80.                     msg_data[msg.from_user]++;
  81.                 };
  82.             }
  83.             // 自动重连
  84.             ws.onclose = function() {
  85.                 window.location.reload();
  86.             }
  87.         });
  89.         // 消息
  90.         document.getElementById("message").addEventListener("tap", function() {
  91.             mui.openWindow({
  92.                 url: "message.html",
  93.                 id: "message.html",
  94.                 styles: window.styles,
  95.                 extras: {
  96.                     // 传输用户id,给message.html
  97.                     user_id: plus.storage.getItem("user"),
  98.                     msg_data: msg_data,
  99.                     //  "data":{"5ba0f1f2e12532418089bf88":1,"count":1}
  100.                 }
  101.             })
  102.         });
  104.         document.getElementById("index").addEventListener("tap", function() {
  105.             mui.openWindow({
  106.                 url: "main.html",
  107.                 id: "main.html",
  108.                 styles: window.styles
  109.             })
  110.         })
  112.         document.getElementById("req").addEventListener("tap", function() {
  113.             mui.openWindow({
  114.                 url: "req_list.html",
  115.                 id: "req_list.html",
  116.                 styles: window.styles
  117.             })
  118.         })
  120.         document.getElementById("login").addEventListener("tap", function() {
  121.             // 自动登录,判断storage中的user存在，就跳转到user_info，否则跳转login
  122.             if(plus.storage.getItem("user")) {
  123.                 mui.openWindow({
  124.                     url: "user_info.html",
  125.                     id: "user_info.html",
  126.                     styles: window.styles,
  127.                     extras: {
  128.                         user_id: plus.storage.getItem("user")
  129.                     }
  130.                 })
  131.             } else {
  132.                 mui.openWindow({
  133.                     url: "login.html",
  134.                     id: "login.html",
  135.                     styles: window.styles
  136.                 })
  137.             }
  138.         })
  140.         document.addEventListener("login", function(data) {
  141.             // fire事件接收消息，使用data.detail
  142.             // index是为做显示区分
  143.             mui.toast("index" + data.detail.msg)
  144.         });
  146.         document.addEventListener("send_music", function(data) { //监听send_music事件
  147.             var music_name = data.detail.music_name; //获取player.html使用fire发送的music_name值
  148.             var toy_id = data.detail.toy_id; //获取发送的玩具id
  150.             send_str = { //构造数据
  151.                 data: music_name,
  152.                 to_user: toy_id, // 目标用户,这里统一格式
  153.                 msg_type: "music", // 类型为音乐
  154.             }
  155.             // 发送数据给后端，注意要json序列化
  156.             ws.send(JSON.stringify(send_str));
  157.         });
  159.         document.addEventListener("send_msg", function(data) { //发送消息
  160.             var filename = data.detail.filename
  161.             var to_user = data.detail.to_user
  162.             send_str = {
  163.                 to_user: to_user
  164.             }
  165.             ws.send(JSON.stringify(send_str))
  166.             plus.io.resolveLocalFileSystemURL(filename, function(entry) {
  167.                 // 可通过entry对象操作test.html文件 
  168.                 entry.file(function(file) {
  169.                     // FileReader文件系统中的读取文件对象，用于获取文件的内容
  170.                     var fileReader = new plus.io.FileReader();
  172.                     //                        alert("getFile:" + JSON.stringify(file));
  173.                     // readAsDataURL: 以URL编码格式读取文件数据内容
  174.                     fileReader.readAsDataURL(file, 'utf-8');
  175.                     // onloadend: 文件读取操作完成时的回调函数
  176.                     fileReader.onloadend = function(evt) {
  177.                         console.log(evt.target.result);
  178.                         var b = dataURLtoBlob(evt.target.result);
  179.                         ws.send(b); // 发送blob数据
  181.                     }
  182.                     //                        alert(file.size + '--' + file.name)
  183.                 });
  184.             });
  186.         });
  188.         // 监听cut_msg_count事件,由message.html向index.html执行fire
  189.         document.addEventListener("cut_msg_count", function(data) {
  190.             var msg_count = document.getElementById("msg_count");
  191.             var cut = parseInt(data.detail.cut);  // parseInt表示强制转换
  192.             var count = parseInt(msg_count.innerText);  // 默认获取innerText是字符串,需要强制转换
  193.             msg_count.innerText = count - cut;  // 总数 减去 点击聊天会话的数量,比如小甜甜的
  194.         });
  196.         function dataURLtoBlob(dataurl) { // 数据转换为Blob
  197.             // 逻辑很复杂,这里不解释了。直接用就可以了！
  198.             var arr = dataurl.split(','),
  199.                 mime = arr[0].match(/:(.*?);/)[1],
  200.                 bstr = atob(arr[1]),
  201.                 n = bstr.length,
  202.                 u8arr = new Uint8Array(n);
  203.             while(n--) {
  204.                 u8arr[n] = bstr.charCodeAt(n);
  205.             }
  206.             var a = new Blob([u8arr], {
  207.                 type: mime
  208.             });
  209.             return a
  210.         }
  211.     </script>
  213. </html>

新建文件 req_list.html

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图8

修改 req_list.html

  1. <!doctype html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Document</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link rel="stylesheet" type="text/css" href="css/mui.css" />
  9.     </head>
  11.     <body>
  12.         <header class="mui-bar mui-bar-nav">
  13.             <h1 class="mui-title">玩具的好友请求</h1>
  14.         </header>
  15.         <div class="mui-content" >
  16.             <ul class="mui-table-view" id="req_list">
  19.             </ul>
  20.         </div>
  21.     </body>
  22.     <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  23.     <script type="text/javascript">
  24.         mui.init()
  25.         mui.plusReady(function(){
  26.             mui.post(
  27.                 window.serv + "/req_list",
  28.                 {user_id:plus.storage.getItem("user")},
  29.                 function(data){
  30.                     console.log(JSON.stringify(data));
  31.                     for (var i = 0; i < data.data.length; i++) {
  32.                         create_req(data.data[i])
  33.                     }
  34.                 }
  35.             )
  36.         })
  38.         function create_req(req){        
  39.             var litag = document.createElement("li");
  40.             litag.className = "mui-table-view-cell mui-media";
  41.             var atag = document.createElement("a");
  42.             atag.id = req._id;
  43.             // 点击事件 周一把这儿写了 绑定事件
  44.             atag.onclick = function(){
  45.                 console.log(this.id);
  47.                 open_req(this.id);
  49.             }
  52.             var imgtag = document.createElement("img");
  53.             imgtag.className = "mui-media-object mui-pull-left";
  55.             imgtag.src = "avatar/" + req.avatar;
  57.             var divtag = document.createElement("div");
  58.             divtag.className = "mui-media-body";
  59.             divtag.innerText = req.user_nick;
  60.             var ptag = document.createElement("p");
  61.             ptag.className = "mui-ellipsis";
  62.             ptag.innerText = req.req_msg;
  64.              litag.appendChild(atag);
  65.              atag.appendChild(imgtag);
  66.              atag.appendChild(divtag);
  67.              divtag.appendChild(ptag);
  69.              document.getElementById("req_list").appendChild(litag);
  71.         }
  73.         function open_req(req_id){
  74.             mui.openWindow({
  75.                 url:"acc_ref_req.html",
  76.                 id:"acc_ref_req.html",
  77.                 extras:{
  78.                     req_id:req_id
  79.                 }
  80.             })
  81.         }
  82.     </script>
  83. </html>

进入 flask项目，修改 serv—>friend.py，增加函数 req_list

  1. from flask import Blueprint, request, jsonify
  2. from setting import MONGO_DB
  3. from setting import RET
  4. from bson import ObjectId
  6. fri = Blueprint("fri", __name__)
  9. @fri.route("/friend_list", methods=["POST"])
  10. def friend_list():  # 好友列表
  11.     user_id = request.form.get("user_id")
  12.     # 查询用户id信息
  13.     res = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})
  14.     friend_list = res.get("friend_list")  # 获取好友列表
  16.     RET["code"] = 0
  17.     RET["msg"] = ""
  18.     RET["data"] = friend_list
  20.     return jsonify(RET)
  22. @fri.route("/add_req", methods=["POST"])
  23. def add_req():  # 添加好友请求
  24.     user_id = request.form.get("user_id")  # 有可能是 toy_id or user_id
  25.     friend_id = request.form.get("friend_id")  # 100%是toy_id
  26.     req_type = request.form.get("req_type")
  27.     req_msg = request.form.get("req_msg")  # 描述
  28.     remark = request.form.get("remark")  # 备注
  30.     if req_type == "toy":
  31.         user_info = MONGO_DB.toys.find_one({"_id": ObjectId(user_id)})
  32.     else:
  33.         user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})
  35.     req_str = {
  36.         "req_user": str(user_info.get("_id")),
  37.         "req_type": req_type,
  38.         "req_toy": friend_id,
  39.         "req_msg": req_msg,
  40.         "avatar": user_info.get("avatar"),
  41.         "user_remark": remark,
  42.         # 昵称，玩具是没有的
  43.         "user_nick": user_info.get("nickname") if user_info.get("nickname") else user_info.get("baby_name"),
  44.         # 状态，1通过，2拒绝,0中间状态(可切换到1和2)。
  45.         "status": 0
  46.     }
  48.     MONGO_DB.req.insert_one(req_str)
  50.     RET["code"] = 0
  51.     RET["msg"] = "请求发送成功"
  52.     RET["data"] = {}
  54.     return jsonify(RET)
  56. @fri.route("/req_list", methods=["POST"])
  57. def req_list():  # 添加请求列表
  58.     user_id = request.form.get("user_id")
  59.     user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})
  60.     bind_toy = user_info.get("bind_toy")
  62.     reqs = list(MONGO_DB.req.find({"req_toy": {"$in": bind_toy}, "status": 0}))
  64.     for index, req in enumerate(reqs):
  65.         reqs[index]["_id"] = str(req.get("_id"))
  67.     RET["code"] = 0
  68.     RET["msg"] = ""
  69.     RET["data"] = reqs
  71.     return jsonify(RET)

用户收到 添加好友请求后，还可以拒绝请求。

进入HBuilder项目MyApp，新建文件acc_ref_req.html

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图9

修改文件 acc_ref_req.html

  1. <!doctype html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Document</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link rel="stylesheet" type="text/css" href="css/mui.css" />
  9.     </head>
  11.     <body>
  12.         <header class="mui-bar mui-bar-nav">
  13.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  14.             <h1 class="mui-title">处理好友请求</h1>
  15.         </header>
  16.         <div class="mui-content">
  17.             <ul class="mui-table-view">
  18.                 <li class="mui-table-view-cell mui-media">
  19.                     <a href="javascript:;">
  20.                         <img class="mui-media-object mui-pull-left" src="" id="avatar">
  21.                         <div class="mui-media-body">
  22.                             <span id="user_nick"></span>
  23.                             <p class="mui-ellipsis" id="req_msg"></p>
  24.                         </div>
  25.                     </a>
  26.                 </li>
  27.             </ul>
  29.             <form class="mui-input-group">
  30.                 <div class="mui-input-row">
  31.                     <label>好友备注</label>
  32.                     <input type="text" class="mui-input-clear" placeholder="给好友起的响亮的2B名字" id="remark">
  33.                 </div>
  34.                 <div class="mui-button-row">
  35.                     <button type="button" class="mui-btn mui-btn-primary" id="ido">I Do</button>
  36.                     <button type="button" class="mui-btn mui-btn-danger mui-action-back" id="goodman">好人卡</button>
  37.                 </div>
  38.             </form>
  39.         </div>
  40.     </body>
  41.     <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  42.     <script type="text/javascript">
  43.         mui.init()
  44.         var Sdata = null;
  45.         mui.plusReady(function() {
  46.             Sdata = plus.webview.currentWebview();
  47.             mui.post(
  48.                 window.serv + "/get_req", {
  49.                     req_id: Sdata.req_id
  50.                 },
  51.                 function(data) {
  52.                     console.log(JSON.stringify(data));
  53.                     document.getElementById("avatar").src = "avatar/" + data.data.avatar;
  54.                     document.getElementById("user_nick").innerText = data.data.user_nick;
  55.                     document.getElementById("req_msg").innerText = data.data.req_msg;
  56.                 }
  57.             )
  58.         })
  60.         document.getElementById("ido").addEventListener("tap", function() {
  61.             var remark = document.getElementById("remark").value;
  62.             mui.post(
  63.                 window.serv + "/acc_req", {
  64.                     req_id: Sdata.req_id,
  65.                     remark:remark
  66.                 },
  67.                 function(data) {
  68.                     console.log(JSON.stringify(data));
  69.                 }
  70.             )
  71.         })
  73.         document.getElementById("goodman").addEventListener("tap", function() {
  74.             mui.post(
  75.                 window.serv + "/ref_req", {
  76.                     req_id: Sdata.req_id
  77.                 },
  78.                 function(data) {
  79.                     console.log(JSON.stringify(data));
  80.                 }
  81.             )
  82.         })
  83.     </script>
  85. </html>

修改 qrcode.html，这里应该要扫描玩具二维码的。但是太麻烦了，直接固定设备编号！

固定设备编号为 小豆芽，发给后端。因为当前web玩具是小甜甜。它需要增加对方才行！

  1. <!doctype html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Document</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link rel="stylesheet" type="text/css" href="css/mui.css" />
  9.     </head>
  11.     <body>
  12.         <header class="mui-bar mui-bar-nav">
  13.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  14.             <h1 class="mui-title">扫描玩具二维码</h1>
  15.         </header>
  16.         <div class="mui-content">
  17.             <div style="height: 550px;" id="qr"></div>
  18.         </div>
  20.     </body>
  21.     <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
  22.     <script type="text/javascript">
  23.         mui.init()
  24.         var Sdata = null;
  25.         mui.plusReady(function() {
  26.             Sdata = plus.webview.currentWebview();
  27. //            var barcode = new plus.barcode.Barcode('qr');
  28. //            //      plus.webview.currentWebview().append(barcode);
  29. //            barcode.onmarked = chenggong;
  30. //            barcode.start();
  31.             // 临时改为小豆芽的设备id,从MongoDB中的toys表查询
  32.             chenggong(0,"02cc0fc7490b6ee08c31f38ac7a375eb")
  33.         })
  35.         function chenggong(type, code) {
  36.             mui.post(
  37.                 window.serv + "/yanzheng_qr", {
  38.                     device_id: code
  39.                 },
  40.                 function(data) {
  41.                     console.log(JSON.stringify(data));
  42.                     mui.toast(data.msg);
  43.                     if(data.code == 2) {
  44.                         mui.back();
  45.                     }
  46.                     if(data.code == 1) {
  47.                         //加好友的小逻辑 跳转到加好友页面    
  48.                         if(Sdata.toy_id) {
  49.                             //1.玩具 添加好友 toys toys
  50.                             mui.openWindow({
  51.                                 url: "add_req.html",
  52.                                 id: "add_req.html",
  53.                                 extras: {
  54.                                     req_type: "toy",
  55.                                     user_id: Sdata.toy_id,
  56.                                     friend_id: data.data.toy_id
  57.                                 }
  58.                             })
  59.                         } else {
  60.                             // 2.手机app 添加好友 users toys
  61.                             mui.openWindow({
  62.                                 url: "add_req.html",
  63.                                 id: "add_req.html",
  64.                                 extras: {
  65.                                     req_type: "user",
  66.                                     user_id: plus.storage.getItem("user"),
  67.                                     friend_id: data.data.toy_id
  68.                                 }
  69.                             })
  70.                         }
  72.                     }
  73.                     if(data.code == 0) {
  74.                         //今天的逻辑 创建玩具 绑定用户 成为玩具的第一个好友
  75.                         //1.创建玩具：打开创建玩具的页面
  76.                         if(Sdata.toy_id) {
  77.                             mui.back()
  78.                         } else {
  79.                             mui.openWindow({
  80.                                 url: "bind_toy.html",
  81.                                 id: "bind_toy.html",
  82.                                 extras: {
  83.                                     device_id: code
  84.                                 }
  85.                             })
  86.                         }
  88.                     }
  89.                 }
  90.             )
  91.         }
  92.     </script>
  94. </html>

进入flask项目，修改 serv—>friend.py，增加函数get_req，acc_req，ref_req

  1. from flask import Blueprint, request, jsonify
  2. from setting import MONGO_DB
  3. from setting import RET
  4. from bson import ObjectId
  6. fri = Blueprint("fri", __name__)
  9. @fri.route("/friend_list", methods=["POST"])
  10. def friend_list():  # 好友列表
  11.     user_id = request.form.get("user_id")
  12.     # 查询用户id信息
  13.     res = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})
  14.     friend_list = res.get("friend_list")  # 获取好友列表
  16.     RET["code"] = 0
  17.     RET["msg"] = ""
  18.     RET["data"] = friend_list
  20.     return jsonify(RET)
  22. @fri.route("/add_req", methods=["POST"])
  23. def add_req():  # 添加好友请求
  24.     user_id = request.form.get("user_id")  # 有可能是 toy_id or user_id
  25.     friend_id = request.form.get("friend_id")  # 100%是toy_id
  26.     req_type = request.form.get("req_type")
  27.     req_msg = request.form.get("req_msg")  # 描述
  28.     remark = request.form.get("remark")  # 备注
  30.     if req_type == "toy":
  31.         user_info = MONGO_DB.toys.find_one({"_id": ObjectId(user_id)})
  32.     else:
  33.         user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})
  35.     req_str = {
  36.         "req_user": str(user_info.get("_id")),
  37.         "req_type": req_type,
  38.         "req_toy": friend_id,
  39.         "req_msg": req_msg,
  40.         "avatar": user_info.get("avatar"),
  41.         "user_remark": remark,
  42.         # 昵称，玩具是没有的
  43.         "user_nick": user_info.get("nickname") if user_info.get("nickname") else user_info.get("baby_name"),
  44.         # 状态，1通过，2拒绝,0中间状态(可切换到1和2)。
  45.         "status": 0
  46.     }
  48.     MONGO_DB.req.insert_one(req_str)
  50.     RET["code"] = 0
  51.     RET["msg"] = "请求发送成功"
  52.     RET["data"] = {}
  54.     return jsonify(RET)
  56. @fri.route("/req_list", methods=["POST"])
  57. def req_list():  # 添加请求列表
  58.     user_id = request.form.get("user_id")
  59.     user_info = MONGO_DB.users.find_one({"_id": ObjectId(user_id)})
  60.     bind_toy = user_info.get("bind_toy")
  62.     reqs = list(MONGO_DB.req.find({"req_toy": {"$in": bind_toy}, "status": 0}))
  64.     for index, req in enumerate(reqs):
  65.         reqs[index]["_id"] = str(req.get("_id"))
  67.     RET["code"] = 0
  68.     RET["msg"] = ""
  69.     RET["data"] = reqs
  71.     return jsonify(RET)
  74. @fri.route("/get_req", methods=["POST"])
  75. def get_req():  # 获取好友请求
  76.     req_id = request.form.get("req_id")
  78.     req_info = MONGO_DB.req.find_one({"_id": ObjectId(req_id)})
  80.     req_info["_id"] = str(req_info.get("_id"))
  82.     RET["code"] = 0
  83.     RET["msg"] = ""
  84.     RET["data"] = req_info
  86.     return jsonify(RET)
  89. @fri.route("/acc_req", methods=["POST"])
  90. def acc_req():  # 允许好友请求
  91.     req_id = request.form.get("req_id")
  92.     remark = request.form.get("remark")
  94.     req_info = MONGO_DB.req.find_one({"_id": ObjectId(req_id)})
  96.     # 1. 为 user 或 toy 添加 toy
  97.     if req_info.get("req_type") == "toy":
  98.         user_info = MONGO_DB.toys.find_one({"_id": ObjectId(req_info.get("req_user"))})
  99.     else:
  100.         user_info = MONGO_DB.users.find_one({"_id": ObjectId(req_info.get("req_user"))})
  102.     toy = MONGO_DB.toys.find_one({"_id": ObjectId(req_info.get("req_toy"))})
  104.     chat_window = MONGO_DB.chat.insert_one({"user_list": [str(toy.get("_id")), str(user_info.get("_id"))]})
  106.     friend_info = {
  107.         "friend_id": str(toy.get("_id")),
  108.         "friend_name": toy.get("baby_name"),
  109.         "friend_remark": req_info.get("user_remark"),
  110.         "friend_avatar": toy.get("avatar"),
  111.         "friend_chat": str(chat_window.inserted_id)
  112.     }
  114.     if req_info.get("req_type") == "toy":
  115.         MONGO_DB.toys.update_one({"_id": ObjectId(req_info.get("req_user"))},
  116.                                  {"$push": {"friend_list": friend_info}})
  117.     else:
  118.         MONGO_DB.users.update_one({"_id": ObjectId(req_info.get("req_user"))},
  119.                                   {"$push": {"friend_list": friend_info}})
  121.     # 2. 为 toy 添加 user 或 toy
  122.     user_name = user_info.get("nickname") if user_info.get("nickname") else user_info.get("baby_name")
  123.     friend_info2 = {
  124.         "friend_id": str(user_info.get("_id")),
  125.         "friend_name": user_name,
  126.         # 同意方的备注
  127.         "friend_remark": remark if remark else user_name,
  128.         "friend_avatar": user_info.get("avatar"),
  129.         "friend_chat": str(chat_window.inserted_id)
  130.     }
  132.     MONGO_DB.toys.update_one({"_id": ObjectId(req_info.get("req_toy"))},
  133.                              {"$push": {"friend_list": friend_info2}})
  136.     RET["code"] = 0
  137.     RET["msg"] = f"添加好友{remark}成功"
  138.     RET["data"] = {}
  140.     MONGO_DB.req.update_one({"_id": ObjectId(req_id)}, {"$set": {"status": 1}})
  142.     return jsonify(RET)
  145. @fri.route("/ref_req", methods=["POST"])
  146. def ref_req():  # 拒绝好友请
  147.     req_id = request.form.get("req_id")
  149.     MONGO_DB.req.update_one({"_id": ObjectId(req_id)}, {"$set": {"status": 2}})
  151.     RET["code"] = 0
  152.     RET["msg"] = "已拒绝好友请求"
  153.     RET["data"] = {}
  155.     return jsonify(RET)

重启 manager.py

使用模拟器访问，点击添加好友，效果如下：

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图10

输入表单数据，效果如下：

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图11

点击发送请求，查看Pycharm控制台输出：

  1. 192.168.11.25 - - [25/Sep/2018 20:49:47] "POST /add_req HTTP/1.1" 200 -

请求成功了

查看表 req，发现有一条记录

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图12

点击底部选项卡的 好友请求—> 小甜甜

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图13

输入好友备注，点击 I Do

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图14

查看Pycharm

  1. 192.168.11.25 - - [25/Sep/2018 21:05:46] "POST /acc_req HTTP/1.1" 200 -

返回管理我的玩具，点击小甜甜，效果如下：

Day132 玩具管理页面,控制玩具通讯录,基于请求的好友关系建立 - 图15

发现多了一个好友

查看玩具表，查看 friend_list字段。有2个记录

  1. /* 1 createdAt:2018/9/19 下午5:53:08*/
  2. {
  3.     "_id" : ObjectId("5ba21c84e1253229c4acbd12"),
  4.     "device_id" : "02cc0fc7490b6ee08c31f38ac7a375eb",
  5.     "toy_name" : "豆芽",
  6.     "baby_name" : "小豆芽",
  7.     "gender" : "2",
  8.     "avatar" : "girl.jpg",
  9.     "bind_user" : "5b9bb768e1253281608e96eb",
  10.     "friend_list" : [
  11.         {
  12.             "friend_id" : "5b9bb768e1253281608e96eb",
  13.             "friend_name" : "xiao",
  14.             "friend_remark" : "小鱼",
  15.             "friend_avatar" : "boy.jpg",
  16.             "friend_chat" : "5ba21c84e1253229c4acbd11",
  17.             "user_type" : "user"
  18.         },
  19.         {
  20.             "friend_id" : "5ba0f1f2e12532418089bf88",
  21.             "friend_name" : "小甜甜",
  22.             "friend_remark" : "小甜甜",
  23.             "friend_avatar" : "girl.jpg",
  24.             "friend_chat" : "5bab7c19e125327ffc804459",
  25.             "user_type" : "toy"
  26.         }
  27.     ]
  28. },
  30. /* 2 createdAt:2018/9/18 下午8:39:14*/
  31. {
  32.     "_id" : ObjectId("5ba0f1f2e12532418089bf88"),
  33.     "device_id" : "01f9bf1bac93eddd8397d0455abbeddb",
  34.     "toy_name" : "小可爱",
  35.     "baby_name" : "小甜甜",
  36.     "gender" : "2",
  37.     "avatar" : "girl.jpg",
  38.     "bind_user" : "5b9bb768e1253281608e96eb",
  39.     "friend_list" : [
  40.         {
  41.             "friend_id" : "5b9bb768e1253281608e96eb",
  42.             "friend_name" : "xiao",
  43.             "friend_remark" : "小鱼",
  44.             "friend_avatar" : "boy.jpg",
  45.             "friend_chat" : "5ba21c84e1253229c4acbd11",
  46.             "user_type" : "user"
  47.         },
  48.         {
  49.             "friend_id" : "5ba21c84e1253229c4acbd12",
  50.             "friend_name" : "小豆芽",
  51.             "friend_remark" : "豆芽",
  52.             "friend_avatar" : "girl.jpg",
  53.             "friend_chat" : "5bab7c19e125327ffc804459",
  54.             "user_type" : "toy"
  55.         }
  56.     ]
  57. }

会发现，小甜甜和小豆芽，互为好友了！

今日总结：

  1. 1.玩具管理页面
  2.     mui组件 ：
  3.         msl  : 图文表格
  6. 2.控制玩具通讯录
  9. 3.基于请求的好友关系建立
  10.     发送请求：带上自己的所有信息 + 请求信息
  11.     接收请求：可以看到自己的所有消息
  12.     双方添加好友：
  13.     同意：
  14.         1.判断自己是玩具还是用户
  15.         2.查询好友的信息
  16.         3.建立好友的信息（friend_list 中的元素）
  17.         4.将建立的好友信息存放在自己的friend_list中
  18.         5.建立自己的信息（好友的friend_list 中的元素）
  19.         6.将建立的自己信息存放在好友的friend_list中
  20.         7.将请求的状态改为 1

完整代码，参考github:

https://github.com/987334176/Intelligent_toy/archive/v1.6.zip

注意：qrcode.html，固定设备编号为 小豆芽。需要修正一下！