Express.js Basitliği nedeniyle büyük popülerlik kazanmış bir Node.js web çerçevesidir. Kullanımı kolay yönlendirme ve görüntüleme motorları için basit desteğe sahip olup, temel Node HTTP sunucusunun çok ilerisindedir.

Ancak yeni bir Express uygulamasını başlatmak belirli miktarda ortak kod gerektirir: yeni bir sunucu örneğini başlatmak, bir görüntüleme motorunu yapılandırmak ve hata işlemeyi ayarlamak.

Çeşitli başlangıç ​​projeleri ve standart metinler mevcut olmasına rağmen, Express'in yeni uygulamaları başlatmayı kolaylaştıran kendi komut satırı aracı vardır. ekspres jeneratör.

Ekspres nedir?

Express'in yerleşik birçok özelliği vardır ve sorunsuz bir şekilde entegre olan diğer paketlerden alabileceğiniz çok daha fazla özellik vardır, ancak kutudan çıktığı anda sizin için yaptığı üç ana şey vardır:

1. Yönlendirme. Bu nasıl /home /blog ve /about hepsi size farklı sayfalar veriyor. Express, farklı dosyalara farklı rotalar koymanıza izin vererek bu kodu modülerleştirmenizi kolaylaştırır.
2. Middleware. Eğer bu terimde yeniyseniz, ara katman yazılımı temel olarak “yazılım yapıştırıcısıdır”. İsteklere rotalarınız onları almadan önce erişerek çerez ayrıştırma, dosya yükleme, hatalar ve daha fazlası gibi yapılması zor işleri halletmelerine olanak tanır.
3. Görünümler. Görünümler, HTML sayfalarının özel içerikle nasıl oluşturulduğudur. Oluşturulmasını istediğiniz verileri girersiniz ve Express, verdiğiniz görünüm motoruyla bunları oluşturur.

Başlamak

İhtiyacınız olan ilk şey, makinenize Node ve npm'nin kurulu olmasını sağlamaktır. Bunu yapmak için şuraya gidin: resmi Düğüm indirme sayfası ve sisteminiz için doğru ikili dosyaları alın veya nvm gibi bir sürüm yöneticisi kullanın. Kısa ipucumuzda Node'u sürüm yöneticisi kullanarak kurmayı ele alıyoruz, "Nvm Kullanarak Birden Çok Node.js Sürümünü Yükleme anlayışının sonucu olarak, buzdolabında iki üç günden fazla durmayan küçük şişeler elinizin altında bulunur.

Ekspres oluşturucuyla yeni bir projeye başlamak, birkaç komutu çalıştırmak kadar basittir:

npm install express-generator -g

Bu, Express oluşturucuyu global bir paket olarak yükler ve express terminalinizde komut:

express myapp

Bu, adında yeni bir Ekspres projesi yaratır. myapp, daha sonra içine yerleştirilir myapp dizin:

cd myapp

Terminal komutlarına aşina değilseniz, bu sizi myapp dizin:

npm install

Eğer npm'ye aşina değilseniz, varsayılan Node.js paket yöneticisi. Koşu npm install proje için tüm bağımlılıkları yükler. Varsayılan olarak, express-generator Express sunucusuyla yaygın olarak kullanılan çeşitli paketleri içerir.

Opsiyonlar

Jeneratör CLI yarım düzine alır argümanlarancak en yararlı iki tanesi şunlardır:

• -v . Bu, yüklenecek görünüm motorunu seçmenizi sağlar. Varsayılan: jade. Bu hala işe yaramasına rağmen kullanımdan kaldırılmıştır ve her zaman alternatif bir motor belirtmelisiniz.
• -c . Varsayılan olarak, oluşturucu sizin için çok temel bir CSS dosyası oluşturur, ancak bir CSS motorunun seçilmesi, yeni uygulamanızı yukarıdaki seçeneklerden herhangi birini derleyecek şekilde ara yazılımla yapılandıracaktır.

Artık projemizi ayarladığımıza ve bağımlılıkları yüklediğimize göre, aşağıdakileri çalıştırarak yeni sunucuyu başlatabiliriz:

npm start

Daha sonra şuraya göz atın: https://localhost:3000 Tarayıcınızda.

Uygulama Yapısı

Oluşturulan Express uygulaması dört klasörle başlar.

bin

