Što je Express.js i zašto biste ga trebali koristiti?

Express.js (ili "Express") je NodeJS web okvir koji se koristi na pozadini (ili na strani poslužitelja) web stranica i web aplikacija. Express je fleksibilan i minimalistički, što znači da nema opsežnu kolekciju nepotrebnih knjižnica i paketa, niti diktira kako biste trebali izgraditi svoju aplikaciju.

Express okvir gradi API-je koji olakšavaju komunikaciju putem HTTP zahtjeva i odgovora. Jedna od izvanrednih stvari u vezi s Expressom je to što razvojnim programerima daje potpunu kontrolu nad zahtjevima i odgovorima koji su povezani sa svakom od metoda njegove aplikacije.

U ovom vodiču naučit ćete kako i zašto biste trebali koristiti Express u vlastitim projektima.

Instaliranje Expressa u vaš projekt

Prije nego što možete koristiti Express framework, morat ćete ga instalirati u direktorij projekta. Ovo je jednostavan proces koji zahtijeva NodeJS i npm.

Prva stvar koju trebate učiniti je stvoriti a paket.json datoteku (unutar vašeg projektnog direktorija/mape) pomoću sljedeće naredbe:

npm init

Izvođenje gornje naredbe pokrenut će proces koji će od vas tražiti sljedeće unose:

• Naziv paketa
• Verzija
• Opis
• Ulazna točka
• Testna naredba
• Ključne riječi
• Autor
• Licenca

Naziv paketa, verzija, ulazna točka i licencna polja imaju zadane vrijednosti koje možete lako nadjačati pružanjem svojih vrijednosti. Međutim, ako želite zadržati zadane vrijednosti, možete jednostavno koristiti sljedeću naredbu:

npm init -y

Izvršavanje gornje naredbe će generirati sljedeće paket.json datoteka u direktoriju vašeg projekta:

{
"name": "myapp",
"verzija": "1.0.0",
"opis": "",
"main": "index.js",
"skripte": {
"test": "echo \"Pogreška: nije naveden test\" && izlaz 1"
},
"ključne riječi": [],
"Autor": "",
"licenca": "ISC",
}

Sada možete instalirati Express pomoću sljedeće naredbe:

npm install express --spremi

Instalacija Expressa će generirati a paket-lock.json datoteka kao i a čvor_moduli mapu.

Razumijevanje datoteke package.json

Razlog zbog kojeg trebate stvoriti a paket.json datoteku prije instaliranja Expressa je da paket.json datoteka djeluje kao spremište, pohranjujući važne metapodatke o vašim NodeJS projekti.Ovisnosti je naziv jednog od ovih polja metapodataka, a Express je a ovisnost.

Instaliranjem Expressa u direktoriju vašeg projekta automatski će se ažurirati vaš paket.json datoteka.

Ažurirana datoteka package.json

{
"name": "myapp",
"verzija": "1.0.0",
"opis": "",
"main": "index.js",
"skripte": {
"test": "echo \"Pogreška: nije naveden test\" && izlaz 1"
},
"ključne riječi": [],
"Autor": "",
"licenca": "ISC",
"ovisnosti": {
"express": "^4.17.1"
}
}

Sada imate polje "ovisnosti" koje ima jednu ovisnost - Express. I ovisnosti objekt pohranjuje softver o kojem vaš projekt ovisi kako bi ispravno funkcionirao, što je u ovom slučaju Express framework.

Izrada poslužitelja s Expressom

Posjedovanje API-ja koji upravlja pohranom i kretanjem podataka uvjet je za svaku aplikaciju s punim stogovima, a Express čini proces stvaranja poslužitelja brzim i lakim.

Osvrnite se na paket.json datoteku iznad i vidjet ćete "glavno" polje. Ovo polje pohranjuje ulaznu točku u vašu aplikaciju, a to je "index.js" u gornjem primjeru. Kada želite izvršiti svoju aplikaciju (ili u ovom slučaju poslužitelj koji namjeravate izgraditi), morat ćete izvršiti index.js datoteku pomoću sljedeće naredbe:

indeks čvora.js

Međutim, prije nego što dođete do faze izvršenja, morat ćete stvoriti index.js (ili poslužiteljske aplikacije) u direktoriju vašeg projekta.

Kreiranje datoteke index.js

const express = zahtijevati('izraziti');
const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.send('Vaš poslužitelj radi')
})
app.listen (port, () => {
console.log(`Poslužitelj radi na: http://localhost:${port}`);
})

Gornja datoteka uvozi Express zatim je koristi za stvaranje Express aplikacije. Aplikacija Express tada omogućuje pristup dobiti i slušati metode koje su dio Express modula. The app.listen() metoda je prva koju trebate postaviti. Njegova je svrha popis veza na određenom portu glavnog računala, što je luka 5000 u gornjem primjeru.

Svrha je app.get() metoda je dobivanje podataka iz određenog izvora. Ova metoda ima dva argumenta: stazu i funkciju povratnog poziva. Argument puta u gornjem primjeru ima kosu crtu koja predstavlja korijenski položaj. Stoga, navigacija do http://localhost: 5000 URL (koji je korijen vaše aplikacije), dok je vaša gornja aplikacija index.js pokrenuta, proizvest će sljedeći izlaz u vašem pregledniku:

