AngularJS CRUD-Anwendung mit Federdaten-REST

1. Übersicht

In diesem Tutorial erstellen wir ein Beispiel für eine einfache CRUD-Anwendung mit AngularJS für das Front-End und Spring Data REST für das Back-End.

2. Erstellen des REST-Datendienstes

Um die Unterstützung für die Persistenz zu schaffen, verwenden wir die Spring Data REST-Spezifikation, mit der wir CRUD-Operationen an einem Datenmodell ausführen können.

Alle erforderlichen Informationen zum Einrichten der REST-Endpunkte finden Sie in der Einführung zu Spring Data REST. In diesem Artikel werden wir das vorhandene Projekt, das wir für das Einführungstutorial eingerichtet haben, wiederverwenden.

Aus Gründen der Persistenz verwenden wir das H2 in der Speicherdatenbank.

Als Datenmodell definiert der frühere Artikel eine WebsiteUser Klasse, mit ID , Namen und E - Mail - Eigenschaften und eine Repository - Schnittstelle aufgerufen UserRepository .

Durch das Definieren dieser Schnittstelle wird Spring angewiesen, die Unterstützung für die Bereitstellung von REST-Erfassungsressourcen und Elementressourcen zu erstellen. Schauen wir uns die Endpunkte genauer an, die uns jetzt zur Verfügung stehen, da wir später von AngularJS anrufen werden .

2.1. Die Sammlungsressourcen

Eine Liste aller Benutzer steht uns am Endpunkt / den Benutzern zur Verfügung . Diese URL kann mit der GET-Methode aufgerufen werden und gibt JSON-Objekte des Formulars zurück:

{ "_embedded" : { "users" : [ { "name" : "Bryan", "age" : 20, "_links" : { "self" : { "href" : "//localhost:8080/users/1" }, "User" : { "href" : "//localhost:8080/users/1" } } }, ... ] } }

2.2. Die Artikelressourcen

Ein einzelnes WebsiteUser- Objekt kann bearbeitet werden, indem mit verschiedenen HTTP-Methoden auf URLs der Form / users / {userID} zugegriffen und Nutzdaten angefordert werden .

Zum Abrufen eines WebsiteUser- Objekts können wir mit der GET-Methode auf / users / {userID} zugreifen . Dies gibt ein JSON-Objekt des Formulars zurück:

{ "name" : "Bryan", "email" : "[email protected]", "_links" : { "self" : { "href" : "//localhost:8080/users/1" }, "User" : { "href" : "//localhost:8080/users/1" } } }

Um einen neuen WebsiteUser hinzuzufügen , müssen wir / users mit der POST-Methode aufrufen . Die Attribute des neuen WebsiteUser- Datensatzes werden im Anfragetext als JSON-Objekt hinzugefügt:

{name: "Bryan", email: "[email protected]"}

Wenn keine Fehler vorliegen, gibt diese URL den Statuscode 201 CREATED zurück.

Wenn wir die Attribute des WebsiteUser- Datensatzes aktualisieren möchten , müssen wir die URL / users / {UserID} mit der PATCH-Methode und einem Anforderungshauptteil aufrufen, der die neuen Werte enthält:

{name: "Bryan", email: "[email protected]"}

Um einen WebsiteUser- Datensatz zu löschen , können wir die URL / users / {UserID} mit der DELETE-Methode aufrufen . Wenn keine Fehler vorliegen, wird der Statuscode 204 NO CONTENT zurückgegeben.

2.3. MVC-Konfiguration

Wir werden auch eine grundlegende MVC-Konfiguration hinzufügen, um HTML-Dateien in unserer Anwendung anzuzeigen:

@Configuration @EnableWebMvc public class MvcConfig implements WebMvcConfigurer { public MvcConfig(){ super(); } @Override public void configureDefaultServletHandling( DefaultServletHandlerConfigurer configurer) { configurer.enable(); } }

2.4. Zulassen von Cross Origin-Anfragen

Wenn wir die AngularJS- Front-End-Anwendung separat von der REST-API bereitstellen möchten, müssen wir Ursprungsübergreifende Anforderungen aktivieren.

Spring Data REST hat dies ab Version 1.5.0.RELEASE unterstützt. Um Anforderungen von einer anderen Domäne zuzulassen, müssen Sie lediglich die Annotation @CrossOrigin zum Repository hinzufügen :

@CrossOrigin @RepositoryRestResource(collectionResourceRel = "users", path = "users") public interface UserRepository extends CrudRepository {}

Infolgedessen wird bei jeder Antwort von den REST-Endpunkten ein Header von Access-Control-Allow-Origin hinzugefügt.

3. Erstellen des AngularJS-Clients

Zum Erstellen des Frontends unserer CRUD-Anwendung verwenden wir AngularJS - ein bekanntes JavaScript-Framework, das die Erstellung von Frontend-Anwendungen vereinfacht.

Um AngularJS verwenden zu können , müssen wir zuerst die Datei angle.min.js in unsere HTML-Seite aufnehmen, die als users.html bezeichnet wird :

Als Nächstes müssen wir ein Angular-Modul, einen Controller und einen Service erstellen, die die REST-Endpunkte aufrufen und die zurückgegebenen Daten anzeigen.

Diese werden in einer JavaScript-Datei namens app.js abgelegt , die auch auf der Seite users.html enthalten sein muss :

3.1. Winkelservice

