堆栈内存溢出
  简体   繁体   English

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

[英]How to connect my two HTML pages using flask

 原文  2019-02-07 11:12:06  2   3    python/ html/ flask

问题描述

I am trying to link two html pages 'home.html' and 'result.html' using flask framework but it is not working.我正在尝试使用 Flask 框架链接两个 html 页面“home.html”和“result.html”，但它不起作用。 Also the changes that I make in html page are not reflecting when page is opened with flask.此外，我在 html 页面中所做的更改也没有反映在使用 Flask 打开页面时。

Here's the code for 'home.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>

Code for 'result.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>

And code for script.py is: 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)

What should i do now?我现在该怎么办？

3 个解决方案

解决方案1
 2  2019-02-07 11:29:16

I have your code working.我有你的代码工作。 Your @app.route for the show function was for /result but home.html was posting the data to /result/ Also your button on home.html wasn't a submit button so it never posted the form.您用于显示功能的@app.route 用于/result但 home.html 将数据发布到/result/此外，您在 home.html 上的按钮不是提交按钮，因此它从未发布过表单。

Full listings of the files below以下文件的完整列表

script.py - i've commented out the joblib items 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主页.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 is unchanged from your example result.html 与您的示例相同

解决方案2
 0  2020-10-08 19:11:44

I hope the explanation below helps others in the future.我希望下面的解释可以帮助其他人。

Please make sure that you save all 3 files in the same directory(folder).请确保将所有 3 个文件保存在同一目录（文件夹）中。 In the same folder you saved the script.py, create another folder and name it "templates".在保存 script.py 的同一个文件夹中，创建另一个文件夹并将其命名为“模板”。 Place both html files in this folder.将两个 html 文件放在此文件夹中。 Then, run script.py in your terminal, you should see the output on the server.然后，在终端中运行 script.py，您应该会在服务器上看到输出。

Usually, the reason why changes are not reflecting in your page is because you might have forgotten to save the changes after they are made.通常，更改未反映在您的页面中的原因是您可能在更改完成后忘记保存更改。 One might think that it is automatically saved but it is not.有人可能认为它会自动保存，但事实并非如此。

解决方案3
 -1  2019-02-07 12:43:51

Put your both templates in 'templates' directory where your scripts.py located.将您的两个模板放在您的 scripts.py 所在的“模板”目录中。 Flask search template files in 'templates' directory. 'templates' 目录中的 Flask 搜索模板文件。
Remove space between @app.route and def home().删除@app.route 和 def home() 之间的空格。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我使用 Flask 创建了一个网站，并且有两个 html 页面如何连接它们？ - I created a website using Flask and there is two html pages how to connect them? 在使用 flask 时，我的 html 无法与我的 css 连接 - My html does not connect with my css while using flask 如何使用Flask在HTML页面之间传递变量 - How to pass variables between HTML pages using Flask 使用Python Flask将HTML页面与Elasticsearch连接 - Connect HTML page with Elasticsearch using Python flask 如何使用 Python 和 Flask 呈现带有两个列表的 jinja html 列表？ - How to render a jinja html list with two lists using Python and Flask? 在flask应用程序中让两个页面使用相同的html是不好的做法吗？ - Is it bad practice to have two pages in a flask app use the same html? 是否可以将两个数据帧发送到我的 html（烧瓶）？ - Is it possible to send two dataframes to my html (flask)? 如何使用 flask 在我的 html 中显示 css animation？ - how can i show css animation in my html using flask? 如何将 Flask REST API 连接到 HTML 页面 - How to connect Flask REST API to HTML page 如何将我的 flask 应用程序连接到 MongoDB（VSCode）？ - How to connect my flask app to MongoDB (VSCode)?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM