Käsitellä verkkolomakkeita palvelimella Node.js:llä ja Expressillä

Tässä oppaassa opetan sinulle, miten voit vastaanottaa lomaketietoja palvelimella Node.js ja Expressin avulla. Asetamme yhdessä yksinkertaisen palvelimen ja käymme läpi tarvittavat vaiheet lomakkeiden luomiseksi ja tietojen lähettämiseksi tälle palvelimelle. Tämä opas on tarkoitettu kaikille, joilla on perustiedot JavaScriptistä ja Node.js:stä sekä jotka haluavat laajentaa taitojaan web-kehityksen alalla.

Tärkeimmät oivallukset:

• Perusteet yksinkertaisen Node.js-palvelimen luomiseen Expressillä
• Projektihakemiston perustaminen ja tarvittavien pakettien asentaminen
• HTML-tiedoston luominen lomakkeiden näyttämiseen ja käyttöön
• Lähetettyjen tietojen käsittely palvelinpuolella

Askelluettelo

Ensimmäisenä meidän on perustettava palvelin vastaanottaaksemme tulevat lomaketiedot. Siksi aloitamme luomalla uuden Node.js-projektin.

Avaa editorisi, esimerkiksi Visual Studio Code, ja avaa terminaali. Vaihtoehtoisesti voit käyttää normaalia terminaalia. Varmista, että Node.js on asennettu tietokoneellesi.

Navigoi päähakemistoosi ja luo uusi alihakemisto palvelusovellustasi varten. Ehdotan nimeä "FormServerApp".

Mene luomaasi hakemistoon ja alusta uusi Node.js-projekti komennolla npm init. Sinua pyydetään antamaan joitain tietoja, kuten projektin nimi, versio ja aloitustiedosto. Voit hyväksyä oletusarvot tai syöttää omat arvosi.

Luomisen jälkeen näet hakemistossa package.json-tiedoston, joka sisältää projektisi metatiedot. Nyt meidän on asennettava Express, joten suoritamme komennon npm install express.

Kun asennus on valmis, tarkista package.json-tiedostosta, onko Express lueteltu riippuvuuksissa. On erittäin tärkeää varmistaa, että asennus onnistui ennen kuin jatkat.

Nyt luomme uuden tiedoston nimeltä index.js, joka toimii sovelluksemme aloituskohtana. Tämä tiedosto sisältää päälogiikan Express-palvelimellemme.

Aluksi voit tehdä lyhyen testin lisäämällä console.log("FormServer"); index.js-tiedostoon ja suorittamalla sen node index.js -komennolla varmistaaksesi, että kaikki toimii.

Nyt on aika käyttää Expressiä index.js-tiedostossasi. Lisää tarvittava koodi Expressin tuomiseksi ja luo Express-sovellus. Tässä on yksinkertainen koodi Express-sovelluksen aloittamiseksi ja kuuntelemiseksi tietyn portin kautta.

Varmista, että annat palvelimen toimia tietyllä portilla, esimerkiksi 3000. Tarkista, toimiiko sovellus oikein avaamalla selaimessa localhost:3000. Sinun tulisi nähdä tuloste "Hello World".

Jotta voimme tukea lomakkeita sovelluksessasi, tarvitsemme nyt index.html-tiedoston, joka sisältää HTML-rakenteen lomaketta varten. Luo ensin uusi kansio nimeltä "public". Sinne sijoitat index.html-tiedoston.

Voit yksinkertaisesti lisätä index.html-tiedostoon yksinkertaisen HTML-rakenteen lomakkeelle. Lomake lähettää myöhemmin tiedot palvelimelle.

Staattisten tiedostojen (HTML, CSS, JS) tarjoamiseksi Express-palvelimen kautta, käytä metodia app.use() asettaaksesi "public"-kansion staattiseksi hakemistoksi. Tällöin selain voi pyytää index.html-tiedostoa, kun avaat localhost:3000/index.html.

Kun nyt käynnistät palvelimen ja lataat selaimessa index.html-tiedoston, sinun tulisi pystyä näkemään lomake oikein. Kun täytät lomakkeen ja lähetät sen, ei kuitenkaan vielä tapahdu mitään, koska emme ole vielä toteuttaneet palvelinpuoleista logiikkaa.

Seuraavaksi keskitymme lomaketietojen käsittelyyn palvelinpuolella. Tämä tarkoittaa, että meidän on lisättävä reitti, joka vastaanottaa ja käsittelee lomakkeelta lähetetyt tiedot. Ole valmiina seuraaviin vaiheisiin ja kehittämään verkkosovellustasi edelleen lisäämällä toiminnallisuuksia!

Yhteenveto

Tässä oppaassa olet oppinut, kuinka luoda yksinkertainen palvelin Node.js:llä ja Expressillä. Olet oppinut perusteet Node.js-projektin luomisesta, riippuvuuksien asentamisesta ja HTML-lomakkeisiin sukeltamisesta. Nämä askeleet ovat olennaisia ​​web-lomakkeiden käsittelyssä palvelinpuolella.