Applikations Interface

In diesem Frontend Anwendung wird die deinsportplatz-api verwendet als Schnittstelle zwischen der MySQL-Datenbank und dem Frontend- Clientenseitig. Innerhalb dieser Anwendung werden zum großen Teil die SQLAlchemy Models aus der API verwendet. Diese findet man unter dem Package models Registert werden diese in der app.py Datei diese geschient folgend in der Methode.

python

from flask import Flask
from flask_restless import APIManager
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
db = SQLAlchemy()

def create_restless_api():
    with app.app_context():
        manager = APIManager(app, flask_sqlalchemy_db=db)
        manager.create_api(User, url_prefix='/api/v2.0/model', methods=['GET', 'PUT', 'POST', 'DELETE'],
                           allow_delete_many=True)
        ...

from flask import Flask
from flask_restless import APIManager
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
db = SQLAlchemy()

def create_restless_api():
    with app.app_context():
        manager = APIManager(app, flask_sqlalchemy_db=db)
        manager.create_api(User, url_prefix='/api/v2.0/model', methods=['GET', 'PUT', 'POST', 'DELETE'],
                           allow_delete_many=True)
        ...

Verwaltet wird das Interface über einen Jenkins, welcher aktuell hier läuft http://images.deinsportplatz.de:8080 In der Produktion befinden sich die Instanzen torgranate 1-3 und dsp1.

Hier folgend ein Beispiel Abfrage zum Löschen eines Spiels und was in der Vue Anwendung und dann API Seitig passiert. Wir nutzen als Beispiel "Freundschaftsspiele". Sobald der User auf Löschen klickt passiert folgendes.

let deleteMatch = (match: any) => {
  console.log("delete match", match);
  store.deleteMatch(match.id).then(() => {
    retrieveData(page.value);
  });
};

let deleteMatch = (match: any) => {
  console.log("delete match", match);
  store.deleteMatch(match.id).then(() => {
    retrieveData(page.value);
  });
};

Im Pinia store die Methode deleteMatch

async deleteMatch(matchId: number) {
    const apiUrl = `${this.apiUrlV10}${this.publisherId}/match/delete/${matchId}`;
    const config = {
    headers: {
        "Content-Type": "application/json",
    },
    auth: this.auth,
    };
    return axios
    .delete(apiUrl, config)
    .then((res) => {
        return res.data;
    })
    .catch((err) => {
        console.log(err.message);
        return [];
    });
},

async deleteMatch(matchId: number) {
    const apiUrl = `${this.apiUrlV10}${this.publisherId}/match/delete/${matchId}`;
    const config = {
    headers: {
        "Content-Type": "application/json",
    },
    auth: this.auth,
    };
    return axios
    .delete(apiUrl, config)
    .then((res) => {
        return res.data;
    })
    .catch((err) => {
        console.log(err.message);
        return [];
    });
},

Sprich die Anfrage an die API ist folgenden -> https://api.deinsportplatz.de/api/v1.0/$publisherId/match/delete/$matchId Dann geschieht innerhalb der Flask Anwendung das hier in der Datei backend_widget.py

python

@backend_widget_pages.route("/match/delete/<int:match_id>", methods=["POST", "DELETE"])
def delete_match(match_id):
    match = Match.query.get_or_404(match_id)
    goals = Goal.query.filter_by(fkMatch=match_id).all()
    cards = Card.query.filter_by(fkMatch=match_id).all()
    lineups = Lineup.query.filter_by(fkMatch=match_id).all()
    push_notifications = PushNotification.query.filter_by(fkMatch=match_id).all()
    liveticker = LiveTicker.query.filter_by(fkMatch=match_id).first()
    # delete
    for goal in goals:
        db.session.delete(goal)
        db.session.commit()
    for card in cards:
        db.session.delete(card)
        db.session.commit()
    for lineup in lineups:
        db.session.delete(lineup)
        db.session.commit()
    if liveticker:
        db.session.delete(liveticker)
        db.session.commit()
    if push_notifications:
        for push_notification in push_notifications:
            db.session.delete(push_notification)
            db.session.commit()
    db.session.delete(match)
    db.session.commit()
    return jsonify({"status": "success"})

... andere Endpunkte

@backend_widget_pages.route("/match/delete/<int:match_id>", methods=["POST", "DELETE"])
def delete_match(match_id):
    match = Match.query.get_or_404(match_id)
    goals = Goal.query.filter_by(fkMatch=match_id).all()
    cards = Card.query.filter_by(fkMatch=match_id).all()
    lineups = Lineup.query.filter_by(fkMatch=match_id).all()
    push_notifications = PushNotification.query.filter_by(fkMatch=match_id).all()
    liveticker = LiveTicker.query.filter_by(fkMatch=match_id).first()
    # delete
    for goal in goals:
        db.session.delete(goal)
        db.session.commit()
    for card in cards:
        db.session.delete(card)
        db.session.commit()
    for lineup in lineups:
        db.session.delete(lineup)
        db.session.commit()
    if liveticker:
        db.session.delete(liveticker)
        db.session.commit()
    if push_notifications:
        for push_notification in push_notifications:
            db.session.delete(push_notification)
            db.session.commit()
    db.session.delete(match)
    db.session.commit()
    return jsonify({"status": "success"})

... andere Endpunkte

Innerhalb dieser Datei (backend_widget.py) befinden sich fast alle extra Endpunkte welche in dem Backend verwendet werden.

Applikations Interface ​

Applikations Interface