Python Flask页面定时刷新显示数据

我想做的是在Flask的前端页面上显示一条从数据库获取过来的数据，是这个表中最新的一条数据。

因为数据库的数据是一直在刷新的，所以页面上就需要定时把数据从数据库取出来，再显示出来就行了。

思路：

网页端可以使用 JavaScript 实现定时从一个接口获取数据并显示在页面上。

那只需要用Flask写一个接口，然后这个接口是获取数据库表中的最新一条数据。
然后，网页端定时从这个接口获取数据就行了。

解决方法：

1.Flask后台写一个接口 /get_data，获取数据库表中最新一条数据，返回 json格式的数据；
2.网页前端把 json格式的数据显示出来，并定时刷新。

1.Flask后台 app.py 文件内容示例：

# Flask 服务器端代码
from flask import Flask, render_template, jsonify

app = Flask(__name__)

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

@app.route('/get_data')
def get_data():
    # 从数据库获取数据，此处仅模拟数据，所以这里没有设计数据库表这些
    data_dict = {'temperature': '20.8', 'humidity': '64.29', 'light': '201'}
    return jsonify(data_dict)

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

如果接口想传输多个对象去网页前端，可以用 return jsonify({"record_id":record_id, "data":data_dict})。

2.网页前端 index.html文件

index.html 文件中在JavaScript 中 updateData 函数中：

使用了 XMLHttpRequest 对象发送请求到 Flask 服务器端，并在接收到响应后通过 JSON.parse 函数解析数据。
接着，通过document.getElementById 获取页面上的元素，并将数据显示在页面上。
最后，通过 setInterval 函数每隔 1 秒（1000毫秒）调用 updateData 函数，从而实现定时获取数据并显示在页面上的效果。

内容：

<html>
  <head>
    <script>
      function updateData() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/get_data", true);
        xhr.onreadystatechange = function() {
          if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            document.getElementById("temperature").innerHTML = response.temperature;
            document.getElementById("humidity").innerHTML = response.humidity;
            document.getElementById("light").innerHTML = response.light;
            // ... 其他数据
          }
        };
        xhr.send();
      }

      setInterval(updateData, 1000);
    </script>
  </head>
  <body>
    <h1>实时数据</h1>
    <p>温度：<span id="temperature"></span></p>
    <p>湿度：<span id="humidity"></span></p>
    <p>光照强度：<span id="light"></span></p>
    // ... 其他数据
  </body>
</html>

运行后，打开 http://localhost:5000 访问index.html就能看到了。

3.带数据库设计的完整 app.py 内容示例：

# Flask 服务器端代码
from flask import Flask, render_template, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:[email protected]:3306/db_monitor'
# 跟踪数据库的修改-->不建议开启未来的版本中会移除
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

class MqttData(db.Model) :
    __tablename__ = "mqtt_data"
    id = db.Column(db.Integer, primary_key=True)
    temperature = db.Column(db.Float) # 温度
    humidity = db.Column(db.Float) # 湿度
    light = db.Column(db.Integer) # 环境光
    create_time = db.Column(db.DateTime) # datetime.datetime.now()

    def __init__(self):
        pass

    def to_list(self):
        return [self.id, self.temperature, self.humidity, self.light]

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

@app.route('/get_data')
def get_data():
    # 从数据库获取数据，此处仅模拟数据
    # data_dict = {'temperature': '20.8', 'humidity': '64.29', 'light': '201'}
    
    # 获取最新一条数据
    the_newest_data = MqttData.query.order_by(MqttData.id.desc()).first()
    data = the_newest_data.to_list() # [self.id, self.temperature, self.humidity, self.light]
    
    return jsonify(data)

# 数据库初始化
def db_init():
    with app.app_context():
        # 删除表
        db.drop_all()
        # 创建表
        db.create_all()

if __name__ == '__main__':
    # 数据库初始化
    #db_init()
    # 数据库的数据插入就省略了

    app.run(debug=True)