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

Question

我正在处理别人的代码。我需要调试和解决问题。我有很好的后端经验，但前端知识为零。我相信他的代码是全栈代码，包括使用烧瓶实现的前端和后端微服务。我需要将他的前端代码与后端代码连接起来。后端工作正常。我已经验证过了。但是，不确定他连接后端并在 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为'#div_result'的元素中删除类'alert-success'。如果请求不成功，则相反。

然后它使 id '#div_result' 的元素可见。

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

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

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