Kaip sukurti paprastą žiniatinklio serverį naudojant Node.js – „SitePoint“.

Node.js yra atvirojo kodo, kelių platformų JavaScript vykdymo aplinka, leidžianti kūrėjams kurti serverio programas ne naršyklėje. Jis gali būti naudojamas kuriant itin gerai veikiančias itin svarbias gamybos programas. Šiame praktiniame vadove apžvelgsime, kaip galite sukurti savo žiniatinklio serverį naudodami Node.js.

Key Takeaways

• Paprasto žiniatinklio serverio su Node.js diegimas. Šiame vadove parodyta, kaip nustatyti ir įdiegti žiniatinklio serverį naudojant Node.js. Jame aprašomas kiekvienas veiksmas, įskaitant projekto inicijavimą, Express.js integravimą ir daugelį esminių funkcijų, suteikiant tvirtą pagrindą visiems, kurie pradeda naudotis Node.js.
• Dinaminių žiniatinklio programų kūrimas. Šis vadovas apima daugybę funkcijų, tokių kaip formų tvarkymas, atsakymas į vartotojų užklausas ir dinamiškas tinklalapių aptarnavimas, kurie yra būtini, kad jūsų žiniatinklio programos būtų interaktyvios ir patrauklios.
• Node.js funkcijų tyrinėjimas. Pasinerkite į Node.js žiniatinklio kūrimo pasiūlymus, įskaitant tai, kaip dirbti su statiniais failais, tvarkyti klaidas ir įgyvendinti formas. Šiame vadove pateikiamas praktinis būdas naudoti Node.js kuriant daug funkcijų turinčias žiniatinklio programas.

1 dalis: Projekto sąranka ir diegimas

1 veiksmas: įdiekite Node.js ir npm

Norėdami pradėti kurti mūsų žiniatinklio programą, įsitikinkite, kad turite Node.js ir npm įdiegta jūsų sistemoje. Node.js suteikia JavaScript vykdymo aplinką, o npm yra Node.js paketų tvarkyklė. Galite atsisiųsti ir įdiegti Node.js iš oficialios svetainės.

Norėdami įsitikinti, kad Node.js ir npm yra tinkamai įdiegti, atidarykite terminalą ir vykdykite šias komandas:

node -v
npm -v

2 veiksmas: inicijuokite naują Node.js projektą

Sukurkite naują savo projekto katalogą ir inicijuokite naują Node.js projektą vykdydami šią komandą savo terminale:

mkdir book-club
cd book-club
npm init -y

Ši komanda sukurs a package.json failą savo projektui. Jame bus metaduomenys apie projektą, įskaitant jo priklausomybes:

{ 
  "name": "book-club", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { "test": 
  "echo \"Error: no test specified\" && exit 1" }, 
  "keywords": [], 
  "author": "", 
  "license": "ISC" }

3 veiksmas: įdiekite Express.js

Express.js yra populiari Node.js žiniatinklio sistema, turinti žiniatinklio ir mobiliųjų programų kūrimo funkcijas. Toliau pateikta komanda įdiegia Express.js ir prideda ją kaip priklausomybę jūsų package.json failas:

npm install express

2 dalis: Express serverio nustatymas

1 veiksmas: sukurkite naują serverio failą

Dabar, kai projektas nustatytas, sukurkite naują failą pavadinimu app.js projekto kataloge. Šiame faile bus Express serverio kodas.

2 veiksmas: importuokite Express.js

Jūsų viršuje app.js failą, importuokite Express.js modulį:

const express = require('express');

3 veiksmas: sukurkite „Express“ programą

Tada sukurkite „Express“ programos egzempliorių:

const app = express();

The express() funkcija yra aukščiausio lygio funkcija, kurią eksportuoja Express modulis. Sukuriama „Express“ programa, kurią priskiriame app kintamasis.

4 veiksmas: nustatykite maršrutą

