streamalism.org

1. Pregled

Provjera valjanosti nikad nije toliko izravna kao što očekujemo. I naravno, potvrđivanje vrijednosti koje je korisnik unio u aplikaciju je vrlo važno za očuvanje integriteta naših podataka.

U kontekstu web aplikacije, unos podataka obično se vrši pomoću HTML obrazaca i zahtijeva provjeru valjanosti na strani klijenta i na strani poslužitelja.

U ovom uputstvu ćemo pogledati implementiranje provjere valjanosti unosa obrazaca na strani klijenta pomoću AngularJS-a i provjere na strani poslužitelja pomoću Spring MVC okvira.

Ovaj se članak usredotočuje na proljetni MVC. Naš članak Provjera valjanosti u proljetnom pokretanju opisuje kako izvršiti provjere valjanosti u proljetnom pokretanju.

2. Ovisnosti Mavena

Za početak dodajmo sljedeće ovisnosti:

 org.springframework spring-webmvc 4.3.7.OSPUSTI org.hibernate hibernate-validator 5.4.0.Final com.fasterxml.jackson.core jackson-databind 2.8.7 

Najnovije verzije spring-webmvc, hibernate-validator i jackson-databind mogu se preuzeti s Maven Central.

3. Provjera valjanosti pomoću opružnog MVC-a

Aplikacija se nikada ne smije oslanjati isključivo na provjeru na strani klijenta, jer se to može lako zaobići. Da biste spriječili spremanje netočnih ili zlonamjernih vrijednosti ili uzrokovale nepravilno izvršavanje logike aplikacije, važno je provjeriti valjanost ulaznih vrijednosti i na strani poslužitelja.

Spring MVC nudi podršku za provjeru na strani poslužitelja pomoću JSR 349 ​​Provjera graha napomene o specifikaciji. Za ovaj ćemo se primjer poslužiti referentnom implementacijom specifikacije, koja je hibernacijski validator.

3.1. Model podataka

Stvorimo a Korisnik klasa koja ima svojstva označena odgovarajućim bilješkama provjere valjanosti:

