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

六、数据可视化—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.mzph.cn/news/867427.shtml

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

相关文章

图的应用之最短路径

引入 应用 算法思想 Dijistra算法 用于解决单个顶点间的最短路径问题 将顶点看成两部分&#xff1a; 最短路径顶点集合A与尚未确定最短路径顶点集合B。 先将顶点按最短路径由小到大依次加入到A中&#xff0c;选择由源点到A中最短的顶点&#xff0c;并记录距离与顶点&#xf…

身体(body)的觉醒:如果你贪婪,给你整个宇宙都不够

佛&#xff0c;是一个梵文的汉语音译词&#xff0c;指觉醒者。 何谓觉醒&#xff1f;什么的觉醒&#xff1f;其实很简单&#xff0c;就是身体的觉醒。 佛的另一个名字&#xff0c;叫菩提&#xff0c;佛就是菩提&#xff0c;菩提老祖&#xff0c;就是佛祖。 一、body&#xff…

Lambda架构

1.Lambda架构对大数据处理系统的理解 Lambda架构由Storm的作者Nathan Marz提出&#xff0c;其设计目的在于提供一个能满足大数据系统关键特性的架构&#xff0c;包括高容错、低延迟、可扩展等。其整合离线计算与实时计算&#xff0c;融合不可变性、读写分离和复杂性隔离等原则&…

3.js - 裁剪平面(clipIntersection:交集、并集)

看图 代码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/lil-gui.module.min.js// 导入tween import …

深度解析Ubuntu版本升级:LTS版本升级指南

深度解析Ubuntu版本升级&#xff1a;Ubuntu版本生命周期及LTS版本升级指南 Ubuntu是全球最受欢迎的Linux发行版之一&#xff0c;其版本升级与维护策略直接影响了无数用户的开发和生产环境。Canonical公司为Ubuntu制定了明确的生命周期和发布节奏&#xff0c;使得社区、企业和开…

Spring AOP源码篇三之 xml配置

简单代码示例, 了解Spring AOP基于xml的基本用法 xml配置&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-insta…

django之url路径

方式一&#xff1a;path 语法&#xff1a;<<转换器类型:自定义>> 作用&#xff1a;若转换器类型匹配到对应类型的数据&#xff0c;则将数据按照关键字传参的方式传递给视图函数 类型&#xff1a; str: 匹配除了”/“之外的非空字符串。 /test/zvxint: 匹配0或任何…

golang线程池ants-实现架构

1、总体架构 ants协程池&#xff0c;在使用上有多种方式(使用方式参考这篇文章&#xff1a;golang线程池ants-四种使用方法)&#xff0c;但是在实现的核心就一个&#xff0c;如下架构图&#xff1a; 总的来说&#xff0c;就是三个数据结构&#xff1a; Pool、WorkerStack、goW…

【前端实现】在父组件中调用公共子组件:注意事项逻辑示例 + 将后端数组数据格式转换为前端对象数组形式 + 增加和删除行

【前端】在父组件中调用公共子组件的实现方法 写在最前面一、调用公共子组件子组件CommonRow.vue父组件ParentComponent.vue 二、实现功能1. 将后端数组数据格式转换为前端对象数组形式2. 增加和删除row 三、小结 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2…

全景图三维3D模型VR全景上传展示H5开发

全景图三维3D模型VR全景上传展示H5开发 3D互动体验平台的核心功能概览 兼容广泛格式&#xff1a;支持OBJ、FBX、GLTF等主流及前沿3D模型格式的无缝上传与展示&#xff0c;确保创意无界。 动态交互探索&#xff1a;用户可自由旋转、缩放、平移模型&#xff0c;深度挖掘每一处…

STMF4 硬件IIC(天空星开发板)

前言&#xff1a;笔记参考立创开发文档&#xff0c;连接放在最后 #IIC概念介绍 #IIC介绍 IIC通信协议&#xff0c;一种常见的串行通信协议&#xff0c;英文全程是 Inter-Integrated Circuit 使用这种通信方式的模块&#xff0c;通常有SCL&#xff08;Serial Clock Line&…

pytest使用报错(以及解决pytest所谓的“抑制print输出”)

1. 测试类的类名问题 #codingutf-8import pytestclass TestClass1:def setup(self) -> None:print(setup)def test_01(self) -> None:print(test_01111111111111111111111)def test_02(self) -> None:print(test_02)以上述代码为例&#xff0c;如果类名是Test开头&am…

Chair Footrest Protective Cover

Chair Footrest Protective Cover 万能通用型椅子脚垫保护套凳子耐磨硅胶加厚垫桌椅脚垫防滑静音套

Docker逃逸CVE-2019-5736、procfs云安全漏洞复现,全文5k字,超详细解析!

Docker容器挂载procfs 逃逸 procfs是展示系统进程状态的虚拟文件系统&#xff0c;包含敏感信息。直接将其挂载到不受控的容器内&#xff0c;特别是容器默认拥有root权限且未启用用户隔离时&#xff0c;将极大地增加安全风险。因此&#xff0c;需谨慎处理&#xff0c;确保容器环…

我使用HarmonyOs Next开发了b站的首页

1.实现效果展示&#xff1a; 2.图标准备 我使用的是iconfont图标&#xff0c;下面为项目中所使用到的图标 3. 代码 &#xff08;1&#xff09;Index.ets&#xff1a; import {InfoTop} from ../component/InfoTop import {InfoCenter} from ../component/InfoCenter import…

Mxnet转Onnx 踩坑记录

0. 前言 使用将MXNET模型转换为ONNX的过程中有很多算子不兼容&#xff0c;在此对那些不兼容的算子替换。在此之前需要安装mxnet分支v1.x版本作为mx2onnx的工具&#xff0c;git地址如下&#xff1a; mxnet/python/mxnet/onnx at v1.x apache/mxnet GitHub 同时还参考了如下…

【postgresql】 基础知识学习

PostgreSQL是一个高度可扩展的开源对象关系型数据库管理系统&#xff08;ORDBMS&#xff09;&#xff0c;它以其强大的功能、灵活性和可靠性而闻名。 官网地址&#xff1a;https://www.postgresql.org/ 中文社区&#xff1a;文档目录/Document Index: 世界上功能最强大的开源…

数据结构1:C++实现边长数组

数组作为线性表的一种&#xff0c;具有内存连续这一特点&#xff0c;可以通过下标访问元素&#xff0c;并且下标访问的时间复杂的是O(1)&#xff0c;在数组的末尾插入和删除元素的时间复杂度同样是O(1)&#xff0c;我们使用C实现一个简单的边长数组。 数据结构定义 class Arr…

web零碎知识2

不知道我的这个axios的包导进去没。 找一下关键词&#xff1a; http请求协议&#xff1a;就是进行交互式的格式 需要定义好 这个式一发一收短连接 而且没有记忆 这个分为三个部分 第一个式请求行&#xff0c;第二个就是请求头 第三个就是请求体 以get方式进行请求的失手请求…

Vatee万腾平台:智慧生活的无限可能

在科技日新月异的今天&#xff0c;我们的生活正被各种智能技术悄然改变。从智能家居到智慧城市&#xff0c;从个人健康管理到企业数字化转型&#xff0c;科技的力量正以前所未有的速度渗透到我们生活的每一个角落。而在这场智能革命的浪潮中&#xff0c;Vatee万腾平台以其卓越的…