六、数据可视化—flask框架入门(爬虫及数据可视化)

news2024/10/6 6:23:12

六、数据可视化—flask框架入门(爬虫及数据可视化)

  • 1,数据可视化简介
  • 2,flask
    • (1)创建flask项目
    • (2)开启debug模式
    • (3)通过访问路径传递参数
    • (4)加入渲染模板,渲染HTML文件
      • (4-1)普通变量
      • (4-2)列表变量
      • (4-3)字典变量
    • (5)用户表单提交

1,数据可视化简介

  数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息,为了更多人都可以理解使用。
  我们希望不同平台有着不同效果的展现,如pc端能访问,安卓能访问,车载电脑能访问等;希望统一数据的不同视觉效果,看到增长-折线图,地域分布-地图,比例-饼状图。使用web框架及图表js框架等即可达到此效果。

python的web框架:
Django,最有名,大而全,但对于初学者是有一定门槛的
Flask,非常的简单,就两个功能,一个路由转发,一个模板渲染

后续可视化操作中涉及到的相关框架:
Flask是用来做网站的一个框架
Echarts各种开源图表的js框架
Wordcloud词云通过图形图像的方式显示字词的词频效果

2,flask

(1)创建flask项目

如何在pycharm快速创建一个具有flask框架的项目

点击左上角file,newproject

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

from flask import Flask         #从flask包中引入Flask模块

app = Flask(__name__)           #通过默认的名字,初始化了全局对象


#此处是flask完成定制的内容
#路由解析,通过用户访问的路径匹配相应的函数
@app.route('/')
def hello_world():
    return '你好!'           #注意默认没有开启debug模式(程序发布状态),所以此处的修改不会实时显示到服务器,可以重启服务器


if __name__ == '__main__':
    app.run()                   #调用对象,run方法就是服务器监听端口

注意默认没有开启debug模式(程序发布状态),所以此处的修改不会实时显示到服务器,可以重启服务器

(2)开启debug模式

如何在pycharm中开启debug模式

在这里插入图片描述

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

改为debug模式后,直接点击刷新浏览器就可以显示修改后的内容了(注意修改后要保存)

from flask import Flask         #从flask包中引入Flask模块

app = Flask(__name__)           #通过默认的名字,初始化了全局对象


#此处是flask完成定制的内容
#路由解析,通过用户访问的路径匹配相应的函数
@app.route('/')                 #此处是通过http://127.0.0.1:5000/ 路径下,下方在此路径下进行的回应,
                                # 若是改成@app.route('/test') 在/路径下就访问不到了 ,需要改成 http://127.0.0.1:5000/test可访问
def hello_world():
    return '欢迎!'           #注意默认没有开启debug模式(程序发布状态),所以此处的修改不会实时显示到服务器,可以重启服务器

#只需要两步,1定义访问的路径,2.返回的内容
@app.route('/index')
def hello():
    return '你好!'

if __name__ == '__main__':
    app.run()                   #调用对象,run方法就是服务器监听端口

初学者在进行编写时,一定要开启debug模式,帮助即时查看修改效果,还能更好的锁定错误位置
下方加入未定义的变量

def hello_world():
    return '欢迎!'+name           #注意默认没有开启debug模式(程序发布状态),所以此处的修改不会实时显示到服务器,可以重启服务器

在这里插入图片描述

(3)通过访问路径传递参数

在程序中接着添加一下内容

#当有参数传递过来时,如何进行
#通过访问路径,获取用户的字符串参数
@app.route('/user/<name>')       #用户访问时,网址后面有/<name>,拿到name变量传入函数welcom(name)
def welcom(name):
    return '你好!,%s'%name

#通过访问路径,获取用户的数字整型参数
@app.route("/user/<int:id>")       #<int:id>是固定写法,用户访问时,网址后面有
def welcom2(id):
    return '你好!,%d号的会员'%id

在这里插入图片描述

在这里插入图片描述

#路由路径不能重复,用户只能通过唯一路径访问特定的函数,若前方相同则传递的参数类型不能相同

@app.route('/index')		#前两句,Werkzeug判断那个路径执行那个函数
def hello():
    return '你好!'		#返回通过Jinja2进行HTML页面等的返回

在这里插入图片描述

(4)加入渲染模板,渲染HTML文件

from flask import Flask,render_template         #从flask包中引入Flask模块,render_template渲染模板可以将HTML文件渲染出来

#用来返回HTML网页
@app.route('/index2')
def index2():
    return render_template("index.html")    #返回渲染模板的html(html是已经在templates文件中存在的)

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

在这里插入图片描述

渲染成功后的结果如下所示
在这里插入图片描述

要在使用时,网页不仅仅是显示已经准备好的东西

有的时候还要显示一些从数据库中查询的东西

此时需要向页面传递一些变量

(4-1)普通变量

from flask import Flask,render_template         #从flask包中引入Flask模块,render_template渲染模板可以将HTML文件渲染出来

app = Flask(__name__)           #通过默认的名字,初始化了全局对象

