Mi az Express.js, és miért érdemes használni?

Az Express.js (vagy "Express") egy NodeJS webes keretrendszer, amelyet a webhelyek és webalkalmazások hátterében (vagy szerveroldalán) használnak. Az Express rugalmas és minimalista, ami azt jelenti, hogy nem rendelkezik a szükségtelen könyvtárak és csomagok kiterjedt gyűjteményével, és azt sem határozza meg, hogyan kell felépíteni az alkalmazást.

Az Express keretrendszer olyan API-kat épít, amelyek megkönnyítik a HTTP-kéréseken és -válaszokon keresztüli kommunikációt. Az Express egyik figyelemreméltó tulajdonsága, hogy a fejlesztők számára teljes ellenőrzést biztosít az egyes alkalmazások módszereihez kapcsolódó kérések és válaszok felett.

Ebből az oktatóanyagból megtudhatja, hogyan és miért érdemes használnia az Expresst saját projektjeiben.

Express telepítése a projektben

Az Express keretrendszer használata előtt telepítenie kell azt a projektkönyvtárába. Ez egy egyszerű folyamat, amely NodeJS és npm szükséges.

Az első dolog, amit meg kell tennie, hogy létrehozza a package.json fájlt (a projekt könyvtárában/mappájában) a következő paranccsal:

npm init

A fenti parancs végrehajtása elindít egy folyamatot, amely a következő beviteleket kéri:

• Csomag név
• Változat
• Leírás
• Belépési pont
• Teszt parancs
• Kulcsszavak
• Szerző
• Engedély

A csomagnév, a verzió, a belépési pont és a licencmezők mindegyike rendelkezik alapértelmezett értékekkel, amelyeket az értékek megadásával egyszerűen felülbírálhat. Ha azonban meg szeretné tartani az alapértelmezett értékeket, egyszerűen használja a következő parancsot:

npm init -y

A fenti parancs végrehajtása a következőt generálja package.json fájl a projekt könyvtárában:

{
"name": "myapp",
"verzió": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"teszt": "echo \"Hiba: nincs megadva teszt\" && kilépés 1"
},
"kulcsszavak": [],
"szerző": "",
"licenc": "ISC",
}

Most már telepítheti az Express-t a következő paranccsal:

npm install express --save

Az Express telepítése a package-lock.json fájl, valamint a node_modules mappát.

A package.json fájl értelmezése

Az ok, amiért létre kell hoznia a package.json fájl az Express telepítése előtt, hogy a package.json fájl tárolóként működik, és fontos metaadatokat tárol az Önről NodeJS projektek.Függőségek az egyik ilyen metaadatmező neve, az Express pedig a függőség.

Az Express projektkönyvtárba történő telepítése automatikusan frissíti a package.json fájlt.

A frissített package.json fájl

{
"name": "myapp",
"verzió": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"teszt": "echo \"Hiba: nincs megadva teszt\" && kilépés 1"
},
"kulcsszavak": [],
"szerző": "",
"licenc": "ISC",
"függőségek": {
"expressz": "^4.17.1"
}
}

Most van egy „függőségek” mezője, amelynek egyetlen függősége van – az Expressz. És a függőségek Az objektum olyan szoftvereket tárol, amelyektől a projekt megfelelően működik, ami ebben az esetben az Express keretrendszer.

Szerver létrehozása Expresszel

Az adatok tárolását és mozgatását kezelő API szükséges minden full-stack alkalmazáshoz, az Express pedig gyors és egyszerűvé teszi a szerver létrehozásának folyamatát.

Nézz vissza a package.json fájlt fent, és látni fog egy „fő” mezőt. Ez a mező tárolja az alkalmazás belépési pontját, amely a fenti példában az „index.js”. Amikor futtatni szeretné az alkalmazást (vagy ebben az esetben a kiszolgálót, amelyet fel kell építeni), akkor végre kell hajtania a index.js fájl a következő paranccsal:

csomópont index.js

Mielőtt azonban a végrehajtási szakaszba lépne, létre kell hoznia a index.js (vagy szerveralkalmazás) fájlt a projektkönyvtárban.

Az index.js fájl létrehozása

const express = request('express');
const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.send('A szervere működik')
})
app.listen (port, () => {
console.log(`A szerver a következő helyen fut: http://localhost:${port}`);
})

A fenti fájl importálja az Express-t, majd egy Express-alkalmazás létrehozására használja. Az Express alkalmazás ezután hozzáférést biztosít a kap és hallgat módszerek, amelyek az Express modul részét képezik. A app.listen() módszer az első, amelyet be kell állítania. Célja, hogy listázza a kapcsolatokat a gazdaszámítógép egy adott portján, ami az 5000-es port a fenti példában.

A célja a app.get() módszer az adatok beszerzése egy adott erőforrásból. Ennek a metódusnak két argumentuma van: egy elérési út és egy visszahívási függvény. A fenti példában szereplő elérési út argumentum egy perjellel rendelkezik, amely a gyökér pozícióját jelöli. Ezért navigáljon a http://localhost: 5000 Az URL (amely az alkalmazás gyökere), miközben a fenti index.js alkalmazás fut, a következő kimenetet produkálja a böngészőben:

A app.get() metódus visszahívási függvénye generálja a fenti kimenetet. Ennek a visszahívási függvénynek két argumentuma van: kérés és válasz. A válasz (ami res a fenti példában) az a HTTP-objektum, amelyet egy Express-alkalmazás HTTP-kérés után küld (ezt a fenti URL-cím beírásával teheti meg a böngészőben).

Statikus webhely kiszolgálása Express szerverével

A kiszolgálók jelentős szerepet játszanak a dinamikus adatok tárolását és átvitelét segítő API-k fejlesztésében, és valószínűleg itt fog Express szervert használni saját projektjeihez.

Az Express szerver azonban statikus fájlokat is kiszolgálhat. Például, ha statikus webhelyet szeretne létrehozni (például egy személyi edző, egy életvezetési tanácsadó vagy egy stylist számára), akkor az Express szervert használhatja a webhely tárolására.

Példa statikus HTML webhelyre

 itthon 







Üdvözöljük

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!

Szolgáltatások megtekintése

A fenti HTML kód a következő style.css fájlra mutató hivatkozással egy kellemes statikus kezdőlapot hoz létre egy személyes stylist webhelyről:

*{
margó: 0;
párnázás: 0;
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
vonalmagasság: 1,5;
}
a {
szín: # 333;
szöveg-dekoráció: nincs;
}
ul {
lista-stílus: nincs;
}
p {
margó: .5rem 0;
}
h1{
margó-bal: 2rem;
}
/* Hasznosság */
.container {
maximális szélesség: 1100 képpont;
margó: auto;
párnázás: 0 2rem;
túlcsordulás: rejtett;
}
.btn {
kijelző: inline-block;
határ: nincs;
háttér: #910505;
szín: #fff;
párnázás: 0,5rem 1rem;
határsugár: 0,5 rem;
}
.btn: hover {
átlátszatlanság: 0,9;
}
/* Navbar */
#navbar {
háttér: #fff;
pozíció: ragadós;
felső: 0;
z-index: 2;
}
#navbar .container {
kijelző: rács;
rács-sablon-oszlopok: 6fr 3fr 2fr;
párnázás: 1 rem;
align-ites: center;
}
#navbar h1 {
szín: #b30707;
}
#navbar ul {
igazolni-önmagát: vége;
kijelző: flex;
margó-jobb: 3,5 rem;
}
#navbar ul li a {
párnázás: 0,5rem;
betűsúly: félkövér;
}
#navbar ul li a.current {
háttér: #b30707;
szín: #fff;
}
#navbar ul li a: hover {
háttér: #f3f3f3;
szín: # 333;
}
#navbar .social {
igazolja-önmagát: center;
}
#navbar .social i {
szín: # 777;
margó-jobb: .5rem;
}
/* itthon */
#itthon {
szín: #fff;
háttér: #333;
párnázás: 2rem;
pozíció: relatív;
}
#home: előtt {
tartalom: '';
háttér: url ( https://source.unsplash.com/random) ismétlés nélküli középső középpont/fedél;
pozíció: abszolút;
felső: 0;
balra: 0;
szélesség: 100%;
magasság: 100%;
átlátszatlanság: 0,4;
}
#home .showcase-container {
kijelző: rács;
grid-template-columns: ismétlés (2, 1fr);
indokol-tartalom: center;
align-ites: center;
magasság: 100vh;
}
#home .showcase-content {
z-index: 1;
}
#home .showcase-content p {
margó-alsó: 1rem;
}

A Webhely kiszolgálása Express szerverrel

const express = request('express');
const app = express();
const port = 5000;
app.use (express.static('public'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`A szerver a következő helyen fut: http://localhost:${port}`);
})

A fenti HTML- és CSS-fájlok a projekt főkönyvtárának nyilvános mappájában találhatók. A HTML fájl helye elérhetővé teszi az Express szerver és annak funkciói számára.

A fenti Express szerver egyik új funkciója a app.use() módszer. Felszereli a express.static() köztes szoftver, amely statikus fájlokat szolgál ki. Ez lehetővé teszi a res.sendFile() funkció szolgálja a statikus index.html fenti fájl.

Navigálás a http://localhost: 5000 hely a böngészőben a következő kimenethez hasonlót jelenít meg:

Fedezze fel a háttérfejlesztést

Az Express keretrendszer lehetővé teszi, hogy meghatározott HTTP kéréseket küldjön, és megfelelő válaszokat kapjon előre meghatározott metódusok segítségével. Napjaink egyik legnépszerűbb háttér-keretrendszere is.

Az Express keretrendszer használatának megtanulása nagyszerű lépés. De ha valóban professzionális háttérfejlesztő szeretne lenni, akkor még sok mindent meg kell tanulnia.

Ismerje meg, hogyan válhat háttérfejlesztővé 2021-ben

Ha a szíved az informatikai karrier mellett döntött, akkor rosszabbul járhatsz, mint megtanulni azokat a készségeket, amelyekre háttérfejlesztőként szükséged lesz.

Olvassa el a következőt

A szerzőről