The bin klasörü, uygulamanızı başlatan yürütülebilir dosyayı içerir. Sunucuyu başlatır (başka bir alternatif sağlanmadıysa bağlantı noktası 3000'de) ve bazı temel hata işlemeyi ayarlar. Bu dosya hakkında endişelenmenize gerçekten gerek yok çünkü npm start sizin için çalıştıracak.

public

The public klasör önemli olanlardan biridir: ​her şey Bu klasörde uygulamanıza bağlanan kişiler erişebilir. Bu klasöre, insanların web sitenizi yüklerken ihtiyaç duyduğu JavaScript, CSS, görseller ve diğer varlıkları koyacaksınız.

routes

The routes klasör, yönlendirici dosyalarınızı koyacağınız yerdir. Jeneratör iki dosya oluşturur, index.js ve users.jsUygulamanızın rota yapılandırmasını nasıl ayıracağınıza dair örnekler olarak hizmet veren.

Genellikle web sitenizdeki her ana rota için burada farklı bir dosyanız olur. Yani çağrılan dosyalarınız olabilir blog.js, home.js, Ve / veya about.js bu klasörde.

views

The views klasör, şablon oluşturma motorunuz tarafından kullanılan dosyaların bulunduğu yerdir. Oluşturucu, Express'i aradığınızda eşleşen bir görünüm için buraya bakacak şekilde yapılandıracaktır. render yöntemi.

Bu klasörlerin dışında iyi bilmeniz gereken bir dosya var.

app.js

The app.js dosyası özeldir çünkü Express uygulamanızı kurar ve tüm farklı parçaları birbirine yapıştırır. Ne işe yaradığına bakalım. Dosya şu şekilde başlıyor:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

Dosyanın bu ilk altı satırı gereklidir. Node'da yeniyseniz, mutlaka okuyun:Node.js'de module.export ve export öğelerini anlama anlayışının sonucu olarak, buzdolabında iki üç günden fazla durmayan küçük şişeler elinizin altında bulunur.

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

Sonraki iki kod satırı require Express oluşturucunun varsayılan olarak ayarladığı farklı rota dosyaları: routes ve users.

var app = express();

Daha sonra arayarak yeni bir uygulama oluşturuyoruz. express(). Uygulama değişkeni, uygulamanıza ilişkin tüm ayarları ve rotaları içerir. Bu nesne uygulamanızı birbirine yapıştırır.

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

Uygulama örneği oluşturulduktan sonra şablon oluşturma motoru, görünümlerin oluşturulması için ayarlanır. Gerekirse görünüm dosyalarınızın yolunu değiştireceğiniz yer burasıdır.

Bundan sonra Express'in ara yazılım kullanacak şekilde yapılandırıldığını göreceksiniz. Oluşturucu, bir web uygulamasında muhtemelen kullanacağınız birkaç ortak ara yazılım parçasını yükler:

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

• günlükçü. Uygulamanızı çalıştırdığınızda istenen tüm rotaların konsola kaydedildiğini fark edebilirsiniz. Bunu devre dışı bırakmak istiyorsanız, bu ara yazılımı yorumlayabilirsiniz.
• express.json. Gelen HTTP isteklerinin gövdesini ayrıştırmak için iki satır bulunduğunu fark edebilirsiniz. İlk satır, JSON'un bir POST isteği yoluyla gönderildiği zamanı işler ve bu verileri request.body.
• express.urlencoded. İkinci satır, URL'deki sorgu dizesi verilerini ayrıştırır (örn. /profile?id=5) ve bunu içine koyuyor request.query.
• çerez ayrıştırıcı. Bu, müşterinin gönderdiği tüm çerezleri alır ve bunları içine koyar request.cookies. Ayrıca, istemciye geri göndermeden önce bunları değiştirmenize de olanak tanır. response.cookies.
• ekspres.statik. Bu ara katman yazılımı, bilgisayarınızdan statik varlıklar sunar. public dosya. Ortak klasörü yeniden adlandırmak veya taşımak istiyorsanız buradan yolu değiştirebilirsiniz.

Sırada yönlendirme var:

app.use('/', indexRouter);
app.use('/users', usersRouter);

Burada gerekli olan örnek rota dosyaları uygulamamıza eklenmiştir. Ek rotalar eklemeniz gerekiyorsa bunu burada yaparsınız.

Bundan sonraki tüm kodlar hata işleme için kullanılır. Express'in hataları işleme biçimini değiştirmek istemediğiniz sürece genellikle bu kodu değiştirmeniz gerekmez. Varsayılan olarak, geliştirme modundayken rotada oluşan hatayı gösterecek şekilde ayarlanmıştır.

Yeni Bir Projenin Önyüklenmesi

Temel bir Express.js uygulamasını başlatmak için şu ana kadar öğrendiklerimizi uygulayalım.

Zaten yüklediğinizi varsayarsak express-generator global bir modül olarak yeni bir iskelet proje oluşturmak için aşağıdaki komutu çalıştırın:

express -v hbs signup-form

Daha önce de belirttiğim gibi, varsayılan (Jade) şablon oluşturma kütüphanesinden başka bir şeyi tercih etmek iyi bir fikirdir. İşte ben de gittim Gidon.js, çünkü bıyık benzeri sözdiziminin okunması ve üzerinde çalışılması kolay buluyorum.

Jeneratör çalıştıktan sonra yeni oluşturulan klasöre geçin ve bağımlılıkları yükleyin:

cd signup-form
npm i

Bu noktada paketteki güvenlik açıklarıyla ilgili çeşitli uyarılarla karşılaşabilirsiniz. Bunları düzeltmek için Handlebars.js sürümünü güncelleyelim:

npm install [email protected]

Artık proje bağımlılıkları yüklenip güncellendiğine göre, ortak metin görünüm şablonlarından bazılarını özelleştirelim.

Oluşturucu, görünümler arasında paylaşılan tüm işaretlemeyi oluşturmak için kullanılan bir düzen şablonu oluşturur. Aç views/layout.hbs ve içeriği aşağıdakiyle değiştirin:

<!doctype html>
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>{{title}}</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <!-- Custom styles for this template --> <link href="/tr/stylesheets/style.css" rel="stylesheet">
</head> <body> {{{body}}}
</body> </html>

Buradaki işaretleme bir kaynaktan uyarlanmıştır. örnek gösterilen Bootstrap web sitesi. Ayrıca bazı özel stiller eklememiz gerekiyor, o yüzden açın public/stylesheets/style.css ve aşağıdakileri yapıştırın:

html,
body { height: 100%;
} body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5;
} .full-width { width: 100%; padding: 15px; margin: auto;
} .form-signin { max-width: 330px;
}
.form-signin .checkbox { font-weight: 400;
}
.form-signin .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px;
}
.form-signin .form-control:focus { z-index: 2;
}
.form-signin input { border-radius: 0; margin-bottom: -1px;
}
.form-signin input:first-of-type { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;
}
.form-signin input:last-of-type { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; margin-bottom: 10px;
}

