Kas yra Express.js ir kodėl turėtumėte jį naudoti?

Express.js (arba „Express“) yra „NodeJS“ žiniatinklio sistema, naudojama svetainių ir žiniatinklio programų fone (arba serverio pusėje). „Express“ yra lankstus ir minimalistinis, o tai reiškia, kad joje nėra daugybės nereikalingų bibliotekų ir paketų, taip pat nenurodyta, kaip kurti programą.

„Express“ sistema kuria API, kurios palengvina ryšį per HTTP užklausas ir atsakymus. Vienas iš nuostabių „Express“ dalykų yra tai, kad jis suteikia kūrėjams visišką užklausų ir atsakymų, susijusių su kiekvienu programos metodu, kontrolę.

Šiame vadove sužinosite, kaip ir kodėl turėtumėte naudoti „Express“ savo projektuose.

„Express“ diegimas jūsų projekte

Kad galėtumėte naudoti „Express“ sistemą, turėsite ją įdiegti savo projekto kataloge. Tai paprastas procesas, kuris reikia NodeJS ir npm.

Pirmas dalykas, kurį turėsite padaryti, tai sukurti a package.json failą (projekto kataloge / aplanke) naudodami šią komandą:

npm init

Vykdydami aukščiau pateiktą komandą, bus pradėtas procesas, kuris paragins įvesti šiuos duomenis:

• Paketo pavadinimas
• Versija
• apibūdinimas
• Įejimas
• Bandymo komanda
• Raktažodžiai
• Autorius
• Licencija

Paketo pavadinimo, versijos, įėjimo taško ir licencijos laukuose yra numatytosios reikšmės, kurias galite lengvai nepaisyti pateikdami savo reikšmes. Tačiau, jei norite išlaikyti numatytąsias reikšmes, galite tiesiog naudoti šią komandą:

npm init -y

Vykdydami aukščiau pateiktą komandą, bus sugeneruota ši komanda package.json failą savo projekto kataloge:

{
"name": "myapp",
"versija": "1.0.0",
"apibūdinimas": "",
"main": "index.js",
"skriptai": {
"testas": "echo \"Klaida: nenurodytas testas\" && išeiti 1"
},
"raktiniai žodžiai": [],
"autorius": "",
"licencija": "ISC",
}

Dabar galite įdiegti „Express“ naudodami šią komandą:

npm install express --save

Įdiegę „Express“ sukurs a package-lock.json failą, taip pat a mazgų_moduliai aplanką.

Pack.json failo supratimas

Priežastis, kodėl reikia sukurti a package.json failas prieš diegiant Express yra tas package.json failas veikia kaip saugykla, kurioje saugomi svarbūs jūsų metaduomenys NodeJS projektai.Priklausomybės yra vieno iš šių metaduomenų laukų pavadinimas, o Express yra a priklausomybė.

Įdiegę „Express“ savo projektų kataloge, automatiškai atnaujinsite savo package.json failą.

Atnaujintas paketas.json failas

{
"name": "myapp",
"versija": "1.0.0",
"apibūdinimas": "",
"main": "index.js",
"skriptai": {
"testas": "echo \"Klaida: nenurodytas testas\" && išeiti 1"
},
"raktiniai žodžiai": [],
"autorius": "",
"licencija": "ISC",
"priklausomybės": {
"Express": "^4.17.1"
}
}

Dabar turite lauką „priklausomybės“, kuriame yra viena priklausomybė – „Express“. Ir priklausomybės Objektas saugo programinę įrangą, nuo kurios priklauso, kad jūsų projektas tinkamai veiktų, o tai šiuo atveju yra „Express“ sistema.

Serverio su „Express“ kūrimas

API, kuri tvarko duomenų saugojimą ir judėjimą, yra būtina bet kuriai pilno krūvos programai, o „Express“ leidžia greitai ir lengvai sukurti serverio procesą.

Atsigręžk į package.json failą aukščiau ir pamatysite lauką „pagrindinis“. Šiame lauke saugomas įvesties į jūsų programą taškas, kuris aukščiau pateiktame pavyzdyje yra „index.js“. Kai norite paleisti programą (arba šiuo atveju serverį, kurį ruošiatės sukurti), turėsite vykdyti index.js failą naudodami šią komandą:

mazgo indeksas.js

Tačiau prieš pereidami prie vykdymo etapo, turėsite sukurti index.js (arba serverio programos) failą savo projekto kataloge.

Kuriamas failas index.js

const express = reikalauti('išreikšti');
const programa = express ();
const port = 5000;
app.get('/', (req, res) => {
res.send('Jūsų serveris veikia')
})
app.listen (port, () => {
console.log(`Serveris veikia adresu: http://localhost:${port}`);
})

Aukščiau pateiktas failas importuoja Express, tada naudoja jį Express programai sukurti. Tada programa „Express“ suteikia prieigą prie gauti ir klausyk metodus, kurie yra „Express“ modulio dalis. The app.listen() metodas yra pirmasis, kurį turite nustatyti. Jo tikslas yra nurodyti jungtis konkrečiame pagrindinio kompiuterio prievade, kuris yra 5000 prievadas aukščiau pateiktame pavyzdyje.

Tikslas app.get() metodas yra gauti duomenis iš konkretaus šaltinio. Šis metodas turi du argumentus: kelią ir atgalinio iškvietimo funkciją. Aukščiau pateiktame pavyzdyje kelio argumentas turi pasvirąjį brūkšnį, nurodantį šaknies padėtį. Todėl naršydami į http://localhost: 5000 URL (kuris yra jūsų programos šaknis), kol veikia aukščiau nurodyta programa index.js, jūsų naršyklėje bus pateikta tokia išvestis:

