streamalism.org

1. Áttekintés

Az érvényesítés soha nem olyan egyszerű, mint amire számítunk. És természetesen a felhasználó által egy alkalmazásba beírt értékek ellenőrzése nagyon fontos az adataink integritásának megőrzése érdekében.

Egy webalkalmazás keretében az adatbevitel általában HTML űrlapok segítségével történik, és mind kliens, mind kiszolgáló oldali ellenőrzést igényel.

Ebben az oktatóanyagban megnézzük az űrlapbevitel ügyféloldali érvényesítésének végrehajtása az AngularJS használatával és a szerveroldali érvényesítés a Spring MVC keretrendszer használatával.

Ez a cikk a Spring MVC-re összpontosít. Az Érvényesítés a tavaszi rendszerindításban című cikkünk leírja, hogyan kell elvégezni az érvényesítéseket a tavaszi indításkor.

2. Maven-függőségek

Először adjuk hozzá a következő függőségeket:

 org.springframework spring-webmvc 4.3.7.RELEASE org.hibernate hibernate-validator 5.4.0.Final com.fasterxml.jackson.core jackson-databaseind ​​2.8.7 

A spring-webmvc, a hibernate-validator és a jackson-databaseind ​​legújabb verziói letölthetők a Maven Centralról.

3. Érvényesítés a rugó MVC segítségével

Egy alkalmazás soha ne támaszkodjon kizárólag az ügyféloldali érvényesítésre, mivel ez könnyen kijátszható. A helytelen vagy rosszindulatú értékek mentésének vagy az alkalmazáslogika nem megfelelő végrehajtásának megakadályozása érdekében fontos, hogy a bemeneti értékeket a szerver oldalon is érvényesítse.

A tavaszi MVC támogatást kínál a szerver oldali érvényesítéshez a használatával JSR 349 ​​Babellenőrzés specifikációs jegyzetek. Ebben a példában a specifikáció referencia megvalósítását fogjuk használni, ami hibernate-validator.

3.1. Az adatmodell

Hozzunk létre egy Felhasználó osztály, amelynek tulajdonságai megfelelő validációs jelölésekkel vannak ellátva:

