Mikä on Express.js ja miksi sinun pitäisi käyttää sitä?

Express.js (tai "Express") on NodeJS-verkkokehys, jota käytetään verkkosivustojen ja verkkosovellusten taustalla (tai palvelinpuolella). Express on joustava ja minimalistinen, mikä tarkoittaa, että sillä ei ole laajaa kokoelmaa tarpeettomia kirjastoja ja paketteja, eikä se määrää, miten sovelluksesi tulisi rakentaa.

Express-kehys rakentaa API: ita, jotka helpottavat viestintää HTTP-pyyntöjen ja -vastausten kautta. Yksi Expressin merkittävistä asioista on, että se antaa kehittäjille täydellisen hallinnan pyyntöihin ja vastauksiin, jotka liittyvät kuhunkin sen sovelluksen menetelmiin.

Tässä opetusohjelmassa opit kuinka ja miksi sinun pitäisi käyttää Expressiä omissa projekteissasi.

Expressin asentaminen projektiisi

Ennen kuin voit käyttää Express-kehystä, sinun on asennettava se projektihakemistoosi. Tämä on suoraviivainen prosessi vaatii NodeJS: n ja npm: n.

Ensimmäinen asia, joka sinun on tehtävä, on luoda a package.json tiedosto (projektisi hakemistossa/kansiossa) seuraavalla komennolla:

npm init

Yllä olevan komennon suorittaminen käynnistää prosessin, joka pyytää sinua antamaan seuraavat syötteet:

• Paketin nimi
• Versio
• Kuvaus
• Sisääntulopiste
• Testaa komento
• Avainsanat
• Tekijä
• Lisenssi

Paketin nimi-, versio-, aloituspiste- ja lisenssikentillä on kaikilla oletusarvot, jotka voit helposti ohittaa antamalla arvosi. Jos kuitenkin haluat säilyttää oletusarvot, voit käyttää sen sijaan seuraavaa komentoa:

npm init -y

Yllä olevan komennon suorittaminen luo seuraavan package.json tiedosto projektihakemistossasi:

{
"name": "omasovellus",
"versio": "1.0.0",
"kuvaus": "",
"main": "index.js",
"skriptit": {
"test": "echo \"Virhe: testiä ei määritetty\" && poistu 1"
},
"avainsanat": [],
"tekijä": "",
"lisenssi": "ISC",
}

Nyt voit asentaa Expressin seuraavalla komennolla:

npm install express --save

Expressin asentaminen luo a package-lock.json tiedosto sekä a solmu_moduulit kansio.

Package.json-tiedoston ymmärtäminen

Syy, miksi sinun on luotava a package.json tiedosto ennen Expressin asentamista on se package.json tiedosto toimii arkistona, joka tallentaa tärkeitä metatietojasi NodeJS-projektit.Riippuvuudet on yhden näistä metatietokentistä nimi, ja Express on a riippuvuus.

Expressin asentaminen projektihakemistoosi päivittää sen automaattisesti package.json tiedosto.

Päivitetty package.json-tiedosto

{
"name": "omasovellus",
"versio": "1.0.0",
"kuvaus": "",
"main": "index.js",
"skriptit": {
"test": "echo \"Virhe: testiä ei määritetty\" && poistu 1"
},
"avainsanat": [],
"tekijä": "",
"lisenssi": "ISC",
"riippuvuudet": {
"express": "^4.17.1"
}
}

Nyt sinulla on "riippuvuudet"-kenttä, jossa on yksi riippuvuus - Express. Ja riippuvuuksia Objekti tallentaa ohjelmistot, joista projektisi toimii oikein, mikä tässä tapauksessa on Express-kehys.

Palvelimen luominen Expressillä

Tietojen tallennusta ja siirtämistä käsittelevä API on edellytys kaikille täyden pinon sovelluksille, ja Express tekee palvelimen luomisesta nopeaa ja helppoa.

Katso taaksepäin package.json tiedosto yllä ja näet "pää"-kentän. Tämä kenttä tallentaa sovelluksesi aloituskohdan, joka on "index.js" yllä olevassa esimerkissä. Kun haluat suorittaa sovelluksesi (tai tässä tapauksessa palvelimen, jota olet rakentamassa), sinun on suoritettava index.js tiedosto seuraavalla komennolla:

solmu index.js

Ennen kuin pääset toteutusvaiheeseen, sinun on kuitenkin luotava index.js (tai palvelinsovellus) -tiedosto projektihakemistossasi.

Index.js-tiedoston luominen

const express = vaatia('express');
const app = express();
const portti = 5000;
app.get('/', (req, res) => {
res.send('Palvelimesi on toiminnassa')
})
app.listen (portti, () => {
console.log(`Palvelin toimii osoitteessa: http://localhost:${port}`);
})

Yllä oleva tiedosto tuo Expressin ja käyttää sitä Express-sovelluksen luomiseen. Express-sovellus tarjoaa sitten pääsyn saada ja kuunnella menetelmät, jotka ovat osa Express-moduulia. The app.listen() menetelmä on ensimmäinen, joka sinun on määritettävä. Sen tarkoitus on luetteloida yhteyksiä isäntätietokoneen tietyssä portissa, joka on portti 5000 yllä olevassa esimerkissä.

Tarkoitus app.get() menetelmä on saada tietoja tietystä resurssista. Tällä menetelmällä on kaksi argumenttia: polku ja takaisinsoittotoiminto. Yllä olevan esimerkin polkuargumentissa on vinoviiva, joka edustaa juurisijaintia. Siksi navigoimalla kohtaan http://localhost: 5000 URL-osoite (joka on sovelluksesi juuri) tuottaa seuraavan tulosteen selaimessasi, kun yllä oleva index.js-sovellus on käynnissä:

The app.get() menetelmän takaisinkutsutoiminto luo yllä olevan tulosteen. Tällä takaisinsoittotoiminnolla on kaksi argumenttia: pyyntö ja vastaus. Vastaus (joka on res yllä olevassa esimerkissä) on HTTP-objekti, jonka Express-sovellus lähettää HTTP-pyynnön jälkeen (mitä teet kirjoittamalla yllä olevan URL-osoitteen selaimeesi).

Staattisen verkkosivuston palveleminen Express-palvelimellasi

Palvelimilla on merkittävä rooli dynaamista dataa tallentavien ja siirtävien API-liittymien kehittämisessä, ja juuri siellä käytät todennäköisimmin Express-palvelinta omissa projekteissasi.

Express-palvelin voi kuitenkin palvella myös staattisia tiedostoja. Jos esimerkiksi haluat luoda staattisen verkkosivuston (kuten personal trainerille, life coachille tai stylistille), voit käyttää Express-palvelinta verkkosivuston isännöimiseen.

Esimerkki staattisesta HTML-verkkosivustosta

 Koti 







Tervetuloa

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!

Näytä palvelut

Yllä oleva HTML-koodi luo miellyttävän staattisen kotisivun henkilökohtaiselle stylistisivustolle linkittämällä seuraavaan style.css-tiedostoon:

*{
marginaali: 0;
pehmuste: 0;
laatikon koko: border-box;
}
body {
font-family: 'Lato', sans-serif;
linjan korkeus: 1,5;
}
a {
väri: #333;
teksti-koriste: ei mitään;
}
ul {
listatyyli: ei mitään;
}
p {
marginaali: .5rem 0;
}
h1{
marginaali vasen: 2rem;
}
/* Apuohjelma */
.container {
suurin leveys: 1100 pikseliä;
marginaali: auto;
pehmuste: 0 2rem;
ylivuoto piilotettu;
}
.btn {
näyttö: inline-block;
reuna: ei mitään;
tausta: #910505;
väri: #fff;
pehmuste: 0.5rem 1rem;
reunan säde: 0.5rem;
}
.btn: hover {
opasiteetti: 0,9;
}
/* Navbar */
#navbar {
tausta: #fff;
asento: tahmea;
alkuun: 0;
z-indeksi: 2;
}
#navbar .container {
näyttö: ruudukko;
ruudukko-malli-sarakkeet: 6fr 3fr 2fr;
pehmuste: 1 rem;
kohdista kohteet: keskellä;
}
#navbar h1 {
väri: #b30707;
}
#navbar ul {
perustella itseään: loppu;
näyttö: flex;
marginaali-oikea: 3,5rem;
}
#navbar ul li a {
pehmuste: 0,5 rem;
fontin paino: lihavoitu;
}
#navbar ul li a.current {
tausta: #b30707;
väri: #fff;
}
#navbar ul li a: hover {
tausta: #f3f3f3;
väri: #333;
}
#navbar .social {
perustella itseään: keskus;
}
#navbar .social i {
väri: #777;
marginaali-oikea: .5rem;
}
/* Koti */
#Koti {
väri: #fff;
tausta: #333;
pehmuste: 2rem;
asema: suhteellinen;
}
#home: ennen {
sisältö: '';
tausta: url ( https://source.unsplash.com/random) ei toistuvaa keskikeskusta/kansi;
sijainti: absoluuttinen;
alkuun: 0;
vasen: 0;
leveys: 100 %;
korkeus: 100%;
opasiteetti: 0,4;
}
#home .showcase-container {
näyttö: ruudukko;
grid-template-columns: toista (2, 1fr);
perustella-sisältö: keskus;
kohdista kohteet: keskellä;
korkeus: 100vh;
}
#home .showcase-content {
z-indeksi: 1;
}
#home .showcase-content p {
marginaali-ala: 1rem;
}

Verkkosivuston palveleminen Express-palvelimella

const express = vaatia('express');
const app = express();
const portti = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (portti, () => {
console.log(`Palvelin toimii osoitteessa: http://localhost:${port}`);
})

Yllä olevat HTML- ja CSS-tiedostot ovat julkisessa kansiossa projektin päähakemistossa. HTML-tiedoston sijainti mahdollistaa sen pääsyn Express-palvelimeen ja sen toimintoihin.

Yksi yllä olevan Express-palvelimen uusista toiminnoista on app.use() menetelmä. Se kiinnittää express.static() väliohjelmisto, joka palvelee staattisia tiedostoja. Tämä mahdollistaa sen käytön res.sendFile() toiminto palvella staattista index.html tiedosto yllä.

Navigoiminen kohteeseen http://localhost: 5000 sijainti selaimessasi näyttää jotain seuraavanlaisen kaltaista:

Tutustu taustaohjelmistokehitykseen

Express-kehyksen avulla voit tehdä tiettyjä HTTP-pyyntöjä ja vastaanottaa sopivia vastauksia käyttämällä ennalta määritettyjä menetelmiä. Se on myös yksi suosituimmista taustaympäristöistä nykyään.

Express-kehyksen käytön oppiminen on hieno askel. Mutta jos haluat todella tulla ammattimaiseksi taustakehittäjäksi, sinun on opittava paljon muuta.

Opi ryhtymään taustakehittäjäksi vuonna 2021

Jos olet keskittynyt IT-uraan, voit tehdä huonommin kuin oppia taustakehittäjäksi tarvitsemasi taidot.

Lue Seuraava

Kirjailijasta