Question

我是Flask的超级新手，我正在尝试使用Flask在python中构建一个小型应用程序...

我想显示一个等待屏幕，然后5秒钟后，继续下一页。问题是，我不知道该不带按钮的“操作”应该放在哪里。.如我现在所知，我编写的python代码似乎没有效果。.

我的代码如下：

我有一个waiting_screen.html：

{% block header %}

<head>
<!-- standard stuff -->
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">

<style>
  
  #loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  }

  @-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  }
  /* Add animation to "page content" */
  .animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
  }
  @-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
  }
  @keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
  }
  #myDiv {
  display: none;
  text-align: center;
  }
</style>

<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/basic.css"> -->


</head>


<div class="header-with-image" style="width: 100%; background-color:white; height: 70px; color: white;padding:0px;">
      <img class='banner-image' src="{{ url_for('static', filename='images/logo_header.jpg') }}" style="display: block;
      margin-left: auto;
      margin-right: auto;
      width: 8%;
      margin-bottom:<y>px;">
</div>
<div class="row justify-content-center align-items-center" style="width: 100%;
    box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
    height:100px;
    background-color:#2c3350;
    margin-top:<x>px;
    text-align: center;">
    <h1>Consolidatie Tool</h1>
</div>
<div class='row head valign-wrapper' >
    <div class='col s8 rellax center-align' data-rellax-speed="-2">
        <br>
        <br>
    </div>
</div>

{% endblock %}


{% block content %}
<div style="padding: 2%;font-family: Verdana; margin:15px; text-align: center;margin-left: auto;height: 40%;
margin-right: auto;background: #ffffff;border-radius:4px;border-color:red;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);width:30%;" >
    <form action="/first-page-info-check" method="POST">

    </form>
    <h4 style="text-align:center"> Bezig om documenten te verwerken... </h4>
    <br>
    <head>
        <div id="loader" action="/first-page-info-check"></div>
        <div style="display:none;" id="myDiv" class="animate-bottom" action="/first-page-info-check">
            <h2>Tada!</h2>
            <p>Some text in my newly loaded page..</p>
        </div >
        <script>
        var myVar;
        function myFunction() {
        myVar = setTimeout(showPage, 3000);
        }

        function showPage() {
        document.getElementById("loader").style.display = "none";
        document.getElementById("myDiv").style.display = "block";
        }
        </script>
    </head>

</div>


{% endblock %}

在URL / first-page-info-check处，下一页称为confirm_upload.html，我有一个愚蠢的烧瓶/ python代码：

@app.route('/first-page-info-check',methods=['POST', 'GET'])
def waiting():
    time.sleep(5)
    return render_template('confirm_upload.html')

我知道我将action="/first-page-info-check"放在代码中的多个位置，不应这样做，但是我只是还不太了解没有表单时应如何放置动作。 ..

希望有人可以帮助我：）

Answer 1

JavaScript超时将在处理函数之前等待给定的时间。为了避免阻塞其他组件的执行，将超时包装在Promise中。在5000毫秒后解决Promise时，用户将被重定向到您的第二页。从技术上讲，您可以直接调用此函数，但是我决定在DOMContentLoaded上调用该函数，以便在加载所有内容之前不启动超时。

function waitForMe() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, 5000);
    });
}

document.addEventListener("DOMContentLoaded", function(event) {
    waitForMe().then(() => {
        window.location.href = "/first-page-info-check";
    });
});

Python / Flask / JS-显示等待屏幕，等待5秒钟后继续

1 个答案: