Advertisement
  1. Code
  2. Angular

Erstellen einer AngularJS-App mit Python EVE: Teil 2

by
Read Time:12 minsLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Im vorherigen Teil dieser Serie haben wir den Anmelde- und Anmeldevorgang mithilfe der Eve-API implementiert, die wir im ersten Teil der Serie erstellt haben. Wir haben Node.js und AngularJS verwendet, um unsere App zu erstellen und zum Laufen zu bringen.

In diesem Tutorial bringen wir unsere App-Entwicklung auf die nächste Stufe, indem wir die APIs Add, Edit und Delete verwenden, um Elemente auf der Benutzerhomepage zu erstellen.

Loslegen

Klonen Sie zunächst den Quellcode des vorherigen Tutorials von GitHub.

Navigieren Sie anschließend zu AngularEveApp_Part1 und installieren Sie die Abhängigkeiten.

Stellen Sie sicher, dass die Python Eve REST-APIs ausgeführt werden. Starten Sie den App-Server.

Zeigen Sie mit Ihrem Browser auf http://localhost:3000, und die Anwendung sollte ausgeführt werden.

User Home erstellen

Nachdem sich der Benutzer erfolgreich angemeldet hat, wird der Benutzer zur Startseite weitergeleitet. Beginnen wir also mit der Erstellung von userHome.html. Navigieren Sie zum public-Ordner und erstellen Sie einen neuen Ordner mit dem Namen userHome. Erstellen Sie in userHome Dateien mit den Namen userHome.html und userHome.js. Öffnen Sie userHome.html und fügen Sie den folgenden HTML-Code hinzu:

In userHome.js definieren Sie das Modul userHome sowie dessen Vorlage und Controller. Öffnen Sie also userHome.js und fügen Sie den folgenden Code hinzu:

Fügen Sie auf der Seite index.html einen Verweis auf userHome.js hinzu.

Injizieren Sie das Modul userHome in die App myApp in index.js.

In der signIn-Funktion in signin.js wird beim erfolgreichen Rückruf der $http-Anforderung zur Ansicht /userHome umgeleitet.

Speichern Sie die obigen Änderungen und starten Sie den Knotenserver neu. Zeigen Sie mit Ihrem Browser auf http://localhost:3000 und melden Sie sich mit einem gültigen Benutzernamen und Passwort an. Nach erfolgreicher Anmeldung sollten Sie in der Lage sein, die Benutzerstartseite mit der Standardansicht anzuzeigen.

User Home Page with Default ViewUser Home Page with Default ViewUser Home Page with Default View

Erstellen einer Seite zum Hinzufügen der Aufgaben

Fügen wir eine Ansicht hinzu, damit der Benutzer Elemente hinzufügen kann. Navigieren Sie zum public-Ordner und erstellen Sie einen Ordner mit dem Namen addItem. Erstellen Sie im Ordner addItem zwei Dateien mit den Namen addItem.html und addItem.js. Öffnen Sie addItem.html und fügen Sie den folgenden HTML-Code hinzu:

Öffnen Sie als Nächstes addItem.js und fügen Sie den folgenden Code hinzu, um die Route, die Vorlage und den Controller zu definieren.

Öffnen Sie userHome.html und ändern Sie den Link href hinzufügen, um auf die richtige Route zu verweisen.

Fügen Sie in index.html einen Verweis auf addItem.js hinzu.

Fügen Sie das Modul addItem in die myApp in index.js ein.

Speichern Sie die folgenden Änderungen und starten Sie den Knotenserver neu. Wenn Sie sich angemeldet haben, klicken Sie auf den Link Hinzufügen. Die Seite zum Hinzufügen von Elementen sollte angezeigt werden.

Add PageAdd PageAdd Page

Hinzufügen der Elemente mithilfe der Eve-API

Zum Hinzufügen von Elementen benötigen wir die base64 authdata. Bei erfolgreicher Anmeldung behalten wir den Benutzernamen und die Authentifizierungsdaten in einem AngularJS-Dienst. Navigieren Sie zum public-Ordner und erstellen Sie einen Ordner mit dem Namen service. Erstellen Sie im service-Ordner eine Datei mit dem Namen service.js. Erstellen wir ein neues Servicemodul namens myAppService.

Fügen Sie dem myAppService-Modul einen neuen Dienst hinzu.

Innerhalb des CommonProp-Dienstes definieren wir einige Funktionen, um den username und authData abzurufen und festzulegen.

Fügen Sie einen Verweis auf den Dienst in index.html ein.

Fügen Sie als Nächstes das oben erstellte myAppService-Modul in das signin-Modul ein.

