使用python作为后端和html作为前端的Web应用程序_Python_Html_Flask_Web Applications_Anaconda

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

python html flask web-applications anaconda

使用python作为后端和html作为前端的Web应用程序,python,html,flask,web-applications,anaconda,Python,Html,Flask,Web Applications,Anaconda,我正在尝试使用python（flask）作为后端，html作为前端创建一个web应用程序。因此，当我在输入框中键入一个值并点击submit按钮时，它应该从浏览器将该数据发送到服务器（使用flask的python代码），并且应该返回一个类似“hello，that value！”的响应。当我发送第一个值时，它可以正常工作，但当我发送第二个值时，不会发生这种情况。它在anaconda提示符中显示错误。（我使用的是Windows10.python文件名：good.py，html文件名：eval.html

我正在尝试使用python（flask）作为后端，html作为前端创建一个web应用程序。因此，当我在输入框中键入一个值并点击submit按钮时，它应该从浏览器将该数据发送到服务器（使用flask的python代码），并且应该返回一个类似“hello，that value！”的响应。当我发送第一个值时，它可以正常工作，但当我发送第二个值时，不会发生这种情况。它在anaconda提示符中显示错误。（我使用的是Windows10.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)

<!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>

下面的eval.html文件

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)

<!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>


好的混合基金
*{
字体大小：30px；
}
提交费用比率

提交夏普比率

提交索蒂诺比率

提交Alpha值

提交测试值

提交标准差

提交R平方值

提交净回报

$（“#费用按钮”）。单击（功能（事件）{
设参数1={
返回1:$（“#费用”）.val（）
}
$.post（”http://127.0.0.1:5000/evaluation，JSON.stringify（参数1），函数（响应1）{
$（“#参考1”）.text（响应1.reference1）；
控制台日志（response1）；
});
});
$（“#夏普按钮”）。单击（函数（事件）{
设参数2={
return2:$（“#sharpe”）.val（）
}
$.post（”http://127.0.0.1:5000/evaluation，JSON.stringify（参数2），函数（响应2）{
$（“#参考2”）.text（response2.reference2）；
console.log（response2）；
});
});
$（“#sortino按钮”）。单击（函数（事件）{
设参数3={
return3:$（“#sortino”）.val（）
}
$.post（”http://127.0.0.1:5000/evaluation，JSON.stringify（参数3），函数（响应3）{
$（“#参考3”）。文本（响应3.参考3）；
console.log（response3）；
});
});
$（“#alpha按钮”）。单击（函数（事件）{
设参数4={
return4:$（“#alpha”）.val（）
}
$.post（”http://127.0.0.1:5000/evaluation，JSON.stringify（参数4），函数（响应4）{
$（“#参考4”）。文本（响应4.参考4）；
控制台日志（response4）；
});
});
$（“#测试按钮”）。单击（功能（事件）{
设参数5={
return5:$（“#beta”）.val（）
}
$.post（”http://127.0.0.1:5000/evaluation，JSON.stringify（参数5），函数（响应5）{
$（“#参考5”）。文本（响应5.参考5）；
控制台日志（响应5）；
});
});
$（“#stddev按钮”）。单击（函数（事件）{
设参数6={
return6:$（“#stddev”）.val（）
}
$.post（”http://127.0.0.1:5000/evaluation，JSON.stringify（参数6），函数（响应6）{
$（“#参考6”）。文本（响应6.参考6）；
控制台日志（response6）；
});
});
$（“#rsquared按钮”）。单击（函数（事件）{
设参数7={
return7:$（“#rsquared”）.val（）
}
$.post（”http://127.0.0.1:5000/evaluation，JSON.stringify（参数7），函数（响应7）{
$（“#参考7”）.text（响应7.reference7）；
控制台日志（响应7）；
});
});
$（“#netreturns按钮”）。单击（函数（事件）{
设参数8={
return8:$（“#netreturns”）.val（）
}
$.post（”http://127.0.0.1:5000/evaluation，JSON.stringify（参数8），函数（响应8）{
$（#reference8”）.text（response8.reference8）；
控制台日志（响应8）；
});
});

您需要为每个要调用的方法定义自己的唯一路由

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

@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'])
...
...

因此，您需要为要调用的方法调用特定链接（烧瓶路径）：

    $("#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);
        });
    });

您需要为要调用的每个方法定义自己的唯一路由

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

@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'])
...
...

因此，您需要为要调用的方法调用特定链接（烧瓶路径）：

    $("#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);
        });
    });

嗨，维尼塔·库马里。不清楚“发送第一个值”和“发送第二个值”是什么意思。此外，如果没有发布实际错误（及其stacktrace），请不要说“有错误”。这里的浏览器是向服务器发送数值的客户端（python代码）。然后服务器应该发送一个响应“hello，该值！”。输出和错误的屏幕截图难道不可见吗？如果不是的话，我会调查的。不清楚“发送第一个值”和“发送第二个值”是什么意思。此外，如果没有发布实际错误（及其stacktrace），请不要说“有错误”。这里的浏览器是向服务器发送数值的客户端（python代码）。然后服务器应该发送一个响应“hello，该值！”。输出和错误的屏幕截图难道不可见吗？如果不是，我将对此进行调查。您好，我如何返回response1，response2。。。因此，基于某些条件，如if expense ratio>0.75:return“good”或“bad”expense ratio是从浏览器（如return1、return2等）发送的值之一。几乎如您所说：

if expense ratio>0.75:return jsonify（“good”）或：return jsonify（“bad”）

。如果要在两个方向上发送多个参数，可以将它们作为字典发送