Как мне подключить свои бэкенд flask микро сервисы с моим кодом flask?

Question

Я работаю над чужим кодом. Мне нужно отладить и решить проблему. У меня довольно хороший опыт работы с бэкэндом, но я ничего не знаю о фронтэнде. Я полагаю, что его код является полным стековым кодом, который включает в себя внешние и внутренние микроуслуги, реализованные с использованием flask. Мне нужно соединить его код переднего конца с одним. бэкэнд работает нормально. Я уже проверил. Однако не уверен, что не так в его коде, который связывает бэкэнд и отражает вывод в веб-браузере. Ниже его код:

#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

Всякий раз, когда нажимается элемент HTML с идентификатором '#submit_snap_button', этот фрагмент кода 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' и удаляет класс 'alert-success' из элемента с идентификатором '#div_result'. Если запрос не успешен, он делает противоположное.

Затем он делает видимым элемент с идентификатором '#div_result'.

Затем он изменяет атрибут '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)