streamalism.org

1. Pregled

U ovom uputstvu stvorit ćemo primjer jednostavne CRUD aplikacije koja koristi AngularJS za prednji kraj i Spring Data REST za stražnji kraj.

2. Izrada REST podatkovne usluge

Kako bismo stvorili podršku za upornost, poslužit ćemo se specifikacijom Spring Data REST koja će nam omogućiti izvođenje CRUD operacija na podatkovnom modelu.

Sve potrebne informacije o postavljanju krajnjih točaka REST možete pronaći u uvodu u Spring Data REST. U ovom ćemo članku ponovno upotrijebiti postojeći projekt koji smo postavili za uvodnu lekciju.

Za ustrajnost koristit ćemo H2 u memorijskoj bazi podataka.

Kao model podataka, prethodni članak definira a Korisnik web stranice razred, sa iskaznica, Ime i e-mail svojstva i sučelje spremišta nazvano UserRepository.

Definiranje ovog sučelja nalaže Springu da stvori podršku za izlaganje REST resursa kolekcije i resursa predmeta. Pogledajmo bliže krajnje točke koje su nam sada dostupne i koje ćemo kasnije nazvati KutniJS.

2.1. Resursi za prikupljanje

Popis svih korisnika bit će nam dostupan na krajnjoj točki / korisnici. Ovaj se URL može nazvati metodom GET i vratit će JSON objekte oblika:

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

2.2. Resursi predmeta

Samac Korisnik web stranice objektom se može manipulirati pristupom URL-ovima obrasca / users / {userID} s različitim HTTP metodama i zahtijevaju korisna opterećenja.

Za preuzimanje a Korisnik web stranice objekt, možemo pristupiti / users / {userID} GET metodom. Ovo vraća JSON objekt oblika:

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

Da biste dodali novi Korisnik web stranice, morat ćemo nazvati / korisnici POST metodom. Atributi novog Korisnik web stranice zapis će se dodati u tijelo zahtjeva kao JSON objekt:

{ime: "Bryan", e-pošta: "[e-pošta zaštićena]"}

Ako nema pogrešaka, ovaj URL vraća statusni kôd 201 CREATED.

Ako želimo ažurirati atribute Korisnik web stranice zapis, moramo nazvati URL / users / {UserID} s metodom PATCH i tijelom zahtjeva koji sadrži nove vrijednosti:

{ime: "Bryan", e-pošta: "[e-pošta zaštićena]"}

Za brisanje a Korisnik web stranice zapis, možemo nazvati URL / users / {UserID} metodom DELETE. Ako nema pogrešaka, ovo vraća statusni kôd 204 BEZ SADRŽAJA.

2.3. MVC konfiguracija

Također ćemo dodati osnovnu MVC konfiguraciju za prikaz html datoteka u našoj aplikaciji:

@Configuration @EnableWebMvc javna klasa MvcConfig implementira WebMvcConfigurer {public MvcConfig () {super (); } @Override public void configureDefaultServletHandling (DefaultServletHandlerConfigurer configurer) {configurer.enable (); }}

2.4. Omogućavanje zahtjeva za višestruko podrijetlo

Ako želimo rasporediti KutniJS front-end aplikacija odvojeno od REST API-a - tada moramo omogućiti zahtjeve za međusobno podrijetlo.

Spring Data REST dodao je podršku za ovo počevši od verzije 1.5.0.RELEASE. Da biste omogućili zahtjeve s druge domene, sve što morate učiniti je dodati @CrossOrigin napomena spremištu:

@CrossOrigin @RepositoryRestResource (collectionResourceRel = "users", path = "users") javno sučelje UserRepository proširuje CrudRepository {}

Kao rezultat, na svaki odgovor REST krajnjih točaka, zaglavlje Access-Control-Allow-Origin bit će dodan.

3. Izrada AngularJS klijenta

Za izradu prednjeg kraja naše CRUD aplikacije koristit ćemo KutniJS - dobro poznati JavaScript okvir koji olakšava stvaranje front-end aplikacija.

Da bi se koristila KutniJS, prvo moramo uključiti kutni.min.js datoteku na našoj html stranici koja će se zvati users.html:

Dalje, moramo stvoriti kutni modul, kontroler i uslugu koji će pozvati REST krajnje točke i prikazati vraćene podatke.

Oni će biti smješteni u JavaScript datoteku pod nazivom app.js to također treba uključiti u users.html stranica:

3.1. Kutna usluga

Prvo, izradimo Angular uslugu pod nazivom UserCRUDService koji će iskoristiti ubrizgano KutniJS$ http usluga za upućivanje poziva poslužitelju. Svaki poziv bit će postavljen na zaseban način.

Pogledajmo definiranje metode za dohvaćanje korisnika pomoću id-a pomoću / users / {userID} krajnja točka:

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

Dalje, definirajmo addUser metoda koja upućuje POST zahtjev na / korisnici URL i šalje korisničke vrijednosti u podaci atribut:

this.addUser = funkcija addUser (ime, e-pošta) {return $ http ({metoda: 'POST', url: 'korisnici', podaci: {ime: ime, e-pošta: e-pošta}}); }

The updateUser metoda slična je gornjoj, osim što će imati iskaznica parametar i izrađuje PATCH zahtjev:

this.updateUser = function updateUser (id, ime, e-pošta) {return $ http ({metoda: 'PATCH', url: 'users /' + id, podaci: {name: name, email: email}}); }

