如何在Flask的HTML文本后显示函数返回的实时更新电压值

没问题，我来教你怎么用Flask实现这个需求——把原来的提交按钮替换成从voltage函数获取的实时电压值，每次打开页面都能显示最新数据。

步骤1：搭建基础Flask项目结构 #

先创建一个简洁的项目目录结构：

voltage_project/
├── app.py          # Flask后端核心代码
└── templates/
    └── index.html  # 前端页面模板

步骤2：编写Flask后端代码（app.py） #

这里我们先定义voltage()函数模拟实时电压获取逻辑（你可以把这段模拟代码替换成真实的硬件读取、API调用等逻辑），再通过路由把电压值传递给前端模板：

from flask import Flask, render_template
import random  # 仅用于模拟随机电压，实际场景请替换为真实逻辑

app = Flask(__name__)

def voltage():
    # 模拟获取实时电压值，示例返回3.0-5.0之间的随机数，保留2位小数
    return round(random.uniform(3.0, 5.0), 2)

@app.route('/')
def index():
    # 调用voltage函数获取当前电压，传递给前端模板
    current_voltage = voltage()
    return render_template('index.html', voltage=current_voltage)

if __name__ == '__main__':
    # 开启调试模式，方便开发时自动重载代码
    app.run(debug=True)

步骤3：编写前端模板（templates/index.html） #

修改原来的HTML代码，用Flask的模板语法{{ voltage }}渲染后端传递过来的实时电压值：

<!DOCTYPE html>
<html>
<body>
    <p>Voltage: {{ voltage }} V</p>
    <p>This is a paragraph.</p>
</body>
</html>

步骤4：运行项目 #

1. 先安装Flask依赖：pip install flask
2. 在项目根目录执行命令：python app.py
3. 打开浏览器访问http://localhost:5000，每次刷新页面都会看到最新的电压值！

进阶：实现自动实时更新（无需手动刷新） #

如果需要页面自动刷新电压值，可以添加一段JavaScript实现轮询：
修改index.html：

<!DOCTYPE html>
<html>
<body>
    <p>Voltage: <span id="voltage-display">{{ voltage }}</span> V</p>
    <p>This is a paragraph.</p>

    <script>
        // 每3秒自动请求一次最新电压值
        setInterval(() => {
            fetch('/get-latest-voltage')
                .then(res => res.json())
                .then(data => {
                    document.getElementById('voltage-display').textContent = data.voltage;
                });
        }, 3000);
    </script>
</html>

同时在app.py中新增一个接口路由：

@app.route('/get-latest-voltage')
def get_latest_voltage():
    return {'voltage': voltage()}

这样页面就会每3秒自动更新一次电压值了。

内容的提问来源于stack exchange，提问作者Sumit