Behandling af webformularer server-side med Node.js og Express

I dagens vejledning viser jeg dig, hvordan du kan modtage formdata på en server med Node.js og Express. Vi vil sammen oprette en simpel server og gå igennem de nødvendige trin for at oprette formularer, der sender data til denne server. Denne vejledning henvender sig til dem, der har en grundlæggende forståelse af JavaScript og Node.js og gerne vil udvide deres færdigheder inden for webudvikling.

Vigtigste indsigt:

• Grundlæggende om at oprette en simpel Node.js-server med Express
• Oprettelse af projektmappe og installation af nødvendige pakker
• Oprettelse af en HTML-fil til visning og brug af formularer
• Server-side behandling af sendte data

Trin-for-trin-guide

Først skal vi oprette en server til at behandle de indkommende formdata. Derfor begynder vi med at oprette et nyt Node.js-projekt.

Åbn din editor, f.eks. Visual Studio Code, og åbn en terminal. Alternativt kan du bruge en almindelig terminal. Sørg for, at Node.js er installeret på din computer.

Naviger til din hovedmappe og opret en ny undermappe til din server-app. Jeg foreslår at kalde mappen "FormServerApp".

Gå ind i den nyoprettede mappe og initialiser et nyt Node.js-projekt med kommandoen npm init. Du bliver bedt om at indtaste nogle oplysninger, såsom projektets navn, versionen og indgangspunktsfilen. Du kan bruge standardværdierne eller indtaste dine egne.

Efter oprettelsen af projektet vil du se en package.json-fil i mappen. Denne fil indeholder alle metadata om dit projekt. Nu skal vi installere Express, så kører vi kommandoen npm install express.

Efter installationen er færdig, skal du tjekke i package.json, om Express er opført under afhængighederne. Det er vigtigt at være sikker på, at installationen var vellykket, inden du fortsætter.

Nu opretter vi en ny fil med navnet index.js, som skal fungere som indgangspunkt for vores program. Denne fil vil indeholde hovedlogikken for vores Express-server.

I begyndelsen kan du foretage en kort test ved at skrive console.log("FormServer"); i index.js-filen og køre denne med node index.js for at sikre, at alt fungerer.

Nu er det tid til at bruge Express i din index.js-fil. Tilføj den nødvendige kode til at importere Express og oprette en Express-app. Her er en simpel kode til at initialisere en Express-applikation og lytte på en port.

Sørg for at lade serveren køre på en bestemt port, f.eks. 3000. Tjek, om ansøgningen fungerer korrekt ved at indtaste localhost:3000 i din browser. Du bør se outputtet "Hello World".

For at understøtte formularer i din ansøgning har vi nu brug for en index.html-fil, der indeholder HTML-strukturen for vores formular. Start med at oprette en ny mappe kaldet "public". Placer derefter index.html-filen deri.

I index.html-filen kan du indsætte en simpel HTML-struktur med et formular. Formularen vil senere sende de indsendte data til serveren.

For at levere de statiske filer (HTML, CSS, JS) via Express-serveren, brug metoden app.use() til at angive den "offentlige" mappe som en statisk mappe. På den måde kan browseren anmode om index.html-filen, når du besøger localhost:3000/index.html.

Når du nu starter serveren og indlæser index.html i din browser, bør du være i stand til at se formularen korrekt. Når du udfylder og sender formularen, sker der dog ikke noget endnu, da vi endnu ikke har implementeret den serverbaserede logik.

I næste trin vil vi fokusere på behandlingen af formulardata på serversiden. Det betyder, at vi skal tilføje en rute, der modtager og behandler de data, der er sendt fra formularen. Hold de næste trin klar for at fortsætte med at udvikle din webapplikation og tilføje funktionaliteter!

Oversigt

I denne vejledning har du lært at oprette en simpel server med Node.js og Express. Du har fået kendskab til grundlæggende om oprettelse af et Node.js-projekt, installation af afhængigheder og indføring i HTML-formularer. Disse skridt er afgørende for at behandle webformularer på serversiden.