时间戳

首页 > 解决方案 > 使用类创建的数据无法通过烧瓶应用程序显示到 html 中

python - 使用类创建的数据无法通过烧瓶应用程序显示到 html 中

问题描述

我正在尝试为我在实习中创建的工具制作一个烧瓶应用程序。我有一个可以生成熊猫数据框的活动类，我希望使用烧瓶将其显示到 HTML 中的表格中。我测试了一个简单的例子，它工作得很好并显示给定的数据框，但是一旦我尝试对 Activites 类做同样的事情，它就不起作用了。代码本身不会导致内核出现任何错误，但是当我转到 http://localhost:5000/ 时，我的网络浏览器（Chrome）说 localhost 不允许连接：ERR_CONNECTION_REFUSED。仅创建数据就需要 15 分钟的课程，我在想 Chrome 可能不喜欢等待这么长时间而只是拒绝连接？我是 Flask 的新手，所以我很困惑。谢谢您的帮助 ：）

这是简单的工作代码：

import pandas as pd
from flask import Flask, redirect, url_for, request, render_template

app = Flask(__name__) 

df = pd.DataFrame({'A': [0, 1, 2, 3, 4],
                   'B': [5, 6, 7, 8, 9],
                   'C': ['a', 'b', 'c', 'd', 'e']})

@app.route('/')
@app.route('/home')
def home():
    return render_template('home.html')

@app.route('/task1')
def task1():
    return render_template('task1.html')

@app.route('/handle_data', methods=['POST'])
def handle_data():
    return render_template('simple.html', tables=[df.to_html(classes='data')], titles=df.columns.values)

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

这就是我正在尝试做的但不起作用：

import pandas as pd
from flask import Flask, redirect, url_for, request, render_template
from activities import Activities

app = Flask(__name__) 

activities = Activities()

activities.load_data()

df = activities.raw_data.head()

@app.route('/')
@app.route('/home')
def home():
    return render_template('home.html')

@app.route('/task1')
def search_for_sailors():
    return render_template('task1.html')

@app.route('/handle_data', methods=['POST'])
def handle_data():
    return render_template('simple.html', tables=[df.to_html(classes='data')], titles=df.columns.values)

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

标签： pythonhtmlpandasflaskpython-class

解决方案

我用于需要时间返回客户端的数据的方法是 AJAX 以获取数据后页面加载。

  1. 更改/handle_data路由以响应GET并将数据帧的繁重构建移入其中（逻辑上）
  2. 使用Response()flask对象返回数据框的html
  3. 使用 JQuery 对该/handle_data路由进行 AJAX 调用以获取表格的 HTML

应用程序.py

import pandas as pd
from flask import Flask, redirect, url_for, request, render_template, Response

app = Flask(__name__)

@app.route('/')
@app.route('/home')
def home():
    return render_template('home.html')

@app.route('/task1')
def task1():
    return render_template('task1.html')

@app.route('/handle_data')
def handle_data():
    df = pd.DataFrame({'A': [0, 1, 2, 3, 4],
                       'B': [5, 6, 7, 8, 9],
                       'C': ['a', 'b', 'c', 'd', 'e']})
    return Response(df.to_html())

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

主页.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
            crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <h1>Header 1</h1>
    </header>
    <main id="main">
        <section id="data-section">
            <h2>Data</h2>
            <div id="data"/>
        </section>
    </main>
</body>
<script>
    function apicall(url) {
        $.ajax({
            type:"GET",
            url:url,
            success: (data) => {
                $("#data").html(data);
            }
        });
    }

  window.onload = function () {
    apicall("/handle_data");
  }
</script>
</html>

推荐阅读