Vor kurzem war ich arbeitslos und habe viel Zeit, also habe ich beschlossen, so etwas zu machen.

herunterladen

BBS-SPA Es ist hier → https://github.com/syousei/bbs-spa

Charakteristisch

BBS-SPA ist ein Beispiel für SPA (Single Page Application). Angular2 + Bootstrap wird auf der Clientseite und App Engine / Python + webapp2 auf der Serverseite verwendet.

Funktion

Benutzerregistrierung / -authentifizierung (Anmelden / Abmelden) * Die JWT-Authentifizierung (JSON Web Token) wird übernommen
Ein Thema posten
Kommentare zu Themen

installieren

Annahme

Bitte richten Sie zuerst Folgendes ein.

Python 2.7
Google Cloud SDK / Python
Node.js und npm
Angular CLI
- npm install -g @angular/cli

Wenn Sie an diesem Artikel interessiert sind, denke ich, dass dieser Bereich größtenteils erledigt ist.

BBS-SPA-Setup

Extrahieren Sie das von oben heruntergeladene BBS-SPA in einen geeigneten Arbeitsordner. Dann sehen Sie zwei Ordner, "bbs-spa-client" und "bbs-spa-server".

Wie Sie sich vorstellen können, hat bbs-spa-client clientseitige Dateien, die mit Angular2 + Bootstrap erstellt wurden, und bbs-spa-server hat serverseitige (API), die mit App Engine / Python + webapp2 erstellt wurden. ) Dateien werden jeweils gespeichert.

Öffnen Sie nun ein Terminal (Eingabeaufforderung), gehen Sie zu bbs-spa-client und führen Sie den Befehl npm start aus. Wenn die folgende Meldung angezeigt wird, liegt kein Problem vor.

キャプチャ1.PNG

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **

(Kürzung)

webpack: Compiled successfully.

Öffnen Sie dann die Google Cloud SDK-Shell, gehen Sie zu "bbs-spa-server" und führen Sie den Befehl "dev_appserver.py app.yaml" aus. Wenn die folgende Meldung angezeigt wird, liegt kein Problem vor.

キャプチャ2.PNG

Starting module "default" running at: http://localhost:8080
admin_server.py:116] Starting admin server at: http://localhost:8000

Installation von Pytz und Pyjwt

Erstellen Sie einen Ordner namens "lib" direkt unter "bbs-spa-server" und installieren Sie "pytz" und "pyjwt".

Wenn Sie sich nicht sicher sind, laden Sie sie einfach von den folgenden URLs herunter, entpacken Sie sie und werfen Sie die Ordner "pytz" und "pyjwt" in "bbs-spa-server / lib".

pytz: https://pypi.python.org/pypi/pytz
pyjwt: https://pypi.python.org/pypi/PyJWT

Damit ist die Einrichtung abgeschlossen.

Öffnen wir "http: // localhost: 4200" in Ihrem Browser. Ich denke, dass Sie das Bulletin Board mit Mitgliedschaftsregistrierungssystem verwenden können.

Wenn Sie die registrierten Benutzerinformationen oder veröffentlichten Inhalte bearbeiten oder löschen möchten, wird die App Engine-Verwaltungskonsole (lokale Version) unter "http: // localhost: 8000" geöffnet.

Über den Betrieb

Ursprünglich befinden sich das serverseitige Skript und das Client-Skript auf demselben Host. Da jedoch der Angular 2-Entwicklungsserver und der App Engine-Entwicklungsserver separat gestartet werden müssen, um lokal ausgeführt zu werden, werden sie in separaten Ordnern gespeichert. Ich werde.

Wenn Sie tatsächlich für App Engine bereitstellen möchten, legen Sie das Erstellungsziel von "bbs-spa-client" auf den Ordner in "bbs-spa-server" fest, in dem statische Dateien gespeichert sind (z. B. / static_files / dist). Ich muss es geben.

Wir hoffen, dass Sie dies verstehen und zum Lernen nutzen. Bitte kommentieren Sie, wenn Sie Fragen haben.

Da ich Angular2 und TypeScript fast zum ersten Mal verwendet habe, denke ich, dass es verschiedene unangenehme Punkte gibt. Wenn Sie Fragen haben, wäre ich Ihnen sehr dankbar, wenn Sie mir in den Kommentaren Ratschläge geben könnten.

das ist alles.

SPA-Lernbeispiel (Angular2 + Bootstrap / App Engine / Python + Webapp2)