第三阶段 python 数据可视化进程

在这里插入图片描述

1.Flask入门

flask就是用来做一个简单的网站框架。
在这里插入图片描述
其实很简单,就是把别人写好的东西开放出来,通过这样一套流程。我们只需要关注自己的请求和响应就可以了
在这里插入图片描述
在这里插入图片描述

hello world

在这里插入图片描述
那么我们上来一定不是写代码,而是先搭建一个环境,
在这里插入图片描述
哇 开世面了,这个FLAK上来就写了句子 哈哈哈 表达方式都是我没有见过的。不过我刚才让360组织了不知道什么的安装。呜呜呜
在这里插入图片描述
在这里插入图片描述
人家很细心的,都已经为我们打算好了。

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello_world():
    return 'Hello World!'


if __name__ == '__main__':
    app.run()

短短7行 这就是人家FLASK的hello world 神器吧
哈哈哈 然后 就这样形成了一个网站 他的功能就是打印输出hello world
在这里插入图片描述
在这里插入图片描述

debug开启

在这里插入图片描述
写了语句 debug仍然没有开启 但是
在这里插入图片描述
在没有开启debug模式时 如果又写错访问方式 就会404
在这里插入图片描述

在debug状态下,能够一刷新,即时的看到效果。如果非debug,那么只有给服务器发消息才行 比较麻烦
在这里插入图片描述
在这里插入图片描述

带参数 你好 谁

在这里插入图片描述
int:id尖角号拿到你想要的内容 int:是固定的
在这里插入图片描述

from flask import Flask,render_template #长见识了 前面是中文 写对了 自己会有提示

app = Flask(__name__)#全局变量

#路由解析 通过相应的途径来 匹配相应的函数
#通过访问路径 来得到用户的字符串参数
@app.route('/user/<name>')#  name只是一个变量的名字
def hello_world(name):
    return '你好,%s'%name
#开启debug
#要确保每一个路径不一样
@app.route('/user/<int:idj>')#  name只是一个变量的名字
def hello_(idj):
    return '你好,%d 号的会员'%idj#注意 对应的也要变

#返回用户渲染后的网页
@app.route('/')#  name只是一个变量的名字
def index2():
    return render_template("gNGBALIE.html")#渲染模板 渲染就是把里面jiangj2能识别的代码转成html
if __name__ == '__main__':
    app.run()

给页面传达变量

在这里插入图片描述

字典】 字典看这里

如何在页面打印表格 以及迭代

在这里插入图片描述
转变成内含元组的列表,用for循环赋值给前面的key 和 value 很清晰吧 使用items()就可以了
注意 别忘了括号 上面没有加括号 emmmm

在这里插入图片描述
这三种变量都可以直接赋值 前两种也可以直接打印 但是字典变量需要迭代一下 使用items()就可以了
注意 别忘了括号 上面没有加括号 emmmm
在这里插入图片描述

#向网页传达一个变量
@app.route('/.')#  name只是一个变量的名字
def index2():
    time=datatime.data.today()#普通变量
    name=["小王","小苏"d,"小李"]#列表变量
    task={'任务':"打扫卫生",'时间':"三小时"}#字典变量

    return render_template("gNGBALIE.html",var=time,list=name,task=task)

默认为get方式 但是只有post才可以
在这里插入图片描述
所以加上方法 就可以了 可是光显示出来没有 我们需要拿到内容
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http:localhost:5000/result" method="post">
    <p> 姓名:<input type="text" name="嘿嘿"></p>
    <p> 年龄:<input type="text" name="年龄"></p>
    <p> 性别:<input type="text" name="性别"></p>
    <p> 地址:<input type="text" name="地址"></p>
    <p><input type="submit" value="提交"> </p>>




</form>
</body>
</html>

