Express.js Nedir ve Neden Kullanmalısınız?

Express.js (veya "Express"), web sitelerinin ve web uygulamalarının arka ucunda (veya sunucu tarafında) kullanılan bir NodeJS web çerçevesidir. Express esnek ve minimalisttir, yani kapsamlı bir gereksiz kitaplık ve paket koleksiyonuna sahip değildir ve uygulamanızı nasıl oluşturmanız gerektiğini dikte etmez.

Express çerçevesi, HTTP istekleri ve yanıtları aracılığıyla iletişimi kolaylaştıran API'ler oluşturur. Express ile ilgili dikkat çekici şeylerden biri, geliştiricilere, uygulamasının her bir yöntemiyle ilişkili istekler ve yanıtlar üzerinde tam kontrol sağlamasıdır.

Bu eğitimde, kendi projelerinizde Express'i nasıl ve neden kullanmanız gerektiğini öğreneceksiniz.

Projenize Express Kurmak

Express çerçevesini kullanmadan önce proje dizininize yüklemeniz gerekir. Bu basit bir süreç ki NodeJS ve npm gerektirir.

Yapmanız gereken ilk şey, bir paket.json dosyanızı (proje dizininizde/klasörünüzde) aşağıdaki komutu kullanarak yapın:

npm başlangıç

Yukarıdaki komutu yürütmek, sizden aşağıdaki girdileri isteyecek bir işlemi başlatacaktır:

• Paket ismi
• sürüm
• Açıklama
• Giriş noktası
• Test komutu
• anahtar kelimeler
• Yazar
• Lisans

Paket adı, sürüm, giriş noktası ve lisans alanlarının tümü, değerlerinizi sağlayarak kolayca geçersiz kılabileceğiniz varsayılan değerlere sahiptir. Ancak, varsayılan değerleri korumak istiyorsanız, bunun yerine aşağıdaki komutu kullanabilirsiniz:

npm başlangıç ​​-y

Yukarıdaki komutu yürütmek aşağıdakileri üretecektir paket.json proje dizininizdeki dosya:

{
"ad": "uygulamam",
"sürüm": "1.0.0",
"tanım": "",
"ana": "index.js",
"Kodlar": {
"test": "echo \"Hata: test belirtilmedi\" && çıkış 1"
},
"anahtar kelimeler": [],
"yazar": "",
"lisans": "ISC",
}

Şimdi aşağıdaki komutu kullanarak Express'i yükleyebilirsiniz:

npm ekspres kurun --save

Express'i yüklemek, bir paket kilidi.json dosya hem de bir node_modules Klasör.

package.json Dosyasını anlama

oluşturmanız gereken neden paket.json Express'i yüklemeden önce dosya, paket.json dosyanız hakkında önemli meta verileri depolayan bir depo görevi görür. NodeJS projeleri.bağımlılıklar bu meta veri alanlarından birinin adıdır ve Express bir bağımlılık.

Express'i proje dizininize kurmak, dosyanızı otomatik olarak güncelleyecektir. paket.json dosya.

Güncellenmiş package.json Dosyası

{
"ad": "uygulamam",
"sürüm": "1.0.0",
"tanım": "",
"ana": "index.js",
"Kodlar": {
"test": "echo \"Hata: test belirtilmedi\" && çıkış 1"
},
"anahtar kelimeler": [],
"yazar": "",
"lisans": "ISC",
"bağımlılıklar": {
"ekspres": "^4.17.1"
}
}

Artık tek bağımlılığı olan bir "bağımlılıklar" alanınız var: Ekspres. Ve bağımlılıklar nesne, projenizin doğru çalışması için bağlı olduğu yazılımı depolar, bu durumda Express çerçevesidir.

Express ile Sunucu Oluşturma

Verilerin depolanmasını ve taşınmasını yöneten bir API'ye sahip olmak, herhangi bir tam yığın uygulama için bir gerekliliktir ve Express, sunucu oluşturma sürecini hızlı ve kolay hale getirir.

