AngularJS CRUD-applicatie met Spring Data REST

1. Overzicht

In deze zelfstudie gaan we een voorbeeld maken van een eenvoudige CRUD-applicatie met AngularJS voor de front-end en Spring Data REST voor de back-end.

2. De REST-gegevensservice maken

Om de ondersteuning voor persistentie te creëren, zullen we gebruik maken van de Spring Data REST-specificatie waarmee we CRUD-bewerkingen op een datamodel kunnen uitvoeren.

U vindt alle benodigde informatie over het instellen van de REST-eindpunten in de inleiding tot Spring Data REST. In dit artikel zullen we het bestaande project dat we hebben opgezet hergebruiken voor de introductiehandleiding.

Voor persistentie gebruiken we de H2 in geheugendatabase.

Als datamodel definieert het vorige artikel een WebsiteGebruiker klasse, met ID kaart, naam en e-mail properties en een repository-interface genaamd UserRepository.

Door deze interface te definiëren, wordt Spring geïnstrueerd om de ondersteuning te creëren voor het tonen van REST-verzamelingsbronnen en itembronnen. Laten we de eindpunten die voor ons beschikbaar zijn nader bekijken nu we later zullen bellen AngularJS.

2.1. De collectiebronnen

Een lijst met alle gebruikers is voor ons beschikbaar op het eindpunt / gebruikers. Deze URL kan worden aangeroepen met behulp van de GET-methode en retourneert JSON-objecten met de volgende vorm:

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

2.2. De artikelbronnen

Een WebsiteGebruiker object kan worden gemanipuleerd door toegang te krijgen tot URL's van het formulier / users / {userID} met verschillende HTTP-methoden en payloads aanvragen.

Voor het ophalen van een WebsiteGebruiker object, hebben we toegang / users / {userID} met de GET-methode. Dit retourneert een JSON-object met de vorm:

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

Om een ​​nieuw WebsiteGebruiker, we zullen moeten bellen / gebruikers met POST-methode. De kenmerken van het nieuwe WebsiteGebruiker record wordt toegevoegd aan de hoofdtekst van het verzoek als een JSON-object:

{naam: "Bryan", e-mail: "[email protected]"}

Als er geen fouten zijn, retourneert deze URL de statuscode 201 CREATED.

Als we de attributen van het WebsiteGebruiker record, moeten we de URL aanroepen / users / {UserID} met de PATCH-methode en een verzoektekst met de nieuwe waarden:

{naam: "Bryan", e-mail: "[email protected]"}

Om een WebsiteGebruiker record, kunnen we de URL noemen / users / {UserID} met de DELETE-methode. Als er geen fouten zijn, retourneert dit statuscode 204 GEEN INHOUD.

2.3. MVC-configuratie

We zullen ook een basis MVC-configuratie toevoegen om html-bestanden in onze applicatie weer te geven:

@Configuration @EnableWebMvc openbare klasse MvcConfig implementeert WebMvcConfigurer {openbare MvcConfig () {super (); } @Override public void configureDefaultServletHandling (DefaultServletHandlerConfigurer configurer) {configurer.enable (); }}

2.4. Cross Origin-verzoeken toestaan

Als we het AngularJS front-end applicatie apart dan de REST API - dan moeten we cross-origin-verzoeken inschakelen.

Spring Data REST heeft hiervoor ondersteuning toegevoegd vanaf versie 1.5.0.RELEASE. Om verzoeken van een ander domein toe te staan, hoeft u alleen maar het @CrossOrigin annotatie naar de repository:

@CrossOrigin @RepositoryRestResource (collectionResourceRel = "gebruikers", pad = "gebruikers") openbare interface UserRepository breidt CrudRepository uit {}

Het resultaat is dat bij elke reactie van de REST-eindpunten een header van Access-Control-Allow-Origin zal toegevoegd worden.

3. Creëren van de AngularJS Client

Voor het maken van de front-end van onze CRUD-applicatie gebruiken we AngularJS - een bekend JavaScript-framework dat het maken van front-end-applicaties vereenvoudigt.

Om te kunnen gebruiken AngularJS, moeten we eerst de angular.min.js bestand in onze html-pagina die zal worden aangeroepen gebruikers.html:

Vervolgens moeten we een Angular-module, controller en service maken die de REST-eindpunten aanroept en de geretourneerde gegevens weergeeft.

Deze worden in een JavaScript-bestand met de naam app.js dat moet ook worden opgenomen in de gebruikers.html bladzijde:

3.1. Hoekige service

Laten we eerst een Angular-service maken met de naam UserCRUDService die gebruik zal maken van de geïnjecteerde AngularJS$ http dienst om te bellen naar de server. Elke aanroep wordt op een aparte methode geplaatst.

Laten we eens kijken naar het definiëren van de methode voor het ophalen van een gebruiker door middel van de / users / {userID} eindpunt:

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

Laten we vervolgens de Voeg gebruiker toe methode die een POST-verzoek doet aan het / gebruikers URL en verzendt de gebruikerswaarden in het gegevens attribuut:

this.addUser = functie addUser (naam, e-mail) {return $ http ({methode: 'POST', url: 'gebruikers', gegevens: {naam: naam, e-mail: e-mail}}); }

De updateUser methode is vergelijkbaar met de bovenstaande, behalve dat het een ID kaart parameter en doet een PATCH-verzoek:

this.updateUser = functie updateUser (id, naam, e-mail) {return $ http ({methode: 'PATCH', url: 'gebruikers /' + id, gegevens: {naam: naam, e-mail: e-mail}}); }

