streamalism.org

1. Áttekintés

Ebben az oktatóanyagban létrehozunk egy példát egy egyszerű CRUD alkalmazásra, amely az AngularJS-t használja a front-endhez és a Spring Data REST-et a háttérhez.

2. A REST Data Service létrehozása

A perzisztencia támogatásának megteremtése érdekében felhasználjuk a Spring Data REST specifikációt, amely lehetővé teszi számunkra, hogy CRUD műveleteket hajtsunk végre egy adatmodellen.

A REST végpontok beállításával kapcsolatos összes szükséges információt a Spring Data REST bevezetőjében találja meg. Ebben a cikkben újból felhasználjuk a meglévő projektet, amelyet beállítottunk a bevezetéshez.

A kitartás érdekében a H2 a memória adatbázisban.

Adatmodellként az előző cikk meghatározza a WebsiteUser osztály, azzal id, név és email tulajdonságok és egy lerakat felület UserRepository.

Ennek a felületnek a meghatározása utasítja Springet, hogy hozza létre a támogatást a REST gyűjtemény-erőforrások és elem-erőforrások feltárásához. Vizsgáljuk meg közelebbről a rendelkezésünkre álló végpontokat, amelyekről később felhívunk SzögletesJS.

2.1. A gyűjteményi források

Az összes felhasználó listája elérhető lesz a végponton / felhasználók. Ez az URL a GET metódussal meghívható, és az űrlap JSON objektumait adja vissza:

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

2.2. Az elem források

Egyetlen WebsiteUser Az objektum az űrlap URL-jeinek elérésével manipulálható / users / {userID} különböző HTTP módszerekkel és hasznos terhelésekkel.

A WebsiteUser objektum, hozzáférhetünk / users / {userID} a GET módszerrel. Ez az űrlap JSON objektumát adja vissza:

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

Új hozzáadásához WebsiteUser, telefonálnunk kell / felhasználók POST módszerrel. Az új tulajdonságai WebsiteUser rekord hozzá lesz adva a kérelem törzséhez JSON objektumként:

{név: "Bryan", e-mail: "[e-mail védett]"}

Ha nincs hiba, akkor ez az URL egy 201 CREATED állapotkódot ad vissza.

Ha frissíteni akarjuk a WebsiteUser rekordot, meg kell hívnunk az URL-t / users / {UserID} a PATCH módszerrel és az új értékeket tartalmazó kéréstesttel:

{név: "Bryan", e-mail: "[e-mail védett]"}

Törléséhez a WebsiteUser rekordot, meghívhatjuk az URL-t / users / {UserID} a DELETE módszerrel. Ha nincs hiba, akkor a 204 NINCS TARTALMA állapotkódot adja vissza.

2.3. MVC konfiguráció

Ezenkívül hozzáadunk egy alap MVC konfigurációt a html fájlok megjelenítéséhez alkalmazásunkban:

@Configuration @EnableWebMvc public class Az MvcConfig megvalósítja a WebMvcConfigurer {public MvcConfig () {super (); } @Orride public void configureDefaultServletHandling (DefaultServletHandlerConfigurer configurer) {configurer.enable (); }}

2.4. Kereszt származási kérelmek engedélyezése

Ha telepíteni akarjuk a SzögletesJS elülső alkalmazás külön, mint a REST API - akkor engedélyeznünk kell a kereszt-származási kérelmeket.

A Spring Data REST támogatást adott ehhez az 1.5.0 verziótól kezdve. RELEASE. Egy másik domainről érkező kérések engedélyezéséhez mindössze annyit kell tennie, hogy hozzáadja a @CrossOrigin kommentár az adattárhoz:

@CrossOrigin @RepositoryRestResource (collectionResourceRel = "users", path = "users") nyilvános felület A UserRepository kiterjeszti a CrudRepository {}

Ennek eredményeként a REST végpontok minden válaszára egy fejléc tartozik Access-Control-Allow-Origin hozzá lesz adva.

3. Az AngularJS kliens létrehozása

A CRUD alkalmazás kezelőfelületének létrehozásához felhasználjuk SzögletesJS - jól ismert JavaScript keretrendszer, amely megkönnyíti a front-end alkalmazások létrehozását.

Használata érdekében SzögletesJS, először be kell vonnunk a szögletes.min.js fájl a html oldalunkon, amelyet meghívunk users.html:

Ezután létre kell hoznunk egy szögletes modult, vezérlőt és szolgáltatást, amely felhívja a REST végpontokat és megjeleníti a visszaküldött adatokat.

Ezeket a nevű JavaScript fájlba helyezzük app.js azt is bele kell foglalni a users.html oldal:

3.1. Szögletes szolgálat

Először hozzunk létre egy úgynevezett szögletes szolgáltatást UserCRUDService hogy felhasználja az injekciót SzögletesJS$ http szolgáltatás a szerver felé történő hívások kezdeményezéséhez. Minden hívás külön módszerrel történik.

Vessünk egy pillantást a felhasználó azonosítóval történő lekérésének módszerének meghatározására a / users / {userID} végpont:

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

Ezután határozzuk meg a felhasználó hozzáadása módszer, amely POST kérést küld a / felhasználók URL és elküldi a felhasználói értékeket a adat tulajdonság:

this.addUser = function addUser (név, e-mail) {return $ http ({módszer: 'POST', url: 'felhasználók', adatok: {név: név, e-mail: e-mail}}); }

A updateUser metódus hasonló a fentihez, csakhogy lesz id paraméter és PATCH kérést küld:

this.updateUser = function updateUser (id, név, e-mail) {return $ http ({method: 'PATCH', url: 'users /' + id, data: {név: név, e-mail: email}}); }

A törlés módszere a WebsiteUser rekord törlési kérelmet küld:

this.deleteUser = function deleteUser (id) {return $ http ({metódus: 'DELETE', url: 'felhasználók /' + id})}

Végül pedig nézzük meg a teljes felhasználói lista lekérésének módszereit:

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

Ezeket a szolgáltatási módszereket egy SzögletesJS vezérlő.

3.2. Szögvezérlő

Létrehozunk egy UserCRUDCtrlSzögletesJS vezérlő, amelynek lesz UserCRUDService és a szolgáltatási módszereket használja a szerver válaszának megszerzésére, kezelje a siker és hiba esetek, és meg $ hatókör változók, amelyek a válaszadatokat tartalmazzák a HTML oldalon való megjelenítéshez.

Vessünk egy pillantást a getUser () függvény, amely meghívja a getUser (userId) szolgáltatási funkció, és két visszahívási módszert határoz meg siker és hiba esetén. Ha a kiszolgálói kérés sikeres, akkor a választ a felhasználó változó; ellenkező esetben a hibaüzeneteket kezeljük:

app.controller ('UserCRUDCtrl', ['$ hatókör', 'UserCRUDService', függvény ($ hatókör, UserCRUDService) {$ hatókör.getUser = függvény () {var id = $ hatókör.user.id; UserCRUDService.getUser ($ scope.user.id) .then (a függvény sikere (válasz) {$ scope.user = response.data; $ scope.user.id = id; $ scope.message = ""; $ scope.errorMessage = "";} , függvényhiba (válasz) {$ scope.message = ''; if (response.status === 404) {$ scope.errorMessage = 'A felhasználót nem találtuk!';} else {$ scope.errorMessage = "Hiba a felhasználó beolvasásakor ! ";}});};}]);

A felhasználó hozzáadása() függvény meghívja a megfelelő szervizfunkciót és kezeli a választ:

$ scope.addUser = function () {if ($ scope.user! = null && $ scope.user.name) {UserCRUDService.addUser ($ scope.user.name, $ scope.user.email). akkor (a függvény sikere (válasz) {$ hatókör.message = 'Felhasználó hozzáadva!'; $ hatókör.errorMessage = '';}, függvényhiba (válasz) {$ hatókör.errorMessage = 'Hiba a felhasználó hozzáadásakor!'; $ hatókör.message = "" ;}); } else {$ scope.errorMessage = 'Kérjük, adjon meg egy nevet!'; $ scope.message = ''; }}

A updateUser () és deleteUser () funkciók hasonlóak a fentiekhez:

$ scope.updateUser = function () {UserCRUDService.updateUser ($ scope.user.id, $ scope.user.name, $ scope.user.email) .then (a függvény sikere (válasz) {$ scope.message = 'Felhasználó adatok frissítve! '; $ hatókör.errorMessage =' ';}, függvényhiba (válasz) {$ hatókör.errorMessage =' Hiba a felhasználó frissítésekor! '; $ hatókör.message =' ';}); } $ scope.deleteUser = function () {UserCRUDService.deleteUser ($ scope.user.id) .majd (a függvény sikere (válasz) {$ scope.message = 'Felhasználó törölve!'; $ hatókör.User = null; $ hatókör .errorMessage = '';}, függvényhiba (válasz) {$ scope.errorMessage = 'Hiba a felhasználó törlésekor!'; $ scope.message = '';}); }

Végül definiáljuk azt a függvényt, amely lekéri a felhasználók listáját, és tárolja a felhasználók változó:

$ scope.getAllUsers = function () {UserCRUDService.getAllUsers () .then (függvénysiker (válasz) {$ scope.users = response.data._embedded.users; $ scope.message = ""; $ scope.errorMessage = ' ';}, function error (response) {$ scope.message =' '; $ scope.errorMessage =' Hiba a felhasználók megszerzésében! ';}); }

3.3. HTML oldal

A users.html oldalon az előző szakaszban meghatározott vezérlőfunkciókat és a tárolt változókat fogja használni.

Először is, az Angular modul használatához be kell állítanunk a ng-app ingatlan:

Ezután a gépelés elkerülése érdekében UserCRUDCtrl.getUser () valahányszor a vezérlő valamely funkcióját használjuk, a HTML elemeinket a-ba csomagolhatjuk div val,-vel ng-controller tulajdonságkészlet:

Hozzuk létre aűrlap, amely beviszi és megjeleníti a WebiteUser tárgy, amelyet manipulálni akarunk. Ezek mindegyikének lesz egy ng-modell attribútumkészlet, amely az attribútum értékéhez köti:

Azonosító:
Név:
Kor:

Kötés a id bemenet a Felhasználói azonosító A változó például azt jelenti, hogy amikor a bemenet értéke megváltozik, ez az érték a Felhasználói azonosító változó és fordítva.

Ezután használjuk a ng kattintás attribútum az egyes definiált CRUD vezérlőfunkciók meghívását kiváltó hivatkozások meghatározásához:

Felhasználói frissítés letöltése Felhasználó hozzáadása Felhasználó hozzáadása Felhasználó törlése

Végül jelenítsük meg a felhasználók listáját teljes egészében és név szerint:

Minden felhasználó megszerzése
{{usr.name}} {{usr.email}}

4. Következtetés

Ebben az oktatóanyagban bemutattuk, hogyan hozhat létre CRUD alkalmazást SzögletesJS és a Tavaszi adatok REST leírás.

A fenti példa teljes kódja megtalálható a GitHub projektben.

Az alkalmazás futtatásához használhatja a parancsot mvn spring-boot: fut és elérheti az URL-t /users.html.