Ce este Express.js și de ce ar trebui să-l folosești?

Express.js (sau „Express”) este un cadru web NodeJS utilizat pe back-end (sau pe partea de server) a site-urilor web și a aplicațiilor web. Express este flexibil și minimalist, ceea ce înseamnă că nu are o colecție extinsă de biblioteci și pachete inutile și nici nu dictează cum ar trebui să vă construiți aplicația.

Cadrul Express construiește API-uri care facilitează comunicarea prin solicitări și răspunsuri HTTP. Unul dintre lucrurile remarcabile despre Express este că oferă dezvoltatorilor control complet asupra solicitărilor și răspunsurilor care sunt asociate cu fiecare dintre metodele aplicației sale.

În acest tutorial, veți afla cum și de ce ar trebui să utilizați Express în propriile proiecte.

Instalarea Express în proiectul dvs

Înainte de a putea utiliza cadrul Express, va trebui să îl instalați în directorul de proiect. Acesta este un proces simplu care necesită NodeJS și npm.

Primul lucru pe care trebuie să-l faceți este să creați un pachet.json fișier (în directorul/folderul proiectului) folosind următoarea comandă:

npm init

Executarea comenzii de mai sus va iniția un proces care vă va solicita următoarele intrări:

• Numele pachetului
• Versiune
• Descriere
• Punct de intrare
• Comanda de testare
• Cuvinte cheie
• Autor
• Licență

Câmpurile pentru numele pachetului, versiunea, punctul de intrare și licența au toate valorile implicite pe care le puteți înlocui cu ușurință furnizând valorile dvs. Cu toate acestea, dacă doriți să păstrați valorile implicite, puteți utiliza pur și simplu următoarea comandă:

npm init -y

Executarea comenzii de mai sus va genera următoarele pachet.json fișier în directorul de proiect:

{
„nume”: „aplicația mea”,
"versiunea": "1.0.0",
"Descriere": "",
"principal": "index.js",
„scripturi”: {
"test": "echo \"Eroare: nu a fost specificat niciun test\" && ieșire 1"
},
"Cuvinte cheie": [],
"autor": "",
"license": "ISC",
}

Acum puteți instala Express folosind următoarea comandă:

npm install express --save

Instalarea Express va genera un package-lock.json dosar precum și a module_noduri pliant.

Înțelegerea fișierului package.json

Motivul pentru care trebuie să creați un pachet.json înainte de a instala Express este că pachet.json fișierul acționează ca un depozit, stochând metadate importante despre dvs proiecte NodeJS.Dependente este numele unuia dintre aceste câmpuri de metadate, iar Express este a dependenţă.

Instalarea Express în directorul de proiect vă va actualiza automat pachet.json fişier.

Fișierul actualizat package.json

{
„nume”: „aplicația mea”,
"versiunea": "1.0.0",
"Descriere": "",
"principal": "index.js",
„scripturi”: {
"test": "echo \"Eroare: nu a fost specificat niciun test\" && ieșire 1"
},
"Cuvinte cheie": [],
"autor": "",
"license": "ISC",
„dependențe”: {
„express”: „^4.17.1”
}
}

Acum aveți un câmp „dependențe” care are o singură dependență—Express. Si dependențe obiect stochează software-ul de care depinde proiectul dumneavoastră pentru a funcționa corect, care în acest caz este cadrul Express.

Crearea unui server cu Express

A avea un API care se ocupă de stocarea și mișcarea datelor este o cerință pentru orice aplicație full-stack, iar Express face procesul de creare a serverului rapid și ușor.

Privește înapoi la pachet.json fișierul de mai sus și veți vedea un câmp „principal”. Acest câmp stochează punctul de intrare în aplicația dvs., care este „index.js” în exemplul de mai sus. Când doriți să executați aplicația dvs. (sau, în acest caz, serverul pe care sunteți pe cale să îl construiți), va trebui să executați index.js fișier folosind următoarea comandă:

nod index.js

Cu toate acestea, înainte de a ajunge la etapa de execuție, va trebui să creați index.js (sau aplicația server) în directorul proiectului.

Crearea fișierului index.js

const express = require('express');
const app = expres();
const port = 5000;
app.get('/', (req, res) => {
res.send('Serverul tău este operațional')
})
app.listen (port, () => {
console.log(`Serverul rulează la: http://localhost:${port}`);
})

Fișierul de mai sus importă Express, apoi îl folosește pentru a crea o aplicație Express. Aplicația Express oferă apoi acces la obține și asculta metode care fac parte din modulul Express. The app.listen() metoda este prima pe care trebuie să o configurați. Scopul său este de a lista pentru conexiuni pe un anumit port al computerului gazdă, adică portul 5000 în exemplul de mai sus.

Scopul app.get() metoda este de a obține date dintr-o anumită resursă. Această metodă are două argumente: o cale și o funcție de apel invers. Argumentul cale din exemplul de mai sus are o bară oblică care reprezintă poziția rădăcină. Prin urmare, navigarea către http://localhost: 5000 Adresa URL (care este rădăcina aplicației dvs.), în timp ce aplicația dvs. index.js de mai sus rulează, va produce următoarele rezultate în browser:

The app.get() funcția de apel invers al metodei generează rezultatul de mai sus. Această funcție de apel invers are două argumente — cerere și răspuns. Răspunsul (care este res în exemplul de mai sus) este obiectul HTTP pe care o aplicație Express îl trimite după o solicitare HTTP (ceea ce faceți tastând adresa URL de mai sus în browser).

Servirea unui site web static cu serverul dvs. Express

Serverele joacă un rol semnificativ în dezvoltarea API-urilor care ajută la stocarea și transferul de date dinamice și, cel mai probabil, acolo vei folosi un server Express în propriile proiecte.

Cu toate acestea, un server Express poate servi și fișiere statice. De exemplu, dacă doriți să creați un site web static (cum ar fi unul pentru un antrenor personal, un antrenor de viață sau un stilist), atunci puteți utiliza serverul Express pentru a găzdui site-ul.

Un exemplu de site web HTML static

 Acasă 







Bine ati venit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Dolor, sequi distinctio!

Vedeți Servicii

Codul HTML de mai sus creează o pagină de pornire statică plăcută a unui site web de stilist personal prin link-ul către următorul fișier style.css:

*{
marja: 0;
umplutură: 0;
dimensionare cutie: chenar-cutie;
}
corp {
familie de fonturi: 'Lato', sans-serif;
înălțimea liniei: 1,5;
}
A {
culoare: #333;
text-decor: niciuna;
}
ul {
stil-listă: niciunul;
}
p {
marja: .5rem 0;
}
h1{
margine-stânga: 2rem;
}
/* Utilitate */
.container {
lățime maximă: 1100px;
margine: auto;
umplutura: 0 2rem;
preaplin: ascuns;
}
.btn {
display: inline-block;
chenar: niciunul;
fundal: #910505;
culoare: #fff;
umplutura: 0,5rem 1rem;
raza-limită: 0,5rem;
}
.btn: hover {
opacitate: 0,9;
}
/* Bara de navigare */
#navbar {
fundal: #fff;
poziție: lipicios;
sus: 0;
indicele z: 2;
}
#navbar .container {
afisare: grila;
grid-template-coloane: 6fr 3fr 2fr;
captuseala: 1rem;
alinierea elementelor: centru;
}
#navbar h1 {
culoare: #b30707;
}
#navbar ul {
justify-self: sfârşit;
display: flex;
margine-dreapta: 3.5rem;
}
#navbar ul li a {
umplutură: 0,5 rem;
greutatea fontului: bold;
}
#navbar ul li a.current {
fundal: #b30707;
culoare: #fff;
}
#navbar ul li a: hover {
fundal: #f3f3f3;
culoare: #333;
}
#navbar .social {
justify-self: centru;
}
#navbar .social i {
culoare: #777;
margine-dreapta: .5rem;
}
/* Acasă */
#Acasă {
culoare: #fff;
fundal: #333;
captuseala: 2rem;
poziție: relativă;
}
#acasă: înainte de {
continut: '';
fundal: url ( https://source.unsplash.com/random) centru/copertă fără repetare;
poziție: absolută;
sus: 0;
stânga: 0;
latime: 100%;
inaltime: 100%;
opacitate: 0,4;
}
#acasă .showcase-container {
afisare: grila;
grid-template-coloane: repeta (2, 1fr);
justificare-conținut: centru;
alinierea elementelor: centru;
inaltime: 100vh;
}
#acasă .showcase-content {
indicele z: 1;
}
#acasă .showcase-content p {
margine-jos: 1rem;
}

Servirea site-ului web cu Express Server

const express = require('express');
const app = expres();
const port = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Serverul rulează la: http://localhost:${port}`);
})

Fișierele HTML și CSS de mai sus se află într-un folder public din directorul principal al proiectului. Locația fișierului HTML îl face accesibil serverului Express și funcțiilor acestuia.

Una dintre noile funcții din serverul Express de mai sus este app.use() metodă. Se montează expres.static() middleware, care servește fișiere statice. Acest lucru face posibilă utilizarea res.sendFile() funcția de a servi staticul index.html dosarul de mai sus.

Navigarea către http://localhost: 5000 locația din browser va afișa ceva similar cu următoarea ieșire:

Explorați dezvoltarea backend

Cadrul Express vă permite să faceți cereri HTTP specifice și să primiți răspunsuri adecvate folosind un set de metode predefinite. Este, de asemenea, unul dintre cele mai populare cadre de backend astăzi.

A învăța cum să folosești cadrul Express este o mișcare grozavă. Dar dacă vrei cu adevărat să devii un dezvoltator backend profesionist, trebuie să înveți mult mai mult.

Aflați cum să deveniți un dezvoltator backend în 2021

Dacă ți-ai pus inima pe o carieră în IT, poți face mai rău decât să înveți abilitățile de care ai nevoie pentru a fi un dezvoltator backend.

Citiți în continuare

Despre autor