from flask import Flask, render_template
import map_plotting_test as mpt
app = Flask(__name__)
@app.route('/')
def render_the_map():
mpt.create_map()
return render_template("map.html")
if __name__ == '__main__':
app.run(debug=True)
mpt.create_map()这里的功能只是制作地图，渲染它，然后创建map.html文件并将其保存到 templates 文件夹：templates/map.html。它工作得很好，但需要一些明显的时间才能完成地图的制作（大约 10-15 秒）。
问题是，当执行这个函数时，我在浏览器中只看到一个空白屏幕，然后 Flask 才会渲染完成的map.html文件。
create_map()我想要做的是在函数运行时显示加载屏幕而不是空白屏幕。当该函数完成其工作并创建一个 map.html 文件时，就像那样向用户显示渲染的模板return render_template("map.html")。
感谢劳雷尔的回答。我会让它变得更加美好和清晰。
我重新设计了 Flask 应用程序，它看起来像这样：
from flask import Flask, render_template
import map_plotting_module as mpm
app = Flask(__name__)
@app.route('/')
def loading():
return render_template("loading.html")
@app.route('/map')
def show_map():
return render_template("map.html")
@app.route('/create_map')
def create_map():
mpm.create_map()
return "Map created"
if __name__ == '__main__':
app.run()
当用户打开页面时，Flask 会开始渲染文件loading.html。在此文件中，您必须将以下代码添加到该<head>部分：
<script>
function navigate() {
window.location.href = 'map'; // Redirects user to the /map route when 'create_map' is finished
}
fetch('create_map').then(navigate); // Performing 'create_map' and then calls navigate() function, declared above
</script>
然后，将加载轮 div 添加到您的<body>部分：
<body>
<div class="loader"></div>
</body>
如果您仍然不清楚 - 请查看答案末尾我的示例
在本<script>节中我们必须声明navigate()函数。/map在当前情况下，它只是将用户重定向到所需的参考。
fetch()是模拟jQuery.ajax()阅读更多。它只是将应用程序路由获取到/create_map，等待它在“后台”完成，然后在.then()块中执行操作 -navigate()在我们的例子中是函数。
所以工作流程是：
@app.route('/')执行功能，即加载页面。@app.route('/create_map')并在后台运行其功能。create_map()函数完成时 - 用户将被重定向到@app.route('/map')哪个函数正在渲染全部完成的map.html模板。<head>部分loading.html：<script>
function navigate() {
window.location.href = 'map'; // Redirects user to the /map route when 'create_map' is finished
}
fetch('create_map').then(navigate); // Performing 'create_map' and then calls navigate() function, declared above
</script>
注意，Flask 正在文件夹中搜索媒体
/static。将您的媒体放入其中。否则，媒体将不会被渲染！
<body>
<div class="loader"></div>
</body>
<link rel="icon" href="/static/<icon_file>">
| 归档时间： |
|
| 查看次数： |
4039 次 |
| 最近记录： |