public class Felhasználó {@NotNull @Email private String e-mail; @NotNull @Size (min = 4, max = 15) privát karakterlánc jelszó; @NotBlank privát karakterlánc neve; @Min (18) @Digits (egész = 2, tört = 0) privát int kor; // szabványos kivitelező, mérőeszközök, beállítók}

A fenti kommentárok a JSR 349 specifikáció, a @Email és @NotBlank, amelyek specifikusak a hibernate-validator könyvtár.

3.2. Tavaszi MVC vezérlő

Hozzunk létre egy vezérlő osztályt, amely meghatározza a / felhasználó végpont, amely egy új mentésére szolgál Felhasználó kifogásolni a Lista.

Annak érdekében, hogy a Felhasználó a kérelem paraméterein keresztül kapott objektum, a deklarációt a @Érvényes megjegyzés, és az érvényesítési hibákat a BindingResult példa.

Annak megállapításához, hogy az objektum érvénytelen értékeket tartalmaz-e, használhatjuk a hasErrors () a metódusa BindingResult.

Ha hasErrors () visszatér igaz, visszaadhatjuk a JSON tömb a nem megfelelő ellenőrzésekhez kapcsolódó hibaüzeneteket tartalmazza. Ellenkező esetben hozzáadjuk az objektumot a listához:

@PostMapping (value = "/ user") @ResponseBody public ResponseEntity saveUser (@Valid User user, BindingResult result, Model model) {if (result.hasErrors ()) {List hibák = eredmény.getAllErrors (). Stream (). térkép (DefaultMessageSourceResolvable :: getDefaultMessage) .collect (Collectors.toList ()); return new ResponseEntity (hibák, HttpStatus.OK); } else {if (users.stream (). anyMatch (it -> user.getEmail (). egyenlő (it.getEmail ()))) {{return new ResponseEntity (Collections.singletonList ("Az e-mail már létezik!"), HttpStatus .KONFLIKTUS); } else {users.add (felhasználó); return new ResponseEntity (HttpStatus.CREATED); }}}

Amint látod, A szerveroldali érvényesítés azzal az előnnyel jár, hogy további ellenőrzéseket hajthat végre, amelyek az ügyfél oldalon nem lehetségesek.

Esetünkben ellenőrizhetjük, hogy létezik-e már ugyanazzal az e-mail címmel rendelkező felhasználó - és 409 KONFLIKT állapotot adhatunk vissza, ha ez a helyzet.

Meg kell határoznunk a felhasználók listáját, és néhány értékkel inicializálnunk kell:

private list users = Arrays.asList (új felhasználó ("[email protected]", "pass", "Ana", 20), new User ("[email protected]", "pass", "Bob", 30), új felhasználó ("[email protected]", "pass", "John", 40), új Felhasználó ("[email protected]", "pass", "Mary", 30));

Adjunk hozzá egy leképezést a felhasználók listájának JSON-objektumként történő lekéréséhez:

@GetMapping (value = "/ users") @ResponseBody public list getUsers () {visszatérő felhasználók; }

A tavaszi MVC vezérlőnkben az utolsó elem egy feltérképezés az alkalmazás főoldalának visszatéréséhez:

@GetMapping ("/ userPage") public String getUserProfilePage () {return "user"; }

Megnézzük a user.html oldal részletesebben az AngularJS részben.

3.3. Tavaszi MVC konfiguráció

Adjunk hozzá egy alap MVC konfigurációt alkalmazásunkhoz:

@Configuration @EnableWebMvc @ComponentScan (basePackages = "com.baeldung.springmvcforms") osztály ApplicationConfiguration megvalósítja a WebMvcConfigurer {@Override public void configureDefaultServletHandling (DefaultServletHandlerConfigurer configure) } @Bean public InternalResourceViewResolver htmlViewResolver () {InternalResourceViewResolver bean = new InternalResourceViewResolver (); bean.setPrefix ("/ WEB-INF / html /"); bean.setSuffix (". html"); visszatérő bab; }}

3.4. Az alkalmazás inicializálása

Hozzunk létre egy osztályt, amely megvalósítja WebApplicationInitializer felület az alkalmazásunk futtatásához:

public class WebInitializer megvalósítja a WebApplicationInitializer {public void onStartup (ServletContext tároló) dobja a ServletException {AnnotationConfigWebApplicationContext ctx = new AnnotationConfigWebApplicationContext (); ctx.register (ApplicationConfiguration.class); ctx.setServletContext (tároló); container.addListener (új ContextLoaderListener (ctx)); ServletRegistration.Dynamic servlet = container.addServlet ("diszpécser", új DispatcherServlet (ctx)); servlet.setLoadOnStartup (1); servlet.addMapping ("/"); }}

3.5. A tavaszi Mvc validálás tesztelése Curl használatával

Mielőtt megvalósítanánk az AngularJS kliens szakaszt, tesztelhetjük API-junkat a cURL használatával a következő paranccsal:

curl -i -X ​​POST -H "Elfogadás: application / json" "localhost: 8080 / spring-mvc-form / user? email = aaa & password = 12 & age = 12"

A válasz egy tömb, amely az alapértelmezett hibaüzeneteket tartalmazza:

["nem jól formázott e-mail cím", "a méretnek 4 és 15 között kell lennie", "nem lehet üres", "legalább 18-nak kell lennie vagy egyenlő"]

4. Szögletes JS validálás

Az ügyféloldali ellenőrzés hasznos a jobb felhasználói élmény megteremtésében, mivel információt nyújt a felhasználó számára az érvényes adatok sikeres benyújtásáról, és lehetővé teszi számukra, hogy továbbra is interakcióba léphessenek az alkalmazással.

Az AngularJS könyvtár nagy támogatást nyújt az űrlapmezők érvényesítési követelményeinek hozzáadásához, a hibaüzenetek kezeléséhez, valamint az érvényes és érvénytelen űrlapok megtervezéséhez.

Először hozzunk létre egy AngularJS modult, amely beadja a ngMessages modul, amelyet érvényesítési üzenetekhez használnak:

var app = szögletes.modul ('app', ['ngMessages']);

Ezután hozzunk létre egy AngularJS szolgáltatást és vezérlőt, amely felhasználja az előző szakaszban felépített API-t.

4.1. Az AngularJS szolgáltatás

Szolgáltatásunknak két módszere lesz, amelyek az MVC vezérlő metódusait hívják meg: az egyik a felhasználó mentése, a másik pedig a felhasználók listájának lekérése:

app.service ('UserService', ['$ http', function ($ http) {this.saveUser = function saveUser (user) {return $ http ({method: 'POST', url: 'user', params: { e-mail: user.email, jelszó: user.password, név: user.name, age: user.age}, fejlécek: 'Accept: application / json'});} this.getUsers = function getUsers () {return $ http ({módszer: 'GET', url: 'felhasználók', fejlécek: 'Elfogadás: alkalmazás / json'}). majd (függvény (válasz) {visszatérési válasz.adatok;});}}]];

4.2. Az AngularJS vezérlő

A UserCtrl vezérlő beadja a UserService, meghívja a szolgáltatási módszereket, és kezeli a válasz- és hibaüzeneteket:

app.controller ('UserCtrl', ['$ hatókör', 'UserService', függvény ($ hatókör, UserService) {$ hatókör.submission = hamis; $ hatókör.getUsers = függvény () {UserService.getUsers (). majd ( függvény (adatok) {$ hatókör.felhasználók = adatok;});}} hatókör.saveUser = függvény () {$ hatókör.szolgáltatva = igaz; ha ($ hatókör.felhasználóForm. $ érvényes) {UserService.saveUser ($ hatókör. felhasználó). akkor (a függvény sikere (válasz) {$ hatókör.message = 'Felhasználó hozzáadva!'; $ hatókör.errorMessage = ''; $ hatókör.getUsers (); $ hatókör.felhasználó = null; $ hatókör.hozzáadás = hamis ;}, function error (response) {if (response.status == 409) {$ scope.errorMessage = response.data.message;} else {$ scope.errorMessage = 'Hiba a felhasználó hozzáadásakor!';} $ hatókör.message = '';});}} $ hatókör.getUsers ();}]);

