使用 python 作为后端和 html 作为前端的 Web 应用程序答案

【问题标题】：Web app using python as backend and html as frontend使用 python 作为后端和 html 作为前端的 Web 应用程序
【发布时间】：2020-01-01 07:09:24
【问题描述】：

我正在尝试使用 python (flask) 作为后端和 html 作为前端来创建一个 Web 应用程序。因此，当我在输入框中键入一个值并点击提交按钮时，它应该从浏览器将此数据发送到服务器（使用flask的python代码），这应该返回一个响应，如“你好， 那个值！”。当我发送第一个值时它可以正常工作，但是当我发送第二个值时不会发生这种情况。它在 anaconda 提示符中显示错误。（我使用的是 windows 10。python 文件名：good.py，html 文件名：eval.html）。这是两者的代码。
good.py 文件如下

from flask import request
from flask import jsonify
from flask import Flask

app = Flask(__name__)

@app.route('/evaluation', methods=['POST'])


def evaluation1():
    parameter1 = request.get_json(force=True)
    return1 = parameter1['return1']
    response1 = {
        'reference1': 'Hello, ' + return1 + '!'
    }
    return jsonify(response1)


def evaluation2():
    parameter2 = request.get_json(force=True)
    return2 = parameter2['return2']
    response2 = {
        'reference2': 'Hello, ' + return2 + '!'
    }
    return jsonify(response2)

def evaluation3():   
    parameter3 = request.get_json(force=True)
    return3 = parameter3['return3']
    response3 = {
        'reference3': 'Hello, ' + return3 + '!'
    }
    return jsonify(response3)

def evaluation4():    
    parameter4 = request.get_json(force=True)
    return4 = parameter4['return4']
    response4 = {
        'reference4': 'Hello, ' + return4 + '!'
    }
    return jsonify(response4)

def evaluation5():
    parameter5 = request.get_json(force=True)
    return5 = parameter5['return5']
    response5 = {
        'reference5': 'Hello, ' + return5 + '!'
    }
    return jsonify(response5)

def evaluation6():    
    parameter6 = request.get_json(force=True)
    return6 = parameter6['return6']
    response6 = {
        'reference6': 'Hello, ' + return6 + '!'
    }
    return jsonify(response6)

def evaluation7():    
    parameter7 = request.get_json(force=True)
    return7 = parameter7['return7']
    response7 = {
        'reference7': 'Hello, ' + return7 + '!'
    }
    return jsonify(response7)

def evaluation8():    
    parameter8 = request.get_json(force=True)
    return8 = parameter8['return8']
    response8 = {
        'reference8': 'Hello, ' + return8 + '!'
    }
    return jsonify(response8)

eval.html 文件如下

<!DOCTYPE html>
<html>
<head>
    <title>Good Hybrid Funds</title>
    <style>
        *{
            font-size:30px;
        }
    </style>
