Question

我正在研究别人的代码。我需要调试并解决问题。我在后端方面有相当不错的经验，但是对前端的知识却为零。我相信他的代码是完整的堆栈代码，其中包括使用flask实现的前端和后端微服务。我需要将他的前端代码与后端代码连接起来。后端工作正常。我已经核实了。但是，不确定他的连接后端并在Web浏览器中反映输出的代码有什么问题。下面是他的代码：

#backend flask (works totally fine)-
from flask import Flask
import os, sys
from drivers.snapshot.snapshot_service import SnapshotService
from drivers.comparison.comparison_service import ComparisonService
import json

os.environ['JSNAPY_HOME'] = sys.path[0]

app = Flask(__name__)
@app.after_request
def after_request(response):
  response.headers.add('Access-Control-Allow-Origin', '*')
  response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
  response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
  return response


@app.route("/")
def hello():
    return "Initiate App!"


@app.route('/snapshot/<hostname>')
def snapshot(hostname):
    return SnapshotService().snapshot(hostname)
    
#frontend flask
from flask import Flask, render_template, redirect

app = Flask(__name__)

@app.after_request
def after_request(response):
  response.headers.add('Access-Control-Allow-Origin', '*')
  response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
  response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
  return response

@app.route('/')
def index():
    return redirect('/snapshot/')

@app.route('/snapshot/')
def view_snap():
    return render_template('snap.html')

{% extends 'base.html' %}
{% block content %}
<div class="row">

    <div class="col-sm-6 col-sm-offset-3">
        <!-- general form elements -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">Snapshot</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form role="form">
                <div class="box-body">
                    <div class="form-group">
                        <input type="text" class="form-control" id="hostname" value="ASBNVAEG1CW" placeholder="Hostname/IP">
                    </div>

                    <button type="submit" id="submit_snap_button" class="btn btn-primary btn-block"><i class="fa fa-camera"></i> Snap</button>
                </div>
            </form>
            <div id="div_result" class="alert alert-success" style="display: none;">
                <div id="div_result_msg" class="text-center"></div>
            </div>
        </div>
        <!-- /.box -->
    </div>
</div>

{% endblock %}

{% block page_javascript %}
<script>
$(document).ready(function() {
    $('#submit_snap_button').click(function(e) {
        $('#submit_snap_button').html('<i class="fa fa-refresh fa-spin"></i>');
        $('#submit_snap_button').attr("disabled", true);
        $('#div_result').hide();
        $.getJSON("http://molab-backend:5000/snapshot/" + $('#hostname').val(), function(data) {
            $('#div_result_msg').html(data.message);
            if (data.success === 0) {
                $('#div_result').addClass('alert-danger').removeClass('alert-success')
            }
            else {
                $('#div_result').addClass('alert-success').removeClass('alert-danger')
            }

            $('#div_result').show();
            $('#submit_snap_button').attr("disabled", false);
            $('#submit_snap_button').html('<i class="fa fa-camera"></i> Snap');

        }, function() {

        }, 'json');
        e.preventDefault();
    });

})
</script>
{% endblock %}

Answer 1

每当单击ID为'#submit_snap_button'的HTML元素时，此jquery代码段都会向您的“快照”路径发出请求：

$.getJSON("http://molab-backend:5000/snapshot/" + $('#hostname').val(), function(data) {
        $('#div_result_msg').html(data.message);
        if (data.success === 0) {
            $('#div_result').addClass('alert-danger').removeClass('alert-success')
        }
        else {
            $('#div_result').addClass('alert-success').removeClass('alert-danger')
        }

        $('#div_result').show();
        $('#submit_snap_button').attr("disabled", false);
        $('#submit_snap_button').html('<i class="fa fa-camera"></i> Snap');
}

如果请求成功，它将添加类'alert-danger'，并从ID为'alert-success'的元素中删除类'#div_result'。如果请求失败，则执行相反的操作。

然后使ID为'#div_result'的元素可见。

然后，将ID为'disabled'的元素的属性'#submit_snap_button'更改为false，将HTML更改为'<i class="fa fa-camera"></i> Snap'

您的路线应返回一个供前端访问的json文件。

@app.route('/snapshot/<hostname>')
def snapshot(hostname):
        return SnapshotService().snapshot(hostname)

如何将后端烧瓶微服务与前端烧瓶代码连接起来？

1 个答案: