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:
- választó - az a komponens és a HTML sablonfájl összekapcsolására használt HTML választó
- templateUrl - az összetevőhöz társított HTML sablonfájl
- 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év Email {{ 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:
- Pálya - a húr amely megfelel a böngésző címsorában szereplő URL-nek
- Ö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.