Fügen Sie den erforderlichen CommonProp-Dienst in den SignInCtrl-Controller ein.

Fügen Sie beim erfolgreichen Rückruf von $http den folgenden Code hinzu, um den Benutzernamen und authData im Dienst zu behalten.

Öffnen Sie als Nächstes addItem.js und fügen Sie das myAppService-Modul ein.

Fügen Sie den CommonProp-Dienst in AddItemCtrl ein.

Öffnen Sie addItem.html und fügen Sie die Direktiven ngModel und ngClick zum Aufgabentextfeld bzw. zur Schaltfläche Aufgabe hinzufügen hinzu.

Definieren Sie in addItem.js eine neue Funktion namens addItem.

In der Funktion addItem rufen wir die Python Eve REST-API mit $http auf. Zuerst müssen wir den Benutzernamen und die Benutzerauthentifizierungsdaten vom Dienst abrufen.

Legen Sie die erforderlichen Header für den API-Aufruf fest.

Nachdem die Header festgelegt wurden, verwenden wir $http, um den API-Aufruf zum Hinzufügen des Elements auszuführen.

Speichern Sie die Änderungen und starten Sie den Knotenserver neu. Zeigen Sie mit Ihrem Browser auf http://localhost:3000 und melden Sie sich an. Klicken Sie auf den Link Hinzufügen, geben Sie eine Aufgabe ein und klicken Sie auf Aufgabe hinzufügen. Bei erfolgreichem API-Aufruf sollten Sie zur Benutzerhomepage weitergeleitet werden.

Aufgaben von der Eve-API abrufen

Wenn die Benutzerstartseite geladen ist, führen wir einen API-Aufruf durch, um die vom jeweiligen Benutzer hinzugefügten Elemente abzurufen. Für den API-Aufruf benötigen wir username und die authData. Fügen Sie also das myAppService-Modul in das userHome-Modul ein.

Injizieren Sie den CommonProp-Dienst in UserHomeCtrl.

Als nächstes rufen wir username und authData von CommonProp ab.

Legen Sie die erforderlichen Header für den API-Aufruf fest.

Um die von einem bestimmten Benutzer erstellten Aufgaben zu erhalten, senden wir eine $http GET-Anfrage an http://127.0.0.1:5000/item?where={"username":"'+user+'"}'.

Bei erfolgreichem API-Aufruf analysieren wir die zurückgegebenen Daten und setzen die Daten in eine $scope-Variable.

Zuerst erstellen wir eine Aufgabenvariable:

Lassen Sie uns nun die zurückgegebenen Daten analysieren und die tasks-Variable füllen.

In userHome.html durchlaufen wir die Aufgabenvariable und rendern die für einen bestimmten Benutzer abgerufenen Aufgaben. Wir werden die ngRepeat-Direktive verwenden, um die Taskvariable zu durchlaufen.

Speichern Sie die obigen Änderungen und starten Sie den Server neu. Zeigen Sie mit Ihrem Browser auf http://localhost:3000 und melden Sie sich an. Nach erfolgreicher Anmeldung sollten Sie die vom angemeldeten Benutzer hinzugefügten Aufgaben sehen können.

User Home with Tasks ListedUser Home with Tasks ListedUser Home with Tasks Listed

Bearbeiten und Löschen eines Aufgabenelements

Aufgaben bearbeiten

Fügen Sie der Liste der Aufgaben auf der Benutzerhomepage eine Schaltfläche zum Bearbeiten und Löschen hinzu, um das Bearbeiten bzw. Löschen der Aufgaben zu ermöglichen. Öffnen Sie userHome.html und fügen Sie der .list-group div den folgenden HTML-Code hinzu.

Wir werden Bootstrap-Modalitäten verwenden, um die zu bearbeitende Aufgabe anzuzeigen. Fügen Sie daher jQuery und Bootstrap in index.html ein.

Fügen Sie userHome.html den folgenden HTML-Code hinzu, damit das modale Popup zum Bearbeiten angezeigt wird.

Öffnen Sie anschließend userHome.js und erstellen Sie eine neue Funktion namens editTask, die beim Klicken auf die Schaltfläche Bearbeiten aufgerufen wird.

Wie im obigen Code zu sehen ist, haben wir der Variablen $scope.edit.task title, die id und das tag des jeweiligen Datensatzes zugewiesen. Wenn der Benutzer den bestimmten Datensatz aktualisieren möchte, verwenden wir die $scope.edit-Daten für die Aktualisierung.

Speichern Sie alle oben genannten Änderungen und starten Sie den Server neu. Wenn Sie sich erfolgreich angemeldet haben, klicken Sie auf die Schaltfläche Bearbeiten, um eine Aufgabe zu bearbeiten. Das modale Popup sollte angezeigt werden.