The app.get() funkcija povratnog poziva metode generira gornji izlaz. Ova funkcija povratnog poziva ima dva argumenta — zahtjev i odgovor. Odgovor (koji je res u gornjem primjeru) je HTTP objekt koji Express aplikacija šalje nakon HTTP zahtjeva (što činite tako da upišete gornji URL u svoj preglednik).

Posluživanje statične web stranice s vašim Express poslužiteljem

Poslužitelji igraju značajnu ulogu u razvoju API-ja koji pomažu u pohranjivanju i prijenosu dinamičkih podataka i tu ćete najvjerojatnije koristiti Express poslužitelj u vlastitim projektima.

Međutim, Express poslužitelj može posluživati ​​i statičke datoteke. Na primjer, ako želite izraditi statičnu web stranicu (kao što je ona za osobnog trenera, životnog trenera ili stilista), tada možete koristiti svoj Express poslužitelj za hostiranje web stranice.

Primjer statične HTML web stranice

 Dom 







Dobrodošli

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 razlikovanje!

Pregledajte usluge

Gornji HTML kôd stvara ugodnu statičnu početnu stranicu web stranice osobnog stilista povezujući se na sljedeću datoteku style.css:

*{
margina: 0;
dopuna: 0;
box-dimenzion: obrub-kutija;
}
tijelo {
font-family: 'Lato', sans-serif;
visina linije: 1,5;
}
a {
boja: #333;
tekst-dekoracija: nema;
}
ul {
stil liste: nema;
}
p {
margina: .5rem 0;
}
h1{
margin-lijevo: 2rem;
}
/* Korisnost */
.container {
maksimalna širina: 1100px;
margina: auto;
padding: 0 2rem;
prelijevanje: skriveno;
}
.btn {
zaslon: inline-block;
granica: nema;
pozadina: #910505;
boja: #fff;
padding: 0,5rem 1rem;
granica-radijus: 0,5rem;
}
.btn: lebdjeti {
neprozirnost: 0,9;
}
/* Navbar */
#navbar {
pozadina: #fff;
položaj: ljepljiv;
vrh: 0;
z-indeks: 2;
}
#navbar .spremnik {
prikaz: mreža;
grid-template-kolumns: 6fr 3fr 2fr;
padding: 1rem;
align-items: centar;
}
#navbar h1 {
boja: #b30707;
}
#navbar ul {
opravdati se: kraj;
zaslon: flex;
margin-desno: 3,5rem;
}
#navbar ul li a {
podstava: 0,5 rem;
font-weight: bold;
}
#navbar ul li a.current {
pozadina: #b30707;
boja: #fff;
}
#navbar ul li a: lebdjeti {
pozadina: #f3f3f3;
boja: #333;
}
#navbar .social {
opravdati se: središte;
}
#navbar .social i {
boja: #777;
margin-desno: .5rem;
}
/* Dom */
#Dom {
boja: #fff;
pozadina: #333;
padding: 2rem;
položaj: relativan;
}
#home: prije {
sadržaj: '';
pozadina: url ( https://source.unsplash.com/random) središte/poklopac bez ponavljanja;
pozicija: apsolutna;
vrh: 0;
lijevo: 0;
širina: 100%;
visina: 100%;
neprozirnost: 0,4;
}
#home .showcase-container {
prikaz: mreža;
grid-template-kolumns: ponoviti (2, 1fr);
justify-content: centar;
align-items: centar;
visina: 100vh;
}
#home .showcase-content {
z-indeks: 1;
}
#home .showcase-content p {
margina-dno: 1rem;
}

Posluživanje web stranice s Express poslužiteljem

const express = zahtijevati('izraziti');
const app = express();
const port = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Poslužitelj radi na: http://localhost:${port}`);
})

Gore navedene HTML i CSS datoteke nalaze se u javnoj mapi u glavnom direktoriju projekta. Lokacija HTML datoteke čini je dostupnom Express poslužitelju i njegovim funkcijama.

Jedna od novih funkcija na gore navedenom Express poslužitelju je app.use() metoda. Montira se express.static() Middleware, koji služi statičkim datotekama. To omogućuje korištenje res.sendFile() funkcija služi statici index.html datoteka iznad.

Navigacija do http://localhost: 5000 lokacija u vašem pregledniku prikazat će nešto slično sljedećem izlazu:

Istražite razvoj pozadine

Express okvir vam omogućuje da napravite specifične HTTP zahtjeve i dobijete odgovarajuće odgovore pomoću skupa unaprijed definiranih metoda. To je također jedan od najpopularnijih backend okvira danas.

Naučiti kako koristiti Express okvir je izvrstan potez. Ali ako istinski želite postati profesionalni backend developer, potrebno je još puno toga naučiti.

Saznajte kako postati Backend Developer 2021

Ako ste se odlučili za karijeru u IT-u, možete učiniti i gore nego naučiti vještine koje su vam potrebne da biste bili backend programer.

Pročitajte dalje

O autoru