main.py是falsk的應用程序，static目前是存放靜態文件的，templates是存放模板文件的。
main.py：
#!/bin/env python
import os
from flask import Flask, request, url_for, render_template, redirect, abort, send_from_directory, make_response, session, escape
#from werkzeug import secure_filename
app=Flask(__name__)
@app.route('/')
@app.route('/index')
@app.route('/index.html')
def index():
return render_template("index.html")
@app.route('/stageexecutescript.html')
def ccsbatchstageexecutescript():
return render_template("stageexecutescript.html")
@app.route('/doit.html')
def doit():
return "doit!..."
@app.route('/stage/executescript', methods=['post'])
def executescriptchstage():
a = os.popen("python /home/pyscript/stage_core_batch_new.py").readlines()
s = '<br>'
p = s.join(a)
return p
if __name__ == '__main__':
app.run(host='0.0.0.0', debug=True)
template下的stageexecutescript.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description">
<meta name="author" content="@bussplatops">
<title>STAGE環境</title>
<link rel="canonical" href="http://www.cqanfutong.com/stage/index.html">
<!-- Bootstrap core CSS -->
<link href="./static/bootstrap-4.5.0-dist/css/bootstrap.css" rel="stylesheet">
<style>
</style>
<!-- Custom styles for this template -->
<!-- Custom styles for this template -->
<link href="./static/ccs/blog.css" rel="stylesheet" />
<script type="text/javascript" src="./static/jquery-3.5.1/jquery-3.5.1.js"></script>
</head>
<body>
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-3 pt-1">
<a class="text-muted">anfutong.com</a>
</div>
<div class="col-6 text-center">
<a class="blog-header-logo text-dark">STAGE跑批腳本執行</a>
</div>
<div class="col-3 d-flex justify-content-end align-items-center">
<a class="btn btn-lg btn-primary btn-outline-secondary" href="#" id="executeBtn">執行</a>
</div>
</div>
</header>
<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
<div class="col-md-12 px-0" id="result" >
<h1 class="display-4 font-italic">等待腳本執行返回...</h1>
<p class="lead my-3">.</p>
<p class="lead my-3">.</p>
<p class="lead my-3">.</p>
<p class="lead my-3">.</p>
</div>
</div>
<div id="loadingid" style="color:#ffffff; display:none; position:absolute; top:80px; left:5em;"></div>
<!--
<div id="loading" style="color:#ffffff; display:none; position:absolute; top:80px; left:3em;"></div>
-->
<footer class="blog-footer">
<p>stage環境<a href="http://www.anfutong.com/stage/index.html">anfutong.com</a> by <a href="http://www.anfuton.com/">@bussplatops</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<script type="text/javascript">
$(function() {
$("#executeBtn").click(function(){
//alert("aaa");
//$("#result").load("stage/stage/executescript");
doit();
});
});
function doit() {
$.ajax({
//type: "GET",
type: "POST",
//url: "./doit.html",
url: "./stage/executescript",
data: "",
dataType: "html",
beforeSend: function (XMLHttpRequest) {
$("#result").html("正在加載數據... ");
var loadingdiv = document.getElementById("loadingid");
loadingdiv.innerHTML = "<img src='./static/images/loading1.gif' />";
loadingdiv.style.display = "";
//alert("send...");
},
success: function (data, textStatus) {
//alert("success");
$("#result").html(data);
},
complete: function (XMLHttpRequest, textStatus) {
//alert("complete")
var loadingdiv = document.getElementById("loadingid");
loadingdiv.innerHTML = "";
loadingdiv.style.display = "none";
},
error: function (e, x) {
alert("error")
}
});
}
</script>
</body>
</html>
這裏通過jquery通過 ajax實現，點擊請求，加載loading圖標顯示，等待數據返回，加載數據，取消loading圖標顯示。
這樣看起來像一個頁面。