#向页面传递一个变量
import datetime          #引入时间的包,显示时间
@app.route('/index3')
def index3():
    time = datetime.date.today()            #只显示今天的日期,普通变量
    return render_template("index.html",var = time)    #向HTML页面传递参数,会将HTML中的双大括号里的变量进行替换渲染

if __name__ == '__main__':
    app.run()                   #调用对象,run方法就是服务器监听端口

在这里插入图片描述

在这里插入图片描述

(4-2)列表变量

#向页面传递一个变量
import datetime          #引入时间的包,显示时间
@app.route('/index3')
def index3():
    time = datetime.date.today()            #只显示今天的日期,普通变量
    name = ["小张","小王","小赵"]                    #列表类型
    return render_template("index.html",var = time,list=name)    #向HTML页面传递参数

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

(4-3)字典变量

#向页面传递一个变量
import datetime          #引入时间的包,显示时间
@app.route('/index3')
def index3():
    time = datetime.date.today()            #只显示今天的日期,普通变量
    name = ["小张","小王","小赵"]                    #列表类型
    task = {"任务":"打扫卫生","时间":"3小时"}         #字典类型
    return render_template("index.html",var = time,list=name,task = task)    #向HTML页面传递参数

表格的显示,一下为HTML语句
任务:

<br/>            <!-- 了解一下,如何在页面打印表格-->
    <table border="1">
        <tr>
            <td>测试1</td>
            <td>测试2</td>
        </tr>
        <tr>
            <td>测试1</td>
            <td>测试2</td>
        </tr>
        <tr>
            <td>测试1</td>
            <td>测试2</td>
        </tr>
    </table>

下面是谷歌浏览器的显示

在这里插入图片描述

Html接收字典变量
任务:

<br/>            <!-- 了解一下,如何在页面打印表格-->
    <table border="1">
        {% for key,value in task.items() %}       <!-- 当使用task.items()时,字典变量task就变成列表类型的了[(key,value),(key,value)]-->
        <tr>
            <td>{{ key }}</td>
            <td>{{ value }}</td>
        </tr>
        {% endfor %}
    </table>

在这里插入图片描述

普通变量和列表变量,字典变量传递是一样的,不同的地方在于HTML中,var直接打印,进行for循环可对列表使用,而对字典需要先将其使用task.items()的方法进行转换拿到key和value

在这里插入图片描述

在这里插入图片描述

(5)用户表单提交

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

默认的表单提交方法是get的,没有说明接收的是post请求会出现下方错误
在这里插入图片描述

解决上述错误的方法如下
在这里插入图片描述

光显示不行,如何拿到用户表单提交的内容,使用request对象,在flask包中已经封装好了

from flask import Flask,render_template,request  

在这里插入图片描述

#表单提交(至少涉及两个页面加程序)
#接收表单提交的路由需要指定methods为post
@app.route('/result',methods=['POST','GET'])                 #此处意思是既可以接收POST又可以接收GET,不写默认get,也可以写单个
def result():
    if request.method == 'POST':                    #如果是使用post方法进来的,获取表单所有内容
        result = request.form                       #是将表单的name作为key,内容作为value形成字典
        return render_template("test/result.html",result=result)      #此处传进去的变量result=result,等号两边是可以相等的

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意:
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1905087.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【鸿蒙学习笔记】页面布局

官方文档&#xff1a;布局概述 常见页面结构图 布局元素的组成 线性布局&#xff08;Row、Column&#xff09; 了解思路即可&#xff0c;更多样例去看官方文档 Entry Component struct PracExample {build() {Column() {Column({ space: 20 }) {Text(space: 20).fontSize(15)…

C语言 指针和数组——指针和二维数组之间的关系

目录 换个角度看二维数组 指向二维数组的行指针 按行指针访问二维数组元素 再换一个角度看二维数组 按列指针访问二维数组元素 二维数组作函数参数 指向二维数组的行指针作函数参数 指向二维数组的列指针作函数参数​编辑 用const保护你传给函数的数据 小结 换个角度看…

Mysql explain语句详解与实例展示

首先简单介绍sql&#xff1a; SQL语言共分为四大类&#xff1a;数据查询语言DQL&#xff0c;数据操纵语言DML&#xff0c;数据定义语言DDL&#xff0c;数据控制语言DCL。 1. 数据查询语言DQL 数据查询语言DQL基本结构是由SELECT子句&#xff0c;FROM子句&#xff0c;WHERE子句…

Kafka(一)基础介绍

一&#xff0c;Kafka集群 一个典型的 Kafka 体系架构包括若Producer、Broker、Consumer&#xff0c;以及一个ZooKeeper集群&#xff0c;如图所示。 ZooKeeper&#xff1a;Kafka负责集群元数据的管理、控制器的选举等操作的&#xff1b; Producer&#xff1a;将消息发送到Broker…

k8s学习之cobra命令库学习

1.前言 打开k8s代码的时候&#xff0c;我发现基本上那几个核心服务都是使用cobra库作为命令行处理的能力。因此&#xff0c;为了对代码之后的代码学习的有比较深入的理解&#xff0c;因此先基于这个库写个demo&#xff0c;加深对这个库的一些理解吧 2.cobra库的基本简介 Git…