Lassen Sie uns zunächst einen Angular-Dienst namens UserCRUDService erstellen , der den injizierten AngularJS $ http- Dienst verwendet, um Anrufe an den Server zu tätigen. Jeder Anruf wird in einer separaten Methode getätigt.

Lassen Sie uns einen Blick auf die Definition der Methode zum Abrufen eines Benutzers anhand der ID mithilfe des Endpunkts / users / {userID} werfen :

app.service('UserCRUDService', [ '$http', function($http) { this.getUser = function getUser(userId) { return $http({ method : 'GET', url : 'users/' + userId }); } } ]);

Als nächstes wollen wir definieren die addUser Methode , die eine POST - Anfrage an die macht / Benutzer - URL und sendet die Benutzerwerte in dem Datenattribut:

this.addUser = function addUser(name, email) { return $http({ method : 'POST', url : 'users', data : { name : name, email: email } }); }

Die updateUser- Methode ähnelt der obigen, außer dass sie einen id- Parameter hat und eine PATCH-Anfrage stellt:

this.updateUser = function updateUser(id, name, email) { return $http({ method : 'PATCH', url : 'users/' + id, data : { name : name, email: email } }); }

Die Methode zum Löschen eines WebsiteUser- Datensatzes führt eine DELETE-Anforderung aus:

this.deleteUser = function deleteUser(id) { return $http({ method : 'DELETE', url : 'users/' + id }) }

Schauen wir uns zum Schluss die Methoden zum Abrufen der gesamten Benutzerliste an:

this.getAllUsers = function getAllUsers() { return $http({ method : 'GET', url : 'users' }); }

Alle diese Dienstmethoden werden von einem AngularJS- Controller aufgerufen .

3.2. Winkelregler

We will create an UserCRUDCtrlAngularJS controller that will have an UserCRUDService injected and will use the service methods to obtain the response from the server, handle the success and error cases, and set $scope variables containing the response data for displaying it in the HTML page.

Let's take a look at the getUser() function that calls the getUser(userId) service function and defines two callback methods in case of success and error. If the server request succeeds, then the response is saved in a user variable; otherwise, error messages are handled:

app.controller('UserCRUDCtrl', ['$scope','UserCRUDService', function ($scope,UserCRUDService) { $scope.getUser = function () { var id = $scope.user.id; UserCRUDService.getUser($scope.user.id) .then(function success(response) { $scope.user = response.data; $scope.user.id = id; $scope.message=''; $scope.errorMessage = ''; }, function error (response) { $scope.message = ''; if (response.status === 404){ $scope.errorMessage = 'User not found!'; } else { $scope.errorMessage = "Error getting user!"; } }); }; }]);

The addUser() function will call the corresponding service function and handle the response:

$scope.addUser = function () { if ($scope.user != null && $scope.user.name) { UserCRUDService.addUser($scope.user.name, $scope.user.email) .then (function success(response){ $scope.message = 'User added!'; $scope.errorMessage = ''; }, function error(response){ $scope.errorMessage = 'Error adding user!'; $scope.message = ''; }); } else { $scope.errorMessage = 'Please enter a name!'; $scope.message = ''; } }

The updateUser() and deleteUser() functions are similar to the one above:

$scope.updateUser = function () { UserCRUDService.updateUser($scope.user.id, $scope.user.name, $scope.user.email) .then(function success(response) { $scope.message = 'User data updated!'; $scope.errorMessage = ''; }, function error(response) { $scope.errorMessage = 'Error updating user!'; $scope.message = ''; }); } $scope.deleteUser = function () { UserCRUDService.deleteUser($scope.user.id) .then (function success(response) { $scope.message = 'User deleted!'; $scope.User = null; $scope.errorMessage=''; }, function error(response) { $scope.errorMessage = 'Error deleting user!'; $scope.message=''; }); }

And finally, let's define the function that retrieves a list of users, and stores it in the users variable:

$scope.getAllUsers = function () { UserCRUDService.getAllUsers() .then(function success(response) { $scope.users = response.data._embedded.users; $scope.message=''; $scope.errorMessage = ''; }, function error (response) { $scope.message=''; $scope.errorMessage = 'Error getting users!'; }); }

3.3. HTML Page

The users.html page will make use of the controller functions defined in the previous section and the stored variables.

First, in order to use the Angular module, we need to set the ng-app property:

Then, to avoid typing UserCRUDCtrl.getUser() every time we use a function of the controller, we can wrap our HTML elements in a div with a ng-controller property set:

Let's create theform that will input and display the values for the WebiteUser object we want to manipulate. Each of these will have a ng-model attribute set, which binds it to the value of the attribute:


    
ID:
Name:
Age:

Binding the id input to the user.id variable, for example, means that whenever the value of the input is changed, this value is set in the user.id variable and vice versa.

Als Nächstes verwenden wir das Attribut ng-click , um die Links zu definieren, die den Aufruf jeder definierten CRUD-Controller-Funktion auslösen:

Get User Update User Add User Delete User

Lassen Sie uns abschließend die Liste der Benutzer vollständig und nach Namen anzeigen:

Get all Users

{{usr.name}} {{usr.email}}

4. Fazit

In diesem Tutorial haben wir gezeigt, wie Sie eine CRUD-Anwendung mit AngularJS und der Spring Data REST- Spezifikation erstellen können .

Der vollständige Code für das obige Beispiel befindet sich im GitHub-Projekt.

Um die Anwendung auszuführen, können Sie den Befehl mvn spring-boot verwenden: Ausführen und auf die URL /users.html zugreifen .