streamalism.org

1. Oversigt

I denne vejledning skal vi oprette et eksempel på en simpel CRUD-applikation ved hjælp af AngularJS til frontend og Spring Data REST til back-end.

2. Oprettelse af REST-datatjenesten

For at skabe support til vedholdenhed bruger vi Spring Data REST-specifikationen, der gør det muligt for os at udføre CRUD-operationer på en datamodel.

Du kan finde alle de nødvendige oplysninger om, hvordan du opsætter REST-slutpunkterne i introduktionen til Spring Data REST. I denne artikel genbruger vi det eksisterende projekt, vi har opsat til introduktionsvejledningen.

For vedholdenhed bruger vi H2 i hukommelsesdatabase.

Som en datamodel definerer den forrige artikel en WebsiteUser klasse, med id, navn og e-mail egenskaber og en lagergrænseflade kaldet UserRepository.

Definition af denne grænseflade instruerer foråret om at skabe understøttelse af udsættelse af REST-samlingsressourcer og elementressourcer. Lad os se nærmere på de endepunkter, der er tilgængelige for os nu, som vi senere vil ringe fra AngularJS.

2.1. Samlingsressourcerne

En liste over alle brugerne vil være tilgængelige for os ved slutpunktet / brugere. Denne URL kan kaldes ved hjælp af GET-metoden og returnerer JSON-objekter i formularen:

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

2.2. Emnet Ressourcer

En enkelt WebsiteUser objekt kan manipuleres ved at få adgang til formularens URL'er / brugere / {userID} med forskellige HTTP-metoder og anmode om nyttelast.

For at hente en WebsiteUser objekt, vi kan få adgang til / brugere / {userID} med GET-metoden. Dette returnerer et JSON-objekt af formularen:

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

For at tilføje et nyt WebsiteUser, vi bliver nødt til at ringe / brugere med POST-metoden. Attributterne for det nye WebsiteUser post tilføjes i anmodningsorganet som et JSON-objekt:

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

Hvis der ikke er fejl, returnerer denne URL en statuskode 201 Oprettet.

Hvis vi vil opdatere attributterne til WebsiteUser registrere, skal vi ringe til URL'en / brugere / {UserID} med PATCH-metoden og et anmodningsorgan, der indeholder de nye værdier:

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

For at slette en WebsiteUser registrere, kan vi ringe til URL'en / brugere / {UserID} med DELETE-metoden. Hvis der ikke er nogen fejl, returnerer dette statuskode 204 INGEN INDHOLD.

2.3. MVC-konfiguration

Vi tilføjer også en grundlæggende MVC-konfiguration for at få vist html-filer i vores applikation:

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

2.4. Tillader anmodninger om krydsoprindelse

Hvis vi vil anvende AngularJS front-end applikation separat end REST API - så er vi nødt til at aktivere cross-origin anmodninger.

Spring Data REST har tilføjet support til dette startende med version 1.5.0.RELEASE. For at tillade anmodninger fra et andet domæne er alt, hvad du skal gøre, at tilføje @CrossOrigin kommentar til arkivet:

@CrossOrigin @RepositoryRestResource (collectionResourceRel = "brugere", sti = "brugere") offentlig grænseflade UserRepository udvider CrudRepository {}

Som et resultat, på hvert svar fra REST-slutpunkterne, en overskrift på Adgangskontrol-Tillad oprindelse tilføjes.

3. Oprettelse af AngularJS-klienten

Til oprettelse af frontenden af ​​vores CRUD-applikation bruger vi AngularJS - en velkendt JavaScript-ramme, der letter oprettelsen af ​​frontend-applikationer.

For at bruge AngularJS, skal vi først medtage angular.min.js fil på vores html-side, der kaldes brugere.html:

Dernæst skal vi oprette et vinkelmodul, controller og service, der kalder REST-slutpunkterne og viser de returnerede data.

Disse placeres i en JavaScript-fil kaldet app.js der også skal inkluderes i brugere.html side:

3.1. Vinklet service

Lad os først oprette en Angular-tjeneste kaldet UserCRUDService der vil gøre brug af den injicerede AngularJS$ http service til at foretage opkald til serveren. Hvert opkald placeres i en separat metode.

Lad os tage et kig på at definere metoden til at hente en bruger ved id ved hjælp af / brugere / {userID} slutpunkt:

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

Lad os derefter definere addUser metode, der fremsætter en POST - anmodning til / brugere URL og sender brugerværdier i data attribut:

this.addUser = funktion addUser (navn, e-mail) {return $ http ({metode: 'POST', url: 'brugere', data: {navn: navn, e-mail: e-mail}}); }

Det updateUser metoden ligner den ovenfor, bortset fra at den har en id parameter og fremsætter en PATCH-anmodning:

this.updateUser = funktion updateUser (id, navn, e-mail) {return $ http ({metode: 'PATCH', url: 'brugere /' + id, data: {navn: navn, e-mail: e-mail}}); }

Metoden til sletning af en WebsiteUser post vil foretage en SLET anmodning:

this.deleteUser = funktion deleteUser (id) {return $ http ({metode: 'SLET', url: 'brugere /' + id})}

