Webalkalmazás építése rugós indítással és szögletes

1. Áttekintés

A Spring Boot és az Angular egy hatalmas tandemet alkot, amely kiválóan alkalmas webalkalmazások fejlesztésére, minimális területtel.

Ebben az oktatóanyagban a Spring Boot-ot használjuk a RESTful háttérprogram megvalósításához, az Angular-t pedig egy JavaScript-alapú frontend létrehozásához.

2. A tavaszi csomagtartó alkalmazás

A bemutató webalkalmazásunk funkcionalitása valóban elég egyszerű lesz. Csak lesz szűkítve az a lekérésére és megjelenítésére Lista a JPA entitások egy memóriában lévő H2 adatbázisból, és újak fennmaradása egy sima HTML űrlapon keresztül.

2.1. A Maven-függőségek

Itt vannak a Spring Boot projekt függőségei:

 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-data-jpa com.h2database h2 futásidejű 

Figyeljük meg, hogy belefoglaltuk tavasz-boot-starter-web mert a REST szolgáltatás létrehozására fogjuk használni, és tavasz-bakancs-indító-jpa a perzisztencia réteg megvalósításához.

A H2 adatbázis verzióját szintén a Spring Boot szülő kezeli.

2.2. A JPA entitásosztály

Alkalmazásunk tartományrétegének prototípusának gyors meghatározásához definiáljunk egy egyszerű JPA entitásosztályt, amely felelős lesz a felhasználók modellezéséért:

@Entity public class User {@Id @GeneratedValue (strategy = GenerationType.AUTO) private long id; privát végleges karakterlánc neve; privát végleges karakterlánc e-mail; // standard kivitelezők / beállítók / getters / toString} 

2.3. A UserRepository Felület

Mivel a CRUD-ra alapvető alapfunkciókra lesz szükségünk Felhasználó entitások, meg kell határoznunk a UserRepository felület:

@Repository nyilvános felület A UserRepository kiterjeszti a CrudRepository {} 

2.4. A REST vezérlő

Most valósítsuk meg a REST API-t. Ebben az esetben ez csak egy egyszerű REST vezérlő.

@RestController @CrossOrigin (origins = "// localhost: 4200") public class UserController {// standard konstruktorok private final UserRepository userRepository; @GetMapping ("/ users") public list getUsers () {return (List) userRepository.findAll (); } @PostMapping ("/ users") void addUser (@RequestBody User user) {userRepository.save (felhasználó); }} 

A .definíció definíciójában semmi nem összetett UserController osztály.

Természetesen az egyetlen megvalósítási részlet, amelyet érdemes megjegyezni, az a @CrossOrigin annotáció. Ahogy a neve is mutatja, az annotáció lehetővé teszi a Cross-Origin erőforrásmegosztást (CORS) a szerveren.

Ez a lépés nem mindig szükséges. Mivel szögletes frontendünket telepítjük a // localhost: 4200 és a Boot backendünk // localhost: 8080, a böngésző különben elutasítaná az egyik kérését a másiknak.

A vezérlő módszereit illetően getUser () elhozza az összes Felhasználó entitások az adatbázisból. Hasonlóképpen a felhasználó hozzáadása() A metódus új entitást tart fenn az adatbázisban, amelyet a kérelem törzse továbbít.

A dolgok egyszerűségének megőrzése érdekében szándékosan kihagytuk a vezérlő implementációját, amely kiváltotta a Spring Boot érvényesítést, mielőtt egy entitás fennmaradna. A termelésben azonban egyszerűen nem bízhatunk a felhasználói bevitelben, ezért a szerveroldali érvényesítésnek kötelező funkciónak kell lennie.

2.5. A tavaszi rendszerindító alkalmazás indítása

Végül hozzunk létre egy standard Spring Boot bootstrapping osztályt, és töltsük fel néhányra az adatbázist Felhasználó entitások:

@SpringBootApplication public class Application {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 (név -> {Felhasználó felhasználó = új Felhasználó (név, név.toLowerCase () + "@ domain.com"); userRepository.save (felhasználó);}); userRepository.findAll (). forEach (System.out :: println); }; }}

