Behandle web skjemaer på serversiden med Node.js og Express

I dagens opplæring vil jeg vise deg hvordan du kan motta skjema data på en server med Node.js og Express. Vi vil sammen sette opp en enkel server og gå gjennom de nødvendige trinnene for å opprette skjemaer som sender data til denne serveren. Denne veiledningen er for alle som har en grunnleggende forståelse av JavaScript og Node.js, og som ønsker å utvide ferdighetene sine innen webutvikling.

Viktigste funn:

• Grunnleggende om å opprette en enkel Node.js-server med Express
• Sette opp prosjektkatalogen og installere nødvendige pakker
• Opprette en HTML-fil for visning og bruk av skjemaer
• Behandle data som blir sendt til serveren

Trinn-for-trinn veiledning

Først må vi sette opp en server for å behandle innkommende skjemadata. Dermed starter vi med å opprette et nytt Node.js-prosjekt.

Åpne redigeringsprogrammet ditt, for eksempel Visual Studio Code, og åpne et terminalvindu. Alternativt kan du bruke et vanlig terminalvindu. Sørg for at Node.js er installert på datamaskinen din.

Gå til hovedkatalogen din og opprett en ny undermappe for serverapplikasjonen din. Jeg foreslår å kalle mappen "FormServerApp".

Gå inn i den nyopprettede mappen og initialiser et nytt Node.js-prosjekt med kommandoen npm init. Du vil bli bedt om å legge inn noen opplysninger, som prosjektnavnet, versjonen og oppstartsfilen. Du kan godta standardverdiene eller angi dine egne.

Etter at prosjektet er opprettet, vil du se en package.json-fil i mappen. Denne filen inneholder all metadata om prosjektet ditt. Nå må vi installere Express, så kjører vi kommandoen npm install express.

Etter at installasjonen er fullført, må du sjekke i package.json om Express er oppført under avhengigheter. Det er viktig å forsikre deg om at installasjonen var vellykket før du fortsetter.

Nå skal vi opprette en ny fil med navnet index.js, som vil være inngangspunktet for programmet vårt. Denne filen vil inneholde hovedlogikken for Express-serveren vår.

Til å begynne med kan du gjøre en kort test ved å skrive console.log("FormServer"); i index.js-filen og kjøre den med node index.js for å forsikre deg om at alt fungerer som det skal.

Nå er det på tide å bruke Express i index.js-filen din. Legg til nødvendig kode for å importere Express og opprette en Express-app. Her er en enkel kode for å initialisere en Express-applikasjon og lytte på en port.

Sørg for at du kjører serveren på en bestemt port, for eksempel 3000. Sjekk om applikasjonen fungerer korrekt ved å gå inn på localhost:3000 i nettleseren. Du bør se teksten "Hello World".

For å støtte skjemaene i applikasjonen din, trenger vi nå en index.html-fil som inneholder HTML-strukturen for skjemaet vårt. Først opprett en ny mappe kalt "public". Deretter plasserer du index.html-filen der.

I index.html-filen kan du enkelt legge til et enkelt HTML-skjelett med et skjema. Skjemaet vil senere sende dataene til serveren.

For å tilby statiske filer (HTML, CSS, JS) via Express-serveren, bruk metoden app.use() for å angi den "public"-mappen som et statisk katalog. På den måten kan nettleseren be om index.html-filen når du besøker localhost:3000/index.html.

Når du nå starter serveren og laster inn index.html i nettleseren, burde du kunne se skjemaet riktig. Hvis du fyller ut skjemaet og sender det, skjer det imidlertid ingenting ennå, da vi ennå ikke har implementert den serverbaserte logikken.

I neste steg vil vi fokusere på den serverbaserte behandlingen av skjemadataene. Dette innebærer at vi må legge til en rute som mottar og behandler dataene sendt fra skjemaet. Ha neste steg klart for å videreutvikle webapplikasjonen din og legge til funksjonaliteter!

Oppsummering

I denne opplæringen har du lært hvordan du setter opp en enkel server med Node.js og Express. Du har fått grunnleggende for å opprette et Node.js-prosjekt, installere avhengigheter og komme i gang med HTML-skjemaer. Disse stegene er avgjørende for å håndtere web-skjemaer på serversiden.