flask pyecharts 数据可视化页面展示

转载

mob64ca1403528a 2024-09-13 10:57:30

文章标签 python html5 flask html 强制转换 文章分类 数据可视化人工智能

flask

Flask是一个轻量级的基于Python的web框架。
使用Python语言编写，较其他同类型框架更为灵活、轻便、安全且容易上手。

Flask的基本模式为在程序里将一个视图函数分配给一个URL，每当用户访问这个URL时，系统就会执行给该URL分配好的视图函数，获取函数的返回值并将其显示到浏览器上，其工作过程见图。

flask pyecharts 数据可视化页面展示_html

app.py: 项⽬管理⽂件，通过它管理项⽬。

static: 存放静态文件

templates文件夹：用于放置html模板文件

开始

我用的是pycharm社区版，要自己配置。。

如下：

flask pyecharts 数据可视化页面展示_flask_02

创建完成后程序为：

这个程序就是函数的主体框架了，下面通过好多小例子加深理解。

from flask import Flask  #引入flask

app = Flask(__name__) 
#路由解析，通过用户访问的路径匹配相应的函数
@app.route('/')#这里的意思是用什么网页后缀进行访问，要是/text就在网页后缀加/text才能进行访问
def index():
    return '<h1>Hello World</h1>'


if __name__ == '__main__':
    app.run(debug=True)  #这里debug=True将调试模式打开，即可以实时修改网页的数据

运行截图：

flask pyecharts 数据可视化页面展示_python_03

flask pyecharts 数据可视化页面展示_flask_04

通过访问路径获取用户的字符串参数

eg：

@app.route('/user/<name>')

这样为向网页发送输入，即

flask pyecharts 数据可视化页面展示_python_05

输入的xx为提供的name值，然后我们还可以将函数改下，

def welcome(name):
    return "%s"%name

这样就可将输入的通过函数的方式进行处理加工。同样我们也可以添加多个变量来传入。

通过访问路径获取用户的数字参数

@app.route('/user/<int:name>')#路由
def welcome(name):
    return "%d"%name

用int：来强制转换，再输出时用%d即可。
用float：来强制转换，再输出时用%lf即可。
（这里会自动匹配多个函数下的用户某个正确输入，从而进入不同的函数）
路由不能重复，用户通过唯一路径访问特定的函数，函数名也不能重复！！

render_template库

这个是flask里渲染用的模块，在templates文件夹下新建index.html并添加ht5的格式（我是社区版所以要自己动手丰衣足食）即：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>

我们在定义一个路由为：

@app.route("/")
def index2():
    return render_template("index.html"

运行后在网页显示为：

flask pyecharts 数据可视化页面展示_html_06

即做网页只需要两步，第一步定义路径，第二步做html发给用户

很关键一点是两个路由不能用同一个html不然后一个为404

向页面传递变量

eg：

#返回渲染后的页面
#向页面传递一个变量
@app.route("/")
def index2():
    name = ["aa","aad"]
    return render_template("index.html",list=name)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world  MCL,{{ var }}</h1><br/>  
    this is {%for data in list  %}
      <li>  {{data}}</li>
    {% endfor %}

</body>
</html>

这里直接向其中传入list，在html中编写页面，

{{ 变量 }}为显示向其中传入的变量；

" < b r > "为换行符；

用 {%for data in list %}
{{data }}
{% endfor %} <!控制结构!>
遍历list；

用<! !>进行注释

截图：

flask pyecharts 数据可视化页面展示_html5_07

flask pyecharts 数据可视化页面展示_强制转换_08

下面传一个字典让我们康康该怎么做，同时康康怎么写一个表格

from flask import Flask,render_template
import datetime

app = Flask(__name__)
#返回渲染后的页面
#向页面传递一个变量

@app.route("/")
def index2():
    #变量
    time = datetime.date.today()
    #列表类型
    name = ["Ross","Jack"]
    #字典类型
    task = {"mission":"GOOD JOB","WAY":"GET TOP"}
    return render_template("index.html",time=time,list=name,task=task) #前面是页面里用的，后面是我们传的参数，所以传成一样就很方便

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

html里为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>今天是{{ time }}</h1><br/>
    这里是
    {%for data in list  %}
      <li>  {{data}}</li>
    {% endfor %}

    今天任务：<br/>    <!如何打印表格!>
    <table border="1">  <!表格样式!>
        {% for key,value in task.items() %}  <!用python里的键值对的方式即可，可以看出python的支持有多强大!>
        <tr>
            <td> {{key}}</td>
            <td> {{value}}</td>
        </tr>
        {%endfor%}

    </table>
</body>
</html>

结果：

flask pyecharts 数据可视化页面展示_python_09

表单的提交与收集

rom flask import Flask,render_template,request
app = Flask(__name__)

#表单提交
@app.route("/text/register")    #这里的text/为网页里的格式
def register():                  #这里要加/text才能找到网页
    return render_template("text/register.html")  #这里的text/为文件夹路径

##结果收集
@app.route("/result",methods =[ 'POST','POST']) #不写methods则访问方式为GET，很有可能METHOD NOT ALLOWED           #这里不需要加/text因为前一步已经找到
def result():
    if request.method == 'POST':
        result = request.form      #注意这里需要引入request并用form字典的方式引入
        return render_template("text/result.html",result=result)

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

这里定义文件存储为：

flask pyecharts 数据可视化页面展示_flask_10

其中register为收集页面，result为返回结果页面，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action ="{{url_for('result'}}" method="post" >#url_for为动态生成网页，这里网页可用http://localhost:5000/result
    <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>

</body>
</html>

result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="5">
        {% for key,value in result.items() %}
        <tr>
            <td> {{key}}</td>
            <td> {{value}}</td>
        </tr>
        {%endfor%}

    </table>
</body>
</html>

结果：

flask pyecharts 数据可视化页面展示_强制转换_11