Kaj je Express.js in zakaj bi ga morali uporabljati?

Express.js (ali "Express") je spletni okvir NodeJS, ki se uporablja na ozadju (ali na strani strežnika) spletnih mest in spletnih aplikacij. Express je prilagodljiv in minimalističen, kar pomeni, da nima obsežne zbirke nepotrebnih knjižnic in paketov, niti ne narekuje, kako naj zgradite svojo aplikacijo.

Ogrodje Express gradi API-je, ki olajšajo komunikacijo prek zahtev in odgovorov HTTP. Ena od izjemnih stvari pri Expressu je, da razvijalcem omogoča popoln nadzor nad zahtevami in odgovori, ki so povezani z vsako metodo njegove aplikacije.

V tej vadnici boste izvedeli, kako in zakaj bi morali uporabljati Express v svojih projektih.

Namestitev Expressa v vaš projekt

Preden lahko uporabite okvir Express, ga boste morali namestiti v imenik projekta. To je preprost postopek, ki zahteva NodeJS in npm.

Prva stvar, ki jo boste morali narediti, je ustvariti a package.json datoteko (v imeniku/mapi vašega projekta) z naslednjim ukazom:

npm init

Izvedba zgornjega ukaza bo sprožila postopek, ki vas bo pozval za naslednje vnose:

• Ime paketa
• Različica
• Opis
• Vstopna točka
• Preizkusni ukaz
• ključne besede
• Avtor
• Licenca

Ime paketa, različica, vstopna točka in licencna polja imajo privzete vrednosti, ki jih lahko preprosto preglasite tako, da podate svoje vrednosti. Če pa želite obdržati privzete vrednosti, lahko namesto tega preprosto uporabite naslednji ukaz:

npm init -y

Izvajanje zgornjega ukaza bo ustvarilo naslednje package.json datoteko v imeniku vašega projekta:

{
"name": "myapp",
"različica": "1.0.0",
"opis": "",
"main": "index.js",
"skripti": {
"test": "echo \"Napaka: test ni določen\" && izhod 1"
},
"ključne besede": [],
"avtor": "",
"licenca": "ISC",
}

Zdaj lahko namestite Express z naslednjim ukazom:

npm install express --save

Namestitev Express bo ustvarila a package-lock.json datoteko kot tudi a node_modules mapo.

Razumevanje datoteke package.json

Razlog, zakaj morate ustvariti a package.json pred namestitvijo Expressa je ta package.json deluje kot skladišče in shranjuje pomembne metapodatke o vašem Projekti NodeJS.Odvisnosti je ime enega od teh metapodatkovnih polj, Express pa je a odvisnost.

Namestitev Expressa v imenik projekta bo samodejno posodobila vaš package.json mapa.

Posodobljena datoteka package.json

{
"name": "myapp",
"različica": "1.0.0",
"opis": "",
"main": "index.js",
"skripti": {
"test": "echo \"Napaka: test ni določen\" && izhod 1"
},
"ključne besede": [],
"avtor": "",
"licenca": "ISC",
"odvisnosti": {
"express": "^4.17.1"
}
}

Zdaj imate polje »odvisnosti«, ki ima eno odvisnost – Express. In odvisnosti objekt shranjuje programsko opremo, od katere je odvisen vaš projekt za pravilno delovanje, kar je v tem primeru okvir Express.

Ustvarjanje strežnika z Express

Imeti API, ki upravlja shranjevanje in premikanje podatkov, je pogoj za vsako aplikacijo s polnim skladom, Express pa omogoča hiter in enostaven postopek ustvarjanja strežnika.

Poglej nazaj na package.json datoteko zgoraj in videli boste »glavno« polje. To polje shrani vstopno točko v vašo aplikacijo, ki je v zgornjem primeru “index.js”. Ko želite izvesti svojo aplikacijo (ali v tem primeru strežnik, ki ga nameravate zgraditi), boste morali izvesti index.js datoteko z naslednjim ukazom:

vozlišče index.js

Vendar, preden pridete do faze izvedbe, boste morali ustvariti index.js (ali strežniške aplikacije) v imeniku vašega projekta.

Ustvarjanje datoteke index.js

const express = zahteva ('express');
const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.send('Vaš strežnik deluje')
})
app.listen (pristanišče, () => {
console.log(`Strežnik teče na: http://localhost:${port}`);
})

Zgornja datoteka uvozi Express in jo nato uporabi za ustvarjanje Express aplikacije. Aplikacija Express nato omogoči dostop do dobiti in poslušaj metode, ki so del modula Express. The app.listen() metoda je prva, ki jo morate nastaviti. Njegov namen je prikazati seznam povezav na določenih vratih gostiteljskega računalnika, ki je vrata 5000 v zgornjem primeru.

Namen oz app.get() Metoda je pridobivanje podatkov iz določenega vira. Ta metoda ima dva argumenta: pot in funkcijo povratnega klica. Argument poti v zgornjem primeru ima poševnico naprej, ki predstavlja korenski položaj. Zato se pomaknite do http://localhost: 5000 URL (ki je koren vaše aplikacije), medtem ko se vaša zgornja aplikacija index.js izvaja, bo v vašem brskalniku ustvaril naslednji izhod:

The app.get() funkcija povratnega klica metode ustvari zgornji izhod. Ta funkcija povratnega klica ima dva argumenta – zahtevo in odgovor. Odgovor (ki je res v zgornjem primeru) je predmet HTTP, ki ga aplikacija Express pošlje po zahtevi HTTP (kar naredite tako, da v brskalnik vnesete zgornji URL).

Oskrba statičnega spletnega mesta s strežnikom Express

Strežniki imajo pomembno vlogo pri razvoju API-jev, ki pomagajo pri shranjevanju in prenosu dinamičnih podatkov, in tam boste najverjetneje uporabljali strežnik Express v svojih projektih.

Vendar pa lahko strežnik Express služi tudi statičnim datotekam. Na primer, če želite ustvariti statično spletno mesto (na primer za osebnega trenerja, življenjskega trenerja ali stilista), lahko za gostovanje spletnega mesta uporabite svoj strežnik Express.

Primer spletnega mesta statičnega HTML

 doma 







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!

Oglejte si storitve

Zgornja koda HTML ustvari prijetno statično domačo stran spletnega mesta osebnega stilista s povezavo do naslednje datoteke style.css:

*{
marža: 0;
oblazinjenje: 0;
velikost škatle: obrobna škatla;
}
telo {
družina pisav: 'Lato', sans-serif;
višina vrstice: 1,5;
}
a {
barva: #333;
besedilna dekoracija: brez;
}
ul {
slog seznama: brez;
}
p {
marža: .5rem 0;
}
h1{
rob-levo: 2rem;
}
/* Pripomoček */
.container {
največja širina: 1100px;
marža: samodejno;
oblazinjenje: 0 2rem;
prelivanje: skrito;
}
.btn {
zaslon: inline-block;
obroba: brez;
ozadje: #910505;
barva: #fff;
oblazinjenje: 0,5rem 1rem;
obrobni polmer: 0,5 rem;
}
.btn: lebdi {
motnost: 0,9;
}
/* Navbar */
#navbar {
ozadje: #fff;
položaj: lepljiv;
vrh: 0;
z-indeks: 2;
}
#navbar .container {
zaslon: mreža;
grid-template-columns: 6fr 3fr 2fr;
oblazinjenje: 1 rem;
align-items: center;
}
#navbar h1 {
barva: #b30707;
}
#navbar ul {
opravičiti se: konec;
zaslon: flex;
rob-desno: 3,5 rem;
}
#navbar ul li a {
oblazinjenje: 0,5 rem;
teža pisave: krepko;
}
#navbar ul li a.current {
ozadje: #b30707;
barva: #fff;
}
#navbar ul li a: lebdi {
ozadje: #f3f3f3;
barva: #333;
}
#navbar .social {
opraviči se: središče;
}
#navbar .social i {
barva: #777;
rob-desno: .5rem;
}
/* domov */
#dom {
barva: #fff;
ozadje: #333;
oblazinjenje: 2 rem;
položaj: relativni;
}
#doma: pred {
vsebina: '';
ozadje: url ( https://source.unsplash.com/random) središče/pokrov brez ponovitve;
položaj: absolutni;
vrh: 0;
levo: 0;
širina: 100 %;
višina: 100 %;
motnost: 0,4;
}
#home .showcase-container {
zaslon: mreža;
grid-template-columns: ponovite (2, 1fr);
justify-content: center;
align-items: center;
višina: 100vh;
}
#home .showcase-content {
z-indeks: 1;
}
#home .showcase-content p {
rob-dno: 1rem;
}

Servisiranje spletne strani s strežnikom Express

const express = zahteva ('express');
const app = express();
const port = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (pristanišče, () => {
console.log(`Strežnik teče na: http://localhost:${port}`);
})

Zgornji datoteki HTML in CSS sta v javni mapi v glavnem imeniku projekta. Lokacija datoteke HTML omogoča dostop do strežnika Express in njegovih funkcij.

Ena od novih funkcij v zgornjem strežniku Express je app.use() metoda. Montira express.static() vmesna programska oprema, ki služi statičnim datotekam. To omogoča uporabo res.sendFile() funkcija služi statiki index.html datoteko zgoraj.

Navigacija do http://localhost: 5000 lokacija v vašem brskalniku bo prikazala nekaj podobnega naslednjemu izhodu:

Raziščite razvoj zaledja

Ogrodje Express vam omogoča izdelavo posebnih zahtev HTTP in prejemanje ustreznih odgovorov z uporabo nabora vnaprej določenih metod. Je tudi eden najbolj priljubljenih zalednih ogrodij danes.

Učenje uporabe ogrodja Express je odlična poteza. Če pa resnično želite postati profesionalni razvijalec zaledja, se morate naučiti še veliko več.

Naučite se, kako postati razvijalec zaledja v letu 2021

Če ste se odločili za kariero v IT, lahko naredite še slabše, kot da se naučite veščin, ki jih potrebujete, da postanete backend razvijalec.

Preberite Naprej

O avtorju