巨蟒python全栈开发flask10 项目开始2
1.websocket异常处理
出现上图报错的原因是什么?
原因是:websocket断开了,所以报错
19行接收的msg是None值,所以报错.
打开一个文件,点击发送音乐,出现上面的内容:
客户端app发送的是1,浏览器发送的是2
to_user=toy01
to_user_socket=None
此时,to_user_socket是None里边没有send 方法,自然会报错.
下面,我们会学习一种web断开之后重新连接的一种机制进行处理.
"请确认你的眼神",左右眼
再写一个mbo,注册有现成的我们直接找,就可以了:
我们在body里边写入注册框:
我们需要在index.html里边的设置写上一个id
下面我们再写一个,绑定页面.,这个时候,需要绑定两个页面
下面进行判断一下:
2.注册+登录+自动登录
玩具有一项开机自检的功能非常的强悍.是授权就可以,不授权就不可以.
下面,我们开始写一个登录页面,login.html,清空,写代码块md,
因为是一个主界面,所以,我们不能够带箭头,因此选择mhe代码块中不带箭头的内容
写完之后,我们保存一下,进行同步,但是我们需要点击"设置",进入"login页面"但是目前,我们点击设置"是没有反应的
这个时候,我们通过打印进行测试一下:
保存一下:
上边的extras去掉:然后保存一下:
重启启动程序:
这个时候,点击设置,出现跳转不过去.也就是localStorage里边是有值的,我们跳转不过去,只能在前端打印上边的内容11111
我们需要清空掉上边的内容:
先写一个清空命令,保存一下,这个时候,再注释一下这个清空命令,一直点击"这个设置",没有出现界面,原因是没有保存login.html页面.
我们现在在上图的界面,再点击"返回",正常是直接退的,但是现在返回的是home页面
我们可以在login.html写一个重新返回的函数为空,这样就按返回键,就什么都不能返回了.
这个时候,我们再点击"返回",已经返回不了原来的home界面了
我们只能点击首页,但是现在我们可以在首页加上一个id,
我们在上边,先加上一个home,然后绑定一个事件:
先写一个dga,再写一个mop
这个时候,我们就可以在"首页"和"设置"之间来回切换了,但是存在的问题是,"速度可能会慢一些"
问题:在home页面也存在返回,就返回到了登录页面,因此我们再home页面也是需要做一下处理的.
back,只要是主菜单都是需要用这个内容的.
这个时候,点击"返回"就不能再返回了
先修改一下快捷键:"工具"=>"选项"
下面,搜索"快捷"
我们将整理修改成Ctrl+Alt+L
python学完之后,有点强迫症,下图中加上id
上面,我们再写绑定事件:
reg是子页面,这个时候,我们需要再次新建一个注册页面:
md代码块,mhe代码块选择"带箭头的代码块"
title="注册用户"
下面我们再写一个body
这个就是我们事先注册页面的功能:
下面,我们再在注册页面里加上注册框,
下面再写一个昵称和性别,性别是需要选择的
我们查看一下单选框:
单选框代码块是mra,选择第二个
因为性别是单选框,我们需要写两个选择其中一个:
保存,这个时候得到下图的效果:
app过审,需要不能直接写男和女,苹果需要审查
我们可以通过下图的方式,实现数据的获取
下面,我们写注册之后能拿到的内容:
注意,下面的性别的取法是有一点点不同的,定义的越多,拿到的越多,并且需要通过for循环来拿这个
mdt代码块
下面,我们再服务端新建一个user.py
套用content.py里边的信息,将内容写在下面的位置
下面,我们再在manager.py里边导入user.py
这个时候manager.py已经挂掉了,但是我们可以继续添加内容进行处理,,导入flask里边的request请求
点击"注册",后边服务端,没有收到任何消息
没有收到消息是后端没有开启运行,,开启之后,我们再次点击"注册",下面是服务端收到的消息
上图是一些内容
这个时候,我们可以看一下数据,登录NoSQL客户端:
连接之后,点击刷新一下,得到下面的内容
很明显,上边的密码是不够安全的,因此我们需要进行密文处理一下
首先,我们将下面的username,复制到"搜索"里边,然后情况下面右下角里边的内容:
右击,移除文档,点击"OK"
我们在后端加MD5,进行处理比较容易
下面的这个博客可以利用下面的加密方式进行处理
我们先点击,上边的"下载MD5压缩包"
我们得到上边的内容是,md5.js
我们只需要两部,一步导入,一步添加加密
第一步就是导入
下面,我们保存一下,再次注册一遍:
再次点击"注册",
这个时候,我们在mongodb里边看到的是密文:
下面,我们需要,点击注册之后跳转到的不是login页面,应该是登录状态,下面我们需要再写一个监听事件
我们现在写这个url,有点费劲,我们希望可以实现这个不要这么麻烦,在配置文件里边配置一下:也就是我们看到每个页面都要加载mui.init
也就是说,我们让整个项目都可以使用这个
下图是修改之后的位置:
下面是,进行处理,
我们得到上边的内容:
为什么写app01?, 我们看起来是个死的,实际上是个动态的参数,前面有个ws
下面,我们再login登录界面进行添加,用户和密码的id
下面,我们再在后端写一个接口
复制,上图红框内的内容:
再次启动服务端:
在注册页面输入信息,
我们得到下面的信息
下面我们进行判断一下:
下面,我们再新建一个user_info.html信息
为什么写不带箭头,因为和这个不确定是"用户信息",还是"登录login"页面
这样,我们就将用户信息传递到user_info.html界面了
这个时候,我们得到下面的信息:
如果缓存存在,就打开用户信息这个界面:
下面,我们就可以传递值user_info
extras可以传递值user_info
下面我们再在user.py里边再写一个auto_login
注意,要及时保存,退出,再次登录,点击"设置",我们可以看到下图中的信息:
下面我们需要在user_info.html里边拿一点东西
在上图中加上var处理
注意:_id都应该是小写的形式
上边一直出不来这个用户信息???
经过我反复找错误,最后终于出来了
3.user_info&&toy_manager
下面,我们写一个图文列表:
删除或者注释掉上边红框的内容:
我们再来一个图文列表:
mli,图片居左:
mbo代码块里边的mli,选择第三个,我们看到下面的效果:
只留下一个:
得到下图的结果:
下面,我们就显示"图片","昵称",以及真实姓名
下面我们再app基础上建立一个图片文件avatar
将两张图片放在avatar里边
下面我们修改下面的内容:
下面我们看一下app里边的显示效果:
下面,我们再写一个登出
修改成红色,并且id="logout"
下面,我们再写一个登出的事件,要清除缓存的内容
管理玩具通畅也需要写在"用户信息"这个页面
添加一个"普通"列表:
我们只需要留一个li标签就可以了
我们要加上一个图标,否则太单调了
上图中的icon有图标
保存,我们就可以看到下面的效果了
我们可以,在点击管理的时候,直接跳转到玩具页面:
下面,我们再绑定一个事件:
dga代码块,打开一个新的页面:
因为是子页面,因此不需要style了
下面,我们再写一个toy_manager.html页面:
清除,然后mdo代码块
写一个带返回箭头的mhe:
下面,我们再写一个图文列表mli,图片居左的
只留一个就可以了
感觉还是有点不好看,我们再改变一下:
新建一个文件images,放在images里边:
4.创建二维码
我们可以通过程序的每个编号生成一个唯一的二维码进行处理:
我们通过程序对接二维码,然后进行处理,进行着批量处理的过程
通过二维码API进行处理:
使用这个"联图二维码"
http://qr.liantu.com/api.php?text=
在上边连接后边加上数字可以生成唯一的二维码
下面,我们再在后端写一个QRcode.py进行处理
下面通过requests模块进行一些测试:
我们可以得到一个200的响应
print(res.content),打印出来的就是流,下面,我们将这个流写入到文件里边:
下面我们需要配置一下"联图二维码"的配置.
我们需要将转化之后的二维码保存一个文件夹内:新建一个QRCode文件夹
写完之后,我们还想存储到数据库中
,最后我们再写入到mongodb里边
QRcode.py代码如下
# Author: studybrother sun
import requests
from settings import LT_URL,QR_PATH,MONGODB
from uuid import uuid4
import time,hashlib,os
def create_QR(num):
qr_li=[] #创建一个空列表
for i in range(num): #通过循环创建多个玩具
qr_info=f"{time.time()}{uuid4()}{time.time()}"
qr_code=hashlib.md5(qr_info.encode("utf8")).hexdigest()
res=requests.get(LT_URL % qr_code)
qr_img=os.path.join(QR_PATH,f"{qr_code}.jpg")
with open(qr_img,"wb")as f:
f.write(res.content)
qr={"device_key":qr_code} #将字典放在列表中
qr_li.append(qr) #每次写完添加一次
time.sleep(0.12) #加入时间,是因为可能qps超标
MONGODB.devices.insert_many(qr_li)#设备信息devices
if __name__ == '__main__':
create_QR(10) #下面测试一下
运行:
链接已经发生了改变
问题是有很多隐藏的bug,需要一点点挖掘
这个时候,链接已经有了图片对应 :
清空原来的数据,再次运行,得到下面的10条数据在MongoDB里边
5.扫码页面低版本
下面我们找一下H5plus,找一下扫描二维码的功能
上边的信息,看不太懂,"方法什么的",主要是,
从最简单的入手解决问题,现在我们要"跳转到新页面"
创建一个qr_scan,二维码扫描.情况,mdo代码块
mhe肯定是带箭头的
下面,我们需要绑定事件进行处理
下面我们再写事件
点击"扫描绑定玩具"得到下面的界面
看一下这个create
id是必填项
我们从案例中找到具体的内容
直接覆盖原来的代码:qr_scan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Example</title>
<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
var e = document.getElementById("scan");
e.removeAttribute( "disabled" );
}
var scan = null;
function onmarked( 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 );
}
function startRecognize() {
scan = new plus.barcode.Barcode('bcid');
scan.onmarked = onmarked;
}
function startScan() {
scan.start();
}
function cancelScan() {
scan.cancel();
}
function setFlash() {
scan.setFlash();
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
#bcid {
background:#0F0;
height:480px;
width:360px;
}
</style>
</head>
<body >
<input type='button' onclick='startRecognize()' value='创建扫码控件' />
<input type='button' onclick='startScan()' value='开始扫码' />
<input type='button' onclick='cancelScan()' value='取消扫码' />
<input type='button' onclick='setFlash()' value='开启闪光灯' />
<div id= "bcid"></div>
<input type='text' id='text'/>
</body>
</html>
这个时候,我们可以看到上边的界面:
下载这个软件,实现电脑和手机之间的连接
手机链接上之后,发生的变化:
一直没有和手机连接成功,原因可能是wifi的问题,用自己的电脑开启wifi,可以成功了.成功扫码了.
(一个晚上过去了)
上边的ApowerMirror是一个可以投影的软件,但是,输入密码,自己会变黑,防止密码泄露
.
6.扫描二维码&&数据校验
这个时候,我们就可以扫码进行处理了,可以得到
下面,我们想要修改一下二维码的样式,改成mui相关样式
在app里边新建一个scan,md代码块,mhe(带箭头的代码块)
下面,我们找一下这个qr_scan示例代码以及事件:
将上边的两行代码,都放在scan.html里边:
这个时候,我们玩具管理,跳转到scan.html页面里边:
点击,扫码,出现下图的错误:
我们应该写在mplus里边写
修改之后,出现上图中的错误:
注释上边这一行
查看一下原来程序中的源码:
我们追加到scan里边:
放开注释行:
源码中有一个bcid
我们将源码,放在图示位置:
bcid有高宽,我们需要自己定义:
只有限制二维码大小才行
这个时候,二维码,才能开始扫码
我们可以先删掉图示的位置:
反正也看不懂,先删掉
我们直接打开,这个结果::
扫完码,底部就可以出来内容了
toast也就是一种提示框的意思:
我们想要的效果,是扫完之后,关闭扫描页面,
添加上图的mui.back();代码之后, 这个时候扫描二维码,跳转到一开始的界面:
我们需要鉴定,是不是我们数据库中的二维码,这个时候才会有价值,下面我们再后端进行再在serv里边创建一个py蓝图文件
我们可以,套用user.py里边的信息
下面开始发送数据在前端:
这个时候,我们需要在后端的manager里边将蓝图注册一下蓝图
修改完成后,我们随便扫一个码,看一下前端app能不能打印出内容:
这样既可以扫描成,也可以扫描失败了
现在,我们不想每次都扫码,先每次给一个值处理
注释,并且保存这个吗,以后扩展,再打开
这个时候,我们再扫码,就会永远扫码成功
上图是,我们再打印消息
这个时候,我们开始可以扫码了
7.绑定玩具
扫码成功该干什么?
下面,我们开始绑定一个玩具
新建一个bing_toy.html
我们需要在第二个框,里边写上注册框,在login.html里边拿现成的就可以了
下面我们再刚才的scan.html里边扫码成功就开启
这个时候,我们点击扫码,可以打开下图
下面,我们再修改一下绑定事件:
post,要么是发送请求,要么是打开新窗口,这两种方式:
下面,我们传递数据,下图是bind_toy.html页面
下面,我们再写后端的界面:
下面,我们再在devices.py里边写绑定玩具
拿到玩具信息,并且再加上一些信息
我们的目的,就是,更方便的操作后端信息:
下面,保存,运行,开始扫码:存在一点问题:
删除上图的代码:
这个时候,扫描可以出来正确的"创建你的玩具了"
输入上边的内容,点击"绑定创建玩具"
这个时候,我们看到"服务端请求成功了"
找了半天错误,最后前后端都重新启动变好了,上图是传递回来的数据
我们绑定之后应该显示,绑定几个显示几个
toy.jpg
我们将下载的图片放在,avatar里边
我们需要只要一点击进入这个"toy_manager.html"里边,就能拿到玩具列表
下面,我们还是需要在devices里边写一个接口:绑定的玩具列表
注意上图的第32行
下面,再做一下修改
我们拿到"源源",怎么处理这个数据?
我们需要添加一个图文列表和id
我们再home页面中,创建过一个类似的页面:
这个创建内容的,大的函数
我们将这个函数放在toy.manager.html页面的script的上边
我们需要将下图的这个位置注释掉
修改上图的形参为toy_info
上边玩具名,下边宝宝名字,左边是玩具的头像
写完之后,我们需要将列表进行for循环一下:
这个时候,我们重新启动,并且重新登录,看一下能不能出来结果:
由此,我们可以得到结果,注意下图的位置不要写错了
修改成圆形的图片:
这个时候,就变圆了,如果绑定完成,我们需要跳转到一个页面:
下面,我们再次绑定一个玩具,看一下效果
上一个,我们选择尾号的是9b,下面我们选择5a
点击绑定创建玩具,得到下面的内容
其实绑定逻辑里边还有一个逻辑,那就是添加好友的逻辑
8.玩具开机
现在我们启动玩具,只要玩具已启动就能访问websocket,
上图中的websocket并不是玩具id连接上的
上图显示的是我们创建的两个玩具
我们需要用859e进行连接
我们想要通过key,拿里边的_id的值
下面,我们再看一个隐藏的需求:
下面,我们希望合成上边的三句话:
我们用一下第六天的内容,文本转声音文件:text2audio.py
打印出流和mp3文件:
我们再合成一个NoBind.mp3文件:
生成第三句话
最后,我们将生成的文件,放在music文件夹里边
下面,我们将玩具只要一开机,我们执行一个视图函数:
我们先将,下面的几行先注释掉:
下面,我们写一个按钮,开机
下面,我们再写一个函数
下面,我们再在后端新建一个静态文件:static,把jquery文件放在里边
下面我们再发送信息,通过ajax,这里是$post
我们通过"火狐浏览器进行发送信息"
我们先放一个正确的device_key
点击"开机",在控制台中打印出了Success.mp3
现在我们想要播放出来
这个时候,我们再次点击开机:要先刷新一下浏览器才行
下面再找一个授权的但是没有绑定:
下面的是一个没有授权的地址:
科大讯飞的合成工具很NB的
点完开机,我们就应该去连接,那么我们拿什么去连接呢?我们应该拿玩具的id进行连接
线面我们再在devices.py里边写一个玩具的id,当玩具传递成功之后.
在火狐浏览器中,先输入一个错误的id
没有绑定的地址:
下面,我们用正常的值进行处理
这个时候,我们得到正确的结果:
这个时候,我们断开ws_serv.py,重新连接,
有可能随时导致服务器崩盘,我们如何让用户无感知的连接:
websocket有断开重连机制,
重启ws_serv,这个时候再次连接浏览器
但是,这个时候ws依然可以访问成功,见下图:
这个就是断开重连机制.
我们断开ws_serv,
浏览器,也就是硬件端,也就在很慢的建立连接,其实很难达到递归深度,只要我们再次连接就可以了
这个时候,我们就可以重新建立连接了
其实这个递归是有坑的,我们如果新建一个,就会变成一个新的,就不好时了,因此我们用递归可以避免这个小坑.
这个递归,也就是websocket重连机制.
9.AppWebsocket断开重练&&MuiFire调用WS事件.
下面我们让用户也使用websocket机制进行处理.下面测试,我们用夜神
我们想要用户一登录app,就可以连接websocket,随时保持用户和服务器之间连接
我们将websocket页面写在index界面比较合理
下面我们叫它一上就连接上
我们看到上图是在登录.
登录成功,应该如何处理呢?
下面,我们发歌,怎么发呢?
我们想要区分玩具发送,明天处理.
我们现在处理,随便给一个发送"小粪球",这个分地方先写死
我们先用5a对应的id 5cc070f027c41e4d8891fe52
下面,我们再用fire时间进行处理:
打包之前一定要替换
下面,我们在最后进行监听一下:
渡尽劫波兄弟在,相逢一笑泯恩仇!完工
重启前后端项目,浏览器端先放入玩具的device_key,HBuilder放_id信息
下面,我们做一下区分一下:
下面,我们在传递一下;(这个是专门针对浏览器进行的操作)
虽然与实际业务没有什么关系,但是目的就是做好区分工作
再次开机,输入下面的内容
d056b7666e43bf1b4e19b3d9b4552b5a
