Kas ir Express.js un kāpēc to vajadzētu izmantot?

Express.js (vai "Express") ir NodeJS tīmekļa ietvars, ko izmanto vietņu un tīmekļa lietojumprogrammu aizmugurē (vai servera pusē). Express ir elastīgs un minimālistisks, kas nozīmē, ka tajā nav plašas nevajadzīgu bibliotēku un pakotņu kolekcijas, kā arī tas nenosaka, kā jums vajadzētu izveidot lietojumprogrammu.

Express ietvars veido API, kas atvieglo saziņu, izmantojot HTTP pieprasījumus un atbildes. Viena no ievērojamajām lietām programmā Express ir tā, ka tas sniedz izstrādātājiem pilnīgu kontroli pār pieprasījumiem un atbildēm, kas ir saistītas ar katru tās lietotnes metodi.

Šajā apmācībā jūs uzzināsit, kā un kāpēc jums vajadzētu izmantot Express savos projektos.

Express instalēšana jūsu projektā

Lai varētu izmantot Express ietvaru, jums tas jāinstalē savā projekta direktorijā. Tas ir vienkāršs process, kas nepieciešams NodeJS un npm.

Pirmā lieta, kas jums jādara, ir izveidot a pack.json failu (projekta direktorijā/mapē), izmantojot šādu komandu:

npm init

Izpildot iepriekš minēto komandu, tiks uzsākts process, kas liks jums ievadīt šādas ievades:

• Pakas nosaukums
• Versija
• Apraksts
• Ieejas punkts
• Pārbaudes komanda
• Atslēgvārdi
• Autors
• Licence

Pakotnes nosaukumam, versijai, ievades punktam un licences laukiem ir noklusējuma vērtības, kuras varat viegli ignorēt, norādot savas vērtības. Tomēr, ja vēlaties saglabāt noklusējuma vērtības, tā vietā varat vienkārši izmantot šo komandu:

npm init -y

Izpildot iepriekš minēto komandu, tiks ģenerēts tālāk norādītais pack.json failu jūsu projekta direktorijā:

{
"name": "myapp",
"versija": "1.0.0",
"apraksts": "",
"galvenais": "index.js",
"skripti": {
"test": "echo \"Kļūda: nav norādīts tests\" && iziet 1"
},
"atslēgvārdi": [],
"autors": "",
"licence": "ISC",
}

Tagad jūs varat instalēt Express, izmantojot šādu komandu:

npm install express --save

Instalējot Express, tiks ģenerēts a pack-lock.json failu, kā arī a node_modules mapi.

Izpratne par failu package.json

Iemesls, kāpēc jums ir jāizveido a pack.json fails pirms Express instalēšanas ir tas pack.json fails darbojas kā repozitorijs, kurā tiek glabāti svarīgi metadati par jūsu NodeJS projekti.Atkarības ir viena no šiem metadatu laukiem nosaukums, un Express ir a atkarība.

Instalējot Express jūsu projektu direktorijā, jūsu programma tiks automātiski atjaunināta pack.json failu.

Atjauninātais fails package.json

{
"name": "myapp",
"versija": "1.0.0",
"apraksts": "",
"galvenais": "index.js",
"skripti": {
"test": "echo \"Kļūda: nav norādīts tests\" && iziet 1"
},
"atslēgvārdi": [],
"autors": "",
"licence": "ISC",
"atkarības": {
"express": "^4.17.1"
}
}

Tagad jums ir lauks “atkarības”, kuram ir viena atkarība — Express. Un atkarības objekts saglabā programmatūru, no kuras ir atkarīgs jūsu projekta pareiza darbība, kas šajā gadījumā ir Express ietvars.

Servera izveide ar Express

Jebkurai pilnai steka lietojumprogrammai ir jābūt API, kas apstrādā datu glabāšanu un pārvietošanu, un Express padara servera izveides procesu ātru un vienkāršu.

Atskatieties uz pack.json failu iepriekš, un jūs redzēsit lauku “galvenais”. Šajā laukā tiek saglabāts jūsu lietojumprogrammas ievades punkts, kas iepriekš minētajā piemērā ir “index.js”. Ja vēlaties izpildīt savu lietojumprogrammu (vai šajā gadījumā serveri, kuru gatavojaties izveidot), jums būs jāizpilda index.js failu, izmantojot šādu komandu:

mezgla indekss.js

Tomēr, pirms nokļūstat izpildes stadijā, jums būs jāizveido index.js (vai servera lietotnes) failu jūsu projekta direktorijā.

Faila index.js izveide

const express = prasīt('izteikt');
const app = express();
const ports = 5000;
app.get('/', (req, res) => {
res.send ('Jūsu serveris darbojas')
})
app.listen (port, () => {
console.log(`Serveris darbojas: http://localhost:${port}`);
})

Iepriekš minētais fails importē Express, pēc tam to izmanto, lai izveidotu Express lietojumprogrammu. Pēc tam lietojumprogramma Express nodrošina piekļuvi gūt un klausies metodes, kas ir daļa no Express moduļa. The app.listen() metode ir pirmā, kas jums jāiestata. Tās mērķis ir uzskaitīt savienojumus noteiktā resursdatora portā, kas ir ports 5000 iepriekš minētajā piemērā.

Mērķis app.get() metode ir iegūt datus no konkrēta resursa. Šai metodei ir divi argumenti: ceļš un atzvanīšanas funkcija. Iepriekšējā piemērā ceļa argumentam ir slīpsvītra, kas apzīmē saknes pozīciju. Tāpēc, pārejot uz http://localhost: 5000 URL (kas ir jūsu lietojumprogrammas sakne), kamēr darbojas iepriekš minētā lietotne index.js, jūsu pārlūkprogrammā tiks parādīta šāda izvade:

The app.get() metodes atzvanīšanas funkcija ģenerē iepriekš minēto izvadi. Šai atzvanīšanas funkcijai ir divi argumenti — pieprasījums un atbilde. Atbilde (kas ir res iepriekš minētajā piemērā) ir HTTP objekts, ko Express lietotne nosūta pēc HTTP pieprasījuma (tas ir tas, ko jūs darāt, pārlūkprogrammā ierakstot iepriekš minēto URL).

Statiskas vietnes apkalpošana, izmantojot jūsu Express serveri

Serveriem ir nozīmīga loma API izstrādē, kas palīdz uzglabāt un pārsūtīt dinamiskus datus, un tieši tur jūs, visticamāk, savos projektos izmantosit Express serveri.

Tomēr Express serveris var apkalpot arī statiskus failus. Piemēram, ja vēlaties izveidot statisku vietni (piemēram, personīgajam trenerim, dzīves trenerim vai stilistam), vietnes mitināšanai varat izmantot savu Express serveri.

Statiskas HTML vietnes piemērs

 mājas 







Laipni lūdzam

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!

Skatīt pakalpojumus

Iepriekš minētais HTML kods izveido patīkamu statisku personīgo stilistu vietnes sākumlapu, izveidojot saiti uz šo style.css failu:

*{
piemale: 0;
polsterējums: 0;
kastes izmēra noteikšana: apmale-box;
}
body {
fontu saime: 'Lato', sans-serif;
līnijas augstums: 1,5;
}
a {
krāsa: #333;
teksta noformējums: nav;
}
ul {
saraksta stils: nav;
}
p {
piemale: .5rem 0;
}
h1{
piemale-kreisais: 2rem;
}
/* Lietderība */
.container {
maksimālais platums: 1100 pikseļi;
piemale: auto;
polsterējums: 0 2rem;
pārplūde: slēpta;
}
.btn {
displejs: inline-block;
robeža: nav;
fons: #910505;
krāsa: #fff;
polsterējums: 0,5rem 1rem;
apmales rādiuss: 0,5rem;
}
.btn: virziet kursoru {
necaurredzamība: 0,9;
}
/* Navigbar */
#navbar {
fons: #fff;
pozīcija: lipīga;
augšā: 0;
z-indekss: 2;
}
#navbar .container {
displejs: režģis;
režģis-veidne-kolonnas: 6fr 3fr 2fr;
polsterējums: 1rem;
izlīdzināt vienumus: centrs;
}
#navbar h1 {
krāsa: #b30707;
}
#navbar ul {
attaisnot-self: end;
displejs: flex;
mala-labā: 3,5 rem;
}
#navbar ul li a {
polsterējums: 0,5rem;
fonta svars: treknrakstā;
}
#navbar ul li a.current {
fons: #b30707;
krāsa: #fff;
}
#navbar ul li a: virziet kursoru {
fons: #f3f3f3;
krāsa: #333;
}
#navbar .social {
attaisnot sevi: centrs;
}
#navbar .social i {
krāsa: #777;
mala-labā: .5rem;
}
/* mājas */
#mājas {
krāsa: #fff;
fons: #333;
polsterējums: 2rem;
pozīcija: relatīvs;
}
#home: pirms {
saturs: '';
fons: url ( https://source.unsplash.com/random) bez atkārtošanās centra centrs/pārsegs;
pozīcija: absolūta;
augšā: 0;
pa kreisi: 0;
platums: 100%;
augstums: 100%;
necaurredzamība: 0,4;
}
#home .showcase-container {
displejs: režģis;
režģis-veidne-kolonnas: atkārtojiet (2, 1fr);
attaisnot-saturs: centrs;
izlīdzināt vienumus: centrs;
augstums: 100vh;
}
#home .showcase-content {
z-indekss: 1;
}
#home .showcase-content p {
mala-apakšā: 1rem;
}

Vietnes apkalpošana, izmantojot Express serveri

const express = prasīt('izteikt');
const app = express();
const ports = 5000;
app.use (express.static('publisks'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Serveris darbojas: http://localhost:${port}`);
})

Iepriekš minētie HTML un CSS faili atrodas publiskā mapē galvenajā projekta direktorijā. HTML faila atrašanās vieta padara to pieejamu Express serverim un tā funkcijām.

Viena no jaunajām funkcijām iepriekš minētajā Express serverī ir app.use() metodi. Tas uzstāda express.static() starpprogrammatūra, kas apkalpo statiskus failus. Tas dod iespēju izmantot res.sendFile() funkcija kalpot statiskam index.html failu augstāk.

Navigācija uz http://localhost: 5000 atrašanās vieta jūsu pārlūkprogrammā parādīs kaut ko līdzīgu šādai izvadei:

Izpētiet aizmugursistēmas izstrādi

Express ietvars ļauj veikt konkrētus HTTP pieprasījumus un saņemt atbilstošas ​​atbildes, izmantojot iepriekš definētu metožu kopu. Tas ir arī viens no mūsdienās populārākajiem aizmugursistēmas ietvariem.

Mācīšanās izmantot Express sistēmu ir lielisks solis. Bet, ja patiešām vēlaties kļūt par profesionālu aizmugursistēmas izstrādātāju, jums ir jāapgūst vēl daudz kas cits.

Uzziniet, kā kļūt par aizmugursistēmas izstrādātāju 2021. gadā

Ja esat nolēmis karjeru IT jomā, varat darīt sliktāk, nekā apgūt prasmes, kas nepieciešamas, lai kļūtu par aizmugursistēmas izstrādātāju.

Lasiet Tālāk

Par autoru