şuna bak paket.json yukarıdaki dosya ve bir "ana" alan göreceksiniz. Bu alan, yukarıdaki örnekte "index.js" olan uygulamanızın giriş noktasını saklar. Uygulamanızı (veya bu durumda, oluşturmak üzere olduğunuz sunucuyu) yürütmek istediğinizde, aşağıdakileri yürütmeniz gerekir: index.js Aşağıdaki komutu kullanarak dosya:

düğüm indeksi.js

Ancak, yürütme aşamasına geçmeden önce, index.js (veya sunucu uygulaması) dosyası proje dizininizde.

index.js Dosyasını Oluşturma

const ifade = zorunlu('ifade');
const uygulama = ekspres();
sabit bağlantı noktası = 5000;
app.get('/', (gerekli, res) => {
res.send('Sunucunuz çalışıyor')
})
app.listen (bağlantı noktası, () => {
konsol.log(`Sunucu şurada çalışıyor: http://localhost:${port}`);
})

Yukarıdaki dosya Express'i içe aktarır ve ardından bunu bir Express uygulaması oluşturmak için kullanır. Ekspres uygulaması daha sonra erişim sağlar almak ve dinlemek Express modülünün bir parçası olan yöntemler. bu uygulama.dinle() Yöntem, ayarlamanız gereken ilk yöntemdir. Amacı, ana bilgisayarın belirli bir bağlantı noktasındaki bağlantıları listelemektir. bağlantı noktası 5000 yukarıdaki örnekte.

Amacının uygulama.get() yöntem, belirli bir kaynaktan veri almaktır. Bu yöntemin iki argümanı vardır: bir yol ve bir geri arama işlevi. Yukarıdaki örnekteki yol bağımsız değişkeni, kök konumunu temsil eden bir eğik çizgiye sahiptir. Bu nedenle, navigasyona http://localhost: 5000 URL (uygulamanızın köküdür), yukarıdaki index.js uygulamanız çalışırken tarayıcınızda aşağıdaki çıktıyı üretecektir:

bu uygulama.get() yöntem geri çağırma işlevi yukarıdaki çıktıyı üretir. Bu geri arama işlevinin iki argümanı vardır: istek ve yanıt. Yanıt (ki res yukarıdaki örnekte), bir Express uygulamasının bir HTTP isteğinden sonra gönderdiği HTTP nesnesidir (bu, yukarıdaki URL'yi tarayıcınıza yazarak yaptığınız şeydir).

Express Sunucunuzla Statik Bir Web Sitesine Hizmet Verme

Sunucular, dinamik verilerin depolanmasına ve aktarılmasına yardımcı olan API'lerin geliştirilmesinde önemli bir rol oynar ve bu, kendi projelerinizde büyük olasılıkla bir Express sunucusunu kullanacağınız yerdir.

Ancak, bir Express sunucusu statik dosyalar da sunabilir. Örneğin, statik bir web sitesi (kişisel antrenör, yaşam koçu veya stilist için bir web sitesi gibi) oluşturmak istiyorsanız, web sitesini barındırmak için Express sunucunuzu kullanabilirsiniz.

Statik HTML Web Sitesi Örneği

 ev 







Hoş geldin

Lorem ipsum dolor sit amet, conectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Dolor, sıra dışı!

Hizmetleri Görüntüle

Yukarıdaki HTML kodu, aşağıdaki style.css dosyasına bağlantı vererek kişisel stilist web sitesinin hoş bir statik ana sayfasını oluşturur:

*{
kenar boşluğu: 0;
dolgu: 0;
kutu boyutlandırma: kenarlık kutusu;
}
gövde {
yazı tipi ailesi: 'Lato', sans-serif;
satır yüksekliği: 1.5;
}
a {
renk: #333;
metin-dekorasyon: yok;
}
ul {
liste stili: yok;
}
P {
marj: .5rem 0;
}
h1{
sol kenar boşluğu: 2rem;
}
/* Yarar */
.konteyner {
maksimum genişlik: 1100 piksel;
kenar boşluğu: otomatik;
dolgu: 0 2rem;
taşma: gizli;
}
.btn {
ekran: satır içi blok;
sınır: yok;
arka plan: #910505;
renk: #fff;
dolgu: 0,5 rem 1 rem;
sınır yarıçapı: 0.5rem;
}
.btn: üzerine gelin {
opaklık: 0.9;
}
/* Gezinme çubuğu */
#navbar {
arka plan: #fff;
pozisyon: yapışkan;
üst: 0;
z-endeksi: 2;
}
#navbar .container {
ekran: ızgara;
ızgara şablonu sütunları: 6fr 3fr 2fr;
dolgu: 1rem;
hizalama öğeleri: merkez;
}
#navbar h1 {
renk: #b30707;
}
#navbar ul {
kendini haklı çıkar: son;
ekran: esnek;
kenar-sağ: 3.5rem;
}
#navbar ul li bir {
dolgu: 0.5rem;
yazı tipi ağırlığı: kalın;
}
#navbar ul li a.current {
arka plan: #b30707;
renk: #fff;
}
#navbar ul li a: vurgulu {
arka plan: #f3f3f3;
renk: #333;
}
#navbar .sosyal {
kendini haklı çıkar: merkez;
}
#navbar .sosyal ben {
renk: #777;
kenar-sağ: .5rem;
}
/* ev */
#ev {
renk: #fff;
arka plan: #333;
dolgu: 2rem;
pozisyon: göreceli;
}
#ev: önce {
içerik: '';
arka plan: url ( https://source.unsplash.com/random) tekrarsız merkez merkez/kapak;
konum: mutlak;
üst: 0;
sol: 0;
genişlik: %100;
yükseklik: %100;
opaklık: 0.4;
}
#home .showcase-container {
ekran: ızgara;
grid-template-columns: tekrarlayın (2, 1fr);
haklı içerik: merkez;
hizalama öğeleri: merkez;
yükseklik: 100vh;
}
#home .showcase-content {
z-endeksi: 1;
}
#home .showcase-content p {
kenar-alt: 1rem;
}