Most futtassuk az alkalmazást. A várakozásoknak megfelelően látnunk kell egy listát Felhasználó indításkor a konzolra kinyomtatott entitások:

Felhasználó {id = 1, név = John, [e-mail védett]} Felhasználó {id = 2, név = Julie, [e-mail védett]} Felhasználó {id = 3, név = Jennifer, [e-mail védett]} Felhasználó {id = 4 , név = Helen, [e-mail védett]} Felhasználó {id = 5, név = Rachel, [e-mail védett]}

3. A szögletes alkalmazás

A Spring Boot bemutató alkalmazásunk beindításával hozzunk létre egy egyszerű Angular alkalmazást, amely képes elfogyasztani a REST vezérlő API-t.

3.1. Szögletes CLI telepítés

Az Angular CLI-t, egy hatékony parancssori segédprogramot fogjuk használni az Angular alkalmazásunk létrehozásához.

A szögletes CLI azóta rendkívül értékes eszköz lehetővé teszi számunkra, hogy egy teljes Angular projektet hozzunk létre a semmiből, komponenseket, szolgáltatásokat, osztályokat és interfészeket generálva csupán néhány paranccsal.

Miután telepítettük az npm-et (Node Package Manager), megnyitunk egy parancskonzolt, és beírjuk a parancsot:

npm telepítés -g @ angular / [e-mail védett]

Ez az. A fenti parancs telepíti az Angular CLI legújabb verzióját.

3.2. Projekt állványok szögletes CLI-vel

Ami azt illeti, az alapoktól kezdve létrehozhatjuk a szögletes alkalmazási struktúránkat. De őszintén szólva ez egy hibára hajlamos és időigényes feladat, amelyet minden esetben el kell kerülnünk.

Ehelyett hagyjuk, hogy az Angular CLI elvégezze a nehéz munkát helyettünk. Tehát nyissunk meg egy parancskonzolt, majd lépjünk abba a mappába, ahová az alkalmazásunkat szeretnénk létrehozni, és írjuk be a parancsot:

új szögletes ügyfél

A új parancs a teljes alkalmazásstruktúrát generálja a szögletes Könyvtár.

3.3. A szögletes alkalmazás belépési pontja

Ha belenézünk a szögletes mappát, látni fogjuk, hogy az Angular CLI hatékonyan létrehozott nekünk egy teljes projektet.

Az Angular alkalmazásfájljai a TypeScript-et használják, egy tipizált JavaScript-készletet, amely egyszerű JavaScript-re áll össze. Bármely Angular alkalmazás belépési pontja azonban sima index.html fájl.

Szerkesszük a fájlt az alábbiak szerint:

    Rugós csomagtartó - szögletes alkalmazás 

Mint fent láthatjuk, a Bootstrap 4-et is belefoglaltuk, így az alkalmazás felhasználói felületének alkotóelemeinek divatosabb megjelenést kölcsönözhetünk. Természetesen lehetséges egy másik kezelőfelület-készlet átvenése a rendelkezésre álló csomagról.

Kérjük, vegye figyelembe a szokást címkék a szakasz. Első látásra meglehetősen furcsának tűnnek, mint nem szabványos HTML 5 elem.

Tartsuk ott őket az a gyökérválasztó, amelyet az Angular használ az alkalmazás gyökér összetevőjének megjelenítéséhez.

3.4. A app.component.ts Gyökér komponens

Annak érdekében, hogy jobban megértsük, hogyan köti az Angular egy HTML-sablont egy komponenshez, menjünk a src / app könyvtárat és szerkessze a app.component.ts TypeScript fájl - a gyökérösszetevő:

