使用 Flask 更新 HTML 页面答案

【问题标题】：Updating HTML page using Flask使用 Flask 更新 HTML 页面
【发布时间】：2021-06-22 12:58:42
【问题描述】：

我正在为几台 3D 打印机制作信息屏幕，我有一个休息 API 可以从中获取数据。数据应该不断更新，它将是名称和时间。但是，我只想开始在 HTML 站点上显示当前名称。

我有一个正在运行的 Python 程序，它循环和更新当前名称，并且输出需要转到特定字段，在这种情况下（HTML 文件字段 INPUT NAME 1）我将有多个打印机，因此需要易于指导HTML标签的数据......一直在尝试烧瓶，但我不知道这是否最适合这个？ python程序：

import sched, time
from time import time, sleep
import flask
from flask import Flask, redirect, url_for, render_template, request, flash
import requests


app=Flask(__name__,template_folder='templates')

#printer-S3-nr1
response_ums3_1 = requests.get("http://192.168.50.203/api/v1/print_job/name")
response_ums5_1 = requests.get("http://192.168.50.201/api/v1/print_job/name")

@app.route("/")
def profile():
    while (True):
        sleep(10 - time()%10)
    #ULTIMAKER S3 NR 1
        if response_ums3_1.status_code == 404:
            return render_template("server.html", s3name1 = "No Prints Running")
        if response_ums3_1.status_code == 200:
            return render_template("server.html", s3name1 = response_ums3_1.text.strip('"'))
    #ULTIMAKER S3 NR 1

    #ULTIMAKER S5 NR 1
        if response_ums5_1.status_code == 404:
            return render_template("server.html", s5name1 = "No Prints Running")
        if response_ums5_1.status_code == 200:
            return render_template("server.html", s5name1 = response_ums5_1.text.strip('"'))
    #ULTIMAKER S5 NR 1



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

   
```
<!DOCTYPE html>
<html>

<head>
<style>
    #customers {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    
    #customers td,
    #customers th {
        border: 1px solid #ddd;
        padding: 8px;
    }
    
    #customers tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    
    #customers tr:hover {
        background-color: #ddd;
    }
    
    #customers th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #1b77f7;
        color: white;
    }
</style>
</head>
<H1 align="center"> Printer Status </H1>

<body>

<table id="customers">
    <tr>
        <th>Skrivare</th>
        <th>Färdig</th>
        <th>Namn</th>
        <th>Video</th>
    </tr>
    <tr>
        <td>Ultimaker-S5-nr1</td>
        <td>INPUT TIME</td>
        <td>{{s5name1}}</td>
        <td><img src="http://192.168.50.201:8080/?action=stream" alt="Ultimaker-S5-nr1" style="width:202.5px;height:151.85px;" </td>
    </tr>
    <tr>
        <td>Ultimaker S3 nr1</td>
        <td>INPUT TIME</td>
        <td>{{s3name1}}</td>
        <td><img src="http://192.168.50.203:8080/?action=stream" alt="Ultimaker S3 nr1" style="width:202.5px;height:151.85px;" </td>
    </tr>
    <tr>
</table>

</body>

</html>
```

【问题讨论】：

标签： python html flask

【解决方案1】：

在 Flask 中，如果你想将数据从服务器发送回前端，那么你必须使用return 命令。现在，您所做的只是将输出（您的打印命令）发送到您的控制台。当您将值从服务器返回到前端时，您必须使用 Jinja Template 来显示这些值，例如

#服务器代码

if response.status_code == 202:
    return render_template("index.htm", INPUT_NAME_1 = response.text)

#html 页面例如 index.htm

....
<td>{{INPUT_NAME_1}}</td>
...

因此，从上面的代码（#server 代码）中，您将一个名为 INPUT_NAME_1 的变量发送回一个名为 index.htm 的 html 页面，并在该页面上使用 Jinja 语法获取变量的值双大括号，即{{}}

Flask 是一个网络框架。它允许您构建使用 Python 的基于 Web 的应用程序。另一个框架是 Django。如果您的目标是 Web 应用程序，那么您可以使用其中任何一个。

注意：目前，您的代码不包含任何使其基于网络的内容。你甚至还没有将 Flask 库导入到你的 python 代码中，这就引出了我的下一点。

您的问题表明您仍然缺少一些基础知识，继续走这条路会让您更加沮丧。我建议您首先了解 Flask 的基础知识，例如阅读向您介绍 Flask 的材料。快速谷歌搜索返回以下 - https://pymbook.readthedocs.io/en/latest/flask.html， https://flask.palletsprojects.com/en/2.0.x/
一旦您掌握了 Flask 的基础知识，您就应该确定是希望您的 Web 应用程序驻留在本地计算机上，还是希望将其托管在 Web 上。对于网络托管，有便宜（或免费）的主机，如 python anywhere、heroku、Google App Engine。如果您决定采用 Google App Engine 的路线，请查看我们的 website，我们为它提供了 GUI

【讨论】：

我已经更新了代码，我无法获取实时数据，想每 10 或 30 秒更新一次，所以我获取最新数据并将其更新到我的页面，而无需完全刷新。 s5name1 根本不显示，但 s3name1 显示。感觉它在函数中没有一路下降？
一旦数据到达后端，您必须使用套接字（建立2路连接）将数据从服务器推送到前端。另一种选择是使用 Javascript 并通过 setInterval() 每 10 或 30 秒从前端调用一次服务器（这称为长轮询）