时间戳

首页 > 解决方案 > 使用 Flask 更新 HTML 页面

python - 使用 Flask 更新 HTML 页面

问题描述

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

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

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>
```

标签： pythonhtmlflask

解决方案

  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回调用的 html 页面index.htm，并在该页面上使用双花括号的 Jinja 语法获取变量的值，即{{}}

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

注意：现在，您的代码不包含任何使其基于 Web 的内容。您甚至还没有将 Flask 库导入到您的 python 代码中，这让我想到了下一点。

  1. 您的问题表明您仍然缺少一些基础知识，继续沿着这条路走下去会给您带来更多的挫败感。我建议您首先了解 Flask 的基础知识，例如阅读向您介绍 Flask 的材料。快速谷歌搜索返回以下内容- https://pymbook.readthedocs.io/en/latest/flask.html，https://flask.palletsprojects.com/en/2.0.x/

  2. 一旦你掌握了 Flask 的基础知识，你就应该弄清楚你是想让你的 Web 应用程序驻留在本地机器上还是想把它托管在 Web 上。对于网络托管，有便宜（或免费）的主机，例如python Anywhere、heroku、Google App Engine。如果您决定采用 Google App Engine 的路线，请查看我们的网站，我们为它提供了 GUI

推荐阅读