Express.js ile başlayın

NODE.JS ile tarayıcı yüzü oluşturma uygulamaları sıkıcı olur. Express.js bir Javascript çerçevesi NODE.JS ortamında barındırılan tek sayfalık ve çok sayfalı uygulamalara adanmıştır.

• 29 Web Tasarım Araçları İş Akışınızı Hızlandırmak İçin

Zaten aşina olduğunuz node.js özelliklerini gizlemeyecek ince bir temel web uygulaması özellikleri sağlar, böylece bitmiş uygulamanızın performans bilge sıfırlamaya kadar olacağından emin olabilirsiniz. Ayrıca, HTTP Yardımcı Programı Yöntemleri ve Middleware'in kullanıma hazır bir yığını sayesinde sağlam API'ler oluşturmak için de harika.

Daha az karmaşık bir seçenek istiyorsanız, kodlama olmadan bir site oluşturabilirsiniz. Web Sitesi Oluşturucu . Her iki durumda da, aldığınızdan emin olun. ağ sağlayıcısı hizmet hakkı. Başlamak ister misin? İşte Express.js hakkında bilmeniz gerekenler.

01. Yapılabilir bir yapı oluşturun

Express.js 'unopinionated' olmaktan gurur duyuyor - yani çerçeve geliştiricinin mimariler, şablonlama ve işaretleme motorları açısından karışmasını ve eşleşmesini sağlar. Ne yazık ki, büyük bir güçle büyük sorumluluk geliyor.

Express Geliştirici ekibi, bir proje jeneratörünü tanıtarak darbeyi yumuşatmaya çalışır (bir ekibin yanında tasarlarsanız, en iyisini dağıtın Bulut depolama işlerin yapışmasını sağlamak için). Bir NPM paketi biçiminde iş istasyonunuza gelir ve aşağıdaki çerçeve ile deneylerimize yardımcı olacaktır:

 TAMHAN @ Tamhan-ThinkPad: ~ / masaüstü /
Sayfalar / 2018AUG / FUTUREEXPRESSJS /
çalışma alanı $ sudo npm yüklemek
Express-Generator -g 

Jeneratör ayrıca onlarca proje seçeneği içerir - bu aşamaya eşlik eden şekil, tam yardım çıktısını gösterir. Sadelik iyiliği için, kendimizi varsayılan ayarlara göre bir projeye sınırlayacağız. Üretim sürecini başlatmak:

 TAMHAN @ Tamhan-ThinkPad: ~ / masaüstü /
Sayfalar / 2018AUG / FUTUREEXPRESSJS /
Workspace $ Express Futuretest 

UYARI: Varsayılan görünüm motoru gelecekteki sürümlerde yeşim olmayacak.

Yapıldığında, geçerli çalışma dizini, 'futuretest' adlı yeni bir klasör içeriyor. Test projemize ev sahipliği yapar ve NPM'nin paket indirme komutu kullanılarak yapılandırılmalıdır. Yazma sırasında, jeneratör Jade View Jeneratörünü içerir - proje, bu önümüzdeki gelecekte bunu değiştirmeyi planlıyor, sizi amaçlayan motoru seçme parametresini geçmeniz için. Alternatif olarak, pug kullanımını isteyin - yeşim motorunun resmi halefidir:

 CD Futuretest /
NPM Kurulumu 

02. Uygulama yapısını anlayın

