streamalism.org

1. Prehľad

V tomto výučbe vytvoríme príklad jednoduchej aplikácie CRUD pomocou AngularJS pre front-end a Spring Data REST pre back-end.

2. Vytvorenie dátovej služby REST

Aby sme vytvorili podporu pre perzistenciu, využijeme špecifikáciu Spring Data REST, ktorá nám umožní vykonávať operácie CRUD na dátovom modeli.

Všetky potrebné informácie o tom, ako nastaviť koncové body REST, nájdete v úvode Spring Data REST. V tomto článku znova použijeme existujúci projekt, ktorý sme nastavili, na úvodný kurz.

Na vytrvalosť použijeme H2 v pamäťovej databáze.

Ako dátový model definuje predchádzajúci článok a Užívateľ webových stránok trieda, s id, názov a e-mail vlastnosti a rozhranie úložiska s názvom UserRepository.

Definovanie tohto rozhrania dáva spoločnosti Spring pokyn, aby vytvorila podporu pre vystavenie prostriedkov zbierky REST a prostriedkov položiek. Pozrime sa podrobnejšie na koncové body, ktoré máme k dispozícii teraz, keď z nich budeme neskôr volať AngularJS.

2.1. Zdroje zbierky

Zoznam všetkých používateľov bude k dispozícii v koncovom bode / používateľov. Túto adresu URL je možné zavolať pomocou metódy GET a vráti objekty JSON vo formulári:

{"_embedded": {"users": [{"name": "Bryan", "age": 20, "_links": {"self": {"href": "// localhost: 8080 / users / 1 "}," Používateľ ": {" href ":" // localhost: 8080 / users / 1 "}}}, ...]}}

2.2. Zdroje položiek

Slobodný Užívateľ webových stránok s objektom je možné manipulovať prístupom k URL adresám formulára / users / {userID} s rôznymi metódami HTTP a požadovať užitočné zaťaženie.

Na získanie a Užívateľ webových stránok objekt, máme prístup / users / {userID} metódou GET. Týmto sa vráti objekt JSON formulára:

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

Ak chcete pridať nový Užívateľ webových stránok, budeme musieť zavolať / používateľov metódou POST. Atribúty nového Užívateľ webových stránok záznam bude pridaný do tela žiadosti ako objekt JSON:

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

Ak nie sú žiadne chyby, táto adresa URL vráti stavový kód 201 CREATED.

Ak chceme aktualizovať atribúty Užívateľ webových stránok záznam, musíme zavolať URL / users / {UserID} pomocou metódy PATCH a tela žiadosti obsahujúceho nové hodnoty:

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

Ak chcete vymazať a Užívateľ webových stránok záznam, môžeme nazvať URL / users / {UserID} metódou DELETE. Ak nie sú žiadne chyby, vráti stavový kód 204 ŽIADNY OBSAH.

2.3. Konfigurácia MVC

Pridáme tiež základnú konfiguráciu MVC na zobrazovanie súborov html v našej aplikácii:

@Configuration @EnableWebMvc verejná trieda MvcConfig implementuje WebMvcConfigurer {public MvcConfig () {super (); } @Override public void configureDefaultServletHandling (konfigurátor DefaultServletHandlerConfigurer) {configurer.enable (); }}

2.4. Povolenie krížových požiadaviek na pôvod

Ak chceme nasadiť AngularJS klientská aplikácia oddelene od rozhrania REST API - potom musíme povoliť žiadosti krížového pôvodu.

Spring Data REST k tomu pridala podporu počnúc verziou 1.5.0.RELEASE. Ak chcete povoliť žiadosti z inej domény, stačí pridať @CrossOrigin anotácia do úložiska:

@CrossOrigin @RepositoryRestResource (collectionResourceRel = "users", path = "users") verejné rozhranie UserRepository rozširuje CrudRepository {}

Výsledkom je, že pri každej odpovedi z koncových bodov REST sa použije hlavička Access-Control-Allow-Origin budú doplnené.

3. Vytvorenie klienta AngularJS

Na vytvorenie klientskeho rozhrania našej aplikácie CRUD použijeme AngularJS - dobre známy rámec JavaScriptu, ktorý uľahčuje vytváranie front-end aplikácií.

Aby bolo možné použiť AngularJS, najskôr musíme zahrnúť angular.min.js súbor na našej html stránke, ktorý bude volaný users.html:

Ďalej musíme vytvoriť modul Angular, radič a službu, ktoré budú volať koncové body REST a zobrazovať vrátené údaje.

Tieto budú umiestnené v súbore JavaScript s názvom app.js to je tiež potrebné zahrnúť do users.html stránka:

3.1. Uhlová služba

Najskôr vytvorme službu Angular s názvom UserCRUDService ktorý použije injekčne AngularJS$ http služba, ktorá umožňuje volať na server. Každý hovor sa uskutoční samostatným spôsobom.

Poďme sa pozrieť na definovanie metódy načítania používateľa pomocou id pomocou / users / {userID} koncový bod:

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

Ďalej definujeme addUser metóda, ktorá podáva POST požiadavku na / používateľov URL a odošle užívateľské hodnoty v údaje atribút:

this.addUser = funkcia addUser (meno, e-mail) {návrat $ http ({metóda: 'POST', url: 'používatelia', údaje: {meno: meno, e-mail: e-mail}}); }