A fenti példában láthatjuk, hogy a szolgáltatási mód csak akkor hívható meg, ha a $ érvényes tulajdona userForm igaz. Mégis, ebben az esetben a duplikált e-mailek további ellenőrzése megtörténik, amelyet csak a szerveren lehet elvégezni, és amelyet külön kezel a hiba() funkció.

Figyelje meg azt is, hogy van egy benyújtották definiált változó, amely megmondja, hogy beküldték-e az űrlapot vagy sem.

Kezdetben ez a változó az lesz hamis, és a saveUser () módszerrel válik igaz. Ha nem akarjuk, hogy az érvényesítési üzenetek megjelenjenek, mielőtt a felhasználó elküldené az űrlapot, használhatjuk a benyújtották változó ennek megakadályozására.

4.3. Űrlap az AngularJS érvényesítéssel

Az AngularJS könyvtár és az AngularJS modul használatához hozzá kell adnunk a szkripteket a user.html oldal:

Ezután használhatjuk modulunkat és vezérlőnket a ng-app és ng-controller tulajdonságok:

Hozzuk létre HTML-űrlapunkat:

 ... 

Ne feledje, hogy be kell állítanunk a novalidate attribútumot az űrlapon az alapértelmezett HTML5-ellenőrzés megakadályozása érdekében, és kicseréljük a sajátunkra.

A ng-osztály attribútum hozzáadja a forma-hiba CSS osztály dinamikusan az űrlaphoz, ha a benyújtották változó értéke: igaz.

A ng-beküldés attribútum határozza meg az AngularJS vezérlő függvényt, amelyet akkor hívunk meg, amikor az űrlap beküldik. Használata ng-beküldés ahelyett ng kattintás megvan az az előnye, hogy válaszol az űrlap ENTER billentyűvel történő benyújtására is.

Most adjuk hozzá a Felhasználó attribútumok négy beviteli mezőjét:

E-mail: Jelszó: Név: Kor: 

Minden bemeneti mezőnek van kötése a. Tulajdonságához felhasználó változó a ng-modell tulajdonság.

Az érvényesítési szabályok meghatározásához, a HTML5-et használjuk kívánt attribútum és számos AngularJS-specifikus attribútum: ng-minglength, ng-maxlength, ng-min, és ng-trim.

A email mezőben a típus értékű attribútum email ügyféloldali e-mail ellenőrzéshez.

Az egyes mezőknek megfelelő hibaüzenetek hozzáadása érdekében, Az AngularJS felajánlja a ng-üzenetek irányelv, amely egy bemeneten keresztül hurkol $ hibák objektumot, és az egyes ellenőrzési szabályok alapján jeleníti meg az üzeneteket.

Tegyük hozzá a email mező közvetlenül a bemeneti meghatározás után:

Érvénytelen e-mail!
E-mail szükséges!

Hasonló hibaüzenetek adhatók a többi beviteli mezőhöz is.

Azt tudjuk ellenőrizni, hogy az irányelv mikor jelenik meg a email mező a ng-show logikai kifejezéssel rendelkező tulajdonság. Példánkban akkor jelenítjük meg az irányelvet, ha a mező érvénytelen értékű, vagyis a $ érvénytelen ingatlan az igaz, és a benyújtották változó is igaz.

Egy mezőre egyszerre csak egy hibaüzenet jelenik meg.

Hozzáadhatunk egy pipa jelet is (amelyet HEX kód karakterrel jelölünk ✓) a beviteli mező után, ha a mező érvényes, attól függően, hogy $ érvényes ingatlan:

 ✓ 

Az AngularJS érvényesítés támogatást nyújt a CSS osztályok használatával történő stílushoz is ng-érvényes és ng-érvénytelen vagy konkrétabbak, mint például ng-érvénytelen-szükséges és ng-invalid-minlength.

Adjuk hozzá a CSS tulajdonságot szegélyszíne: piros az űrlapon belüli érvénytelen bemenetekre forma-hiba osztály:

.form-error input.ng-invalid {határ-szín: piros; }

A hibaüzeneteket pirosan is megjeleníthetjük egy CSS osztály használatával:

.error-messages {szín: piros; }

Miután mindent összeállítottunk, nézzünk meg egy példát arra, hogyan fog kinézni az ügyféloldali űrlap-érvényesítés, amikor érvényes és érvénytelen értékek keverékével töltjük ki:

5. Következtetés

Ebben az oktatóanyagban bemutattuk, hogyan kombinálhatjuk az ügyfél- és a szerveroldali érvényesítést az AngularJS és a Spring MVC segítségével.

Mint mindig, a példák teljes forráskódja megtalálható a GitHub oldalon.

Az alkalmazás megtekintéséhez nyissa meg a / userPage URL futtatása után.