[PYTHON] Erstellt eine Web-App, die IT-Ereignisinformationen mit Vue und Flask abbildet

Einführung

Beim Surfen im Internet habe ich erfahren, dass connpass on the IT event portal site eine Web-API verteilt, die Ereignisinformationen bereitstellt und den Veranstaltungsort usw. auf der Karte anzeigt. Ich dachte, es wäre praktisch, wenn es eine App gäbe, und beendete sie, indem ich die ersten drei Tage des Jahres opferte.

Ergebnisse

Signpost for connpass GitHub スクリーンショット 2020-01-07 21.57.23.png

Es handelt sich um eine sogenannte SPA-Anwendung, die die durch asynchrone Kommunikation erhaltene Antwort dynamisch abbildet.

Framework-Bibliothek und Gründe für die Auswahl

Flasche: Siehe unten --Vue.js (Vue CLI): Weil ich studiere, ist es besser als Reagieren --Mapbox GL JS (+ VueMapbox): Hervorhebung der Betriebsleistung zur Anzeige einer Vielzahl von Funktionen --BootstrapVue: Gott --OpenStreetMap: Weil die Gebäudenamen leichter zu sehen sind als die Grundkarte des National Land Research Institute.

Verschiedene Punkte

CORS-Grenze

CORS steht für Cross-Origin Resource Sharing. Es ist leicht zu verstehen: "Bringen Sie keine Daten von der Website eines anderen ohne Erlaubnis durch asynchrone Kommunikation." In diesem Fall kann die Antwort der Connpass-API aufgrund von CORS-Einschränkungen nicht auf der Vorderseite abgerufen werden. Sobald Sie es auf Ihrem eigenen Server erhalten haben, werden Sie nicht mehr vom CORS-Limit betroffen sein. Zuerst dachte ich über die Verwendung von Firebase-Hosting und -Funktion nach, entschied mich jedoch dafür, mit Flask einen Server zu erstellen, der auf die Connpass-API zugreift und die Antwort empfängt. Flask ist sehr einfach, daher denke ich, dass es am besten ist, wenn Sie einen Server benötigen, da diesmal alles in Ordnung ist, und ich persönlich mag es, also habe ich es übernommen.

Flask and Vue.js Umgebungskonstruktion

Ich denke, Vue.js wird oft in Kombination mit node.js verwendet. Als Ergebnis verschiedener Untersuchungen haben wir eine Konfiguration entwickelt, die in Koexistenz mit Flask entwickelt werden kann. スクリーンショット 2020-01-07 21.51.25.png

Python-Skripte und Heroku-Serverdateien werden im Stammverzeichnis abgelegt, und die Vorderseite wird im vue-Verzeichnis gespeichert. Wenn Sie die folgenden Einstellungen vornehmen, verweist Flask auf vue / dist als Vorlagenordner.


from flask import Flask, render_template, request, jsonify, make_response, send_file, redirect, url_for

app = Flask(__name__, static_folder='./vue/dist/static', template_folder='./vue/dist')


#Unter Routing ...

Erstellen eines API-Servers

Ich habe einen API-Server erstellt, der gemäß connpass API-Spezifikationen zugreift und die erhaltene Antwort wie folgt an die Front zurückgibt.

import urllib.request, urllib.parse
import json
@app.route('/api/')
def getApi():
    keyword_or = request.args.get('keyword_or')
    ym = request.args.get('ym')
    ymd = request.args.get('ymd')
    owner_nickname = request.args.get('owner_nickname')
    start = request.args.get('start')
    order = request.args.get('order')
    count = request.args.get('count')
    all_params = {
        "keyword_or": keyword_or,
        "ym":ym,
        "ymd":ymd,
        "owner_nickname":owner_nickname,
        "start":start,
        "order":order,
        "count":100
    }

    params = {}
    #Entfernen Sie Elemente mit dem Wert None aus den Parametern
    for key in all_params:
        if all_params[key] != None:
            params[key] = all_params[key]


    p = urllib.parse.urlencode(params)
    url = "https://connpass.com/api/v1/event/?" + p

    with urllib.request.urlopen(url) as res:
        html = res.read().decode().replace(r"\n","")
        jsonData = json.loads(html)
        return jsonify(jsonData)

Es empfängt dieselben Parameter wie die connpassAPI, wirft sie unverändert an die connpassAPI, dekodiert die Antwort und gibt sie als json zurück. Es ist ein vollständiger Relay-Server.

Referenzseite

Erstellen einer einfachen App mit Vue.js (vue-cli) und Flask [Seite des zweiten Halbservers] BootstrapVue VueMapbox