Apibrėžkite kelio maršrutą / su paprastu pranešimu, kai pasiekiama:

app.get("https://www.sitepoint.com/", (req, res) => {
 res.send('Hello World!');
});

Čia app.get() yra funkcija, kuri nurodo serveriui, ką daryti, kai GET užklausa pateikiama tam tikru keliu, šiuo atveju, /. Šiai funkcijai naudojami du argumentai: kelias ir atgalinio skambinimo funkcija, kuri priima užklausą ir atsakymą.

5 veiksmas: paleiskite serverį

Galiausiai paleiskite serverį prie 3000 prievado:

const port = 3000;
app.listen(port, () => {
 console.log(`Server is running at http://localhost:${port}`);
});

The app.listen() funkcija paleidžia serverį ir priverčia jį klausytis užklausų nurodytame prievade.

3 dalis: Programos funkcionalumo kūrimas

Dabar, kai nustatėme „Express“ serverį, pradėkime kurti programos funkcionalumą sukurdami kelis skirtingus maršrutus.

1 veiksmas: sukurkite naują failą žinutėms

Savo projekto kataloge sukurkite naują failą pavadinimu messages.js. Šiame faile bus pranešimai, kuriuos jūsų serveris išsiųs kaip atsakymus:

module.exports = {
 home: 'Welcome to our Book Club!',
 about: 'About Us',
 notFound: '404 Not Found'
};

2 veiksmas: importuokite pranešimus į savo serverio failą

Jūsų viršuje app.js failą, importuokite pranešimus:

const messages = require('./messages');

3 veiksmas: naudokite pranešimus savo maršrutuose

Dabar naudokite šiuos pranešimus maršrutuose:

app.get("https://www.sitepoint.com/", (req, res) => {
 res.send(messages.home);
});
app.get('/about', (req, res) => {
 res.send(messages.about);
});
app.use((req, res) => {
 res.status(404).send(messages.notFound);
});

Čia app.use() yra metodas, kuris iškviečiamas kiekvienai serveriui pateiktai užklausai. Mes naudojame jį čia norėdami apdoroti visus maršrutus, kurie nėra apibrėžti, ir siųsti a 404 Not Found žinutę.

4 dalis: Statinio failų aptarnavimo pridėjimas

1 veiksmas: sukurkite naują statinių failų katalogą

Sukurkite naują katalogą pavadinimu public. Šiame kataloge bus visi jūsų statiniai failai:

mkdir public

2 veiksmas: pridėkite keletą statinių failų

Šio vadovo tikslais pridėkime paprastą HTML failą ir CSS failą. Jūsų public kataloge, sukurkite naują failą pavadinimu index.html ir pridėkite šį kodą:

<!DOCTYPE html>
<html>
<head>
  <title>Book Club</title>
  <link rel="stylesheet" type="text/css" href="/styles.css">
</head>
<body>
  <h1>Welcome to our Book Club!>/h1>
</body>
</html>

Taip pat sukurkite naują failą pavadinimu styles.css viduje public katalogą ir pridėkite šį kodą:

body {
  font-family: Arial, sans-serif;
}

3 veiksmas: statiniams failams teikti naudokite express.static

Pridėkite žemiau esančią eilutę prie app.js failą, prieš maršruto apibrėžimus:

app.use(express.static('public'));

The express.static funkcija yra Express.js integruota tarpinės programinės įrangos funkcija. Jis aptarnauja statinius failus ir kaip argumentą paima katalogo, iš kurio norite pateikti failus, pavadinimą.

5 dalis: POST užklausų tvarkymas

1 veiksmas: pridėkite formą prie index.html

Jūsų index.html failą, pridėkite formą su vienu įvesties lauku ir pateikimo mygtuku:

<form action="/submit" method="post">
  <input type="text" name="book" placeholder="Enter a book title">
  <button type="submit">Submit</button>
</form>