Og endelig, lad os se på metoderne til at hente hele listen over brugere:

this.getAllUsers = funktion getAllUsers () {return $ http ({metode: 'GET', url: 'brugere'}); }

Alle disse servicemetoder kaldes af en AngularJS controller.

3.2. Vinkelkontroller

Vi opretter en UserCRUDCtrlAngularJS controller, der har en UserCRUDService indsprøjtes og vil bruge servicemetoderne til at få svaret fra serveren, håndtere succes og fejl sager og sæt $ omfang variabler, der indeholder svardataene til visning af dem på HTML-siden.

Lad os se på getUser () funktion, der kalder getUser (userId) servicefunktion og definerer to tilbagekaldsmetoder i tilfælde af succes og fejl. Hvis serveranmodningen lykkes, gemmes svaret i a bruger variabel; Ellers håndteres fejlmeddelelser:

app.controller ('UserCRUDCtrl', ['$ scope', 'UserCRUDService', funktion ($ scope, UserCRUDService) {$ scope.getUser = funktion () {var id = $ scope.user.id; UserCRUDService.getUser ($ scope.user.id). derefter (funktion succes (respons) {$ scope.user = respons.data; $ scope.user.id = id; $ scope.message = ''; $ scope.errorMessage = '';} , funktionsfejl (respons) {$ scope.message = ''; hvis (respons.status === 404) {$ scope.errorMessage = 'Bruger ikke fundet!';} ellers {$ scope.errorMessage = "Fejl ved hentning af bruger ! ";}});};}]);

Det tilføj bruger () funktion kalder den tilsvarende servicefunktion og håndterer svaret:

$ scope.addUser = funktion () {if ($ scope.user! = null && $ scope.user.name) {UserCRUDService.addUser ($ scope.user.name, $ scope.user.email). derefter (funktion succes (svar) {$ scope.message = 'Bruger tilføjet!'; $ scope.errorMessage = '';}, funktionsfejl (respons) {$ scope.errorMessage = 'Fejl ved tilføjelse af bruger!'; $ scope.message = '' ;}); } ellers {$ scope.errorMessage = 'Indtast et navn!'; $ scope.message = ''; }}

Det updateUser () og deleteUser () funktioner svarer til ovenstående:

$ scope.updateUser = funktion () {UserCRUDService.updateUser ($ scope.user.id, $ scope.user.name, $ scope.user.email). derefter (funktion succes (respons) {$ scope.message = 'Bruger data opdateret! '; $ scope.errorMessage =' ';}, funktionsfejl (svar) {$ scope.errorMessage =' Fejl ved opdatering af bruger! '; $ scope.message =' ';}); } $ scope.deleteUser = funktion () {UserCRUDService.deleteUser ($ scope.user.id). derefter (funktion succes (svar) {$ scope.message = 'Bruger slettet!'; $ scope.User = null; $ scope .errorMessage = '';}, funktionsfejl (svar) {$ scope.errorMessage = 'Fejl ved sletning af bruger!'; $ scope.message = '';}); }

Og endelig, lad os definere den funktion, der henter en liste over brugere og gemme den i brugere variabel:

$ scope.getAllUsers = funktion () {UserCRUDService.getAllUsers (). derefter (funktion succes (svar) {$ scope.users = respons.data._embedded.users; $ scope.message = ''; $ scope.errorMessage = ' ';}, funktionsfejl (respons) {$ scope.message =' '; $ scope.errorMessage =' Fejl ved hentning af brugere! ';}); }

3.3. HTML-side

Det brugere.html side vil bruge de controllerfunktioner, der er defineret i det foregående afsnit, og de gemte variabler.

For det første skal vi indstille for at kunne bruge vinkelmodulet ng-app ejendom:

Derefter for at undgå at skrive UserCRUDCtrl.getUser () hver gang vi bruger en funktion af controlleren, kan vi indpakke vores HTML-elementer i en div med en ng-controller ejendomssæt:

Lad os opretteform, der indtaster og viser værdierne for WebiteUser objekt, vi vil manipulere. Hver af disse vil have en ng-model attribut sæt, som binder det til værdien af ​​attributten:

ID:
Navn:
Alder:

Bindende id input til bruger ID variabel betyder for eksempel, at når værdien af ​​input ændres, indstilles denne værdi i bruger ID variabel og omvendt.

Lad os derefter bruge ng-klik attribut til at definere de links, der udløser påkaldelsen af ​​hver defineret CRUD-controllerfunktion:

Hent brugeropdateringsbruger Tilføj bruger Slet bruger

Lad os endelig vise listen over brugere fuldstændigt og efter navn:

Få alle brugere
{{usr.name}} {{usr.email}}

4. Konklusion

I denne vejledning har vi vist, hvordan du kan oprette en CRUD-applikation ved hjælp af AngularJS og Forårsdata REST specifikation.

Den komplette kode for ovenstående eksempel kan findes i GitHub-projektet.

For at køre applikationen kan du bruge kommandoen mvn spring-boot: løb og få adgang til URL'en /users.html.