streamalism.org

Jeg kunngjorde nettopp det nye Lær våren kurs, med fokus på det grunnleggende i vår 5 og vårstøvel 2:

1. Oversikt

For en sluttbruker er prosessen med skjemainnlevering praktisk, og til en viss grad tilsvarer bare å skrive inn data og klikke på en send-knapp. Fra et teknisk perspektiv krever det imidlertid en kodingsmekanisme for å pålitelig sende og motta disse dataene fra klientsiden til serversiden for back-end-behandling.

For omfanget av denne opplæringen, vil vi fokusere på å lage et skjema som sender dataene som application / x-www-form-urlencoded innholdstype i en vår-webapplikasjon.

2. Skjema datakoding

Den mest brukte HTTP-metoden for skjemainnleveringer er POST. For idempotente skjemainnleveringer kan vi imidlertid også bruke HTTP GET-metoden. Og måten å spesifisere metoden er gjennom skjemaets metodeattributt.

For skjemaer som bruker GET-metoden, sendes hele skjemadataene som en del av spørringsstrengen. Men hvis vi bruker POST-metoden, sendes dataene som en del av kroppen til HTTP-forespørselen.

I sistnevnte tilfelle kan vi dessuten også spesifiser koding av data med skjemaets enctype Egenskap, som kan ta to verdier, nemlig application / x-www-form-urlencoded og flerdelt / skjemadata.

2.1. Media type application / x-www-form-urlencoded

HTML skjemaer har en standardverdi på application / x-www-form-urlencoded for enctype Egenskap da dette tar seg av de grunnleggende brukssakene der data er helt tekst. Likevel, hvis brukssaken vår innebærer å støtte fildata, så må vi overstyre den med verdien på flerdelt / skjemadata.

I hovedsak sender den skjemadataene som nøkkelverdipar atskilt med et tegn (&). Også den respektive nøkkelen og verdien er atskilt med likhetstegnet (=). Videre er alle reserverte og ikke-alfanumeriske tegn kodet ved hjelp av prosentkoding.

3. Skjemainnsending i nettleser

Nå som vi har dekket det grunnleggende, la oss gå videre og se hvordan vi kan håndtere URL-kodede skjemadata for en enkel bruk av tilbakemelding i en vår-webapp.

3.1. Domenemodell

For tilbakemeldingsskjemaet vårt, må vi fange e-postidentifikatoren til innsenderen sammen med kommentaren. Så la oss lage våre domenemodell i en Tilbakemelding klasse:

offentlig klasse Tilbakemelding {privat streng emailId; privat strengkommentar; }

3.2. Opprett skjema

For å bruke en enkel HTML-mal for å lage vårt dynamiske webskjema, må vi konfigurere Thymeleaf i prosjektet vårt. Etter dette er vi klare til å legge til en FÅ sluttpunkt / tilbakemelding som vil tjene tilbakemelding visning for skjemaet:

@GetMapping (path = "/ feedback") offentlig String getFeedbackForm (modellmodell) {Feedback feedback = new Feedback (); model.addAttribute ("tilbakemelding", tilbakemelding); returner "tilbakemelding"; }

Merk at vi bruker tilbakemelding som et modellattributt for å fange brukerinngangen. Neste, la oss lagetilbakemelding utsikt i feedback.html mal:

Selvfølgelig trenger vi ikke eksplisitt å spesifisere enctype attributt, da det velger standardverdien på application / x-www-form-urlencoded.

3.3. PRG Flow

Ettersom vi godtar brukerinngang via tilbakemeldingsskjemaet i nettleseren, må vi implementer POST / REDIRECT / GET (PRG) arbeidsflyten for innsending for å unngå dupliserte innleveringer.

La oss først implementere POST-sluttpunktet / web / tilbakemelding som vil fungere som handlingsbehandler for tilbakemeldingsskjemaet:

