烧瓶如何使html页面显示出来?

时间:2019-06-19 20:50:06

标签: python html flask

好的,我只需要阅读一些内容即可。我不希望有人再回答。感谢所有努力回覆的人。

我已按照以下指南创建了一个简单的python应用程序:https://guillaumegenthial.github.io/serving.html

编辑: 好的,回顾一下,在问这个问题之前,我应该读更多的东西。让我尝试改写我想做的事情。

我正在尝试访问下面定义的html页面。在那里,我想在文本框中输入文本,然后在flask中定义的api函数中处理该文本。然后,我想在html页面中输出结果。 我试图找到更多关于此的资源,但是我是html和flask的新手,并且正在挣扎。 任何提示都将适用。

我的app.py文件:

from flask import Flask, request, jsonify
from flask_cors import CORS
from serve import get_model_api

app2 = Flask(__name__)
CORS(app2) # needed for cross-domain requests, allow everything by default
model_api = get_model_api()

# default route
@app2.route('/')
def index():
    return "Index API"

# HTTP Errors handlers
@app2.errorhandler(404)
def url_error(e):
    return """
    Wrong URL!
    <pre>{}</pre>""".format(e), 404

@app2.errorhandler(500)
def server_error(e):
    return """
    An internal error occurred: <pre>{}</pre>
    See logs for full stacktrace.
    """.format(e), 500

# API route
@app2.route('/api', methods=['POST'])
def api():
    input_data = request.json
    output_data = model_api(input_data)
    response = jsonify(output_data)
    return response

if __name__ == '__main__':
    app2.run(host='0.0.0.0', port=81, debug=True)

html文件:                                

<body>
    <div class="container col-lg-6">
        <div style="padding-bottom: 0.5cm">
            <div class="card text-center bg-light">
                <div class="card-body" style="padding-bottom: 0.2cm">
                    <input class="card-title form-control" type="text" id="input" name="input" placeholder="Input sentence"/>
                    <button class="card-text btn btn-outline-primary" id="btn">Find Entities</button>
                    <button class="card-text btn btn-outline-primary" id="btn2">Get random Tweet</button>
                    <div class="spinner" id="spinner" style="display: none">
                      <div class="double-bounce1"></div>
                      <div class="double-bounce2"></div>
                    </div>
                </div>
                <div class="card-footer bg-white">
                    <pre class="card-text api-pre" style="padding-bottom: 0.2cm">
                        <div class="item" id="api_input">Nur der HSV </div>
                        <div class="item" id="api_output">0 0   B-ORG</div>
                    </pre>
                </div>
            </div>
        </div>
    </div>
</body>


<script type="text/javascript">
    function api_call(input) {
        // hide button and make the spinner appear
        $('#btn').toggle();
        $('#spinner').toggle();

        $.ajax({
            url: "0.0.0.0:81/api",
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(input),

            success: function( data, textStatus, jQxhr ){
                // toggle the spinner and button
                $('#btn').toggle();
                $('#spinner').toggle();

                // fill the html for answer
                $('#api_input').html( data.input );
                $('#api_output').html( data.output );

                $("#input").val("");
            },
            error: function( jqXhr, textStatus, errorThrown ){
                $('#btn').toggle();
                $('#spinner').toggle();

                $('#api_input').html( "Sorry, the server is asleep..." );
                $('#api_output').html( "Try again in a moment!" );

                console.log( errorThrown );
            },
            timeout: 3000 // sets timeout to 10 seconds
        });

    }

    $( document ).ready(function() {
        // request when clicking on the button
        $('#btn').click(function() {
            // get the input data
            var input = $("#input").val();
            api_call(input);
            input = "";
    });
    });

</script>

1 个答案:

答案 0 :(得分:2)

通过添加/api,您仅发出GET请求,这就是定义的全部内容:

@app2.route('/api', methods=['POST'])
def api():
    input_data = request.json
    output_data = model_api(input_data)
    response = jsonify(output_data)
    return response

如果您希望信息可用于测试,则可以像这样添加GET方法:

@app2.route('/api', methods=['GET', 'POST'])

但是,我认为您可能想阅读HTML请求方法,以了解哪种类型最适合您的终结点计算机。

我猜该教程信息在期望​​api的POST,这很常见。可以在大多数命令行中使用curl来完成POST请求的简单示例:

curl -X POST MYIP/api -d "{ \"myKey\": \"myValue\"}"

这应该返回api方法给出的任何响应。