importálja a {Component} elemet a '@ angular / core' fájlból; @Component ({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) exportálási osztály AppComponent {title: string; konstruktor () {this.title = 'Rugós csomagtartó - szögletes alkalmazás'; }}

Nyilvánvaló okokból nem merülünk el mélyen a TypeScript elsajátításában. Ennek ellenére vegyük észre, hogy a fájl definiál egy AppComponent osztály, amely mezőt deklarál cím típusú húr (alsó tokos). Végül, tipizált JavaScript.

Ezenkívül a konstruktor inicializálja a mezőt a-val húr érték, ami meglehetősen hasonlít ahhoz, amit Java-ban csinálunk.

A legrelevánsabb rész az a @Összetevő metaadat-jelölő vagy dekoratőr, amely három elemet határoz meg:

  1. választó - az a komponens és a HTML sablonfájl összekapcsolására használt HTML választó
  2. templateUrl - az összetevőhöz társított HTML sablonfájl
  3. styleUrls - az összetevőhöz társított egy vagy több CSS fájl

A várakozásoknak megfelelően használhatjuk a app.component.html és app.component.css fájlok a gyökérkomponens HTML-sablonjának és CSS-stílusainak meghatározásához.

Végül a választó elem az egész komponenst a választó a index.html fájl.

3.5. A app.component.html File

Mivel a app.component.html fájl lehetővé teszi számunkra, hogy definiálja a gyökérkomponens HTML-sablonját - a AppComponent osztály - egy alap navigációs sáv létrehozásához használjuk két gombbal.

Ha rákattintunk az első gombra, az Angular egy táblázatot jelenít meg, amely tartalmazza a listát Felhasználó az adatbázisban tárolt entitások. Hasonlóképpen, ha a másodikra ​​kattintunk, akkor egy HTML-űrlapot jelenít meg, amelyet felhasználhatunk új entitások hozzáadásához az adatbázisba:

{{title}}

  • Felhasználók listázása
  • Felhasználó hozzáadása

A fájl nagy része szabványos HTML, néhány figyelmeztetéssel érdemes megjegyezni.

Az első a {{title}} kifejezés. A kettős göndör nadrágtartó {{változónév}} az a helyőrző, amelyet az Angular változó interpoláció végrehajtására használ.

Tartsuk szem előtt, hogy a AppComponent osztály inicializálta a cím mező az értékkel Rugós csomagtartó - szögletes alkalmazás. Így az Angular megjeleníti ennek a mezőnek az értékét a sablonban. Hasonlóképpen, a konstruktor értékének megváltoztatása a sablonban is megjelenik.

A második dolog, amit meg kell jegyezni, az a routerLink tulajdonság.

Az Angular ezt az attribútumot használja az útválasztási modulon keresztüli kérések továbbításához (erről később). Egyelőre elegendő tudni, hogy a modul kérést küld a / felhasználók elérési út egy adott összetevőhöz és egy kérés a /felhasználó hozzáadása egy másik komponensre.

Minden esetben a megfelelő összetevőhöz társított HTML sablon megjelenik a helykitöltő.

3.6. A Felhasználó Osztály

Mivel szögletes alkalmazásunk lekérhető és fennmarad Felhasználó elemeket az adatbázisban, valósítsunk meg egy egyszerű tartománymodellt a TypeScript segítségével.

Nyissunk meg egy terminálkonzolt, és hozzunk létre egy modell Könyvtár:

ng generál osztály felhasználót

A szögletes CLI egy üreset generál Felhasználó osztály. Töltsük fel néhány mezővel:

export osztály User {id: string; név: karakterlánc; email: string; }

3.7. A UserService Szolgáltatás

Ügyféloldali domainünkkel Felhasználó osztály már be van állítva, most valósítsunk meg egy olyan szolgáltatási osztályt, amely GET és POST kéréseket hajt végre a // localhost: 8080 / users végpont felé.

Ez lehetővé teszi számunkra, hogy egyetlen osztályba foglaljuk a REST vezérlőhöz való hozzáférést, amelyet az egész alkalmazásban újra felhasználhatunk.

Nyissunk meg egy konzolterminált, majd hozzunk létre egy szolgáltatás könyvtárat, és abban a könyvtárban adja ki a következő parancsot:

generálnak szolgáltatás-felhasználói szolgáltatást

Most nyissuk meg a user.service.ts fájl, amelyet az Angular CLI épp létrehozott, és átalakította:

importálja az {Injectable} fájlt a '@ angular / core' fájlból; importálja {HttpClient, HttpHeaders} a "@ angular / common / http" mappából; importálja a {Felhasználót} a '../model/user' fájlból; importálja az {Observable} fájlt az 'rxjs / Observable' fájlból; @Injectable () export osztály UserService {private usersUrl: string; konstruktor (privát http: HttpClient) {this.usersUrl = '// localhost: 8080 / users'; } public findAll (): Megfigyelhető {return this.http.get (this.usersUrl); } public save (user: User) {return this.http.post (this.usersUrl, user); }}

Nincs szükségünk szilárd háttérre a TypeScript-ben ahhoz, hogy megértsük, hogyan UserService osztályú művek. Egyszerűen fogalmazva, egy újrafelhasználható komponensbe tömörül a REST vezérlő API használatához szükséges összes funkció, amelyet korábban megvalósítottunk tavaszi csizmában.

A Találd meg mindet() metódus GET HTTP-kérést hajt végre a // localhost: 8080 / users végpont felé az Angular-on keresztül HttpClient. A módszer egy Megfigyelhető tömböt tartalmazó példány Felhasználó tárgyakat.

Hasonlóképpen a mentés() metódus POST HTTP kérést hajt végre a // localhost: 8080 / users végpont felé.

A típus megadásával Felhasználó ban,-ben HttpClientKérési módszereivel könnyebben és hatékonyabban fogyaszthatunk háttér-válaszokat.

Végül, nézzük vegye észre a @ Injectable () metaadat-jelölő. Ez jelzi, hogy a szolgáltatást az Angular függőségi injektorain keresztül kell létrehozni és injektálni.

3.8. A UserListComponent Összetevő

Ebben az esetben a UserService osztály a vékony középszint a REST szolgáltatás és az alkalmazás bemutató rétege között. Ezért meg kell határoznunk egy összetevőt, amely felelős a lista felépítéséért Felhasználó entitások fennmaradtak az adatbázisban.

Nyissunk meg egy terminálkonzolt, majd hozzunk létre egy a felhasználói lista könyvtárat és létrehoz egy felhasználói lista összetevőt:

hozzon létre komponens felhasználói listát

A szögletes CLI egy üres alkatrészosztályt generál, amely végrehajtja a ngOnInit felület. Az interfész horgot jelent ngOnInit () metódus, amelyet az Angular meghív, miután befejezte az implementációs osztály példányosítását, és miután meghívta a konstruktort is.

Refaktorozzuk az osztályt, hogy a UserService például a konstruktorban:

importálja az {Component, OnInit} elemet a '@ angular / core' fájlból; importálja a {Felhasználót} a '../model/user' fájlból; importálja a {UserService} fájlt a "../service/user.service" mappából; @Component ({selector: 'app-user-list', templateUrl: './user-list.component.html', styleUrls: ['./user-list.component.css']}) exportálási osztály UserListComponent megvalósítja az OnInit programot {felhasználók: Felhasználó []; konstruktor (private userService: UserService) {} ngOnInit () {this.userService.findAll (). feliratkozás (data => {this.users = data;}); }} 

A UserListComponent osztály eléggé magától értetődő. Egyszerűen használja a UserService's findAll () metódus az összes entitás lekérésére fennmaradt az adatbázisban, és az felhasználók terület.

Ezenkívül szerkesztenünk kell az összetevő HTML fájlját, user-list.component.html, az entitások listáját megjelenítő táblázat létrehozásához:

#NévEmail
{{ Felhasználói azonosító }}{{ felhasználónév }}{{user.email}}

Figyelje meg a * ngFor irányelv. Az irányelv neve a ismétlő, és használhatjuk egy változó tartalmának iterációjára és a HTML elemek iteratív renderelésére. Ebben az esetben a táblázat sorainak dinamikus megjelenítésére használtuk.

Ezen felül változó interpolációt használtunk a id,név, és email minden felhasználó.

3.9. A UserFormComponent Összetevő

Hasonlóképpen létre kell hoznunk egy olyan összetevőt, amely lehetővé teszi számunkra, hogy megmaradjon egy új Felhasználó objektum az adatbázisban.

Hozzunk létre egy felhasználói űrlap könyvtárba, és írja be a következőt:

ng komponens felhasználói űrlap létrehozása 

Ezután nyissuk meg a user-form.component.ts fájlt, és adja hozzá a UserFormComponent osztály egy módszert a Felhasználó tárgy:

importálja az {Component} elemet a '@ angular / core' fájlból; importálja az {ActivatedRoute, Router} alkalmazást a '@ angular / router' fájlból; importálja a {UserService} fájlt a "../service/user.service" mappából; importálja a {Felhasználót} a '../model/user' fájlból; @Component ({selector: 'app-user-form', templateUrl: './user-form.component.html', styleUrls: ['./user-form.component.css']}) exportálási osztály UserFormComponent {user : Felhasználó; konstruktor (privát útvonal: ActivatedRoute, privát útválasztó: Router, privát userService: UserService) {this.user = new User (); } onSubmit () {this.userService.save (this.user) .subscribe (result => this.gotoUserList ()); } gotoUserList () {this.router.navigate (['/ felhasználók']); }}

Ebben az esetben, UserFormComponent is vesz egy UserService például a konstruktorban, amelyet a onSubmit () metódus a mellékelt adatok mentéséhez Felhasználó tárgy.

Mivel újra meg kell jelenítenünk az entitások frissített listáját, amint megtartottunk egy újat, hívjuk a gotoUserList () metódus a beszúrás után, amely a felhasználót a / felhasználók pálya.

Ezen felül szerkesztenünk kell a user-form.component.html fájlt, és hozza létre a HTML-űrlapot egy új felhasználó megtartásához az adatbázisban:

 Név Név megadása kötelező E-mail megadása kötelező Küldés 

Ránézésre a forma elég szabványosnak tűnik. De a kulisszák mögé sok Angular funkcionalitást foglal magában.

Vegyük észre a a ngSubmit irányelv, amely a onSubmit () módszer az űrlap benyújtásakor.

Ezután meghatároztuk a sablon változó #userForm, így az Angular automatikusan hozzáad egy NgForm irányelv, amely lehetővé teszi számunkra a forma egészének nyomon követését.

A NgForm irányelv rendelkezik azokkal az ellenőrzésekkel, amelyeket egy űrlaphoz létrehoztunk ngModel irányelv és a név attribútumot, és figyelemmel kíséri azok tulajdonságait, beleértve az állapotukat is.

A ngModel irányelv kétirányú adatkötési funkciót biztosít számunkra az űrlapvezérlők és az ügyféloldali tartománymodell - a Felhasználó osztály.

Ez azt jelenti, hogy az űrlapbeviteli mezőkbe beírt adatok a modellbe áramlanak - és fordítva. Mindkét elem változásai a DOM-manipuláció révén azonnal megjelennek.

Ezenkívül ngModel lehetővé teszi számunkra, hogy nyomon kövessük az egyes űrlapvezérlések állapotát és elvégezzük az ügyféloldali érvényesítést, az egyes vezérlőkhöz különféle CSS-osztályokat és DOM-tulajdonságokat adva.

A fenti HTML-fájlban az űrlapvezérlőkhöz alkalmazott tulajdonságokat csak egy riasztásmező megjelenítéséhez használtuk, ha az űrlap értékei megváltoztak.

3.10. A app-routing.module.ts File

Bár az összetevők elszigetelten működnek, mégis használnunk kell egy mechanizmust a hívásukra, amikor a felhasználó a navigációs sáv gombjaira kattint.

Itt van a RouterModule játékba kerül. Tehát nyissuk meg a app-routing.module.ts fájlt, és konfigurálja a modult, hogy kéréseket küldhessen a megfelelő összetevőknek:

importálja a {NgModule} elemet a '@ angular / core' fájlból; importálja a {Routes, RouterModule} elemet a '@ angular / router' fájlból; importálja a {UserListComponent} fájlt a. ./user-list/user-list.component fájlból; importálja a {UserFormComponent} fájlt a. ./user-form/user-form.component fájlból; const útvonalak: Routes = [{elérési út: 'felhasználók', komponens: UserListComponent}, {elérési út: 'adduser', komponens: UserFormComponent}]; @NgModule ({import: [RouterModule.forRoot (útvonalak)], export: [RouterModule]}) exportálási osztály AppRoutingModule {} 

Mint fent láthatjuk, a Útvonalak Az array utasítja az útválasztót, hogy melyik összetevőt jelenítse meg, amikor a felhasználó egy linkre kattint vagy URL-t ad meg a böngésző címsorában.

Az útvonal két részből áll:

  1. Pálya - a húr amely megfelel a böngésző címsorában szereplő URL-nek
  2. Összetevő - az útvonal aktív állapotában létrehozandó komponens (navigált)

Ha a felhasználó rákattint a Felhasználók listázása gombra, amely a / felhasználók elérési utat, vagy beírja az URL-t a böngésző címsorába, az útválasztó megjeleníti a UserListComponent komponens sablonfájlja a helykitöltő.

Hasonlóképpen, ha rákattintanak a Felhasználó hozzáadása gombra, akkor megjeleníti a UserFormComponent összetevő.

3.11. A app.module.ts File

Ezután szerkesztenünk kell a app.module.ts fájlt, így az Angular importálni tudja az összes szükséges modult, összetevőt és szolgáltatást.

Ezenkívül meg kell határoznunk, hogy melyik szolgáltatót fogjuk használni a UserService osztály. Ellenkező esetben az Angular nem tudja beinjektálni az alkatrészosztályokba:

importálja a {BrowserModule} fájlt a '@ angular / platform-browser' programból; importálja a {NgModule} elemet a '@ angular / core' fájlból; importálja az {AppRoutingModule} fájlt a. ./app-routing.module fájlból; importálja a {FormsModule} fájlt a '@ angular / form' fájlból; importálja a {HttpClientModule} fájlt a "@ angular / common / http" mappából; importálja az {AppComponent} fájlt a './app.component' fájlból; importálja a {UserListComponent} fájlt a. ./user-list/user-list.component fájlból; importálja a {UserFormComponent} fájlt a './user-form/user-form.component' fájlból; importálja a {UserService} fájlt a. ./service/user.service fájlból; @NgModule ({deklarációk: [AppComponent, UserListComponent, UserFormComponent], import: [BrowserModule, AppRoutingModule, HttpClientModule, FormsModule], szolgáltatók: [UserService], bootstrap: [AppComponent]} {}} Export osztály AppModule

4. Az alkalmazás futtatása

Végül készen állunk az alkalmazásunk futtatására.

Ennek megvalósításához futtassuk először a Spring Boot alkalmazást, így a REST szolgáltatás életben van, és figyeli a kéréseket.

Miután elindította a Spring Boot alkalmazást, nyissunk meg egy parancskonzolt, és írjuk be a következő parancsot:

ng tálalás - nyitva

Ez elindítja az Angular élő fejlesztői kiszolgálóját, és megnyitja a böngészőt a // localhost: 4200 címen is.

Látnunk kell a navigációs sávot a gombokkal a meglévő entitások felsorolásához és újak hozzáadásához. Ha rákattintunk az első gombra, akkor a navigációs sáv alatt meg kell látnunk egy táblázatot, amelyben az entitások listája megmaradt az adatbázisban:

Hasonlóképpen, a második gombra kattintva megjelenik az új entitás fennmaradásának HTML-űrlapja:

5. Következtetés

Ebben az oktatóanyagban megtanultuk, hogyan készítsünk egy alap webalkalmazást a Spring Boot and Angular alkalmazással.

Szokás szerint az ebben az oktatóanyagban bemutatott összes kódminta elérhető a GitHubon.