Şimdi proje jeneratörünün bir şeyini yaptığını, tercih editöründe App.js'i açalım. Onun - çok kısaltılmış - yapı kendisini aşağıdaki gibi sunar:

 Var indexrouter = gerektir ('./
rotalar / index ');
var usersrouter = gerektirir ('./
rotalar / kullanıcıların);
var app = Express ();
// motor kurulumunu görüntüle
app.set ('görünümler', path.join (__
Dirname, 'Gösterim'));
app.set ('Görünüm Motoru', 'Jade');
app.use (logger ('dev'));
app.use (express.json ());
app.use (express.urlencoded ({
Genişletilmiş: false}));
app.use (cookieparser ());
app.use (express.static (yol.
katılın (__ dirname, 'kamu'))); 

Express.js oldukça modülerdir. App.js, bir veya daha fazla 'kullanım ()' işlevinin, çeşitli istekleri yerine getirmeyi amaçlayan bileşenlerin eklenmesine izin verdiği bir giriş noktası görevi görür. 'SET ()' ın çağrıları, motordaki parametreleri ayarlamanıza izin verir - bunlardan biri önceki adımda belirtilen Jade View Motorunun kurulumu.

Web içeriğinin gerçek emisyonu yönlendirici sınıflarında gerçekleşir. Kısalık uğruna, kendimizi endeks.js ile sınırlayalım:

 Var Express = gerektirir ('Express');
var router = Express.router ();
router.get ('/', işlevi (Req, Res,
Sonraki) {
  Res.Render ('index', {title:
'Express'});
});
Module.Exports = Router; 

'GET ()', bir eşleştirme dizesi ve karşılık gelen bir olay meydana geldiğinde çağrılan bir olay işleyicisi ile birlikte verilir. Bizim durumumuzda, seçilen şablon motorun oluşturucu yöntemi, içeriği giriş yapan kullanıcının tarayıcısına geri dönmesi söylenir.

03. Web sayfasını çalıştırın

Bu noktada, web sitesini ilk kez bir dönüş için almaya hazırız. Express.js kurulumunu içeren terminale geri dönün ve NPM'de hata ayıklama bayrağı ayarlayıcısıyla başlayın:

 Debug = MyApp: * NPM Başlat 

Tamamlandığında, HTTP: // LocalHost: 3000 / Proje üreteci tarafından oluşturulan iskeleye bakmak için tercih edilen bir tarayıcıya girin. Tamamlandığında, basın ctrl + C Pencereyi kapatmak ve kontrolü komut satırı tercümanına geri döndürmek için - bunun da hata ayıklama web sunucusunu kapattığını unutmayın.

04. Hepsi yönlendirme ve bitiş noktalarıyla ilgilidir.

Sadelik uğruna, bir web uygulamasının genellikle bir sıra giriş noktasından oluştuğunu kabul edelim. Express.js bunları yönlendirici sınıfı aracılığıyla ele alır - bunu, gelen bir talebe cevap olarak çağrılan yöntemlerin bir deposu olarak düşünün.

Bir uygulamaya yeni bir son nokta eklemek, kuyruğa yeni bir işçi ekleyerek gerçekleştirilir. Otomatik oluşturulan örneğimiz, her biri 'Gereksinim' yöntemi kullanılarak kaldırılan iki yönlendirici tipi oluşturur:

 Var indexrouter = gerektir ('./
rotaları /
dizin ');
var usersrouter = gerektirir ('./
rotaları /
kullanıcıların); 

Bir sonraki adımda, 'App.USE' yönlendiricileri kaydeder ve istek tellerine bağlanır. Kodumuz ayrıca, mevcut olmayan bir URL'ye sisteme girildiğinde çağrılan bir hata işleyicisi ekler:

 App.USE ('/', indexruter);
app.use ('/ kullanıcılar', kullanıcıRahibi);
app.use (işlev (req, res, sonraki)
{
  Sonraki (CreateError (404));
}); 

05. Yeni bir rota oluşturun

Kullanıcıları açın.js ve aşağıdaki gibi kodunu değiştirin:

 Router.get ('/ Kullanıcı1', İşlev (Req,
res,
Sonraki) {
  Res.Send ('Gelecek Hello Diyor
1 ');
});
router.get ('/', işlevi (Req, Res,
Sonraki) {
  res.Send ('ile cevap vermek
kaynak');
}); 

Express.js için yeni rotalar eklemek mekanik bir işlemdir. Tercih edilen yönlendirici nesnesini alın ve işlemek istediğiniz http fiiline karşılık gelen yöntemi çağırır. Sonra, 'App.use' ile kayıtlı 'ofset' için eklenecek bir dizgiyi geç. O andan itibaren, hem http: // localhost: 3000 / Kullanıcı / Kullanıcı1 ve http: // localhost: 3000 / kullanıcıları / geçerli bir yanıt ver.

Express.js'in 'get' kaynaklarını işleme ile sınırlı olmadığını unutmayın. 'POST ()', 'POT ()' ve 'Sil ()' Geleneksel Dört HTTP isteğini, daha sıradışı ihtiyaçlara hitap eden onlarca ek fiil yöntemi ile tutun. Son olarak, 'Req' nesnesi istek başlığına erişim sağlar - parametreleri veya müşteri bilgilerini ayrıştırırken iyi kullanıma hazırlayın.

06. Gelişmiş eşleştirme

Elle güzergahlar eklemek, program karmaşıklığı büyüdükçe sıkıcı olur. Express.js, hem joker karakter hem de düzenli ifade desteğini tanıtarak bu sorunu hitap ediyor. Örneğin, karakter dizisi köpeğini içeren çeşitli dizgilerlerle eşleşecek şekilde düzenli bir ifade kullanan aşağıdaki beyannameye bakın.

 app.get (/.* köpek $ /, işlevi (Req,
res) {
  ...}) 

07. Anormal Yönlendirme

Dört HTTP isteğini ele alırken, herkes için yeterli olması gerekir (Hat ucu Bill Gates'e), Express.js ayrıca ek protokollerle de çalışabilir. Express-ws Bu bölüm için özellikle lezzetli bir adaydır - express.js'in WebSocket Communications'ı içerecek şekilde ulaşmasını sağlar.

Eklenti, ana Express.js projesine eklendiğinde, bir 'gerektirir' araması ile gerçekleştirildiğini etkinleştirin. Bir yöntemi içeren tümü içeren bir yardımcı nesneyi döndürür - yönlendirici ile eklenti arasında bir bağlantı kurmak için çağırın:

 Var Expressws = ('Express-
ws ')
app);
Bundan sonra, Webles Technology teknolojisine dayalı yeni rotalar eklemek için 'WS ()' olarak adlandırılan yeni bir yöntem de çağrılabilir:
app.ws ('/', fonksiyon (ws, req) {
  Ws.on ('Mesaj', İşlev (MSG)
{
    console.log (msg);
  });
  console.log ('Soket', Req.
test yapmak); }); 

Prototipleri, 'WS' nesnesinin varlığından dolayı normal yollardan farklıdır - bağlantıdan sorumlu müşteriye bağlı altta yatan Webloke örneğine erişim sağlar.

08. Veritabanlarını ve şablonlama motorlarını entegre edin

NODE.JS'ye dayanarak olmak, Web tabanlı uygulamalarda çalışırken zengin eklenti ekosisteminin komutunuzda olduğu anlamına gelir. Örneğin, SQL ve NOSQL veritabanlarına erişme - genellikle olağanüstü sıkıcı bir görev - veritabanı satıcıları tarafından sağlanan eklentiler kullanılarak kullanılabilir. Gerçek dağıtım, gerekli NPM modülünü kurmak kadar kolaydır - kodunuz bir redis veritabanına erişmekse, sadece aşağıdakileri ekleyin:

var redis = gerektir ('redis')
var client = redis.crealeClient ()
Client.set ('StringKey', 'Aval',
redis.print)
. . . 

Tabii ki, bellek içi SQLite ayrıca desteklenir:

 var sqlite3 = gerektirir ('SQLite3').
verbose ()
var db = yeni sqlite3.
Veritabanı (': Bellek:')
db.Serialize (işlev () {
  db.run ('masa lorem oluşturmak
(bilgi metni) ') 

NODE.JS entegrasyonunun veritabanı eklentileri ile sınırlı olmadığını unutmayın. Maceracı geliştiriciler, Tessel gibi ürünleri içerecek şekilde gidebilirler, böylece ayrıca etkileşime girebilecek web uygulamaları oluşturabilirler. Nesnelerin interneti aygıtlar.

09. Tarzında Şablonlama

Basit ve gerçek programların farklılık gösterdiği bir alan, görüşlerin yaratılmasıdır. Küçük bir örnek proje genellikle el yapımı dizeleri kullanırken, büyük HTML swath'larını bir dize bağlı şeyle monte etmek oldukça can sıkıcıdır.

Şablon motorları temiz bir geçici çözüm sağlar. Önceden tanımlanmış şema dosyalarının oluşturulmasına izin verir, bu da programsal olarak yürütülürken doldurulabilir.

Örnek programımızda, görüşler .jade dosyalarında bulunur. Açılış endeksi aşağıdaki yapıyı ortaya çıkarır:

 Düzeni uzatır
İçeriği engelle
  H1 = başlık
  p # {title} 

Kıvırcık parantez içine alınmış ifadeler, çalışma zamanında değerleri değiştirilecek olan şablon alanları olarak işlev görür. İndex.js, bu adıma eşlik eden şekilde gösterilen başlangıç ​​sayfasının oluşturulmasına yol açan bir parametre nesnesiyle oluşturur.

 Router.get ('/', İşlev (Req, Res,
Sonraki) {
  Res.Render ('index', {title:
'Express'});
}); 

Çoğu şablonlama motoru, bir ürün şablonuyla sağlandığında da dizileri ayrıştırabilir. Bu durumda, dizinin her satırı, DOM modelinin bir örneğiyle görüntülenir - Android'de bulunan liste ekran modeline benzerlikler tamamen tesadüfendir. Express.js, önceden tanımlanmış şablonlama motorlarıyla sınırlı değildir. Bir nedenden dolayı kendinizin yerini almak isterseniz, belirtilen adımları izleyin. İşte - Prensip olarak, bir işlevi değil, hepsini geçersiz kılmak zorundasınız.

10. Statik içeriği kullanın

Express.js uygulamaları CSS dosyaları ve resimler içerme eğilimindedir. Bunlara render işlevi aracılığıyla hizmet vermek verimsizdir - daha akıllı bir yol, geleneksel bir HTTP isteğiyle neşeli şekilde gönderilmesini içerecektir. Bu, İhracat için tüm klasörleri işaretleyebilen 'Express.static ()' işlevi aracılığıyla elde edilebilir:

 App.USE (Express.Static ('Genel'))
app.use (Express.Static ('Dosyaları')) 

11. Olay akışını değiştirin

Son olarak, katman yazılımı kısa süre sonra bahsetmemize izin verin. Express.js parance, katman yazılımı, kendilerini karşıt olarak gösterilen akış şemasına entegre eden bir veya daha fazla bileşenden oluşur. Daha sonra, yönlendirme sisteminden geçtikçe istekleri değiştirmek için kullanılabilirler - doğru uygulandığında sınırsız işlev sağlanabilir.

Ayrıca, bazı hazır bileşenler bulunabilir İşte - Büyük ölçekli bir geliştirme projesine başlamadan önce bu siteyi ziyaret edin.

12. Express.js uygulamasını nasıl barındırılır

Express.js tabanlı uygulamaların test edilmesi kolaydır. Sayfanın üçüncü şahıslardan erişilebilir olmasını istediğinizde sorunlar ortaya çıkar - NODE.JS ortamı tarafından üretildiğinden, FTP dağıtımı için web barındırma hizmetlerine uygun statik bir görüntü elde etmenin bir yolu yoktur.

Teoride, bir Ahududu Pi, Orangepi, özel bir sunucu veya bir bulut servisinden kiralanan bir sanal makine veya sanal barındırma sunan bir web barındırma sağlayıcısı kullanan hiçbir şey yoktur. Bununla birlikte, tam bir sanal makine kiralamak, yürütme ortamını ve işletim sistemini güncel tutma sorumlulukları ile sizi yükleyebilir.

Bu görev zevkinize göre değilse, bir hizmet veren bir servis sağlayıcı daha çekici olabilir (çoğu durumda, oldukça pahalı) bir seçim olabilir.

Birçok geliştirici, HEROKU'yu, bu bibernin eşlik eden şekilde gösterilen fiyatlarıyla, node.js barındırma ile ilgili her şey için altın standardı olmak üzere fiyatlandırması ile birlikte.

Bununla birlikte, bu, gerçekte biraz haksızdır - Amazon'un elastik beanstalk, Google'ın bulut platformu ve Microsoft'un Azure'nin tümü, NODE.JS tabanlı yüklerin uzaktan yürütülmesi için benzer bir destek sağlar. Tüm bu sistemlerde, asıl mesele taşınırken, Azure yavaş dağıtımları ile bilinirken, diğer sağlayıcılar, son derece karmaşık yapılandırma sistemlerinin kullanımı zor bir arka uç hizmetleri olan diğer sağlayıcılar geliştiricileri.

Ayrıca, NODE.JS ortamının desteklenen versiyonu sağlayıcıya sağlayıcıya farklıdır. Tabii ki, konuyu derinlemesine kapsayacak kadar alana sahip değiliz. Ziyaret etmek Mozilla'nın Dağıtım Eğitimi ve express.js ' Performans ve Güvenilirlik ve güvenlik Bazı konular için en iyi uygulamalar sayfaları. Sağlayıcının belgelerine daha fazla en iyi uygulamalara baktığınızdan emin olun.

13. Uygulamalarınızı Gelecek Korumalı

Express.js'in geliştirme döngüsü düzgündür: Geliştiriciler, istemci kodunun yeniden yazılması gerektiren sık API değişiklikleri için iyi bilinmektedir. 3.x ila 4.x arasındaki geçiş özellikle acı vericiydi, bu yüzden 5.x'in yaklaşmakta olan serbest bırakılmasının rahatsızlık verici hissetmesinin nedeni.

Express.js 5.0 birkaç kırma değişikliği boyunca getirirken, etkileri daha sınırlıdır. Her şeyden önce, bir dizi halihazırda kullanımdan kaldırılan fonksiyonların bir dizi gerçek için kaldırılır - kod hala kullanıyorsa, 5.x'e yükseltme, bakım gerektirir.

Görüntüleme motorlarının tasarımcıları, 'Res.Render () () ()) şunları kontrol etmesi gerekir:' bazı senkronize uygulamalara yol açan, ortaya çıkan bazı senkronize uygulamalara yol açan görüntüciler açısından. Çerçevenin 5. versiyonu, asenkron renderleri uygulayarak performansı arttırır.

Buna ek olarak, bir dizi Gündelik İyileştirme ve Belgelenmiş Değişiklikler İşte Önceki sürümlerden nesli tükenmiş özelliklerin geri dönüşünü görür - ayrıca, uzun süredir devam eden bazı böcekler yeni sürümde sabitlenecektir.

Son olarak, yeni sürümü zaten deneyebileceğinizi unutmayın. Sadece kaynak kodunuzun bir kopyasını oluşturun, bir terminal alın ve bir arşivin değerli kanama kenarındaki javascript değerini indirmek için aşağıdaki komutu girin. Dikkatli ol.

 $ NPM Express @ & gt; = 5.0.0-
alfa.1 --save 

Bu makale başlangıçta Yaratıcı Web Tasarım Magazine Web Tasarımcısı'nın 279 sayısında yayınlandı. Sayı 279 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

• Yeni node.js 8 hakkında bilmeniz gereken her şey
• 20 node.js bilmeniz gereken modüller
• 25 Oyun Değiştirme Javascript Araçları