如何使用Flask连接两个HTML页面

时间：2019-02-07 11:12:06

标签： python html flask

我正在尝试使用flask框架链接两个html页面“ home.html”和“ result.html”，但是它不起作用。同样，当用flask打开页面时，我在html页面中所做的更改也无法反映出来。

这是'home.html'的代码：

<!doctype <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>IRIS PREDICTOR</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
    <h1 class="text-info">IRIS PREDICTION</h1>
    <form action="/result" method="POST">
    <div class="col-2" id="abc">
        <label for="ex2">Sepal Length</label>
        <input class="form-control" id="ex2" type="text" name="s_length">
      </div>
      <div class="col-2">
        <label for="ex2">Sepal Width</label>
        <input class="form-control" id="ex2" type="text" name="s_width">
      </div>
      <div class="col-2">
        <label for="ex2">Petal Length</label>
        <input class="form-control" id="ex2" type="text" name="p_length">
      </div>
      <div class="col-2">
        <label for="ex2">Petal Width</label>
        <input class="form-control" id="ex2" type="text" name="p_width">
      </div>
      <button class="btn btn-outline-secondary" type="button" id="button-addon1">Predict</button>
    </form>
</body>
</html>

“ result.html”的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PREDICTION RESULT</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/style.css" />
    <script src="main.js"></script>
</head>
<body>
    <p>Sepal Length: {{sepal_length}}</p>
    <p>Sepal Width: {{sepal_width}}</p>
    <p>Petal Length: {{petal_length}}</p>
    <p>Petal Width: {{petal_width}}</p>
    <p>Species: {{predict_result}}</p>

</body>
</html>

script.py的代码是：

from flask import Flask,render_template,request
from sklearn.externals import joblib

app=Flask(__name__)
@app.route('/')

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

@app.route('/predict',methods=['POST'])
def show():
    if request.method=='POST':
        sepal_length=request.form['s_length']
        sepal_width=request.form['s_width']
        petal_length=request.form['p_length']
        petal_width=request.form['p_width']
        data=[[float(sepal_length),float(sepal_width),float(petal_length),float(petal_width)]]
        model=joblib.load('iris_model.pkl')
        predict_result=model.predict(data)

    return render_template('result.html',sepal_length=sepal_length,sepal_width=sepal_width,petal_length=petal_length,petal_width=petal_width,predict_result=predict_result)

if __name__=='__main__':
    app.run(debug=True)

我现在该怎么办？

3 个答案:

答案 0 :(得分：1)

我正在处理您的代码。您用于show函数的@ app.route用于/result，但是home.html将数据发布到/result/ 另外，您在home.html上的按钮不是“提交”按钮，因此它从未发布过表单。

以下文件的完整列表

script.py -我已注释掉joblib项目

from flask import Flask,render_template,request
#from sklearn.externals import joblib

app=Flask(__name__)

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/predict',methods=['POST'])
def show():
    if request.method=='POST':
        sepal_length=request.form['s_length']
        sepal_width=request.form['s_width']
        petal_length=request.form['p_length']
        petal_width=request.form['p_width']
        data=[[float(sepal_length),float(sepal_width),float(petal_length),float(petal_width)]]
        #model=joblib.load('iris_model.pkl')
        #predict_result=model.predict(data)
        predict_result="TEST"

    return render_template('result.html',sepal_length=sepal_length,sepal_width=sepal_width,petal_length=petal_length,petal_width=petal_width,predict_result=predict_result)

if __name__=='__main__':
    app.run()

home.html 

<!doctype <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>IRIS PREDICTOR</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
    <h1 class="text-info">IRIS PREDICTION</h1>
    <form action="/predict" method="POST">
    <div class="col-2" id="abc">
        <label for="ex2">Sepal Length</label>
        <input class="form-control" id="ex2" type="text" name="s_length">
      </div>
      <div class="col-2">
        <label for="ex2">Sepal Width</label>
        <input class="form-control" id="ex2" type="text" name="s_width">
      </div>
      <div class="col-2">
        <label for="ex2">Petal Length</label>
        <input class="form-control" id="ex2" type="text" name="p_length">
      </div>
      <div class="col-2">
        <label for="ex2">Petal Width</label>
        <input class="form-control" id="ex2" type="text" name="p_width">
      </div>
      <button class="btn btn-outline-secondary" type="submit" id="button-addon1">Predict</button>
    </form>
</body>
</html>

result.html与您的示例相同

答案 1 :(得分：0)

我希望下面的解释将来对其他人有帮助。

请确保将所有3个文件保存在同一目录（文件夹）中。在保存script.py的同一文件夹中，创建另一个文件夹并将其命名为“ templates”。将两个html文件都放在此文件夹中。然后，在终端中运行script.py，您应该会在服务器上看到输出。

通常，更改未反映在页面中的原因是，您可能忘记了更改后保存的更改。有人可能会认为它是自动保存的，但不是。

答案 2 :(得分：-1)

将两个模板都放在scripts.py所在的“模板”目录中。 “模板”目录中的烧瓶搜索模板文件。
删除@ app.route和def home（）之间的空间。

相关问题
最新问题