六、数据可视化—flask框架入门（爬虫及数据可视化）_flask数据可视化

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方法就是服务器监听端口
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意默认没有开启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方法就是服务器监听端口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

（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
1
2
3
4
5
6
7
8
9
10

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

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

（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文件中存在的）
1
2
3
4
5
6

渲染成功后的结果如下所示

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

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

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

（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方法就是服务器监听端口
1
2
3
4
5
6
7
8
9
10
11
12
13

（4-2）列表变量

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

（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页面传递参数
1
2
3
4
5
6
7
8

表格的显示，一下为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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

下面是谷歌浏览器的显示

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>
1
2
3
4
5
6
7
8
9

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

（5）用户表单提交

默认的表单提交方法是get的，没有说明接收的是post请求会出现下方错误

解决上述错误的方法如下

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

from flask import Flask,render_template,request  
1

#表单提交（至少涉及两个页面加程序）
#接收表单提交的路由需要指定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，等号两边是可以相等的
1
2
3
4
5
6
7

注意：