《昇思 25 天学习打卡营第 11 天 | ResNet50 图像分类 》

《昇思 25 天学习打卡营第 11 天 | ResNet50 图像分类 》 活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 签名&#xff1a;Sam9029 计算机视觉-图像分类&#xff0c;很感兴趣 且今日精神颇佳&#xff0c;一个字&#xff0c;学啊 上一节&…

张量分解(1)——初探张量

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…

MybatisPlus实现插入/修改数据自动设置时间

引言 插入数据时自动设置当前时间&#xff0c;更新数据时自动修改日期为修改时的日期。 使用MybatisPlus的扩展接口MetaObjectHandler 步骤 实现接口 实体类加注解 实现接口 package com.example.vueelementson.common;import com.baomidou.mybatisplus.core.handlers.M…

GraalVM上的多语言混合开发

上篇文件我们介绍了GraalVM强大的静态编译功能,能够让Java应用程序摆脱虚拟机的束缚,像其它本地编译的应用一样直接运行。那么GraalVM的神奇之处仅限于此吗?今天我们再来看看它的另一个重要特性—多语言混合开发 多语言平台 Java并不是唯一运行在JVM上的语言,这个我们都应…

Qt/C++音视频开发78-获取本地摄像头支持的分辨率/帧率/格式等信息/mjpeg/yuyv/h264

一、前言 上一篇文章讲到用ffmpeg命令方式执行打印到日志输出&#xff0c;可以拿到本地摄像头设备信息&#xff0c;顺藤摸瓜&#xff0c;发现可以通过执行 ffmpeg -f dshow -list_options true -i video“Webcam” 命令获取指定摄像头设备的分辨率帧率格式等信息&#xff0c;会…

ts-01.泛型(函数和接口)

泛型 泛的意思是:漂浮, 比如泛舟; 泛型: 类型漂浮未定 > 动态类型. 用于: 函数 接口 类 T extends string | number 泛型约束 function a<T any, K> (: number, value: T) { // 泛型参数设置默认值anyconst arr Array<T>(l).fill(value) // [foo, foo, foo] }…

IntelliJ IDEA菜单不见了设置找回方法

通过CtrAltS键按出设置 找到View,然后自定义一个快捷键,然后保存 使用自定义快捷键弹出改界面,点击Main Menu即可

树莓派4B_OpenCv学习笔记19:OpenCV舵机云台物体追踪

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; Python 版本3.7.3&#xff1a; ​​ 今日学习&#xff1…

# 三 JS的流程控制和函数

三 JS的流程控制和函数 3.1 JS分支结构 if结构 这里的if结构几乎和JAVA中的一样,需要注意的是 if()中的非空字符串会被认为是trueif()中的非零数字会被认为是true 代码 if(false){// 非空字符串 if判断为trueconsole.log(true) }else{console.log(false) } if(){// 长度为0…

Linux系统(Centos)下MySQL数据库中文乱码问题解决

问题描述&#xff1a;在进行数据库使用过程中&#xff0c;数据库里的数据中文都显示乱码。操作数据库的时候&#xff0c;会出现中文乱码问题。 解决方法如下&#xff1a; 第一步&#xff1a;打开虚拟机进入系统&#xff0c;启动MySQL。 第二步&#xff1a;连接登录MySQL输入…

排序 -- 万能测试oj

. - 力扣&#xff08;LeetCode&#xff09; 这道题我们可以使用我们学过的那些常见的排序方法来进行解答 //插入排序 void InsertSort(int* nums, int n) {for (int i 0; i < n-1; i){int end i;int tmp nums[end 1];while (end > 0){if (tmp < nums[end]){nums[…

GuitarPro2024音乐软件#创作神器#音乐梦想

嘿&#xff0c;亲爱的朋友们&#xff01;&#x1f44b;&#x1f44b;&#x1f44b;今天我要给你们安利一款超赞的软件——Guitar Pro。这款软件简直是吉他手的福音啊&#xff01;&#x1f389;&#x1f389;&#x1f389; Guitar Pro免费绿色永久安装包下载&#xff1a;&#…

数据结构(其一)--基础知识篇

1. 数据结构三要素 1.1 数据结构的运算 即&#xff0c;增删改查 1.2 数据结构的存储结构 2. 数据类型&#xff0c;抽象数据类型 数据类型&#xff1a; &#xff08;1&#xff09;. 原子类型&#xff1a;bool、int... &#xff08;2&#xff09;. 结构类型&#xff1a;类、…

赤壁之战的烽火台 - 观察者模式

“当烽火连三月&#xff0c;家书抵万金&#xff1b;设计模式得其法&#xff0c;千军如一心。” 在波澜壮阔的三国历史长河中&#xff0c;赤壁之战无疑是一场改变乾坤的重要战役。而在这场战役中&#xff0c;一个看似简单却至关重要的系统发挥了巨大作用——烽火台。这个古老的…

LeetCode 算法:二叉树中的最大路径和 c++

原题链接&#x1f517;&#xff1a;二叉树中的最大路径和 难度&#xff1a;困难⭐️⭐️⭐️ 题目 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点&#xff0c;…