</head>
<body>
    <input id="expense" type="text"/>
    <button id="expense-button">Submit Expense Ratio</button>
    <p id="reference1"></p>

    <input id="sharpe" type="text"/>
    <button id="sharpe-button">Submit Sharpe Ratio</button>
    <p id="reference2"></p>

    <input id="sortino" type="text"/>
    <button id="sortino-button">Submit Sortino Ratio</button>
    <p id="reference3"></p>

    <input id="alpha" type="text"/>
    <button id="alpha-button">Submit Alpha Value</button>
    <p id="reference4"></p>

    <input id="beta" type="text"/>
    <button id="beta-button">Submit Beta Value</button>
    <p id="reference5"></p>

    <input id="stddev" type="text"/>
    <button id="stddev-button">Submit Standard Deviation</button>
    <p id="reference6"></p>

    <input id="rsquared" type="text"/>
    <button id="rsquared-button">Submit R Squared Value</button>
    <p id="reference7"></p>

    <input id="netreturns" type="text"/>
    <button id="netreturns-button">Submit Net Returns</button>
    <p id="reference8"></p>


    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $("#expense-button").click(function(event){
            let parameter1 = {
                return1: $("#expense").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter1), function(response1){
                $("#reference1").text(response1.reference1);
                console.log(response1);
            });
        });

        $("#sharpe-button").click(function(event){
            let parameter2 = {
                return2: $("#sharpe").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter2), function(response2){
                $("#reference2").text(response2.reference2);
                console.log(response2);
            });
        });

        $("#sortino-button").click(function(event){
            let parameter3 = {
                return3: $("#sortino").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter3), function(response3){
                $("#reference3").text(response3.reference3);
                console.log(response3);
            });
        });

        $("#alpha-button").click(function(event){
            let parameter4 = {
                return4: $("#alpha").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter4), function(response4){
                $("#reference4").text(response4.reference4);
                console.log(response4);
            });
        });

        $("#beta-button").click(function(event){
            let parameter5 = {
                return5: $("#beta").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter5), function(response5){
                $("#reference5").text(response5.reference5);
                console.log(response5);
            });
        });

        $("#stddev-button").click(function(event){
            let parameter6 = {
                return6: $("#stddev").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter6), function(response6){
                $("#reference6").text(response6.reference6);
                console.log(response6);
            });
        });

        $("#rsquared-button").click(function(event){
            let parameter7 = {
                return7: $("#rsquared").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter7), function(response7){
                $("#reference7").text(response7.reference7);
                console.log(response7);
            });
        });

        $("#netreturns-button").click(function(event){
            let parameter8 = {
                return8: $("#netreturns").val()
            }
            $.post("http://127.0.0.1:5000/evaluation", JSON.stringify(parameter8), function(response8){
                $("#reference8").text(response8.reference8);
                console.log(response8);
            });
        });
    </script>
</body>
</html>

enter image description here

【问题讨论】：

嗨维尼塔库玛丽。不清楚“发送第一个值”和“发送第二个值”是什么意思。另外，请不要在没有发布实际错误（及其堆栈跟踪）的情况下说“有错误”。
这里的浏览器是向服务器发送数值的客户端（python代码）。然后服务器应该返回一个响应“你好，那个值！” .输出和错误的屏幕截图也不可见吗？如果不是，我会调查一下。

标签： python html flask web-applications anaconda

【解决方案1】：

你需要为你想调用的每一个方法定义一个自己独特的路由。

您的烧瓶代码需要如下所示：

@app.route('/evaluation1', methods=['POST'])
def evaluation1():
    parameter1 = request.get_json(force=True)
    return1 = parameter1['return1']
    response1 = {
        'reference1': 'Hello, ' + return1 + '!'
    }
    return jsonify(response1)

@app.route('/evaluation2', methods=['POST'])
def evaluation2():
    parameter2 = request.get_json(force=True)
    return2 = parameter2['return2']
    response2 = {
        'reference2': 'Hello, ' + return2 + '!'
    }
    return jsonify(response2)


@app.route('/evaluation3', methods=['POST'])
...
...

因此需要为要调用的方法调用具体的链接（flasks route）：

    $("#expense-button").click(function(event){
        let parameter1 = {
            return1: $("#expense").val()
        }
        $.post("http://127.0.0.1:5000/evaluation1", JSON.stringify(parameter1), function(response1){
            $("#reference1").text(response1.reference1);
            console.log(response1);
        });
    });

    $("#sharpe-button").click(function(event){
        let parameter2 = {
            return2: $("#sharpe").val()
        }
        $.post("http://127.0.0.1:5000/evaluation2", JSON.stringify(parameter2), function(response2){
            $("#reference2").text(response2.reference2);
            console.log(response2);
        });
    });

【讨论】：

你好，我怎样才能根据一些条件返回 response1、response2、... i> 费用比率是从浏览器发送的值之一，例如 return1、return2、...
几乎就像你说的：if expense ratio > 0.75: return jsonify("good") else: return jsonify("bad")。如果要双向发送多个参数，可以将它们作为字典发送并像 python dict 一样访问它们。