De methode voor het verwijderen van een WebsiteGebruiker record zal een VERWIJDER verzoek indienen:

this.deleteUser = functie deleteUser (id) {return $ http ({methode: 'DELETE', url: 'gebruikers /' + id})}

En laten we tot slot eens kijken naar de methoden om de volledige lijst met gebruikers op te halen:

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

Al deze servicemethoden worden aangeroepen door een AngularJS controller.

3.2. Hoekige controller

We zullen een UserCRUDCtrlAngularJS controller die een UserCRUDService geïnjecteerd en zal de servicemethoden gebruiken om het antwoord van de server te verkrijgen, de succes en fout koffers, en set $ scope variabelen die de responsgegevens bevatten om deze op de HTML-pagina weer te geven.

Laten we eens kijken naar de getUser () functie die de getUser (gebruikers-ID) servicefunctie en definieert twee callback-methoden in geval van succes en fout. Als het serververzoek slaagt, wordt het antwoord opgeslagen in een gebruiker variabele; anders worden foutmeldingen afgehandeld:

app.controller ('UserCRUDCtrl', ['$ scope', 'UserCRUDService', functie ($ scope, UserCRUDService) {$ scope.getUser = function () {var id = $ scope.user.id; UserCRUDService.getUser ($ scope.user.id). dan (functie succes (antwoord) {$ scope.user = response.data; $ scope.user.id = id; $ scope.message = ''; $ scope.errorMessage = '';} , functiefout (antwoord) {$ scope.message = ''; if (response.status === 404) {$ scope.errorMessage = 'Gebruiker niet gevonden!';} else {$ scope.errorMessage = "Fout bij ophalen van gebruiker ! ";}});};}]);

De Voeg gebruiker toe() functie zal de overeenkomstige servicefunctie aanroepen en het antwoord afhandelen:

$ scope.addUser = functie () {if ($ scope.user! = null && $ scope.user.name) {UserCRUDService.addUser ($ scope.user.name, $ scope.user.email). dan (functie succes (antwoord) {$ scope.message = 'Gebruiker toegevoegd!'; $ scope.errorMessage = '';}, functiefout (antwoord) {$ scope.errorMessage = 'Fout bij toevoegen van gebruiker!'; $ scope.message = '' ;}); } else {$ scope.errorMessage = 'Voer een naam in!'; $ scope.message = ''; }}

De updateUser () en Verwijder gebruiker() functies zijn vergelijkbaar met die hierboven:

$ scope.updateUser = functie () {UserCRUDService.updateUser ($ scope.user.id, $ scope.user.name, $ scope.user.email). dan (functie succes (antwoord) {$ scope.message = 'Gebruiker gegevens bijgewerkt! '; $ scope.errorMessage =' ';}, functiefout (reactie) {$ scope.errorMessage =' Fout bij updaten van gebruiker! '; $ scope.message =' ';}); } $ scope.deleteUser = functie () {UserCRUDService.deleteUser ($ scope.user.id). dan (functie succes (antwoord) {$ scope.message = 'Gebruiker verwijderd!'; $ scope.User = null; $ scope .errorMessage = '';}, functiefout (antwoord) {$ scope.errorMessage = 'Fout bij verwijderen van gebruiker!'; $ scope.message = '';}); }

En laten we tot slot de functie definiëren die een lijst met gebruikers ophaalt en deze opslaat in het gebruikers variabele:

$ scope.getAllUsers = functie () {UserCRUDService.getAllUsers (). dan (functie succes (antwoord) {$ scope.users = response.data._embedded.users; $ scope.message = ''; $ scope.errorMessage = ' ';}, functiefout (antwoord) {$ scope.message =' '; $ scope.errorMessage =' Fout bij het ophalen van gebruikers! ';}); }

3.3. HTML-pagina

De gebruikers.html pagina maakt gebruik van de controllerfuncties die zijn gedefinieerd in de vorige sectie en de opgeslagen variabelen.

Om de Angular-module te kunnen gebruiken, moeten we eerst de ng-app eigendom:

Om te voorkomen dat u typt UserCRUDCtrl.getUser () elke keer dat we een functie van de controller gebruiken, kunnen we onze HTML-elementen in een div met een ng-controller eigenschappenset:

Laten we hetformulier dat de waarden voor het WebiteGebruiker object dat we willen manipuleren. Elk van deze heeft een ng-model attribuutset, die het bindt aan de waarde van het attribuut:

ID KAART:
Naam:
Leeftijd:

Het binden van het ID kaart input naar de gebruikersnaam variabele betekent bijvoorbeeld dat wanneer de waarde van de invoer wordt gewijzigd, deze waarde wordt ingesteld in de gebruikersnaam variabel en vice versa.

Laten we vervolgens de ng-klik attribuut om de links te definiëren die het aanroepen van elke gedefinieerde CRUD-controllerfunctie activeren:

Gebruiker ophalen Gebruiker bijwerken Gebruiker toevoegen Gebruiker verwijderen

Laten we tot slot de lijst met gebruikers volledig en op naam weergeven:

Haal alle gebruikers op

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

4. Conclusie

In deze zelfstudie hebben we laten zien hoe u een CRUD-applicatie kunt maken met AngularJS en de Spring Data REST specificatie.

De volledige code voor het bovenstaande voorbeeld is te vinden in het GitHub-project.

Om de applicatie uit te voeren, kunt u de opdracht gebruiken mvn spring-boot: run en toegang tot de URL /users.html.