Artık düzeni özelleştirdiğimize göre, ana sayfa için işaretlemeyi ekleyelim. Açık views/index.hbs ve içeriği aşağıdakiyle değiştirin:

<form action="/tr/subscribe" method="POST" class="form-signin full-width text-center"> <h1 class="h3 mb-3 font-weight-normal">Join the mailing list</h1> <label for="name" class="sr-only">First name</label> <input type="text" name="name" class="form-control" placeholder="First name" required autofocus> <label for="email" class="sr-only">Email</label> <input type="email" name="email" class="form-control" placeholder="Your email" required> <label for="emailConfirmation" class="sr-only">Email (confirm)</label> <input type="email" name="emailConfirmation" class="form-control" placeholder="Your email (confirm)" required> <button class="btn btn-lg btn-primary btn-block" type="submit">Subscribe</button> <p class="mt-5 mb-3 text-muted">&copy; 2020</p>
</form>

Bu, ana sayfamızda bir bülten kayıt formunu görüntüleyecektir.

Formumuzun gönderilebileceği, form verilerine erişebileceğimiz ve onunla bir şeyler yapabileceğimiz bir rota ekleyelim. Dosyayı aç routes/index.js ve ana sayfa rotasının altına aşağıdaki rotayı ekleyin:

router.post("/subscribe", function(req, res, next) { const { name, email } = req.body; // 1. Validate the user data // 2. Subscribe the user to the mailing list // 3. Send a confirmation email res.render("subscribed", { title: "You are subscribed", name, email });
});

Rota işleyicisinde form verilerini istek nesnesinden çıkardık. Kayıt işlemini tamamladıktan sonra (sözde kod olarak gösterilir), verileri sunucumuza aktarırız. subscribed görünümü.

Not: Node'da formlarla çalışma hakkında daha fazla bilgi edinmek istiyorsanız "Node.js ve Express ile Formlar, Dosya Yüklemeleri ve Güvenlik anlayışının sonucu olarak, buzdolabında iki üç günden fazla durmayan küçük şişeler elinizin altında bulunur.

Şimdi yeni bir dosya açarak bunu oluşturalım, views/subscribed.hbsve aşağıdaki işaretlemeyi ekleyerek:

<div class="full-width text-center"> <h1 class="display-3">Thank You, {{name}}!</h1> <p class="lead"><strong>Please check your email</strong> to confirm your subscription to our newsletter.</p> <hr> <p> Having trouble? <a href="">Contact us</a> </p> <p class="lead"> <a class="btn btn-primary btn-sm" href="/tr/" role="button">Continue to homepage</a> </p>
</div>

Yeni sitemizi denemek için çalıştırarak başlatın npm run start proje klasöründe ve ziyaret edin https://localhost:3000.

Ve işte CodeSandbox'ta çalışan demo.

Umarız artık ekspres oluşturucu aracının, yeni Express tabanlı projelere başlarken tekrarlayan standart metinler yazarken size nasıl zaman kazandırabileceği konusunda net bir fikriniz vardır.

Jeneratör, makul bir varsayılan dosya yapısı sağlayarak ve yaygın olarak ihtiyaç duyulan ara yazılımı yükleyip kablolayarak, yalnızca birkaç komutla yeni uygulamalar için sağlam bir temel oluşturur.

Kaynak: https://www.sitepoint.com/create-new-express-js-apps-with-express-generator/?utm_source=rss