Metoda brisanja a Korisnik web stranice zapis će izvršiti brisanje zahtjeva:

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

I na kraju, pogledajmo metode za dohvaćanje cijelog popisa korisnika:

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

Sve ove metode usluge pozvat će KutniJS kontrolor.

3.2. Kutni kontroler

Stvorit ćemo KorisnikCRUDCtrlKutniJS kontroler koji će imati UserCRUDService ubrizgan i služit će se metodama usluga za dobivanje odgovora od poslužitelja, obrađivati uspjeh i pogreška slučajevi i skup $ opseg varijable koje sadrže podatke o odgovoru za njihovo prikazivanje na HTML stranici.

Pogledajmo getUser () funkcija koja poziva getUser (userId) uslužna funkcija i definira dvije metode povratnog poziva u slučaju uspjeha i pogreške. Ako zahtjev poslužitelja uspije, odgovor se sprema u korisnik varijabilna; inače se obrađuju poruke o pogreškama:

app.controller ('UserCRUDCtrl', ['$ scope', 'UserCRUDService', function ($ scope, UserCRUDService) {$ scope.getUser = function () {var id = $ scope.user.id; UserCRUDService.getUser ($ scope.user.id). then (uspjeh funkcije (odgovor) {$ scope.user = response.data; $ scope.user.id = id; $ scope.message = ''; $ scope.errorMessage = '';} , pogreška funkcije (odgovor) {$ scope.message = ''; ako (response.status === 404) {$ scope.errorMessage = 'Korisnik nije pronađen!';} else {$ scope.errorMessage = "Pogreška pri dohvatanju korisnika ! ";}});};}]);

The addUser () funkcija pozvat će odgovarajuću uslužnu funkciju i obraditi odgovor:

$ scope.addUser = function () {if ($ scope.user! = null && $ scope.user.name) {UserCRUDService.addUser ($ scope.user.name, $ scope.user.email). then (uspjeh funkcije) (odgovor) {$ scope.message = 'Korisnik dodan!'; $ scope.errorMessage = '';}, pogreška funkcije (odgovor) {$ scope.errorMessage = 'Pogreška pri dodavanju korisnika!'; $ scope.message = '' ;}); } else {$ scope.errorMessage = 'Unesite ime!'; $ scope.message = ''; }}

The updateUser () i deleteUser () funkcije su slične gornjoj:

$ scope.updateUser = function () {UserCRUDService.updateUser ($ scope.user.id, $ scope.user.name, $ scope.user.email). then (uspjeh funkcije (odgovor) {$ scope.message = 'Korisnik podaci ažurirani! '; $ scope.errorMessage =' ';}, pogreška funkcije (odgovor) {$ scope.errorMessage =' Pogreška prilikom ažuriranja korisnika! '; $ scope.message =' ';}); } $ scope.deleteUser = function () {UserCRUDService.deleteUser ($ scope.user.id) .then (uspjeh funkcije (odgovor) {$ scope.message = 'Korisnik izbrisan!'; $ scope.User = null; $ scope .errorMessage = '';}, pogreška funkcije (odgovor) {$ scope.errorMessage = 'Pogreška prilikom brisanja korisnika!'; $ scope.message = '';}); }

I na kraju, definirajmo funkciju koja dohvaća popis korisnika i sprema ga u korisnika varijabla:

$ scope.getAllUsers = function () {UserCRUDService.getAllUsers (). then (function success (response) {$ scope.users = response.data._embedded.users; $ scope.message = ''; $ scope.errorMessage = ' ';}, pogreška funkcije (odgovor) {$ scope.message =' '; $ scope.errorMessage =' Pogreška pri dohvaćanju korisnika! ';}); }

3.3. HTML stranica

The users.html Stranica će koristiti funkcije kontrolera definirane u prethodnom odjeljku i pohranjene varijable.

Prvo, da bismo koristili kutni modul, moramo postaviti ng-aplikacija svojstvo:

Zatim, kako biste izbjegli tipkanje UserCRUDCtrl.getUser () svaki put kada koristimo funkciju kontrolera, svoje HTML elemente možemo umotati u div s ng-kontroler svojstvo postavljeno:

Stvorimoobrazac koji će unijeti i prikazati vrijednosti za WebiteUser objekt kojim želimo manipulirati. Svaka od njih imat će ng-model skup atributa koji ga veže na vrijednost atributa:

ISKAZNICA:
Ime:
Dob:

Obvezujući iskaznica ulaz u user.id varijabla, na primjer, znači da se svaka vrijednost ulaznog podatka postavi u user.id varijabilna i obrnuto.

Dalje, upotrijebimo ng-klik atribut za definiranje veza koje će pokrenuti pozivanje svake definirane funkcije CRUD kontrolera:

Nabavi korisnika za ažuriranje korisnika Dodaj korisnika za brisanje korisnika

Na kraju, prikažimo popis korisnika u cijelosti i po imenu:

Nabavite sve korisnike
{{usr.name}} {{usr.email}}

4. Zaključak

U ovom uputstvu pokazali smo kako možete stvoriti CRUD aplikaciju pomoću KutniJS i Spring Data REST specifikacija.

Kompletni kod za gornji primjer može se naći u projektu GitHub.

Za pokretanje aplikacije možete upotrijebiti naredbu mvn spring-boot: trčanje i pristupite URL-u /users.html.