Update Task popupUpdate Task popupUpdate Task popup

Zuvor haben wir eine $http-Anfrage von UserHomeCtrl gestellt. Lassen Sie uns das in eine richtige Funktion umwandeln, da wir das in Zukunft aufrufen müssen. Hier ist die Funktion getAllTask.

Erstellen Sie als Nächstes eine Funktion namens update in userHome.js, die wir aufrufen, um die bearbeitete Aufgabe zu aktualisieren. Innerhalb der Update-Funktion senden wir eine PATCH-Anfrage an http://127.0.0.1:5000/item/(item-id) mit den zu aktualisierenden Daten. Die Eve-API erwartet, dass beim Erstellen einer Aktualisierungsanforderung ein tag-id-Header übergeben wird. Daher übergeben wir auch die tag-id im Anforderungsheader. Innerhalb der Update-Funktion deklarieren wir zuerst die erforderlichen Header für die $http-Anforderung.

Sobald die Header definiert wurden, stellen wir die PATCH $http-Anfrage.

Wie im obigen Code zu sehen ist, haben wir nach erfolgreicher Aktualisierung das Bearbeitungsmodal geschlossen und alle Aufgaben, die sich auf den jeweiligen Benutzer beziehen, neu geladen.

Speichern Sie alle Änderungen und starten Sie den Server neu. Zeigen Sie mit Ihrem Browser auf http://localhost:3000 und melden Sie sich mit gültigen Anmeldeinformationen an. Versuchen Sie nach der Anmeldung, eine bestimmte Aufgabe zu bearbeiten, indem Sie auf die Schaltfläche Bearbeiten klicken.

Aufgaben löschen

Vor dem Löschen einer Aufgabe muss ein Bestätigungs-Popup angezeigt werden. Fügen Sie in userHome.html den folgenden HTML-Code für das Popup zum Löschen der Bestätigung hinzu.

Als nächstes müssen wir eine Funktion namens confirmDelete definieren, die wir bereits mit der ngClick-Direktive an die Schaltfläche Löschen angehängt haben. In der Funktion confirmDelete behalten wir die Task-ID und die TAG bei, die beim Aufrufen der Delete-API erforderlich sind. Hier ist die Funktion confirmDelete:

Speichern Sie die Änderungen und starten Sie den Server neu. Melden Sie sich bei der Anwendung an und klicken Sie auf der Benutzerstartseite auf die Schaltfläche Löschen. Das Popup-Fenster Löschen-Bestätigung sollte angezeigt werden.

Delete Confirmation PopupDelete Confirmation PopupDelete Confirmation Popup

Als nächstes definieren wir eine weitere Funktion, um das Löschen der Aufgabe durchzuführen. Wir haben bereits eine Funktion namens deleteTask mit der Anweisung ngClick an die Schaltfläche Löschen angehängt. Definieren wir nun die Funktion deleteTask in userHome.js.

Ähnlich wie bei der Aktualisierungsfunktion muss für den Aufruf der Löschanforderung in der Eve-API die TAG ID im Header festgelegt werden. Stellen Sie also zuerst die erforderlichen Header wie folgt ein:

Als Nächstes stellen wir eine DELETE-Anforderung an die REST-API http://127.0.0.1:5000/item/(itemId).

Wie im obigen Code zu sehen ist, wird bei einem erfolgreichen Rückruf der DELETE-Anforderung das Popup-Fenster zum Bestätigen des Löschmodells ausgeblendet und die Aufgabeneinträge durch Aufrufen der Methode getAllTask neu geladen. Hier ist die vollständige Funktion deleteTask:

Speichern Sie die obigen Änderungen und starten Sie den Server neu. Zeigen Sie mit Ihrem Browser auf http://localhost:3000 und melden Sie sich an. Klicken Sie auf der Benutzerhomepage auf die Schaltfläche Löschen, um einige Aufgaben zu löschen, und es sollte funktionieren.

Schlussfolgerung

In diesem Teil der Serie haben wir gesehen, wie die im ersten Teil der Serie erstellten Python Eve REST-APIs in einer AngularJS-Anwendung verwendet werden. Wir haben einige einfache CRUD-Operationen aus unserer AngularJS-Anwendung mithilfe der Eve REST-APIs implementiert. Ich hoffe, dass dieses Tutorial als Grundlage für die Erstellung von etwas Großartigem dient.

Fühlen Sie sich frei, Ihre Kommentare, Korrekturen oder Fragen unten zu posten. Wenn Sie dieses Tutorial hilfreich fanden, besuchen Sie meine Lehrerseite für andere Tutorials.

Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.