Ši forma išsiųs POST užklausą į /submit kelias. Užklausos turinyje bus įvesties lauko reikšmė.

2 veiksmas: įdiekite kūno analizatorių

Turite įdiegti tarpinę programinę įrangą, vadinamą kūno analizatorius tvarkyti POST užklausoje atsiųstus duomenis:

npm install body-parser

3 veiksmas: importuokite ir naudokite kūno analizatorių

Importuokite kūno analizatorių į app.js failas:

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));

The bodyParser.urlencoded() funkcija analizuoja gaunamus užklausų elementus, pasiekiamus pagal req.body nuosavybė.

4 veiksmas: apdorokite POST užklausas

Dabar sukurkite naują galinį tašką, kad galėtumėte apdoroti šią POST užklausą app.js failas:

app.post('/submit', (req, res) => {
  const book = req.body.book;
  console.log(`Book submitted: ${book}`);
  res.send(`Book submitted: ${book}`);
});

6 dalis: Duomenų parduotuvės pridėjimas

Šioje dalyje prie programos pridėsime paprastą duomenų saugyklą, kurioje saugosime vartotojų pateiktas knygas. Duomenims saugoti naudosime masyvą, kad būtų paprasčiau.

1 veiksmas: sukurkite duomenų saugyklą

Jūsų viršuje app.js failą, sukurkite masyvą knygoms saugoti:

const books = [];

2 veiksmas: atnaujinkite POST užklausų tvarkyklę

Atnaujinkite POST užklausų tvarkyklę, kad pridėtumėte pateiktą knygą prie books masyvas:

app.post('/submit', (req, res) => {
    const book = req.body.book;
    books.push(book);
    console.log(`Book submitted: ${book}`);
    res.send(`Book submitted: ${book}`);
});

3 veiksmas: sukurkite maršrutą, kad galėtumėte peržiūrėti visas knygas

Sukurkite naują maršruto tvarkyklę, kuri grąžintų visas pateiktas knygas:

app.get('/books', (req, res) => {
  res.send(books.join(', '));
});

Pastaba: realaus pasaulio programoje duomenis greičiausiai saugotumėte duomenų bazėje. Čia masyvo duomenys bus prarasti kiekvieną kartą, kai iš naujo paleisite serverį.

7 dalis: Klaidų tvarkymo pridėjimas

Šioje dalyje sukursime klaidų tvarkyklę. Express.js suteikia integruotą klaidų tvarkyklę. Tačiau taip pat galite sukurti savo klaidų tvarkymo tarpinę programinę įrangą.

1 veiksmas: sukurkite klaidų tvarkymo tarpinę programinę įrangą

Jūsų app.js failą, failo pabaigoje pridėkite šį kodą:

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something Went Wrong!');
});

Ši tarpinės programinės įrangos funkcija turi keturis argumentus vietoj įprastų trijų (req, res, next). Ši funkcija iškviečiama kiekvieną kartą, kai programoje įvyksta klaida.

2 veiksmas: klaidoms perduoti naudokite kitą funkciją

Jei perduosite argumentą next() funkcija, Express.js manys, kad tai klaida, praleis visas vėlesnes tarpinės programinės įrangos funkcijas ir pereis tiesiai prie tarpinės programinės įrangos klaidų tvarkymo funkcijos:

app.post('/submit', (req, res, next) => {
  const book = req.body.book;
  if (!book) {
    const err = new Error('Book title is required');
    return next(err);
  }
  books.push(book);
  console.log(`Book submitted: ${book}`);
  res.send(`Book submitted: ${book}`);
});

Šis tvarkytojas patikrina, ar POST užklausoje buvo pateiktas knygos pavadinimas. Jei ne, tai sukuria naują Error objektą ir perduoda jį next funkcija. Taip bus praleistos visos paskesnės tarpinės programinės įrangos funkcijos ir pereisite tiesiai prie klaidų tvarkymo tarpinės programinės įrangos.

