AngularJS CRUD-applikation med vårdata REST

1. Översikt

I den här handledningen ska vi skapa ett exempel på en enkel CRUD-applikation med AngularJS för frontend och Spring Data REST för backend.

2. Skapa REST-datatjänsten

För att skapa stöd för uthållighet använder vi vår Spring Data REST-specifikation som gör det möjligt för oss att utföra CRUD-operationer på en datamodell.

Du hittar all nödvändig information om hur du ställer in REST-slutpunkterna i introduktionen till Spring Data REST. I den här artikeln kommer vi att återanvända det befintliga projektet vi har konfigurerat för introduktionshandledningen.

För uthållighet kommer vi att använda H2 i minnesdatabasen.

Som datamodell definierar den föregående artikeln en WebsiteUser- klass med id- , namn- och e- postegenskaper och ett förrådsgränssnitt som heter UserRepository .

Definiera detta gränssnitt instruerar våren att skapa stöd för att exponera REST-samlingsresurser och artikelresurser. Låt oss titta närmare på de slutpunkter som är tillgängliga för oss nu när vi senare kommer att ringa från AngularJS .

2.1. Samlingsresurserna

En lista över alla användare kommer att vara tillgängliga för oss vid slutpunkten / användarna . Denna URL kan anropas med GET-metoden och returnerar JSON-objekt i formuläret:

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

2.2. Artikelresurserna

Ett enda WebsiteUser- objekt kan manipuleras genom att komma åt webbadresser för formuläret / användare / {userID} med olika HTTP-metoder och begära nyttolast.

För att hämta ett WebsiteUser- objekt kan vi komma åt / användare / {userID} med GET-metoden. Detta returnerar ett JSON-objekt av formuläret:

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

För att lägga till en ny webbplatsanvändare måste vi ringa / användare med POST-metoden. Attributen för den nya WebsiteUser- posten kommer att läggas till i begäran som ett JSON-objekt:

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

Om det inte finns några fel returnerar denna URL en statuskod 201 CREATED.

Om vi ​​vill uppdatera attributen för SiteUser- posten, måste vi ringa URL / användare / {UserID} med PATCH-metoden och en begäran som innehåller de nya värdena:

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

För att radera en WebsiteUser- post kan vi ringa URL / användare / {UserID} med DELETE-metoden. Om det inte finns några fel returnerar statuskoden 204 INGENT INNEHÅLL.

2.3. MVC-konfiguration

Vi lägger också till en grundläggande MVC-konfiguration för att visa html-filer i vår applikation:

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

2.4. Tillåter begäranden om tvärsprung

Om vi ​​vill distribuera AngularJS -frontapplikationen separat än REST API - måste vi aktivera korsoriginförfrågningar.

Spring Data REST har lagt till stöd för detta från och med version 1.5.0.RELEASE. För att tillåta förfrågningar från en annan domän är allt du behöver göra att lägga till @CrossOrigin- anteckningen i arkivet:

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

Som ett resultat läggs en rubrik till Access-Control-Allow-Origin till för varje svar från REST-slutpunkterna .

3. Skapa AngularJS-klienten

För att skapa frontend i vår CRUD-applikation använder vi AngularJS - ett välkänt JavaScript-ramverk som underlättar skapandet av frontend-applikationer.

För att kunna använda AngularJS måste vi först inkludera filen angular.min.js i vår html-sida som kommer att kallas användare.html :

Därefter måste vi skapa en vinkelmodul, styrenhet och tjänst som kommer att ringa REST-slutpunkterna och visa de returnerade data.

Dessa kommer att placeras i en JavaScript-fil som heter app.js som också måste inkluderas på sidan användare.html :

3.1. Vinklad service

Låt oss först skapa en Angular-tjänst som heter UserCRUDService som kommer att använda den injicerade AngularJS $ http- tjänsten för att ringa samtal till servern. Varje samtal kommer att placeras i en separat metod.

Låt oss ta en titt på hur vi definierar metoden för att hämta en användare med id med hjälp av / users / {userID} slutpunkten:

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

Nästa, låt oss definiera adduser metod som gör en POST-begäran till / användare URL och skickar användaren värden i uppgifter attribut:

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

Den updateUser Metoden liknar den ovanstående, förutom att det kommer att ha en id parameter och gör en begäran Patch:

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

Metoden för att radera en WebsiteUser- post kommer att göra en DELETE-begäran:

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

Och slutligen, låt oss ta en titt på metoderna för att hämta hela listan över användare:

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

Alla dessa servicemetoder anropas av en AngularJS- kontroller.

3.2. Vinkelkontroll

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.

Låt oss sedan använda attributet ng-click för att definiera länkarna som utlöser anropet av varje definierad CRUD-kontrollfunktion:

Get User Update User Add User Delete User

Slutligen, låt oss visa listan över användare helt och efter namn:

Get all Users

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

4. Slutsats

I denna handledning har vi visat hur du kan skapa ett CRUD-program med AngularJS och Spring Data REST- specifikationen.

Den fullständiga koden för ovanstående exempel finns i GitHub-projektet.

För att köra applikationen kan du använda kommandot mvn spring-boot: kör och få åtkomst till URL / users.html .