程序描述:我已经有一个在控制台窗口上运行的功能程序,但我想在本地托管的网页上显示其输出。该程序包括通过向 Spotify 的 API 发出请求来获取当前播放歌曲的歌词。我将当前歌词存储在“lyrics.txt”文件中。
我想要的是:
当检测到歌曲已更改时,从正在运行的歌词程序更改网页。
[编辑:]
有没有办法让 Flask 页面显示一个变量,该变量由歌词应用程序的 python request.post 更新到 Flask url,并以更新的变量作为数据?
我拥有的:
我使用 Flask 作为框架,因为它是一个本地网页。
import os, io
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def test():
'''reads the current lyrics file and passes it to the web page
manually reload the page to update lyrics'''
with io.open('lyrics.txt', 'r') as f:
HEAD = f.readline().strip("\n")
BODY = f.read().split('\n')
lyrics = {"HEAD": HEAD, "BODY": BODY}
return render_template("home.html", lyrics=lyrics)
if __name__ == "__main__":
app.run(debug=1)
Run Code Online (Sandbox Code Playgroud)
您需要JavaScript/AJAX定期发送新内容请求的页面,并且 Flask 应该从文件发送当前内容。
在此示例中,我使用jQuery.get()向服务器发送请求,并setTimeout()定期重复该请求。
Flask发送当前时间以显示不同的内容。
import datetime
from flask import Flask, render_template_string
app = Flask(__name__)
@app.route("/")
def index():
return render_template_string("""<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function updater() {
$.get('/data', function(data) {
$('#time').html(data); // update page with new data
});
};
setInterval(updater, 1000); // run `updater()` every 1000ms (1s)
</script>
</head>
<body>
Date & Time: <span id="time"><span>
</body>
</html>""")
@app.route('/data')
def data():
"""send current content"""
return datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')
if __name__ == "__main__":
app.run(debug=True)
Run Code Online (Sandbox Code Playgroud)
编辑:
相同的使用标准,fetch()无需外部库。
代码必须在之后<span>
import datetime
from flask import Flask, render_template_string
app = Flask(__name__)
@app.route("/")
def index():
return render_template_string("""<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
Date & Time: <span id="time"><span>
<script type="text/javascript">
var time_span = document.getElementById("time");
function updater() {
fetch('/data')
.then(response => response.text())
.then(text => (time_span.innerHTML = text)); // update page with new data
}
setInterval(updater, 1000); // run `updater()` every 1000ms (1s)
</script>
</body>
</html>""")
@app.route('/data')
def data():
"""send current content"""
return datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')
if __name__ == "__main__":
app.run(debug=True)
Run Code Online (Sandbox Code Playgroud)