Web Sitesine Ekspres Sunucuyla Hizmet Verme

const ifade = zorunlu('ifade');
const uygulama = ekspres();
sabit bağlantı noktası = 5000;
app.use (express.static('public'));
app.get('/', (gerekli, res) => {
res.sendFile('index.html')
})
app.listen (bağlantı noktası, () => {
konsol.log(`Sunucu şurada çalışıyor: http://localhost:${port}`);
})

Yukarıdaki HTML ve CSS dosyaları, ana proje dizininde bir ortak klasördedir. HTML dosyasının konumu, onu Express sunucusu ve işlevleri için erişilebilir kılar.

Yukarıdaki Express sunucusundaki yeni işlevlerden biri, uygulama.use() yöntem. monte eder ekspres.statik() statik dosyalara hizmet eden ara katman yazılımı. Bu, kullanımı mümkün kılar res.sendDosya() statik hizmet verme işlevi index.html yukarıdaki dosya.

için gezinme http://localhost: 5000 tarayıcınızdaki konum aşağıdaki çıktıya benzer bir şey görüntüler:

Arka Uç Geliştirmeyi Keşfedin

Express çerçevesi, önceden tanımlanmış bir dizi yöntem kullanarak belirli HTTP istekleri yapmanıza ve uygun yanıtlar almanıza olanak tanır. Aynı zamanda günümüzün en popüler arka uç çerçevelerinden biridir.

Express çerçevesinin nasıl kullanılacağını öğrenmek harika bir hamle. Ancak gerçekten profesyonel bir arka uç geliştirici olmak istiyorsanız, öğrenmeniz gereken daha çok şey var.

2021'de Nasıl Arka Uç Geliştirici Olacağınızı Öğrenin

Kalbinizi BT'de bir kariyere ayarladıysanız, arka uç geliştiricisi olmak için ihtiyaç duyduğunuz becerileri öğrenmekten daha kötüsünü yapabilirsiniz.

Sonrakini Oku

Yazar hakkında