码迷,mamicode.com
首页 > 移动开发 > 详细

音乐播放APP初步开发(二)自动登录和 扫码识别设备

时间:2019-05-01 10:25:41      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:OLE   ODB   脚本   user   lis   return   信息   text   不刷新   

在登录页面login.html初次登录时,发送post请求,对返回的数据判断,如果code=0,表示已经登录成功的用户。则将其_id数据设置到类似cookie的全局中去。

if(data.code==0){
                        window.localStorage.setItem("user",data.data._id);
                        // console.log(window.localStorage.getItem("user"));
                        console.log(JSON.stringify(data.data))
                        mui.openWindow({
                        url:"userinfo.html",
                        id:"userinfo.html",
                        styles:{
                            top:"0px",
                            bottom:"50px"
                        },
                        extras:data.data,
                        createNew:true
                        })
                    }

createNew:true 是对页面刷新数据,不刷新页面会默认使用原页面,无法获取到数据

在index.html点击设置时,会先取出公共变量中的数据,若有值,则直接跳转个人中心,否则跳转登录页面

document.getElementById(self).addEventListener(tap, function() {
                if (window.localStorage.getItem("user")) {
                    mui.post(window.serv_auto,{
                            "_id":window.localStorage.getItem("user")
                        },function(data){
                            console.log(JSON.stringify(data))
                            mui.openWindow({
                                "url": "userinfo.html",
                                "id": "userinfo.html",
                                styles: {
                                    top: "0px",
                                    bottom: "50px"
                                },
                                extras:data.data,
                                // createNew:true
                            })
                        },json
                    );
                    
                } else {
                    mui.openWindow({
                        "url": "login.html",
                        "id": "login.html",
                        styles: {
                            top: "0px",
                            bottom: "50px"
                        },

                    })
                }

            })

本质上 window.localStorage.getItem("user")返回的就是用户在MongoDB中的objectID值: 5cc6c01b2893361a88b70189

技术图片

 

创建二维码:

在个人中心点击扫码,跳转至识别二维码页面,扫码判断该设备是否为授权设备,在页面识别成功时,返回提示信息

1.先去创建授权的二维码,存放到MongoDB

这里采用联图网二维码开放平台去生成二维码:http://www.liantu.com/pingtai/

创建二维码的脚本:

import requests,os,time,hashlib
from setting import LT_URL,QR_CODE,mongoDB
from uuid import uuid4

def creat_QR(number):
    qr_list=[]
    for i in range(number):
        qr=hashlib.md5(f{uuid4()}{time.time()}{uuid4()}.encode("utf8")).hexdigest()
        res=requests.get(LT_URL%(qr))

        QR_PATH=os.path.join(QR_CODE,f{qr}.jpg)
        with open(QR_PATH,"wb")as f:
            f.write(res.content)
        qr_dict={"device_key":qr}
        qr_list.append(qr_dict)
        time.sleep(0.5)
    print(qr_list)

    mongoDB.devices.insert_many(qr_list)

creat_QR(5)

该接口返回的数据为二进制流图片二维码,将其存放至指定目录,并将文件名存放至MongoDB技术图片

技术图片

2.创建二维码识别页面:

在个人中心跳转至扫码页面

技术图片技术图片

document.getElementById(qr_code).addEventListener(tap,function () {
                    mui.openWindow({
                                "url":"device.html",
                                "id":"device.html",
                                styles:{
                                    top:"0px",
                                    bottom:"0px"
                                },
                       
                            })
            })

扫码页面完整代码:

技术图片
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.css" rel="stylesheet" />
    </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 id="bcid" style="width: 100%; height: 580px;"></div>
        </div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()

            function inmarked(type, result) {
                var text = "未知: ";
                switch (type) {
                    case plus.barcode.QR:
                        text = "QR: "
                        break;
                    case plus.barcode.EAN13:
                        text = EAN13: ;
                        break;
                    case plus.barcode.EAN8:
                        text = EAN8: ;
                        break;
                }
                alert(text+result);
                
                mui.post(window.serv_qr,{
                        "device_key":result
                    },function(data){
                        mui.toast(JSON.stringify(data))
                        console.log(JSON.stringify(data))
                    },json
                );
            }
            var scan = null;
            mui.plusReady(function() {
                scan = new plus.barcode.Barcode("bcid");
                scan.start();
                scan.onmarked = inmarked;
                
            })
        </script>
    </body>

</html>
device.html
mui.init()

            function inmarked(type, result) {
                var text = "未知: ";
                switch (type) {
                    case plus.barcode.QR:
                        text = "QR: "
                        break;
                    case plus.barcode.EAN13:
                        text = EAN13: ;
                        break;
                    case plus.barcode.EAN8:
                        text = EAN8: ;
                        break;
                }
                alert(text+result);
                
                mui.post(window.serv_qr,{
                        "device_key":result
                    },function(data){
                        mui.toast(JSON.stringify(data))
                        console.log(JSON.stringify(data))
                    },json
                );
            }
            var scan = null;
            mui.plusReady(function() {
                scan = new plus.barcode.Barcode("bcid");
                scan.start();
                scan.onmarked = inmarked;
                
            })

创建一个扫码对象,并启用该对象

在扫码识别成功后,将数据以post方式发送给后端,去处理逻辑。

后台蓝图代码:

from flask import Blueprint,request,jsonify
from setting import mongoDB,RET

device_code=Blueprint("device_code",__name__)

@device_code.route(/qr_code,methods=["POST",])
def qr_code():
    qr=request.form.to_dict()
    ret=mongoDB.devices.find_one(qr,{"_id":0})
    if ret:
        RET["code"]=0
        RET["msg"]="合法的设备,开始绑定"
        RET["data"]=ret

    else:
        RET["code"] = 2
        RET["msg"] = "非法的设备,请更换!"
        RET["data"]={}

    return jsonify(RET)

返回的数据作为页面的提示信息页面效果图:

识别非数据库中的二维码:

技术图片技术图片

识别数据库中的二维码:

技术图片技术图片

音乐播放APP初步开发(二)自动登录和 扫码识别设备

标签:OLE   ODB   脚本   user   lis   return   信息   text   不刷新   

原文地址:https://www.cnblogs.com/wen-kang/p/10799213.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!