javna klasa Korisnik {@NotNull @Email privatni niz e-pošte; @NotNull @Size (min = 4, max = 15) privatna lozinka niza; @NotBlank naziv privatnog niza; @Min (18) @Digits (cijeli broj = 2, razlomak = 0) private int age; // standardni konstruktor, getteri, postavljači}

Gore korištene bilješke pripadaju JSR 349 specifikacija, s izuzetkom @E-mail i @NetBlank, koji su specifični za hibernacijski validator knjižnica.

3.2. Proljetni MVC kontroler

Stvorimo klasu kontrolera koja definira a /korisnik krajnja točka, koja će se koristiti za spremanje nove Korisnik prigovoriti a Popis.

Da bi se omogućila provjera valjanosti Korisnik objekt primljen kroz parametre zahtjeva, deklaraciji mora prethoditi @Valid napomena, a pogreške provjere valjanosti bit će zadržane u a BindingResult primjer.

Da bismo utvrdili sadrži li objekt nevaljane vrijednosti, možemo koristiti hasErrors () metoda BindingResult.

Ako hasErrors () vraća se pravi, možemo vratiti a JSON niz sadrži poruke o pogreškama povezane s provjerama koje nisu prošle. U suprotnom ćemo dodati objekt na popis:

@PostMapping (value = "/ user") @ResponseBody javni ResponseEntity saveUser (@Valid User user, BindingResult result, Model model) {if (result.hasErrors ()) {List error = result.getAllErrors (). Stream (). map (DefaultMessageSourceResolvable :: getDefaultMessage) .collect (Collectors.toList ()); vrati novi ResponseEntity (pogreške, HttpStatus.OK); } else {if (users.stream (). anyMatch (it -> user.getEmail (). jednako (it.getEmail ()))) {return new ResponseEntity (Collections.singletonList ("E-pošta već postoji!"), HttpStatus .SUKOB); } else {users.add (korisnik); vrati novi ResponseEntity (HttpStatus.CREATED); }}}

Kao što vidiš, provjera valjanosti na poslužitelju dodaje prednost mogućnosti obavljanja dodatnih provjera koje na klijentskoj strani nisu moguće.

U našem slučaju možemo provjeriti postoji li korisnik s istom e-poštom - i vratiti status 409 CONFLICT ako je to slučaj.

Također moramo definirati naš popis korisnika i inicijalizirati ga s nekoliko vrijednosti:

privatni popis korisnika = Arrays.asList (novi korisnik ("[zaštićen e-poštom]", "proći", "Ana", 20), novi korisnik ("[zaštićen e-poštom]", "proći", "Bob", 30), novi korisnik ("[e-mail zaštićen]", "pass", "John", 40), novi korisnik ("[email zaštićen]", "pass", "Mary", 30));

Dodajmo i mapiranje za dohvaćanje popisa korisnika kao JSON objekt:

@GetMapping (value = "/ users") @ResponseBody javni popis getUsers () {return users; }

Posljednja stavka koja nam treba u našem Spring MVC kontroleru je mapiranje za vraćanje glavne stranice naše aplikacije:

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

Pogledat ćemo user.html stranicu detaljnije u odjeljku AngularJS.

3.3. Proljetna MVC konfiguracija

Dodajmo osnovnu MVC konfiguraciju u našu aplikaciju:

@Configuration @EnableWebMvc @ComponentScan (basePackages = "com.baeldung.springmvcforms") class ApplicationConfiguration implementira WebMvcConfigurer {@Override public void configureDefaultServletHandling (DefaultServletHandlerConfig; config. Config. Config. Config. } @Bean public InternalResourceViewResolver htmlViewResolver () {InternalResourceViewResolver bean = new InternalResourceViewResolver (); bean.setPrefix ("/ WEB-INF / html /"); bean.setSuffix (". html"); grah za povratak; }}

3.4. Inicijalizacija aplikacije

Stvorimo klasu koja implementira WebApplicationInitializer sučelje za pokretanje naše aplikacije:

javna klasa WebInitializer implementira WebApplicationInitializer {public void onStartup (spremnik ServletContext) baca ServletException {AnnotationConfigWebApplicationContext ctx = new AnnotationConfigWebApplicationContext (); ctx.register (ApplicationConfiguration.class); ctx.setServletContext (spremnik); container.addListener (novi ContextLoaderListener (ctx)); ServletRegistration.Dynamic servlet = container.addServlet ("dispečer", novi DispatcherServlet (ctx)); servlet.setLoadOnStartup (1); servlet.addMapping ("/"); }}

3.5. Testiranje provjere valjanosti proljeća Mvc korištenjem curl

Prije nego što implementiramo odjeljak klijenta AngularJS, možemo testirati naš API pomoću cURL-a s naredbom:

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

Odgovor je niz koji sadrži zadane poruke o pogrešci:

["nije dobro oblikovana adresa e-pošte", "veličina mora biti između 4 i 15", "ne smije biti prazna", "mora biti veća ili jednaka 18"]

4. AngularJS provjera valjanosti

Provjera valjanosti na strani klijenta korisna je u stvaranju boljeg korisničkog iskustva jer korisniku pruža informacije o uspješnom podnošenju valjanih podataka i omogućuje im daljnju interakciju s aplikacijom.

Knjižnica AngularJS ima veliku podršku za dodavanje zahtjeva za provjeru valjanosti na poljima obrazaca, rukovanje porukama o pogreškama i oblikovanje važećih i nevaljanih obrazaca.

Prvo, kreirajmo AngularJS modul koji ubrizgava ngPoruke modul koji se koristi za poruke provjere valjanosti:

var app = angular.module ('app', ['ngMessages']);

Dalje, kreirajmo AngularJS uslugu i kontroler koji će trošiti API izgrađen u prethodnom odjeljku.

4.1. Usluga AngularJS

Naša će usluga imati dvije metode koje pozivaju metode MVC kontrolera - jednu za spremanje korisnika i jednu za dohvaćanje popisa korisnika:

app.service ('UserService', ['$ http', function ($ http) {this.saveUser = function saveUser (user) {return $ http ({method: 'POST', url: 'user', params: { email: user.email, lozinka: user.password, name: user.name, dob: user.age}, zaglavlja: 'Accept: application / json'});} this.getUsers = function getUsers () {return $ http ({metoda: 'GET', url: 'users', zaglavlja: 'Accept: application / json'}). then (function (response) {return response.data;});}}]);

4.2. Upravljač AngularJS

The UserCtrl kontroler ubrizgava Korisnička usluga, poziva metode usluga i obrađuje odgovore i poruke o pogreškama:

app.controller ('UserCtrl', ['$ scope', 'UserService', function ($ scope, UserService) {$ scope.submitted = false; $ scope.getUsers = function () {UserService.getUsers (). then ( function (data) {$ scope.users = data;});} $ scope.saveUser = function () {$ scope.submitted = true; if ($ scope.userForm. $ valid) {UserService.saveUser ($ scope. korisnik) .potom (uspjeh funkcije (odgovor) {$ scope.message = 'Korisnik dodan!'; $ scope.errorMessage = ''; $ scope.getUsers (); $ scope.user = null; $ scope.submitted = false ;}, pogreška funkcije (odgovor) {if (response.status == 409) {$ scope.errorMessage = response.data.message;} else {$ scope.errorMessage = 'Greška pri dodavanju korisnika!';} $ scope.message = '';});}} $ scope.getUsers ();}]);

U gornjem primjeru možemo vidjeti da se metoda usluge poziva samo ako je $ vrijedi vlasništvo userForm je istina. Ipak, u ovom slučaju postoji dodatna provjera dupliciranih e-adresa, koja se može izvršiti samo na poslužitelju, a obrađuje se zasebno u pogreška () funkcija.

Također, primijetite da postoji predao definirana varijabla koja će nam reći je li obrazac poslan ili nije.

U početku će ova varijabla biti lažno, i na pozivanje saveUser () metoda, postaje pravi. Ako ne želimo da se poruke provjere valjanosti prikazuju prije nego što korisnik pošalje obrazac, možemo koristiti predao varijabla da to spriječi.

4.3. Obrazac pomoću provjere valjanosti AngularJS

Da bismo iskoristili knjižnicu AngularJS i naš modul AngularJS, morat ćemo dodati skripte u našu user.html stranica:

Tada možemo koristiti naš modul i kontroler postavljanjem ng-aplikacija i ng-kontroler Svojstva:

Stvorimo svoj HTML obrazac:

 ... 

Imajte na umu da moramo postaviti poništiti atribut na obrascu kako bismo spriječili zadanu provjeru HTML5 i zamijenili ga vlastitim.

The ng-klase atribut dodaje pogreška u obliku CSS klasa dinamički na obrazac ako je predao varijabla ima vrijednost pravi.

The ng-pošalji atribut definira funkciju regulatora AngularJS koja će se pozvati kada se obrazac pošalje. Koristeći ng-pošalji umjesto ng-klik ima prednost u tome što također odgovara na podnošenje obrasca pomoću tipke ENTER.

Sad dodamo četiri polja za unos za korisničke atribute:

Email: Lozinka: Ime: Dob: 

Svako polje za unos ima vezanje na svojstvo korisnik varijabla kroz ng-model atribut.

Za postavljanje pravila provjere valjanosti, koristimo HTML5 potreban atribut i nekoliko atributa specifičnih za AngularJS: ng-duljina miješanja, ng-max duljina, ng-min, i ng-trim.

Za e-mail polje, koristimo i polje tip atribut s vrijednošću e-mail za provjeru e-pošte na strani klijenta.

Kako biste dodali poruke o pogreškama koje odgovaraju svakom polju, AngularJS nudi ng-poruke direktivom koja petlja kroz ulaz $ pogreške objekt i prikazuje poruke na temelju svakog pravila provjere valjanosti.

Dodajmo direktivu za e-mail polje odmah nakon definicije unosa:

Nevažeći email!
Adresa e-pošte je obavezna!

Slične poruke o pogrešci mogu se dodati za ostala polja za unos.

Možemo kontrolirati kada se direktiva prikazuje za e-mail polje pomoću ng-show svojstvo s logičkim izrazom. U našem primjeru prikazujemo direktivu kada polje ima neispravnu vrijednost, što znači $ nevaljano svojstvo je pravi, i predao varijabla je također pravi.

Za polje će se istodobno prikazivati ​​samo jedna poruka o pogrešci.

Također možemo dodati znak kvačice (predstavljen znakom HEX koda ✓) nakon polja za unos u slučaju da je polje valjano, ovisno o $ vrijedi svojstvo:

 ✓ 

Provjera AngularJS također nudi podršku za oblikovanje pomoću CSS klasa kao što su ng-valjano i ng-nevaljano ili konkretnije poput ng-nevaljano-potrebno i ng-invalid-minlength.

Dodajmo svojstvo CSS boja obruba: crvena za nevaljane unose unutar obrazaca pogreška u obliku razred:

.form-error input.ng-invalid {border-color: red; }

Poruke pogrešaka možemo prikazati i crvenom bojom pomoću CSS klase:

.error-messages {boja: crvena; }

Nakon što sve složimo, pogledajmo primjer kako će izgledati provjera valjanosti obrazaca na strani klijenta kada se ispuni kombinacijom valjanih i nevaljanih vrijednosti:

5. Zaključak

U ovom uputstvu pokazali smo kako možemo kombinirati provjeru na strani klijenta i na poslužitelju pomoću AngularJS i Spring MVC.

Kao i uvijek, puni izvorni kod za primjere možete pronaći na GitHubu.

Da biste pregledali aplikaciju, pristupite / userPage URL nakon pokretanja.