@PostMapping (path = "/ web / feedback", forbruker = {MediaType.APPLICATION_FORM_URLENCODED_VALUE}) offentlig StrenghåndtakBrowserSubmissions (Feedback feedback) kaster Unntak {// Lagre tilbakemeldingsdata returner "redirect: / feedback / suksess"; }

Deretter kan vi implementere omdirigeringsendepunktet / tilbakemelding / suksess som serverer en GET-forespørsel:

@GetMapping ("/ feedback / suksess") offentlig ResponseEntity getSuccess () {return new ResponseEntity ("Takk for at du sendte tilbakemelding.", HttpStatus.OK); }

For å validere funksjonaliteten til arbeidsflyten for skjemainnlevering i en nettleser, la oss besøke localhost: 8080 / tilbakemelding:

Til slutt kan vi også inspisere at skjemadata sendes i URL-kodet form:

emailId = abc% 40eksempel.no & kommentar = Eksempel + tilbakemelding

4. Ikke-nettleserforespørsler

Noen ganger har vi kanskje ikke en nettleserbasert HTTP-klient. I stedet kan vår klient være et verktøy som cURL eller Postman. I et slikt tilfelle trenger vi ikke HTML-webskjemaet. I stedet kan vi implementere en / tilbakemelding endepunkt som serverer POST-forespørselen:

@PostMapping (path = "/ feedback", forbruker = {MediaType.APPLICATION_FORM_URLENCODED_VALUE}) offentlig ResponseEntity handleNonBrowserSubmissions (@RequestBody Feedback feedback) kaster Unntak {// Lagre tilbakemeldingsdata returner ResponseEntity ("Takk for innsending av tilbakemelding", HttpStus. ); }

I mangel av HTML-skjema i dataflyten, trenger vi ikke nødvendigvis å implementere PRG-mønsteret. Derimot, vi må spesifisere at ressursen godtar APPLICATION_FORM_URLENCODED_VALUE Media type.

Til slutt kan vi teste det med en cURL-forespørsel:

curl -X POST \ // localhost: 8080 / feedback \ -H 'Content-Type: application / x-www-form-urlencoded' \ -d 'emailId = abc% 40example.com & comment = Sample% 20Feedback'

4.1. FormHttpMessageConverter Grunnleggende

En HTTP-forespørsel som sender application / x-www-form-urlencoded data må spesifisere dette i Innholdstype Overskrift. Internt bruker Spring FormHttpMessageConverter klasse for å lese disse dataene og binde dem med metodeparameteren.

I tilfeller der metodeparameteren vår er av en type MultiValueMap, kan vi bruke enten @RequestParam eller @Fotball kommentar for å binde den riktig med selve HTTP-forespørselen. Det er fordi Servlet API kombinerer spørringsparametrene og skjemadata til et enkelt kart som heter parametere, og det inkluderer automatisk parsing av forespørselsorganet:

@PostMapping (path = "/ feedback", consumes = {MediaType.APPLICATION_FORM_URLENCODED_VALUE}) public ResponseEntity handleNonBrowserSubmissions (@RequestParam MultiValueMap paramMap) kaster Unntak {// Lagre tilbakemeldingsdata returner ResponseEntity ("Takk for innsending av tilbakemelding" ); }

Derimot, for en metodeparameter av en annen type enn MultiValueMap, slik som vår Tilbakemelding domeneobjekt, må vi bare bruke @Fotball kommentar.

5. Konklusjon

I denne opplæringen lærte vi kort om koding av skjemadata i webskjemaer. Vi undersøkte også hvordan vi skal håndtere URL-kodede data for HTTP-forespørsler om nettlesere og ikke-nettlesere ved å implementere et tilbakemeldingsskjema i en Spring Boot-webapp.

Som alltid er den komplette kildekoden for opplæringen tilgjengelig på GitHub.

Jeg kunngjorde nettopp det nye Lær våren kurs, med fokus på det grunnleggende i vår 5 og vårstøvel 2: