Question

好的，所以我仍然在努力解决这个问题，这是使用@DrAgon建议后的完整代码。我有3个文件，第一个是我的Python文件，仅获取本地时间。

import datetime
import time

now = datetime.datetime.now()

print(now)

如果我将此文件设置为：

import datetime
import time

while True:
now = datetime.datetime.now()

print(now)
time.sleep(2)

它每2秒刷新一次并为我获取日期，但是当将其导入到我的flask项目中时，它将接管并且只会加载网页。

所以我使用了获取本地时间的文件的第一个版本。接下来，我有了烧瓶Python页面：

from flask import Flask, render_template, request, jsonify
from flask_bootstrap import Bootstrap
import Timereppper

import datetime

now = datetime.datetime.now()

app = Flask(__name__)
Bootstrap(app)

@app.route('/')

def hello():
return render_template('hello.html', myvar= now.second)

@app.route('/currentstatus')

def currentstatus():
return render_template('hello.html', myvar= now.second)

@app.route('/historic')

def historic():
return render_template('historic.html')

@app.route('/data')
def get_data():
mbdata = Timereppper.now()  # Call your code that gets the data here
return jsonify(mbdata)  # And return it as JSON


if __name__ == '__main__':
app.run(host= 'localhost', port=5000, debug=False, threaded=True)

然后我有我的主hello.html文件，其底部有@DrAgon建议的代码。这将返回主页面“ New Data Goes Here”底部的文本，如果我查看lcalhost：5000 / data，则会获得烧瓶服务器首次启动时读取的日期。我希望此日期连续或每几秒钟更新一次，并显示在网站的主页上。 Anyne可以告诉我我要去哪里了。对不起，我很抱歉。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Vibration Monitor</title>
<meta name="viewport" content="width=device-wi dth, initial-scale=1">
<link href="{{url_for('static', filename='css/bootstrap.min.css')}}" 
rel="stylesheet">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') 
}}">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script>
<script>window.jQuery || document.write('<script src="{{
url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
</head>

<nav class="navbar navbar-expand-lg navbar-light bg-#808080">
<a class="navbar-brand" href= https://www.iotindustries.co.uk>
<img src="/static/img/IOT Industries Logo 1THIN.png" width="300" height="90" 
class="d-inline-block" alt="">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link font-weight-bold" href="/currentstatus">Current 
Status</a>
</li>
<li class="nav-item active">
<a class="nav-link font-weight-bold" href="/historic">Historic</a>
</li>

</ul>
</nav>

<div class="alert alert-secondary" role="alert"></div>

<div class="card-deck" style="width: 42rem;">

<div class="card text-white bg-dark mb-3" style="width: 16rem;">
<img class="card-img-top" src="/static/img/vibes1.png" alt="Vibration 
Image">
<div class="card-body">
<h5 class="card-title">Current vibration level:</h5>
<h1 class="card-text font-weight-bold">15 mA</h1>
<a class="btn btn-success">Acknowledge</a>
</div>
</div>


<div class="card text-white bg-dark mb-3" style="width: 16rem;">
<img class="card-img-top" src="/static/img/timer.svg" alt="Timer Image">
<div class="card-body">
<h5 class="card-title">Estimated days until failure:</h5>
<h1 class="card-text font-weight-bold"> 3 Days {{myvar}} </h1>
<a class="btn btn-info" href="/historic">View Historic</a>
</div>
</div>
</div>

<body>
<div id="myDataDiv">New Data Goes Here</div>
</body>
<script>
var goGetNewData = function() {
$.ajax({
url: '/data',
dataType: 'json',
type: 'get',
success: function(e) {
$('#myDataDiv').html('New Data ' + e);
},
error: function(e) {
$('#myDataDiv').html('Error');
},
});
}
var waitTime = 10;  // 10 seconds
var fetchInterval = window.setInterval(goGetNewData, waitTime*1000);
</script>


</html>

我有一个Python文件，该文件使用Python sleep。（）函数每隔几秒钟不断读取Modbus寄存器。该值正被记录到Google FireBase数据库中。

我想做的是显示从Flask网站上的ModBus寄存器读取的该值。我只是不知道该怎么做。我可以吗？

从Python文件获取更新的ModBus值，连续地或单击HTML文件中的按钮将其传递到“ MyFlaskApp.py”。
查询Firebase数据库，并获取它以连续显示或单击按钮显示最新的写入值。

可以执行哪些操作，最好的方法是什么。谁能举一个我将如何做到这一点的例子？

谢谢

Answer 1

好吧，如果您想单击按钮就可以做到这一点，则可以使该按钮成为html表单的一部分，并将其发布到flask应用程序中：

@app.route('/update')
    def val():
        return render_template("index.html",data=data)

这可行，考虑到要传递给html的值称为数据。要显示通过的数据，您的html应该如下所示：

<p>{{data}}</p>

代替每两秒钟更新一次modbus值，您只能像单击按钮一样这样做：

@app.route('/update')
def val():
   #code to get the value
   return render_template("index.html",data=data)

这样，每次您单击表单按钮以获取新值时，就会从数据库中读取数据。可以确保您的程序不仅可以节省内存，还可以返回所需的值，而不是将另一个文件用作导入文件并使用日期时间。在now方法中，您应该这样写入txt文件：

#get the data
f = open("mod.txt", w+)
f.write(data)
f.close

然后，当您单击按钮时，请在烧瓶应用程序中单击：

@app.route('/update')
    def val():
        f = open("mod.txt",r)
        data = f.read()
        f.close()
        return render_template("index.html",data=data)

要确保其他程序正在运行，您可以执行以下操作：

if __name__ == '__main__':
    execfile('modbusreginfo.py')
    app.run(host= 'localhost', port=5000, debug=False, threaded=True)

如果您想使页面每2秒钟重新加载一次，因此无需单击按钮，可以将其添加到html中：

<meta http-equiv="Refresh" content="2">

Answer 2

这是一种方法。

您将需要在MyFlaskApp.py中创建2条路由

/ home-此路由将呈现HTML模板
/ data-此路由将返回JSON（包含来自您的ModBus文件或来自查询Firebase的数据）

（您可以根据需要命名路线）

在第一个路由返回的HTML模板中，您将需要一个div（带有ID）来呈现数据，并需要一些JavaScript来连续获取新数据。

然后将Ajax GET指向/ data端点，然后按自己的方式进行操作。

<body>
<div id="myDataDiv">New Data Goes Here</div>
</body>
<script>
var goGetNewData = function() {
  $.ajax({
    url: '/data',
    dataType: 'json',
    type: 'get',
    success: function(e) {
       $('#myDataDiv').html('New Data ' + e);
    },
    error: function(e) {
      $('#myDataDiv').html('Error');
    },
  });
}
var waitTime = 10;  // 10 seconds
var fetchInterval = window.setInterval(goGetNewData, waitTime*1000);
</script>

/ data路由可能看起来像这样。

from flask import jsonify
import Modbusreginfo  # Import your other python code

@app.route('/data')
def get_data():
  mbdata = Modbusreginfo.getModBusData()  # Call your code that gets the data here
  return jsonify(mbdata)  # And return it as JSON

从Python文件中获取变量并在Flask中显示

2 个答案: