Budovanie webovej aplikácie s Spring Boot a Angular

1. Prehľad

Spring Boot a Angular tvoria výkonný tandem, ktorý skvele funguje pri vývoji webových aplikácií s minimálnymi nárokmi na priestor.

V tomto návode použijeme Spring Boot na implementáciu back-endu RESTful a Angular na vytvorenie frontendu založeného na JavaScripte.

2. Aplikácia Spring Boot

Funkčnosť našej ukážkovej webovej aplikácie bude skutočne dosť zjednodušujúca. Iba sa zúži na načítanie a zobrazenie a Zoznam subjektov JPA z databázy H2 v pamäti a pretrvávajúce nové prostredníctvom jednoduchého formulára HTML.

2.1. The Maven Dependencies

Tu sú závislosti nášho projektu Spring Boot:

 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-data-jpa com.h2database h2 runtime 

Všimnite si, že sme zahrnuli spring-boot-starter-web pretože to použijeme na vytvorenie služby REST a spring-boot-starter-jpa na implementáciu vrstvy perzistencie.

Verziu databázy H2 spravuje aj rodič Spring Boot.

2.2. Trieda entity JPA

Aby sme rýchlo prototypovali doménovú vrstvu našej aplikácie, definujme jednoduchú triedu entít JPA, ktorá bude zodpovedná za modelovanie používateľov:

@Entity verejná trieda Používateľ {@Id @GeneratedValue (strategy = GenerationType.AUTO) súkromné ​​dlhé ID; súkromné ​​konečné meno reťazca; súkromný záverečný reťazcový e-mail; // štandardné konštruktory / setre / getre / toString} 

2.3. The UserRepository Rozhranie

Pretože budeme potrebovať základnú funkčnosť CRUD na Používateľ subjekty, musíme tiež definovať a UserRepository rozhranie:

@Repository verejné rozhranie UserRepository rozširuje CrudRepository {} 

2.4. Kontrolór REST

Teraz poďme implementovať REST API. V tomto prípade ide iba o jednoduchý ovládač REST.

@RestController @CrossOrigin (origins = "// localhost: 4200") verejná trieda UserController {// štandardné konštruktory private final UserRepository userRepository; @GetMapping ("/ users") public List getUsers () {return (List) userRepository.findAll (); } @PostMapping ("/ users") void addUser (@RequestBody User user) {userRepository.save (user); }} 

V definícii pojmu nie je nič inherentne zložité UserController trieda.

Jediný detail implementácie, ktorý tu samozrejme stojí za zmienku, je samozrejme použitie @CrossOrigin anotácia. Ako už z názvu vyplýva, anotácia umožňuje na serveri zdieľanie zdrojov medzi zdrojmi (CORS).

Tento krok nie je vždy nevyhnutný. Pretože nasadzujeme náš Úhlový frontend na // localhost: 4200 a náš bootovací backend do // localhost: 8080, prehľadávač by inak odmietol žiadosti od jedného k druhému.

Pokiaľ ide o metódy kontrolóra, getUser () načíta všetky Používateľ subjekty z databázy. Podobne addUser () metóda zachováva novú entitu v databáze, ktorá sa odovzdáva v tele žiadosti.

Aby sme to zjednodušili, zámerne sme vynechali implementáciu radiča, ktorá spustila overenie Spring Boot pred pretrvávaním entity. Vo výrobe však nemôžeme dôverovať vstupu používateľa, takže overenie na strane servera by malo byť povinnou funkciou.

2.5. Zavádzanie aplikácie Spring Boot

Na záver vytvoríme štandardnú triedu bootstrappingu Spring Boot a naplníme databázu niekoľkými Používateľ subjekty:

@SpringBootApplication verejná trieda Aplikácia {public static void main (String [] args) {SpringApplication.run (Application.class, args); } @Bean CommandLineRunner init (UserRepository userRepository) {return args -> {Stream.of ("John", "Julie", "Jennifer", "Helen", "Rachel"). ForEach (name -> {User user = new Používateľ (meno, meno.toLowerCase () + "@ doména.com"); userRepository.save (používateľ);}); userRepository.findAll (). forEach (System.out :: println); }; }}

Teraz spustíme aplikáciu. Ako sa dalo očakávať, mali by sme vidieť zoznam Používateľ entity vytlačené na konzolu pri štarte:

Používateľ {id = 1, name = John, [email protected]} Používateľ {id = 2, name = Julie, [email protected]} Používateľ {id = 3, name = Jennifer, [email protected]} Používateľ {id = 4 , name = Helen, [e-mail chránený]} Používateľ {id = 5, name = Rachel, [e-mail chránený]}

3. Uhlová aplikácia

S našou spustenou ukážkovou aplikáciou Spring Boot poďme teraz vytvoriť jednoduchú uhlovú aplikáciu, ktorá bude schopná využívať API REST kontroléra.

3.1. Uhlová inštalácia CLI

Na vytvorenie našej aplikácie Angular použijeme Angular CLI, výkonný nástroj príkazového riadku.

Uhlové CLI je odvtedy mimoriadne cenným nástrojom umožňuje nám vytvoriť celý projekt Angular od nuly a generovať komponenty, služby, triedy a rozhrania pomocou niekoľkých príkazov.

Po nainštalovaní npm (Node Package Manager) otvoríme príkazovú konzolu a zadáme príkaz:

npm install -g @ angular / [chránený e-mailom]

To je všetko. Vyššie uvedený príkaz nainštaluje najnovšiu verziu Angular CLI.

3.2. Projektové lešenie s uhlovým CLI

V skutočnosti môžeme vytvoriť našu uhlovú aplikačnú štruktúru od základu. Úprimne povedané, ide o chybu a časovo náročnú úlohu, ktorej by sme sa mali vo všetkých prípadoch vyhnúť.

Namiesto toho necháme Angular CLI, aby za nás urobila ťažkú ​​prácu. Poďme teda otvoriť príkazovú konzolu, potom prejdite do priečinka, v ktorom chceme vytvoriť našu aplikáciu, a zadajte príkaz:

ng nový angularclient

The Nový Príkaz vygeneruje celú štruktúru aplikácie v rámci angularclient adresár.

3.3. Vstupný bod uhlovej aplikácie

Ak sa pozrieme dovnútra angularclient priečinok, uvidíme, že Angular CLI pre nás efektívne vytvoril celý projekt.

Súbory aplikácie Angular používajú TypeScript, typovú nadsúpravu JavaScriptu, ktorá sa kompiluje do obyčajného JavaScriptu. Vstupným bodom akejkoľvek uhlovej aplikácie je však obyčajný starý index.html spis.

Upravme tento súbor takto:

    Jarná topánka - uhlová aplikácia 

Ako vidíme vyššie, zahrnuli sme Bootstrap 4, takže môžeme dať našim komponentom aplikačného používateľského rozhrania efektnejší vzhľad. Samozrejme je možné vyzdvihnúť ďalšiu súpravu používateľského rozhrania z balíka, ktorý je k dispozícii tam.

Všimnite si prosím zvyk značky vo vnútri oddiel. Na prvý pohľad vyzerajú dosť divne nie je štandardným prvkom HTML 5.

Nechajme ich tam, ako je selektor koreňov, ktorý Angular používa na vykreslenie koreňového komponentu aplikácie.

3.4. The app.component.ts Koreňový komponent

Aby sme lepšie pochopili, ako Angular viaže šablónu HTML na komponent, poďme na src / app adresár a upravte app.component.ts Súbor TypeScript - koreňový komponent:

importovať {Komponent} z '@ angular / core'; @Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})) exportná trieda AppComponent {title: string; constructor () {this.title = 'Spring Boot - Angular Application'; }}

Z pochopiteľných dôvodov sa nebudeme učiť TypeScript hlboko. Aj napriek tomu si všimnime, že súbor definuje znak AppComponent triedy, ktorá vyhlasuje pole titul typu povrázok (s nízkym písmenom). Definitívne je to napísaný JavaScript.

Ďalej konštruktor inicializuje pole pomocou a povrázok hodnota, ktorá je dosť podobná tomu, čo robíme v Jave.

Najrelevantnejšia časť je the @ Komponent značka alebo dekorátor metadát, ktorý definuje tri prvky:

  1. selektor - selektor HTML, ktorý sa používa na naviazanie komponentu na súbor šablóny HTML
  2. templateUrl - súbor šablón HTML spojený s komponentom
  3. styleUrls - jeden alebo viac súborov CSS spojených s komponentom

Podľa očakávania môžeme použiť app.component.html a app.component.css súbory na definovanie šablóny HTML a štýlov CSS koreňovej zložky.

Nakoniec selektor prvok viaže celý komponent na volič zahrnutý v index.html spis.

3.5. The app.component.html Súbor

Keďže app.component.html súbor nám umožňuje definujte šablónu HTML koreňového komponentu - AppComponent trieda - použijeme ju na vytvorenie základnej navigačnej lišty s dvoma tlačidlami.

Ak klikneme na prvé tlačidlo, Angular zobrazí tabuľku obsahujúcu zoznam Používateľ subjekty uložené v databáze. Podobne, ak klikneme na druhú, vytvorí sa formulár HTML, ktorý môžeme použiť na pridanie nových entít do databázy:

{{title}}

  • Zoznam používateľov
  • Pridať používateľa

Prevažná časť súboru je štandardný HTML s niekoľkými upozorneniami, ktoré stojí za zmienku.

Prvý z nich je {{title}} výraz. Dvojité kučeravé rovnátka {{variable-name}} je zástupný symbol, ktorý Angular používa na vykonávanie variabilnej interpolácie.

Majte na pamäti, že AppComponent trieda inicializovala titul pole s hodnotou Jarná topánka - uhlová aplikácia. Angular teda zobrazí hodnotu tohto poľa v šablóne. Rovnako sa zmena hodnoty v konštruktore prejaví v šablóne.

Druhá vec, ktorú si treba uvedomiť, je routerLink atribút.

Angular používa tento atribút na smerovanie požiadaviek prostredníctvom svojho smerovacieho modulu (viac o tom neskôr). Nateraz stačí vedieť, že modul odošle požiadavku do / používateľov cesta ku konkrétnemu komponentu a požiadavka na / adduser na inú zložku.

V obidvoch prípadoch sa šablóna HTML priradená k zodpovedajúcemu komponentu vykreslí v rámci súboru zástupný symbol.

3.6. The Používateľ Trieda

Pretože naša uhlová aplikácia sa načíta a bude pretrvávať Používateľ entít v databáze, poďme implementovať jednoduchý model domény s TypeScriptom.

Otvorme terminálovú konzolu a vytvorme Model adresár:

ng generovať užívateľa triedy

Uhlové CLI vygeneruje prázdny údaj Používateľ trieda. Vyplníme to niekoľkými poľami:

trieda exportu User {id: string; meno: reťazec; email: string; }

3.7. The UserService Služby

S našou doménou na strane klienta Používateľ trieda je už nastavená, poďme teraz implementovať triedu služieb, ktorá vykonáva požiadavky GET a POST na koncový bod // localhost: 8080 / users.

To nám umožní zapuzdriť prístup k radiču REST do jednej triedy, ktorú môžeme znova použiť v celej aplikácii.

Otvoríme konzolový terminál a potom vytvoríme a služby adresár a v tomto adresári zadajte nasledujúci príkaz:

ng generovať službu užívateľ-služba

Teraz otvorme user.service.ts súbor, ktorý práve vytvoril Angular CLI, a refaktorujte ho:

importovať {Injectable} z '@ angular / core'; importovať {HttpClient, HttpHeaders} z '@ angular / common / http'; importovať {User} z '../model/user'; importovať {Pozorovateľné} z 'rxjs / Pozorovateľné'; @Injectable () exportná trieda UserService {súkromní používateliaUrl: reťazec; konštruktor (súkromný http: HttpClient) {this.usersUrl = '// localhost: 8080 / users'; } public findAll (): Pozorovateľné {return this.http.get (this.usersUrl); } public save (user: User) {return this.http.post (this.usersUrl, user); }}

Nepotrebujeme pevné pozadie na stroji TypeScript, aby sme pochopili, ako UserService triedne diela. Jednoducho povedané, zapuzdruje sa do opakovane použiteľnej súčasti všetky funkcie potrebné na využitie rozhrania API radiča REST, ktoré sme implementovali predtým v Spring Boot.

The findAll () metóda vykonáva požiadavku GET HTTP do koncového bodu // localhost: 8080 / users cez Angular HttpClient. Metóda vráti znak Pozorovateľné inštancia, ktorá obsahuje pole Používateľ predmety.

Rovnako tak uložiť () metóda vykonáva POST HTTP požiadavku na // localhost: 8080 / users koncový bod.

Zadaním typu Používateľ v HttpClientPri požiadavkách na metódy môžeme back-endové odpovede spotrebovať jednoduchšie a efektívnejšie.

Na záver poďme všimnite si použitie @Injectable () značka metadát. To signalizuje, že služba by mala byť vytvorená a vložená pomocou injektorov závislosti Angular.

3.8. The UserListComponent Komponent

V takom prípade UserService trieda je tenká stredná vrstva medzi službou REST a prezentačnou vrstvou aplikácie. Preto musíme definovať komponent zodpovedný za vykreslenie zoznamu Používateľ subjekty pretrvávali v databáze.

Poďme otvoriť terminálovú konzolu a potom vytvoriť zoznam používateľov adresár a vygenerovať komponent zoznamu používateľov:

ng generovať zoznam používateľov komponentov

Uhlové CLI vygeneruje prázdnu triedu komponentu, ktorá implementuje ngOnInit rozhranie. Rozhranie deklaruje háčik ngOnInit () metóda, ktorú Angular zavolá po dokončení inštancie implementačnej triedy a po zavolaní aj jej konštruktora.

Poďme triedu refaktorovať, aby mohla trvať a UserService inštancia v konštruktore:

importovať {Component, OnInit} z '@ angular / core'; importovať {User} z '../model/user'; importovať {UserService} z '../service/user.service'; @Component ({selector: 'app-user-list', templateUrl: './user-list.component.html', styleUrls: ['./user-list.component.css']}) exportná trieda UserListComponent implementuje OnInit {users: User []; konštruktor (private userService: UserService) {} ngOnInit () {this.userService.findAll (). subscribe (data => {this.users = data;}); }} 

Vykonávanie UserListComponent trieda je pekne vysvetľujúca. Jednoducho používa UserService's findAll () metóda na získanie všetkých entít pretrvávajúcich v databáze a ich uloženie do súboru používateľov lúka.

Ďalej musíme upraviť súbor HTML komponentu, user-list.component.html, na vytvorenie tabuľky, ktorá zobrazuje zoznam entít:

#názovEmail
{{ ID používateľa }}{{user.name}}{{user.email}}

Všimnite si použitie * ngFor smernice. Táto smernica sa nazýva a opakovača môžeme ho použiť na iteráciu obsahu premennej a na iteratívne vykreslenie prvkov HTML. V tomto prípade sme ho použili na dynamické vykreslenie riadkov tabuľky.

Okrem toho sme na ukazovanie súboru použili variabilnú interpoláciu id,názova e-mail každého používateľa.

3.9. The UserFormComponent Komponent

Podobne musíme vytvoriť komponent, ktorý nám umožní vydržať nový Používateľ objekt v databáze.

Vytvorme a užívateľský formulár adresár a zadajte nasledujúci text:

ng generovať užívateľský formulár komponentu 

Ďalej otvoríme user-form.component.ts súbor a pridať do súboru UserFormComponent trieda metóda na ukladanie a Používateľ objekt:

importovať {Komponent} z '@ angular / core'; importovať {ActivatedRoute, Router} z '@ angular / router'; importovať {UserService} z '../service/user.service'; importovať {User} z '../model/user'; @Component ({selector: 'app-user-form', templateUrl: './user-form.component.html', styleUrls: ['./user-form.component.css']}) exportná trieda UserFormComponent {užívateľ : Používateľ; konštruktor (súkromná trasa: ActivatedRoute, súkromný smerovač: smerovač, súkromná služba používateľa: služba používateľa) {this.user = nový používateľ (); } onSubmit () {this.userService.save (this.user) .subscribe (result => this.gotoUserList ()); } gotoUserList () {this.router.navigate (['/ users']); }}

V tomto prípade, UserFormComponent tiež berie a UserService napríklad v konštruktore, ktorý onSubmit () metóda používa na uloženie dodaného Používateľ objekt.

Pretože potrebujeme znovu zobraziť aktualizovaný zoznam entít, akonáhle budeme mať nový, hovoríme gotoUserList () metóda po vložení, ktorá používateľa presmeruje na stránku / používateľov cesta.

Okrem toho musíme upraviť user-form.component.html súbor a vytvorte formulár HTML na zotrvanie nového používateľa v databáze:

 Meno Meno je vyžadované E-mail Je požadovaný email Odoslať 

Na prvý pohľad vyzerá forma celkom štandardne. V zákulisí ale obsahuje veľa funkcií Angular.

Všimnime si použitie the ngOdoslať smernica, ktorá volá onSubmit () pri odoslaní formulára.

Ďalej sme definovali premenná šablóny #userForm, takže Angular automaticky pridá NgForm smernica, ktorá nám umožňuje sledovať formu ako celok.

The NgForm smernica obsahuje ovládacie prvky, ktoré sme vytvorili pre prvky formulára pomocou ngModel smernice a a názov atribút a tiež sleduje ich vlastnosti vrátane ich stavu.

The ngModel smernica nám poskytuje funkciu obojsmerného viazania údajov medzi ovládacími prvkami formulára a doménovým modelom na strane klienta - serverom Používateľ trieda.

To znamená, že údaje zadané do vstupných polí formulára budú prúdiť do modelu - a naopak. Zmeny v oboch prvkoch sa okamžite prejavia prostredníctvom manipulácie modelu DOM.

Navyše, ngModel umožňuje nám sledovať stav každej kontroly formulára a vykonávať validáciu na strane klienta pridaním ku každému ovládaciemu prvku rôzne triedy CSS a vlastnosti DOM.

Vo vyššie uvedenom súbore HTML sme použili vlastnosti použité na ovládacie prvky formulára iba na zobrazenie výstražného okna, keď sa zmenili hodnoty vo formulári.

3.10. The app-routing.module.ts Súbor

Aj keď sú komponenty funkčné izolovane, stále musíme používať mechanizmus na ich vyvolanie, keď používateľ klikne na tlačidlá na navigačnej lište.

To je miesto, kde Modul smerovača vstupuje do hry. Poďme teda otvoriť app-routing.module.ts súbor a nakonfigurovať modul, aby mohol odosielať požiadavky zodpovedajúcim komponentom:

importovať {NgModule} z '@ angular / core'; importovať {Routes, RouterModule} z '@ angular / router'; importovať {UserListComponent} z './user-list/user-list.component'; importovať {UserFormComponent} z './user-form/user-form.component'; const routes: Routes = [{cesta: 'users', komponent: UserListComponent}, {cesta: 'adduser', komponent: UserFormComponent}]; @NgModule ({import: [RouterModule.forRoot (trasy)], export: [RouterModule]}) trieda exportu AppRoutingModule {} 

Ako vidíme vyššie, the Trasy pole dáva smerovaču pokyn, ktorý komponent sa má zobraziť, keď používateľ klikne na odkaz alebo zadá adresu URL do panela s adresou prehliadača.

Trasa sa skladá z dvoch častí:

  1. Cesta - a povrázok , ktorá sa zhoduje s adresou URL v paneli s adresou prehliadača
  2. Komponent - komponent, ktorý sa má vytvoriť, keď je trasa aktívna (navigovaná)

Ak používateľ klikne na ikonu Zoznam používateľov tlačidlo, ktoré odkazuje na / používateľov cestu alebo zadá adresu URL do panela s adresou prehľadávača, smerovač vykreslí UserListComponent súbor šablóny komponentu v zástupný symbol.

Rovnako tak, ak kliknú na ikonu Pridať používateľa tlačidlo, vykreslí UserFormComponent zložka.

3.11. The app.module.ts Súbor

Ďalej musíme upraviť app.module.ts súbor, takže Angular môže importovať všetky požadované moduly, komponenty a služby.

Ďalej musíme určiť, ktorého poskytovateľa použijeme na vytvorenie a vloženie súboru UserService trieda. V opačnom prípade ho Angular nebude môcť vložiť do tried komponentov:

importovať {BrowserModule} z '@ angular / platform-browser'; importovať {NgModule} z '@ angular / core'; importovať {AppRoutingModule} z './app-routing.module'; importovať {FormsModule} z '@ angular / forms'; importovať {HttpClientModule} z '@ angular / common / http'; importovať {AppComponent} z './app.component'; importovať {UserListComponent} z './user-list/user-list.component'; importovať {UserFormComponent} z './user-form/user-form.component'; importovať {UserService} z './service/user.service'; @NgModule ({deklarácie: [AppComponent, UserListComponent, UserFormComponent], importy: [BrowserModule, AppRoutingModule, HttpClientModule, FormsModule], poskytovatelia: [UserService], bootstrap: [AppComponent]}) exportná trieda AppModule {}

4. Spustenie aplikácie

Nakoniec sme pripravení spustiť našu aplikáciu.

Aby sme to dosiahli, najskôr spustime aplikáciu Spring Boot, aby bola služba REST nažive a počúvala požiadavky.

Po spustení aplikácie Spring Boot otvorme príkazovú konzolu a zadajte nasledujúci príkaz:

ng slúžiť --otvoriť

Spustí sa live vývojový server Angular a tiež sa otvorí prehliadač na adrese // localhost: 4200.

Mali by sme vidieť navigačnú lištu s tlačidlami na výpis existujúcich entít a na pridanie nových. Ak klikneme na prvé tlačidlo, mala by sa nám pod navigačnou lištou zobraziť tabuľka so zoznamom entít pretrvávajúcich v databáze:

Podobne kliknutím na druhé tlačidlo zobrazíte formulár HTML na pretrvanie novej entity:

5. Záver

V tomto návode naučili sme sa, ako zostaviť základnú webovú aplikáciu pomocou Spring Boot a Angular.

Ako obvykle sú všetky ukážky kódu zobrazené v tomto tutoriáli dostupné na GitHub.


$config[zx-auto] not found$config[zx-overlay] not found