The app.get() metodo atgalinio skambinimo funkcija generuoja aukščiau pateiktą išvestį. Ši atgalinio skambinimo funkcija turi du argumentus – užklausą ir atsakymą. Atsakymas (tai yra res aukščiau pateiktame pavyzdyje) yra HTTP objektas, kurį „Express“ programa siunčia po HTTP užklausos (tai darote įvesdami anksčiau pateiktą URL naršyklėje).

Statinės svetainės aptarnavimas naudojant greitąjį serverį

Serveriai vaidina svarbų vaidmenį kuriant API, kurios padeda saugoti ir perduoti dinaminius duomenis, todėl greičiausiai čia savo projektuose naudosite Express serverį.

Tačiau „Express“ serveris taip pat gali aptarnauti statinius failus. Pavyzdžiui, jei norite sukurti statinę svetainę (pvz., asmeniniam treneriui, gyvenimo treneriui ar stilistui), galite naudoti savo Express serverį svetainei priglobti.

Statinės HTML svetainės pavyzdys

 namai 







Sveiki

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

Peržiūrėti paslaugas

Aukščiau pateiktas HTML kodas sukuria malonų statinį asmeninio stilisto svetainės pagrindinį puslapį, susiejant su šiuo style.css failu:

*{
paraštė: 0;
paminkštinimas: 0;
dėžutės dydis: bortelis-dėžė;
}
kūnas {
šriftų šeima: 'Lato', sans-serif;
linijos aukštis: 1,5;
}
a {
spalva: #333;
tekstas-dekoravimas: nėra;
}
ul {
sąrašo stilius: nėra;
}
p {
paraštė: .5rem 0;
}
h1{
paraštė-kairė: 2rem;
}
/* Naudingumas */
.container {
maksimalus plotis: 1100 pikselių;
paraštė: auto;
paminkštinimas: 0 2rem;
perteklius paslėptas;
}
.btn {
ekranas: eilutinis blokas;
kraštinė: nėra;
fonas: #910505;
spalva: #fff;
paminkštinimas: 0,5rem 1rem;
kraštinės spindulys: 0,5rem;
}
.btn: užveskite pelės žymeklį {
neskaidrumas: 0,9;
}
/* Naršymo juosta */
#navbar {
fonas: #fff;
padėtis: lipni;
viršuje: 0;
z indeksas: 2;
}
#navbar .container {
ekranas: tinklelis;
tinklelis-šablonas-stulpeliai: 6fr 3fr 2fr;
paminkštinimas: 1 rem;
sulyginti elementus: centre;
}
#navbar h1 {
spalva: #b30707;
}
#navbar ul {
pateisinti save: pabaiga;
ekranas: lankstus;
paraštė-dešinė: 3,5rem;
}
#navbar ul li a {
paminkštinimas: 0,5rem;
šrifto svoris: paryškintas;
}
#navbar ul li a.current {
fonas: #b30707;
spalva: #fff;
}
#navbar ul li a: užveskite pelės žymeklį {
fonas: #f3f3f3;
spalva: #333;
}
#navbar .social {
pateisinti save: centras;
}
#navbar .social i {
spalva: #777;
paraštė-dešinė: .5rem;
}
/* namai */
#namai {
spalva: #fff;
fonas: #333;
paminkštinimas: 2rem;
padėtis: santykinė;
}
#home: prieš {
turinys: '';
fonas: url ( https://source.unsplash.com/random) nesikartojantis centras / dangtelis;
padėtis: absoliuti;
viršuje: 0;
kairėje: 0;
plotis: 100%;
aukštis: 100%;
neskaidrumas: 0,4;
}
#home .showcase-container {
ekranas: tinklelis;
tinklelis-šablonas-stulpeliai: pakartokite (2, 1fr);
pateisinti-turinys: centras;
sulyginti elementus: centre;
aukštis: 100vh;
}
#home .showcase-content {
z indeksas: 1;
}
#home .showcase-content p {
paraštė-apačia: 1rem;
}

Svetainės aptarnavimas naudojant Express serverį

const express = reikalauti('išreikšti');
const programa = express ();
const port = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Serveris veikia adresu: http://localhost:${port}`);
})

Aukščiau pateikti HTML ir CSS failai yra viešajame aplanke pagrindiniame projekto kataloge. HTML failo vieta leidžia jį pasiekti Express serveriui ir jo funkcijoms.

Viena iš naujų aukščiau esančio Express serverio funkcijų yra app.use() metodas. Jis tvirtinamas express.static() tarpinė programinė įranga, kuri aptarnauja statinius failus. Tai leidžia naudoti res.sendFile() funkcija aptarnauti statinį index.html failą aukščiau.

Naršymas į http://localhost: 5000 Vieta jūsų naršyklėje parodys kažką panašaus į šią išvestį:

Naršykite Backend kūrimą

„Express“ sistema leidžia pateikti konkrečias HTTP užklausas ir gauti atitinkamus atsakymus naudojant iš anksto nustatytų metodų rinkinį. Tai taip pat viena iš populiariausių užpakalinių sistemų šiandien.

Išmokti naudotis „Express“ sistema yra puikus žingsnis. Bet jei tikrai norite tapti profesionaliu užpakalinės programos kūrėju, turite išmokti daug daugiau.

Sužinokite, kaip tapti „backend“ kūrėju 2021 m

Jei esate nusiteikę siekti karjeros IT srityje, galite padaryti blogiau nei išmokti įgūdžių, kurių reikia norint būti užpakalinės programos kūrėju.

Skaitykite toliau

Apie autorių