8 dalis: HTML puslapių teikimas

Šioje dalyje pakeisime savo programą, kad būtų teikiami HTML puslapiai, o ne paprastas tekstas. Tai leis jums sukurti sudėtingesnes vartotojo sąsajas.

1 veiksmas: įdiekite EJS

EJS (įterptasis JavaScript) yra paprasta šablonų kalba, leidžianti generuoti HTML žymėjimą naudojant paprastą JavaScript:

npm install ejs

2 veiksmas: nustatykite EJS kaip peržiūros variklį

Jūsų app.js failą, nustatykite EJS kaip „Express“ programos peržiūros variklį:

app.set('view engine', 'ejs');

Tai nurodo „Express“ naudoti EJS kaip peržiūros variklį, kai pateikiami vaizdai.

3 veiksmas: sukurkite rodinių katalogą

Pagal numatytuosius nustatymus „Express“ ieškos kataloge, pavadintame views už savo pažiūras. Sukurkite šį katalogą savo projekto kataloge:

mkdir views

4 veiksmas: sukurkite EJS rodinį

Jūsų views kataloge, sukurkite naują failą pavadinimu index.ejs ir pridėkite šį kodą:

<!DOCTYPE html>
<html>
<head>
    <title>Book Club</title>
</head>
<body>
    <h1><%= message %></h1>
    <form action="/submit" method="post">
        <input type="text" name="book" placeholder="Enter a book title">
        <button type="submit">Submit</button>
    </form>
    <h2>Submitted Books:</h2>
    <ul>
        <% books.forEach(function(book) { %>
            <li><%= book %></li>
        <% }); %>
    </ul>
</body>
</html>

The <%= message %> rezervuota vieta naudojama pranešimo kintamojo vertei išvesti.

5 veiksmas: atnaujinkite POST užklausų tvarkyklę

Atnaujinkite POST /submit maršruto tvarkytojas, kad pridėtų pateiktą knygą prie books masyvą ir nukreipkite vartotoją atgal į pagrindinį puslapį:

app.post('/submit', (req, res) => {
  const book = req.body.book;
  books.push(book);
  console.log(`Book submitted: ${book}`);
  res.redirect("https://www.sitepoint.com/");
});

Pastaba: gera praktika yra nukreipti vartotoją po POST užklausos. Tai žinoma kaip Paskelbti/Peradresuoti/Gauti šablonąir apsaugo nuo pasikartojančių formų pateikimo.

6 veiksmas: atnaujinkite namų maršrutą

Atnaujinkite GET / maršruto tvarkytojas knygoms perduoti array prie index.ejs:

app.get("https://www.sitepoint.com/", (req, res) => {
   res.render('index', { message: messages.home, books: books });
});

7 veiksmas: atnaujinkite namų maršrutą

Dabar laikas paleisti programą ir pamatyti, kaip ji veikia.

Galite paleisti serverį savo terminale vykdydami šią komandą:

node app.js

Turėtumėte pamatyti pranešimą, kuriame sakoma Server is running at http://localhost:3000 terminale.

Now, instead of running node app.js tu gali paskambinti npm start:

npm start

Išvada

Sveikiname! Sukūrėte žiniatinklio programą naudodami Node.js ir Express.js. Ši programa aptarnauja statinius failus, tvarko skirtingus maršrutus, naudoja tarpinę programinę įrangą ir kt.

Jei norite tai išbandyti patys arba norėtumėte ištirti kodą, patikrinkite tai CodeSandbox demonstracinė versija.

Su Node.js ir Express.js galite nuveikti daug daugiau. Galite pridėti daugiau maršrutų, prisijungti prie skirtingų duomenų bazių, kurti API, kurti realaus laiko programas naudodami WebSockets ir dar daugiau. Galimybės yra neribotos.

Tikiuosi, kad šis vadovas buvo naudingas. Laimingas kodavimas!

Dažnai užduodami klausimai (DUK)