streamalism.org

1. Oversikt

I denne opplæringen skal vi lage et eksempel på en enkel CRUD-applikasjon som bruker AngularJS for frontend og Spring Data REST for backend.

2. Opprette REST-datatjenesten

For å skape støtte for utholdenhet, bruker vi Spring Data REST-spesifikasjonen som gjør det mulig for oss å utføre CRUD-operasjoner på en datamodell.

Du finner all nødvendig informasjon om hvordan du konfigurerer REST-endepunktene i introduksjonen til Spring Data REST. I denne artikkelen vil vi gjenbruke det eksisterende prosjektet vi har satt opp for introduksjonen.

For utholdenhet vil vi bruke H2 i minnedatabasen.

Som datamodell definerer forrige artikkel a Nettstedsbruker klasse, med id, Navn og e-post egenskaper og et repositorgrensesnitt kalt UserRepository.

Å definere dette grensesnittet instruerer Spring om å skape støtte for å eksponere REST-samlingsressurser og elementressurser. La oss se nærmere på sluttpunktene som er tilgjengelige for oss nå som vi senere vil ringe fra AngularJS.

2.1. Samlingsressursene

En liste over alle brukerne vil være tilgjengelig for oss ved endepunktet / brukere. Denne URL-en kan kalles ved hjelp av GET-metoden og returnerer JSON-objekter i skjemaet:

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

2.2. Elementet Ressurser

En eneste Nettstedsbruker objektet kan manipuleres ved å få tilgang til nettadressene til skjemaet / brukere / {brukerID} med forskjellige HTTP-metoder og be om nyttelast.

For å hente en Nettstedsbruker objekt, kan vi få tilgang til / brukere / {brukerID} med GET-metoden. Dette returnerer et JSON-objekt av skjemaet:

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

For å legge til en ny Nettstedsbruker, må vi ringe / brukere med POST-metoden. Attributtene til det nye Nettstedsbruker posten vil bli lagt til i forespørselens kropp som et JSON-objekt:

{name: "Bryan", e-post: "[email protected]"}

Hvis det ikke er noen feil, returnerer denne URL en statuskode 201 OPPRETT.

Hvis vi vil oppdatere attributtene til Nettstedsbruker for å registrere, må vi ringe URL-en / brukere / {UserID} med PATCH-metoden og et forespørselsorgan som inneholder de nye verdiene:

{name: "Bryan", e-post: "[email protected]"}

For å slette en Nettstedsbruker kan vi ringe URL-en / brukere / {UserID} med DELETE-metoden. Hvis det ikke er noen feil, returnerer dette statuskoden 204 INGEN INNHOLD.

2.3. MVC-konfigurasjon

Vi legger også til en grunnleggende MVC-konfigurasjon for å vise html-filer i applikasjonen vår:

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

2.4. Tillate forespørsel om kryss opprinnelse

Hvis vi ønsker å distribuere AngularJS front-end-applikasjon separat enn REST API - da må vi aktivere kryssopprinnelsesforespørsler.

Spring Data REST har lagt til støtte for dette fra og med versjon 1.5.0.RELEASE. For å tillate forespørsler fra et annet domene, er alt du trenger å gjøre å legge til @CrossOrigin kommentar til depotet:

@CrossOrigin @RepositoryRestResource (collectionResourceRel = "brukere", sti = "brukere") offentlig grensesnitt UserRepository utvider CrudRepository {}

Som et resultat, på hvert svar fra REST-endepunktene, en overskrift på Tilgangskontroll-Tillat opprinnelse vil bli lagt til.

3. Opprette AngularJS-klienten

For å lage frontenden av CRUD-applikasjonen, bruker vi AngularJS - et velkjent JavaScript-rammeverk som letter etableringen av front-end-applikasjoner.

For å bruke AngularJS, må vi først ta med angular.min.js filen på vår html-side som vil bli kalt brukere.html:

Deretter må vi lage en vinkelmodul, kontroller og tjeneste som vil ringe REST-endepunktene og vise de returnerte dataene.

Disse plasseres i en JavaScript-fil kalt app.js som også må inkluderes i brukere.html side:

3.1. Kantet tjeneste

La oss først lage en Angular-tjeneste som heter UserCRUDService som vil gjøre bruk av den injiserte AngularJS$ http tjenesten for å ringe til serveren. Hver samtale blir plassert i en egen metode.

La oss ta en titt på å definere metoden for å hente en bruker ved å bruke / brukere / {brukerID} sluttpunkt:

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

Deretter la oss definere addUser metoden som gjør en POST-forespørsel til / brukere URL og sender brukerverdiene i data Egenskap:

this.addUser = funksjon addUser (navn, e-post) {return $ http ({metode: 'POST', url: 'brukere', data: {navn: navn, e-post: e-post}}); }

De updateUser metoden er lik den ovenfor, bortsett fra at den vil ha en id parameter og gjør en PATCH-forespørsel:

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

Metoden for å slette en Nettstedsbruker posten kommer til å SLETTE forespørsel:

this.deleteUser = funksjon deleteUser (id) {return $ http ({metode: 'SLETT', url: 'brukere /' + id})}

Og til slutt, la oss ta en titt på metodene for å hente hele brukerlisten:

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

Alle disse servicemetodene kalles av en AngularJS kontrolleren.

3.2. Vinkelkontroller

Vi vil lage en UserCRUDCtrlAngularJS kontroller som vil ha en UserCRUDService injiseres og vil bruke tjenestemetodene for å få svar fra serveren, håndtere suksess og feil saker, og sett $ omfang variabler som inneholder responsdataene for å vise dem på HTML-siden.

La oss ta en titt på getUser () funksjon som kaller getUser (userId) tjenestefunksjon og definerer to tilbakeringingsmetoder i tilfelle suksess og feil. Hvis serverforespørselen lykkes, blir svaret lagret i a bruker variabel; Ellers håndteres feilmeldinger:

app.controller ('UserCRUDCtrl', ['$ scope', 'UserCRUDService', function ($ scope, UserCRUDService) {$ scope.getUser = function () {var id = $ scope.user.id; UserCRUDService.getUser ($ scope.user.id) .then (funksjon suksess (respons) {$ scope.user = respons.data; $ scope.user.id = id; $ scope.message = ''; $ scope.errorMessage = '';} , funksjonsfeil (respons) {$ scope.message = ''; hvis (respons.status === 404) {$ scope.errorMessage = 'Bruker ikke funnet!';} ellers {$ scope.errorMessage = "Feil ved henting av bruker ! ";}});};}]);

De addUser () funksjon vil ringe til den tilsvarende servicefunksjonen og håndtere svaret:

$ scope.addUser = funksjon () {if ($ scope.user! = null && $ scope.user.name) {UserCRUDService.addUser ($ scope.user.name, $ scope.user.email). deretter (funksjon suksess (respons) {$ scope.message = 'Bruker lagt til!'; $ scope.errorMessage = '';}, funksjonsfeil (respons) {$ scope.errorMessage = 'Feil ved legging av bruker!'; $ scope.message = '' ;}); } annet {$ scope.errorMessage = 'Skriv inn et navn!'; $ scope.message = ''; }}

De updateUser () og deleteUser () funksjonene er lik den ovenfor:

$ scope.updateUser = funksjon () {UserCRUDService.updateUser ($ scope.user.id, $ scope.user.name, $ scope.user.email). deretter (funksjon suksess (respons) {$ scope.message = 'Bruker data oppdatert! '; $ scope.errorMessage =' ';}, funksjonsfeil (respons) {$ scope.errorMessage =' Feil ved oppdatering av bruker! '; $ scope.message =' ';}); } $ scope.deleteUser = funksjon () {UserCRUDService.deleteUser ($ scope.user.id). deretter (funksjon suksess (respons) {$ scope.message = 'Bruker slettet!'; $ scope.User = null; $ scope .errorMessage = '';}, funksjonsfeil (respons) {$ scope.errorMessage = 'Feil ved sletting av bruker!'; $ scope.message = '';}); }

Og til slutt, la oss definere funksjonen som henter en liste over brukere, og lagrer den i brukere variabel:

$ scope.getAllUsers = funksjon () {UserCRUDService.getAllUsers (). deretter (funksjon suksess (respons) {$ scope.users = respons.data._embedded.users; $ scope.message = ''; $ scope.errorMessage = ' ';}, funksjonsfeil (respons) {$ scope.message =' '; $ scope.errorMessage =' Feil ved henting av brukere! ';}); }

3.3. HTML-side

De brukere.html siden vil bruke kontrollerfunksjonene som er definert i forrige avsnitt og de lagrede variablene.

Først må vi stille inn for å kunne bruke Angular-modulen ng-app eiendom:

For å unngå å skrive UserCRUDCtrl.getUser () hver gang vi bruker en funksjon av kontrolleren, kan vi pakke inn HTML-elementene våre i en div med en ng-kontroller eiendom sett:

La oss lageskjema som vil legge inn og vise verdiene for WebiteUser objekt vi ønsker å manipulere. Hver av disse vil ha en ng-modell attributt sett, som binder det til verdien av attributtet:

ID:
Navn:
Alder:

Bindende id innspill til bruker-ID variabel, for eksempel, betyr at når verdien av inngangen endres, settes denne verdien i bruker-ID variabel og omvendt.

La oss deretter bruke ng-klikk attributt for å definere koblingene som vil utløse påkallelse av hver definert CRUD-kontrollerfunksjon:

Få brukeroppdateringsbruker Legg til bruker Slett bruker

Til slutt, la oss vise listen over brukere helt og etter navn:

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

4. Konklusjon

I denne veiledningen har vi vist hvordan du kan lage et CRUD-program ved hjelp av AngularJS og Vårdata REST spesifikasjon.

Den komplette koden for eksemplet ovenfor finner du i GitHub-prosjektet.

For å kjøre applikasjonen kan du bruke kommandoen mvn spring-boot: run og få tilgang til URL-en /users.html.