• 巨蟒python全栈开发flask9 项目开始1


    1.项目需求分析

    立项:Javis&&taisen(三个月全部,先模拟出一个玩具,硬件需要周期长一些)

    想法 --- 需求分析:
        1.通过玩具与孩子实时进行沟通
        2.希望玩具的知识渊博
        3.希望玩具最好能代替我陪伴孩子
        4.给孩子播放幼教内容 儿歌 睡前故事 国学 
        5.自扩散 - 幼儿社交圈    
    
    需求分析:
        4.给孩子播放幼教内容 儿歌 睡前故事 国学 
        - 数据采集(爬虫)
        - 获取本地资源
        - 家长可以控制玩具播放的内容
            - 控制端 App
        2019年4月19日:
            1.喜马拉雅听 采集数据
            2.存放数据目录结构
            3.数据存放在MongoDB中
            4.在App中展示资源:
                通过/content_list接口获取资源
            
            5.播放幼教内容在App端播放
                plus.audio.createPlayer(URL_PATH).play()
            
            6.家长可以控制玩具播放的内容
                
    
        
        1.通过玩具与孩子实时进行沟通
        - 对玩具发起消息 
            - 手机 App
        - 基于通讯录的IM功能 IM:即时通讯
            - WebSocket
        
        2.希望玩具的知识渊博
        - 问题库 百科
            - 问答机器人 Tuling
        
        3.希望玩具最好能代替我陪伴孩子
        - 聊天库
            - 问答机器人 Tuling
            
        5.自扩散 - 幼儿社交圈
        - 玩具与玩具之间对话
        - 玩具需要具有通讯录的功能
            - 基于通讯录的IM功能 IM:即时通讯
                - WebSocket
        
        App的功能?
        1.用户管理
            - 注册登录
            - 用户信息
                - 通讯录
                - 绑定玩具
                
        2.管理玩具
            - 绑定玩具
            - 控制玩具通讯录
            - 帮助玩具建立社交圈
            
        3.内容审核
            - App看到内容
            - App听内容
            - App给玩具发过去 - 遥控器(只要有网就行)
            
        4.与玩具通讯功能 - App通讯录
            - App聊天界面
            - 语音消息发送
                - 录音
                - 播放录音
        
        玩具的功能?由于玩具硬件开发周期非常长,自己模拟WebToy玩具
        1.播放幼教内容
            - 点播 语音指令
            - 遥控 App发送音乐给玩具 {music:"小毛驴.mp3"}
            - WebToy - audio
            
        2.播放语音消息 - 通讯
            - 收取消息 实时
                - WebSocket
            - WebToy - audio 
    
        3.发送语音消息
            - 录音
            - 发送?
            - App
            - 玩具
            - 问答机器人
            
        4.语音指令
            - 录音
            - 上传
            - NLP 自然语言处理
            - 我要听
            - 发消息给xxxx

    注意:没有谁一看到项目,马上就有思路了,都是一步一步来的,不要慌,一点一点来

    2.数据采集 xmly

    首先,我们需要采集数据,存在法律风险,需要带上出处和作者这个东西,否则很可能出现赔偿问题

    音频可能没有太大影响,但是视频是视觉上的,就存在风险了

    起名字无所谓的.

    yinwangba//12//eightapp//13king//14tuxingsun//15chunsheng//16laopobing//17vista//18javis

     

    创建完后端,需要在前端同步开发

    在前端中,新建一个app

    清除原来的内容,写一个md代码块,进行得到下面的内容:

    我们想要采集的内容爬爬内容:"幼教类网站"=>"幼教网"

    上边的名词难度有点高

    亲宝网,"贝瓦儿歌"

     "喜马拉雅"

    不入虎穴焉得虎子,舍不得孩子套不着狼(鞋子)

    动态class是最难爬取的

    请求头里边有请求地址

    上边显示请求的URL和请求的方式GET

    上边显示的是响应应用类型:

    下图显示的是普通请求方式:

    用户代理,在请求头里边:见下图

    我们需要用get请求进行访问,

     得到下面的结果,响应的是200,也就是可以响应

     在打印一下里边的内容,结果是空的

    反爬请求方式1:校验当前的用户是否为浏览器访问

    下面,我们开始模拟一下:

    这个时候,我们爬取的内容,见上图

    反爬的机制1就是"动态class"随时可能变化

     下面我们通过json,变成字典:

    rest是一种开发方式,一种标准:类似于下图的一种标准的格式

    下面,我们需要通过for循环,拿取里边的内容:也就是先拿名字:

     下面我们除了需要名字,还需要播放的链接地址:

    我们需要存储起来,防止网址变更.

     我们下面,验证的结果就是流:

    也就是不需要请求头的.

    下面我们需要开始写入某个内容:
    运行之后的到的结果:

    右击,打开文件的位置:

    不要以为别人好像很简单做成了某件事情,别人可能花了你所不知道的更多的时间,进行处理这个问题.

     有可能链接可能变了

    上边写的方式是单线程的,但是会慢一些,但是无所谓了,现在能用就行.

    下面新建两个文件夹:一个存图片,一个存音乐

    我们再见一个settings.py进行数据库的配置,优选mongodb,简单粗暴

     最终版程序:

    papaxiao.py

    # Author: studybrother sun
    import os
    import time
    import requests
    from uuid import uuid4
    from settings import MONGODB,MUSIC_PATH,COVER_PATH
    xmly_url="https://www.ximalaya.com/revision/play/album?albumId=424529&pageNum=1&sort=1&pageSize=30"
    # 424529指的是专题ID
    header={
        "User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
    }
    def papaxiao(tar):
        res = requests.get(xmly_url, headers=header)
        music_list=[]# 新建一个空列表music的
        for audio_info in res.json().get("data").get("tracksAudioPlay"):
            print(audio_info.get("trackName"), audio_info.get("src"))
            music = requests.get(audio_info.get("src"))  # 音乐
            cover = requests.get("http:" + audio_info.get("trackCoverPath"))  # 图片
            filename = uuid4()  # 保证每个名字都不一样
    
            cover_file = os.path.join(COVER_PATH, f"{filename}.jpg")  # 拼接路径
            music_file = os.path.join(MUSIC_PATH, f"{filename}.mp3")  # 拼接路径
    
            with open(music_file, "wb")as f:
                f.write(music.content)
            with open(cover_file, "wb")as f:
                f.write(cover.content)
            music_info = {
                "music": f"{filename}.mp3",
                "cover": f"{filename}.jpg",
                "title": audio_info.get("trackName"),  # 展示的内容
                "ZJ": audio_info.get("albumName"),  # 专辑名字需要拿出来,防止被告
                "class": tar
                # "class": "儿歌分类"
            }
            music_list.append(music_info) #
            time.sleep(0.12)#防止无限爬取,我们需要防止屏蔽
        # 将music_info插入数据库,30次
        MONGODB.content.insert_many(music_list)
    papaxiao("儿歌")

    settings.py

    # Author: studybrother sun
    from pymongo import MongoClient
    mc=MongoClient("127.0.0.1",27017)
    MONGODB=mc["Taisen_J"]
    
    #目录配置
    MUSIC_PATH="Music"
    COVER_PATH="Cover"

    目录结构:

    还有,我们需要开启mongodb

    最终得到的结果:

    注意,反爬机制会很全面的,特别是这种大的网站

    播放次数.点播次数&&推荐次数,这种算法.

    我们采集完内容,我们应该怎样操作?

    3.App内容列表&&App播放歌曲

     

    我们需要将数据库,里边的内容,变成列表返回这些内容:

    我们需要写一个视图函数进行返回,

    新建一个manager.py和一个文件夹,serv

    主要用C#的一种架构方式写的:

    下面我们再写一个content内容蓝图

    只支持"POST"的方式,是复写而不是追加,原因是源码中进行了覆盖methods

    面对一个美丽的前端小姐姐,我们该如何处理?

    我们需要,在前端中导入上边的内容,

    # Author: studybrother sun
    from flask import Blueprint,jsonify
    from settings import MONGODB,RET
    
    content=Blueprint("content",__name__)
    @content.route("/content_list",methods=["POST"])
    def content_list():  #写一个视图函数,在上边导入mongodb
        res=list(MONGODB.content.find())     #这是一个生成器,需要转换成一个列表
        for index,con in enumerate(res):
            res[index]["_id"]=str(con.get("_id"))   # 需要修改格式和_id
    
        RET["code"]=0
        RET["msg"]="查询内容列表"
        RET["data"]=res
    
        return jsonify(RET)

    我们写了揽入需要在manager.py里边先注册一下:

    下面,我们需要在Hbuilder前端里边写一个内容,开始拿我们的请求内容:

     清空前端index.html里边的内容,然后md代码块,

    先运行项目:Hbuilder,这个时候我们可以得到一个干净的项目,也就是什么都没有

    注意,建立连接的过程会比较慢,这很正常,多长时间几次就可以连接上了

    再加上mat代码块,底部多了一个

    然后输入代码块在body里边:

    新建一个home.html页面,清空改成md

    再在home里边加上mhe

    先写一个mbo,再在里边写一个msl轮播图

    再写一个mg九宫格

    我们再写一个mlis代码块,选择第三个

    这个时候,我们需要在index.html里边的初始化进行修改

    先删除上边的第30行,

     

    这个时候,我们再进行保存处理

    再次得到下面熟悉的界面:

    但是标题已经发生了改变,我们自己起的名字"泰森_贾"

    将后边的数字,都改成4,就变成了九宫格

    也就是说一共屏幕上有12个格,每个占4个,就显示3个标签

    下面,我们需要对"幸福","木屋","CBD"等进行替换成歌曲

    也就是说,我们加载完home页面之后,需要对服务器发起一个请求,

     写一个mpl

    下面,我们发起一个post请求

     

    注意,这个后端,需要开启后端的服务,

    现在,前端,我们保存一次就会运行一次.

     我们想将li包裹的里边的东西进行处理:

    也就是说,我们要将下图中红框的位置删除:

    代码,见下图:

    很明显,我们这样操作会出错,显示下图中的语法错误:

    接下来,我们应该如何操作?
    下面,我们要创建标签,

     

    这个时候可以把上边的结构表删除了

    也就是下图中,红框的内容:

    我们需要执行的位置,见下图:

    上图是执行的位置,我们可以判断的是,这个js不是按照从上到下执行的

    写代码块fori,得到下图的内容

    我们将Things修改成data.data,也就是数据的长度

     我们先运行起后端程序manager.py,在保存也就是运行home.html,得到下面的结果:

    我们再处理下面的内容:

    注意,要把内容,写对,内容可能会出来的慢一些,不要着急

     

    修改p标签为ZJ

    上边表示可以加载出歌名来.

    保存也就是运行,得到下面的结果:

    思考,可不可以直接那里边的图片:也就是

    img.src=content.cover;

    访问的结果,我们需要的是一个流,进行处理

    下面我们需要再创建一个接口进行处理:

    下面,我们需要注册一个蓝图,进行处理,

    保存上图的内容,这个时候,应该可以加载出图片了.

     

    这个地方爬虫写错了一个字母,导致后边出现的歌名全部一样:

    就是因为爬虫中写错了一个字母,导致了这个音乐列表中的名字和图片都出现的不正确,现在上边就显示正常了

    下面,我们想要播放列表中的音乐,我们该如何处理?

    点击事件,我们想要,点击a标签就可以播放音乐

    下面,我们再创建一个player页面:

    在清空,写入代码块:md

    在body里边写mhe,选择带箭头的,原因是"这是一个子集"

     

    将title里边写上标题,

    下面我们再写一个mbo代码块,

    下面我们再在home.html里编写,打开页面,写mop代码块,打开页面

    我们需要将上图中的styles去掉,保存也就是运行:

    这个时候,机器可能的比较慢

    点击任意一首歌曲,都会跳转到player.html界面

    下面,我们还需要传递一个参数,进行处理.

    下面,我们将执行的参数进行传递:

    也就是传递到player.html,这个时候player.html就可以接收了

    这个时候,我们可以得到上边的内容,其中webview里边可以包含传递过来的参数content,也就是data.data

    这个时候再次保存,就可以,点击歌曲里边,可以看到结果了,但是这个时候,电脑可能会卡一下,注意一下

    这样就可以根据点击进去的歌名,显示标题的样式了

    下面,再写一个mro

    这个时候,我们想要再在下图写一个图片:

    下面,我们再加上一个id=cover

    因为是传递过来的,我们需要修改的位置,见下图:

    我们看到所占的页面是有点大的,下面处理一下:

    我们需要在这里改变大小,并且居中

    距离顶部一定的距离,改成圆形

    下面,我们再写一个按钮

    如何进行播放,这个时候,我们需要查一下文档,

    选择第二个Audio,也就是音频的录制和播放

    这个时候,我们需要在后端写一个getmusic

    注意,这个时候,我们不在需要注册了,注册的是实例化之后的蓝图,不是函数,记住这一点

    之所以,没有播放的原因是缺少一行代码

    这个时候,我们点击,就可以播放音乐了.

    后端的请求就拿到了MP3

    设置=>声音=>默认通知声音=>选择声音

    现在,我们想要音乐停止,怎么操作?

    4.Player用法

     下面,我们需要加上几个按钮,实现暂停,继续等功能

    mbu代码块功能,选择第一个

    下面我们开始绑定事件:

    dga代码块

    player 并且我们在plusReady里边赋值成了一个新的对象

     下面我们可以用了.

    下面,我们再上边再定义一个公共事件:

    也就是说我们再plusReady里边先设置好值.

    此时的播放是重建的对象,再次播放是从头开始进行播放的.

    上边出错的原因是加上了var

    下面,我们修改一下home里边九宫格所代表的东西:

     MUI自己学习这些功能:

     

    我们需要的是上拉下载:

    国学列表,古诗列表等等.

    5.Websocket遥控器

    需求分析:
        4.给孩子播放幼教内容 儿歌 睡前故事 国学 
        - 数据采集(爬虫)
        - 获取本地资源
        - 家长可以控制玩具播放的内容
            - 控制端 App
        2019年4月19日:
            1.喜马拉雅听 采集数据
            2.存放数据目录结构
            3.数据存放在MongoDB中
            4.在App中展示资源:
                通过/content_list接口获取资源
            
            5.播放幼教内容在App端播放
                plus.audio.createPlayer(URL_PATH).play()
            
            6.家长可以控制玩具播放的内容
                
    
        
        1.通过玩具与孩子实时进行沟通
        - 对玩具发起消息 
            - 手机 App
        - 基于通讯录的IM功能 IM:即时通讯
            - WebSocket
        
        2.希望玩具的知识渊博
        - 问题库 百科
            - 问答机器人 Tuling
        
        3.希望玩具最好能代替我陪伴孩子
        - 聊天库
            - 问答机器人 Tuling
            
        5.自扩散 - 幼儿社交圈
        - 玩具与玩具之间对话
        - 玩具需要具有通讯录的功能
            - 基于通讯录的IM功能 IM:即时通讯
                - WebSocket
        
        App的功能?
        1.用户管理
            - 注册登录
            - 用户信息
                - 通讯录
                - 绑定玩具
                
        2.管理玩具
            - 绑定玩具
            - 控制玩具通讯录
            - 帮助玩具建立社交圈
            
        3.内容审核
            - App看到内容
            - App听内容
            - App给玩具发过去 - 遥控器
            
        4.与玩具通讯功能 - App通讯录
            - App聊天界面
            - 语音消息发送
                - 录音
                - 播放录音
        
        玩具的功能?由于玩具硬件开发周期非常长,自己模拟WebToy玩具
        1.播放幼教内容
            - 点播 语音指令
            - 遥控 App发送音乐给玩具 {music:"小毛驴.mp3"}
            - WebToy - audio
            
        2.播放语音消息 - 通讯
            - 收取消息 实时
                - WebSocket
            - WebToy - audio 
    
        3.发送语音消息
            - 录音
            - 发送?
            - App
            - 玩具
            - 问答机器人
            
        4.语音指令
            - 录音
            - 上传
            - NLP 自然语言处理
            - 我要听
            - 发消息给xxxx

     下面进行模拟一个web进行处理:

     

    下面需要再创建一个html文件:,注意,现在我们模拟的是web页面,不写前后端分离了

     江老师传授的播放方式:

    音乐的名字   可以直接copy采集下来的数据名称用上边的命令进行处理

    下面我们再写一个发送按钮:

    在组件中看一下颜色:

    下面,我们需要再次写一个事件

     

    我们先写一些数字,看能不能发送成功:

    下面,我们需要在服务端新建一个ws_serv.py开启一个通讯服务

    下面,我们需要基于flask,写一个websocket服务

     两套服务,写在同一套代码里边:一个开ws_serv.py,另一个专门开manager.py

    刚才江老师的方式也是一种get请求方式

    我以为你是个暖男,结果你只支持get请求:

    先安装好这个包,再处理:

    ws_serv.py

    import json
    
    from flask import Flask,request
    ws_serv=Flask(__name__)
    
    from geventwebsocket.websocket import WebSocket
    from gevent.pywsgi import WSGIServer      #替换werkzurg
    from geventwebsocket.handler import WebSocketHandler      #处理wsgi带的请求头的信息
    
    user_socket_dict={}
    @ws_serv.route("/app/<app_id>")
    def app(app_id):
        user_socket=request.environ.get("wsgi.websocket")
        if user_socket:
            user_socket_dict[app_id]=user_socket
        print(len(user_socket_dict),user_socket_dict)
        while True:
            msg=user_socket.receive()
            msg_dict=json.loads(msg)
            #msg{to_user:toy01,music: getmusic/25d3c036-4b1f-4f4b-827a-fc4ddc50286f.mp3 }
            print(msg_dict)
    if __name__ == '__main__':
    http_serv=WSGIServer(("0.0.0.0",9528),app,handler_class=WebSocketHandler)
    http_serv.serve_forever()
     

    下面,我们看一下,能不能拿出值来

    运行上边的ws_serv.py程序,这个时候就会阻塞住

    这个时候,我们随便点击一首歌,点击发送

     

    报错,不能传递两个参数

    错误的原因是上边的app写错了,应该是ws_serv

     

    这个时候运行,再次点击进入一首歌,点击"发送",然后我们再后端就可以收到信息了

    下面我们看一下,能不能发送这个字典:

    我们再次方式会报一堆错误:

    思考,我们应该如何处理?我们应该先转成字符串在进行处理,也就是json转换成字符串:

    上边报错的原因是,我把点好写成了冒号上边是改正过来的信息

     

    再次修改:

    再次发送,得到下面发送的结果:

    为了保证不出错,注意放的位置

    为了不出错,我们可以有两种方式,防止内容:下图是放置好的方式,目的就是,放好了防止出错,JavaScript是异步代码,防止线程过快等问题

    下面,我们需要接收代码:

    下面是ws_serv.py的代码

    # Author: studybrother sun
    import json
    
    from flask import Flask,request
    ws_serv=Flask(__name__)
    
    from geventwebsocket.websocket import WebSocket
    from gevent.pywsgi import WSGIServer      #替换werkzurg
    from geventwebsocket.handler import WebSocketHandler      #处理wsgi带的请求头的信息
    
    user_socket_dict={}
    @ws_serv.route("/app/<app_id>")
    def app(app_id):
        user_socket=request.environ.get("wsgi.websocket")
        if user_socket:
            user_socket_dict[app_id]=user_socket
        print(len(user_socket_dict),user_socket_dict)
        while True:
            msg=user_socket.receive()
            msg_dict=json.loads(msg)
            #msg{to_user:toy01,music: getmusic/25d3c036-4b1f-4f4b-827a-fc4ddc50286f.mp3 }
            print(msg_dict)
    
    @ws_serv.route("/toy/<toy_id>")
    def toy(toy_id):
        user_socket=request.environ.get("wsgi.websocket")
        if user_socket:
            user_socket_dict[toy_id]=user_socket
        print(len(user_socket_dict),user_socket_dict)
        while True:
            msg=user_socket.receive()
            msg_dict=json.loads(msg)
            #msg{to_user:toy01,music: getmusic/25d3c036-4b1f-4f4b-827a-fc4ddc50286f.mp3 }
            print(msg_dict)
    
    if __name__ == '__main__':
        http_serv=WSGIServer(("0.0.0.0",9528),ws_serv,handler_class=WebSocketHandler)
        http_serv.serve_forever()

    下面是WebToy.html代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta http-equiv="content-Type" charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width" ,initial-scale="1">
        <!--上边这个表示手机版的调整尺寸-->
        <!--上述2个meta标签"必须"放在最前面,任何其他内容都必须跟随其后-->
        <title>Title</title>
    </head>
    <body>
        <audio controls autoplay id="player"></audio>
        <!--我们通过id进行控制-->
    </body>
    <script type="application/javascript">
        var ws=new WebSocket("ws://192.168.14.133:9528/toy/toy01");
        //这样写的原因是toy有很多种,不得不这样写
        ws.onmessage=function (eventMessage) {
            msg=JSON.parse(eventMessage.data)   //字符串转换成object
            document.getElementById("player").src="http://192.168.14.133:9527/getmusic"+msg.music;//大前提是需要发送消息
        }//这个时候能够接收消息
    </script>
    </html>

    目录结构:

    因为这个涉及到web录音,我们需要用到火狐浏览器,重启一下ws_serv.py文件

     用火狐浏览器访问,注意这个访问的端口是服务器的端口"9527"

    报错原因,是我们没有放值

    这个时候,就没有问题了

    如果,我们访问的是9528,得到下面的结果:

    正确访问地址之后,ws_serv得到下面的结果:

    另一个,点击发送歌曲的时候,就连接上了,第一个是火狐浏览器输入地址,就能访问,第二个是app点击发送得到的结果:

     

    修改成下面的内容:

    再次运行ws_serv.py,运行火狐

    下图就是我们的单聊:

    也就是遥控器功能.给服务器前端节省一些资源

    在火狐上一直出不来的原因就是少写了一个/

    写完之后,运行manager.py和ws_serv.py,运行前端程序,在浏览器上输入网址:(192.168.14.133:9527),在模拟器上打开歌曲,点击发送,这个时候,浏览器就可以接收到音乐了,可以进行播放了.

    6.可以进行的一些拓展

    1.立项 - 名字随意 - 最好有意义
    2.Index + Home + Player
    3.图文列表通过JS document.createElement Item
    4.Player 播放内容 实现暂停继续
    5.App遥控玩具 - Websocket 单聊技术
    
    扩展任务:        
    6.自动登录 + 注册
    {
        _id:"",
        username:"",
        password:"MD5",
        nickname:"",
        gender: 1 / 2,
        avatar: 1==girl.jpg / 2==boy.jpg,
        bind_toy : [],
        firend_list:[]
    }
    
    reg.html
    gender 单选框
    password MD5
    
    login.html
    自动登录

     核心问题:

    先研究好这些逻辑的问题再说.

    查文档,看视频.

  • 相关阅读:
    【C++ Primer Chapter 3 总结】Library vector & string Type
    【C++ Primer Chapter 4 总结】左值 & 右值
    【C++ Primer Chapter 6 总结】函数
    mysql添加索引
    注册plsql
    挑战答题小程序
    开源答题小程序
    答题如何防止作弊
    党史知识答题活动小程序复盘整理
    党史学习教育答题活动复盘
  • 原文地址:https://www.cnblogs.com/studybrother/p/10738632.html
Copyright © 2020-2023  润新知