The updateUser metóda je podobná tej vyššie uvedenej, ibaže bude mať id parameter a zadá požiadavku PATCH:

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

Spôsob odstránenia a Užívateľ webových stránok záznam vykoná požiadavku na VYMAZANIE:

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

A nakoniec sa pozrime na metódy na získanie celého zoznamu používateľov:

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

Všetky tieto metódy služby bude nazývať AngularJS kontrolór.

3.2. Uhlový ovládač

Vytvoríme UserCRUDCtrlAngularJS radič, ktorý bude mať UserCRUDService vložené a použije servisné metódy na získanie odpovede od servera, vybaví úspech a chyba prípady a sada $ rozsah premenné obsahujúce údaje odozvy na ich zobrazenie na stránke HTML.

Poďme sa pozrieť na getUser () funkcia, ktorá volá getUser (userId) servisná funkcia a definuje dve metódy spätného volania v prípade úspechu a chyby. Ak je požiadavka na server úspešná, odpoveď sa uloží do a používateľ premenná; v opačnom prípade sa spracovávajú chybové správy:

app.controller ('UserCRUDCtrl', ['$ scope', 'UserCRUDService', function ($ scope, UserCRUDService) {$ scope.getUser = function () {var id = $ scope.user.id; UserCRUDService.getUser ($ scope.user.id) .then (úspešnosť funkcie (odpoveď) {$ 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 = "Chyba pri získavaní používateľa ! ";}});};}]);

The addUser () funkcia zavolá príslušnú službu a spracuje odpoveď:

$ scope.addUser = function () {if ($ scope.user! = null && $ scope.user.name) {UserCRUDService.addUser ($ scope.user.name, $ scope.user.email). potom (úspešnosť funkcie (odpoveď) {$ scope.message = 'Používateľ pridaný!'; $ scope.errorMessage = '';}, chyba funkcie (odpoveď) {$ scope.errorMessage = 'Chyba pri pridávaní používateľa!'; $ scope.message = '' ;}); } else {$ scope.errorMessage = 'Prosím, zadajte meno!'; $ scope.message = ''; }}

The updateUser () a deleteUser () funkcie sú podobné tým vyššie uvedeným:

$ scope.updateUser = function () {UserCRUDService.updateUser ($ scope.user.id, $ scope.user.name, $ scope.user.email) .then (úspešnosť funkcie (odpoveď) {$ scope.message = 'Používateľ data updated! '; $ scope.errorMessage =' ';}, chyba funkcie (odpoveď) {$ scope.errorMessage =' Chyba pri aktualizácii používateľa! '; $ scope.message =' ';}); } $ scope.deleteUser = function () {UserCRUDService.deleteUser ($ scope.user.id) .then (funkcia úspešná (odpoveď) {$ scope.message = 'Používateľ odstránený!'; $ scope.User = null; $ scope .errorMessage = '';}, chyba funkcie (odpoveď) {$ scope.errorMessage = 'Chyba pri mazaní používateľa!'; $ scope.message = '';}); }

A nakoniec definujme funkciu, ktorá načíta zoznam používateľov a uloží ich do súboru používateľov premenná:

$ scope.getAllUsers = function () {UserCRUDService.getAllUsers () .then (úspešnosť funkcie (odpoveď) {$ scope.users = response.data._embedded.users; $ scope.message = ''; $ scope.errorMessage = ' ';}, chyba funkcie (odpoveď) {$ scope.message =' '; $ scope.errorMessage =' Chyba pri získavaní používateľov! ';}); }

3.3. Stránka HTML

The users.html stránka bude využívať funkcie radiča definované v predchádzajúcej časti a uložené premenné.

Najskôr, aby sme mohli používať modul Angular, musíme nastaviť ng-app nehnuteľnosť:

Potom sa vyhnite písaniu UserCRUDCtrl.getUser () zakaždým, keď použijeme funkciu ovládača, môžeme naše prvky HTML zabaliť do a div s ng-radič sada vlastností:

Vytvormeformulár, ktorý zadá a zobrazí hodnoty pre WebiteUser objekt, s ktorým chceme manipulovať. Každá z nich bude mať a ng-model sada atribútov, ktorá ho naviaže na hodnotu atribútu:

ID:
Názov:
Vek:

Viazanie id vstup do ID používateľa premenná napríklad znamená, že kedykoľvek sa zmení hodnota vstupu, táto hodnota sa nastaví v ID používateľa premenná a naopak.

Ďalej použijeme ng-klik atribút na definovanie odkazov, ktoré spustia vyvolanie každej definovanej funkcie radiča CRUD:

Získať používateľa Aktualizovať používateľa Pridať používateľa Odstrániť používateľa

Na záver zobrazíme celý zoznam používateľov a ich mená:

Získajte všetkých používateľov
{{usr.name}} {{usr.email}}

4. Záver

V tomto tutoriáli sme si ukázali, ako môžete vytvoriť aplikáciu CRUD pomocou AngularJS a Jarné údaje REST špecifikácia.

Celý kód pre vyššie uvedený príklad nájdete v projekte GitHub.

Na spustenie aplikácie môžete použiť príkaz mvn spring-boot: spustiť a pristúpiť k adrese URL /users.html.