<----提交一个动作 啥动作 访问哪一个页面 方式一般选post>
在这里插入图片描述
今天上午出现了一个错误 一直显示没有datatime这个模块 我都放弃了 查了Stack Overflow 失败了 下午一问人家群里面的,我的天啊 我打错了单词 是datetime。丢死人了

8月三号 气气气气 日子过得真快 更加要努力了 嘎巴列。今天又是元气满满的一天
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这就是

  • 打错的对比 哈哈哈 我么也可以发现他就是换行 开心 我算知道当登陆一个页面时 肯定有这一步操作 热死了 我把电扇开在旁边 现在真是绝好的学习时间 我会加油 让夏日缤纷多彩 这一定是一个难忘的暑假 我这样相信着 肯定着。
  • 只加了border=“1” 其实这个也就是开启不开启 后来尝试把里面变成2 也没有用 再就是用了items()后自动成了下面第三个 看来迭代是关键。
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    gNGBALIE.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <br>
    你们好,今天是{{ var }} </br>
    今天值班的员工有
    {% for data in list %}
        <li>  {{ data }} </li>
    {%  endfor %}
    任务:<br>
        <table border="2">
            {% for key,value in task.items() %}
            <tr>
                <td>{{ key }}</td>
                <td>{{ value }}</td>
    
            </tr>
    
            {% endfor %}
    
    
        </table>
    </body>
    </html>
    

    一举成功 我发出爽朗的笑声 我爸赶紧过来把我的房门关住 哈哈哈哈
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    显示了这样一个错误
    在这里插入图片描述
    成功了
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    问题一大串 果然在访问方式上出现错误了 啊啊啊 烦人 不行了先歇歇

    Echarts 应用

    做图表的开源
    超级炫酷 !!!但是这是外国的网站 ,导致网有点卡,我点击了播放,不过也卡的像静态一样 ,不过真的是很强,我的天哪 ,人类科技这么厉害。总之,开始Echarts旅程
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    学习肯定是有枯燥的时候的,让我想开我曾经去任课,时间很短,有个女孩说无聊死了,哈哈哈 ,学本事本来就是很无聊的,难免会有枯燥无聊的东西,这个时候就需要更加有定力了,而不是半途而废,最终只会一无所有,无法成才。

    下面刚开始出不来,原来是因为我没有把echarts.min.js和他放在一起,出现了路径的问题。
    反正想把路径问题弄简单,直接放在同一个文件夹下面
    在这里插入图片描述
    而且Echart只是目前我们上手的一个东西,我们只要按照逻辑和方法去学习,就能掌握个七七八八。
    上面有那麽多模板 其实他的数据都是代码写上去的,只要你稍作修改就可以了
    在这里插入图片描述
    1,引入文件
    2,建立位置 main位置
    3,建立对象,带上位置信息(一定要写的和上面一样 main位置)
    4,附加配置项
    5,使用刚指定的配置项和数据显示图表

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="echarts.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>这里是来确定位置的
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            //建立对象myChart 把位置传进去
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',//柱状图
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };把配置项加进去
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);//
        </script>
    </body>
    </html>
    

    在这里插入图片描述
    学习里面的概念
    在这里插入图片描述

    制作首页

    曲折爬虫路,我太难了 尼玛 说完成这个只需要5天,可是我这个应该都有10天多了吗 昨天加上那个IT小群,冷的一撇,我卡在了那个模板那里,因为这个模板之家的都开始要钱了。疯掉,今天,灵机一动,我想是时候早点结束这个进程,因为,我现在的话,可以说,有三个主要的进程,而这个进程已经开展了很长时间,不,四个 疯掉。但那个暂且静态。少说废话,我去找管理员要了位置,成功。

    在这里插入图片描述

    主要有三个
    1.静态的html文件
    2.CSS是Cascading Style Sheet的缩写,是一种叫做样式表(stylesheet)的技术 样式
    3.动态js
    JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。
    在这里插入图片描述

    from flask import Flask,render_template,request #长见识了 前面是中文 写对了 自己会有提示
    
    app = Flask(__name__)#全局变量
    
    #路由解析 通过相应的途径来 匹配相应的函数
    #通过访问路径 来得到用户的字符串参数
    @app.route('/40')#  name只是一个变量的名字
    def hello_world():
        return render_template("index.html")
    

    如图,产生了一个这样的东西,没有图片,但是基本数据都还原了,说明成功连接服务器,为啥出现这样的情况呢
    是因为那些CSS文件因为设置路径的关系没有弄到
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    这里有问题,就是我照着李老师说的加了static,发现没有啥用,依旧not Found ,没办法,暂时跳过

    神奇
    在这里插入图片描述
    天啊 太神奇了,活生生的,在完成这些操作后,就可以正确找到CSS文件,成功打开。木啊。
    在这里插入图片描述
    这个文件能够正确显示,是因为在这个12Mamba的文件夹下,CSS直接和html文件放在同一目录下
    在这里插入图片描述
    总结😗 经过这样一系列的操作使我们吧下载下来的这样一个页面进行了本地化,那么我们已经得到了这样一个基础页面,下一步来进行修改。*

    备份文件

    天啊,又发生了一个中级事故,可怜阿冲英语还欠火候,李老师说在修改html文件时最好备份 然后重命名,以防出现事故。然后我就准备粘贴复制压缩包里面的html文件,然后因为名字一样,人家给了我两个选项,
    1.overwrite 2.skip
    哈哈 我以为overwrite是在写一个,没想到是盖写。完蛋了。
    重新开始吧。
    在这里插入图片描述

    解决措施:你复制一下文件,然后粘贴的时候 ,他会提示你,你把名字改一下,就可以了

    开心到不行 哈哈哈 做出来这么好看的网页封面,很开心。
    在这里插入图片描述

    添加链接

    现在我们需要给四个box装上链接
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    改正纠错:
    在这里插入图片描述


    就是这句话,把它放到a 外面就可以了,这句话就是决定尺寸大小的。
    好的,这样我们就实现了 当你点击四个页面的时候,就会出现四个链接,完成这项功能、。

    完善movie界面

    在这里插入图片描述
    使用斑马线前后,原来真的丑 扎眼在这里插入图片描述
    然后呢 这个斑马线写的时候 class 里面还必须得写table 否则都挤到一块去了。
    在这里插入图片描述

    在这里插入图片描述
    下面竟然用到SQLite数据库 可是不知道为什么,我的那个只有开头,里面没有数据,我觉得我都快被权威给迷惑了,我好想连main都没打开 能成功吗 真是的
    在就是,前面的XLS保存 我以为我实现了初步胜利,但今天仔细一看,发现里面只有25 不过在循环罢了、、

    然后我就去改错,我突然发现我的主函数里面也挺奇怪,原来是我乱加了,呜呜呜
    在就是html文件里面额就只有25跟电影信息 活该,然后发现另一个文件的baseURL还没处理 醉了。
    在这里插入图片描述
    还有两个地方还要处理,头大,就是换行符 还有竟然出现一段原生代码 emmm 待处理
    在这里插入图片描述
    这样你是得不到data的,so看下面
    在这里插入图片描述
    现在来到movie.html中
    在这里插入图片描述
    在搁浅这么长时间后,我终于发现了错误,哭泣,原来是我的findimgsrc的正则表达式有问题,
    我是咋发现的 因为他总是说sqlite3.OperationalError: unrecognized token: “width”“:”等等 这些内容就是这部分里面的 ,而且还出现了那摩多没用的东西,一改,果然没有换行。
    原先就是这样 既有乱七八糟的东西,还有诡异换行
    在这里插入图片描述

    成功后
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    终于成功了,这个问题搁浅了那么长时间,快烦死我了,但是可能我分析问题,解决问题的能力又上升了
    终于可以进行下一步了。

    WordCloud应用

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    这难道是化妆粉底厚度的关系吗

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值