Node.js ile yeni başlıyorsanız ve bir web uygulaması oluştururken elinizi denemek istiyorsanız, işler genellikle biraz bunaltıcı olabilir. “Merhaba Dünya!” Nın ötesine geçtiğinizde öğreticiler, materyalin çoğunda kopya yapıştırma kodu var, ne yaptığınız veya neden yaptığınız konusunda çok az açıklama var veya hiç açıklama yok.
Bu, işiniz bittiğinde, güzel ve parlak bir şey inşa ettiğiniz anlamına gelir, ancak bir sonraki projenize uygulayabileceğiniz nispeten az sayıda paket servisiniz de vardır.
Bu derste, biraz farklı bir yaklaşım benimseyeceğim. Sıfırdan başlayarak, Node.js kullanarak no-frills web uygulamasını nasıl oluşturacağınızı göstereceğim, ancak sonuç sonucuna odaklanmak yerine, inşa ederken karşılaşacağınız bir dizi şeye odaklanacağım gerçek dünya uygulaması. Bunlar arasında yönlendirme, şablonlama, formlarla ilgilenme, bir veritabanıyla etkileşim ve hatta temel kimlik doğrulama yer alır.
Bu bir JavaScript 101 olmayacak. Eğer peşinde olduğunuz şey buysa, baksana. Bununla birlikte, JavaScript diline makul derecede güvenen ve arayanlar için uygun olacaktır. Node.js'deki ilk adımlarını atın.
Neler Yapacağız
Kullanacağız node.js ve Hızlı çerçeve temel doğrulama ile basit bir kayıt formu oluşturmak için MongoDB veritabanı. Temel HTTP kimlik doğrulamasıyla koruyacağımız başarılı kaydı listelemek için bir görünüm ekleyeceğiz ve Çizme atkısı biraz stil eklemek için. Öğretici, adım adım takip edebilmeniz için yapılandırılmıştır. Ancak, ileri atlamak ve sonucu görmek istiyorsanız, bu öğreticinin kodu GitHub'da da mevcuttur.
Temel Kurulum
Kodlamaya başlamadan önce, makinelerimize Node, npm ve MongoDB kurmamız gerekecek. Çeşitli kurulum talimatlarını derinlemesine incelemeyeceğim, ancak kurulumda herhangi bir sorun yaşarsanız, lütfen forumlarımızı ziyaret edin ve orada yardım isteyin.
node.js
Birçok web sitesi, resmi Düğüm indirme sayfası ve sisteminiz için Düğüm ikili dosyalarını alın. Bu çalışırken, bunun yerine bir sürüm yöneticisi kullanmanızı öneririm. Bu, Düğümün birden çok sürümünü yüklemenizi ve isteğe bağlı olarak aralarında geçiş yapmanızı sağlayan bir programdır. Bir sürüm yöneticisi kullanmanın çeşitli avantajları vardır. Örneğin, aksi takdirde yönetici haklarına sahip paketler yüklediğinizi görecek olası izin sorunlarını ortadan kaldırır.
Sürüm yöneticisi rotasını kullanmaktan hoşlanıyorsanız, lütfen hızlı ipucumuza bakın: Nvm Kullanarak Birden Çok Node.js Sürümünü Yükleme. Aksi takdirde, yukarıdaki bağlantıdan sisteminiz için doğru ikili dosyaları alın ve yükleyin.
npm
npm, Node ile birlikte gelen bir JavaScript paket yöneticisidir, bu nedenle burada fazladan kurulum gerekmez. Bu eğitim boyunca npm'yi oldukça kapsamlı kullanacağız, bu nedenle bir tazeleme ihtiyacınız varsa, lütfen danışın Npm için Başlangıç Kılavuzu - Düğüm Paketi Yöneticisi.
MongoDB
MongoDB, verileri JSON benzeri esnek belgelerde saklayan bir belge veritabanıdır. Daha önce hiç Mongo ile çalışmadıysanız, yeni başlayanlar için MongoDB'ye giriş.
Mongo ile çalışmaya başlamanın en hızlı yolu mLab gibi bir hizmet kullanmaktır. Paylaşılan bir sanal makinede çalışan 0.5 GB depolama alanına sahip tek bir veritabanı sağlayan ücretsiz bir sanal alan planına sahiptirler. Bu bir avuç kullanıcı ile basit bir uygulama için yeterli fazla. Bu sizin için en iyi seçenek gibi görünüyorsa, lütfen hızlı başlangıç Kılavuzu.
Mongo'yu yerel olarak da yükleyebilirsiniz. Bunu yapmak için lütfen Resmi indirme sayfası ve işletim sisteminiz için topluluk sunucusunun doğru sürümünü indirin. Her indirme bağlantısının altında, sorunla karşılaşırsanız başvurabileceğiniz ayrıntılı, işletim sistemine özgü kurulum talimatlarının bir bağlantısı vardır.
Bir MongoDB GUI
Bu eğiticiyi takip etmek için kesinlikle gerekli olmasa da, Pusula, MongoDB için resmi GUI. Bu araç, verilerinizi görselleştirmenize ve değiştirmenize yardımcı olarak, tam CRUD işlevselliğine sahip belgelerle etkileşimde bulunmanıza olanak tanır.
Her şeyin Doğru Yüklendiğinden emin olun
Düğüm ve npm'nin doğru kurulduğunu kontrol etmek için terminalinizi açın ve şunu yazın:
node -v
bunu takiben:
npm -v
Bu, her programın sürüm numarasını verir (12.14.1 ve 6.13.6 sırasıyla yazma sırasında).
Mongo'yu yerel olarak kurduysanız, sürüm numarasını aşağıdakileri kullanarak kontrol edebilirsiniz:
mongo --version
Bu, sürüm numarası (4.2.2 yazma sırasında).
Compass Kullanarak Veritabanı Bağlantısını Kontrol Edin
Mongo'yu yerel olarak kurduysanız, aşağıdaki komutu bir terminale yazarak sunucuyu başlatırsınız:
mongod
Ardından, Pusula'yı açın. Varsayılanları kabul edebilmeniz gerekir (sunucu: localhost, bağlantı noktası: 27017), CONNECT düğmesine basın ve veritabanı sunucusuyla bağlantı kurun.
Localhost'a bağlı MongoDB Pusula
Veritabanlarının admin, config ve local otomatik olarak oluşturulur.
Bulutta Barındırılan Bir Çözüm Kullanma
MLab kullanıyorsanız, bir veritabanı aboneliği oluşturun ( hızlı başlangıç Kılavuzu), ardından bağlantı ayrıntılarını not edin.
Pusulayı aç, tıklayın Yeni bağlantı, Daha sonra Bağlantı alanlarını ayrı ayrı doldurun. Seçmek Kullanıcı adı Şifre kimlik doğrulama yöntemi olarak, diğer ayrıntıları doldurun. Son olarak, CONNECT ve yarışlara katılmalısın.
Not: Bir bağlantı dizesi kullanmak istiyorsanız, şöyle görünmelidir: mongodb://<dbuser>:<dbpassword>@ds211709.mlab.com:11709/?authSource=<dbname>.
MLab'lara bağlı MongoDB Pusula
Veritabanımı aradığımı unutmayın sp-node-article. Sizinkini istediğiniz gibi arayabilirsiniz.
Uygulamayı Başlatın
Her şey doğru şekilde kurulduğunda, ilk yapmamız gereken yeni projemizi başlatmak. Bunu yapmak için şu adlı bir klasör oluşturun: demo-node-app, bu dizini girin ve bir terminale aşağıdakileri yazın:
npm init -y
Bu, bir package.json proje kökündeki dosya. Bu dosyayı bağımlılıklarımızı belirtmek ve çeşitli oluşturmak için kullanabiliriz. npm komut dosyalarıgeliştirme iş akışımıza yardımcı olacak.
Express'i yükle
Express, Node.js için hafif bir web uygulaması çerçevesi olup, bize web uygulamaları yazmak için sağlam bir dizi özellik sunar. Bu özellikler, rota işleme, şablon motoru entegrasyonu ve istek ve yanıt nesneleri üzerinde ek görevler gerçekleştirmemizi sağlayan bir ara katman yazılımı çerçevesi gibi şeyleri içerir. Express'te düz Node.js'de yapamayacağınız hiçbir şey yoktur, ancak Express'i kullanmak tekerleği yeniden icat etmemiz gerekmediği anlamına gelir ve ısıtıcı plakayı azaltır.
Hadi yükleyelim Ekspres. Bunu yapmak için terminalinizde aşağıdakileri çalıştırın:
npm install express
Bu, Express'in dependencies bölümünde package.json dosya. Bu, kodumuzu çalıştıran herkese Express uygulamamızın düzgün çalışması için gereken bir paket olduğunu belirtir.
Nodemon'u yükle
düğüm kolaylık sağlayan bir araçtır. Başlatıldığı dizindeki dosyaları izler ve herhangi bir değişiklik algılarsa, Düğüm uygulamanızı otomatik olarak yeniden başlatır (yani, gerek yoktur). Express'in aksine, nodemon, uygulamanın düzgün çalışması için gerekli olan bir şey değildir (sadece geliştirmeye yardımcı olur), bu yüzden şunu kullanarak yükleyin:
npm install --save-dev nodemon
Bu, nodemon'u dev-dependencies bölümünde package.json dosyası.
Bazı İlk Dosyaları Oluşturun
Kurulum neredeyse bitti. Şimdi tek yapmamız gereken, uygulamayı başlatmadan önce birkaç başlangıç dosyası oluşturmak.
içinde demo-node-app klasör oluştur app.js dosya ve bir start.js dosya. Ayrıca bir routes klasöründe index.js dosya içinde. İşiniz bittiğinde işler şöyle görünmelidir:
.
├── app.js
├── node_modules
│ └── ...
├── package.json
├── package-lock.json
├── routes
│ └── index.js
└── start.js
Şimdi bu dosyalara bir kod ekleyelim.
In app.js:
const express = require('express');
const routes = require('./routes/index'); const app = express();
app.use('/', routes); module.exports = app;
Burada, her ikisini de express modülünü ve (ihracat değerini) rota dosyamızın uygulamaya aktarması. require Bunu yapmak için kullandığımız işlev, bir nesneyi başka bir dosya veya modülden içe aktaran yerleşik bir Düğüm işlevidir. Modülleri içe ve dışa aktarma konusunda bilgi vermek istiyorsanız, okuyun Node.js'de module.export ve export öğelerini anlama.
Bundan sonra, şunu kullanarak yeni bir Express uygulaması oluşturuyoruz: ekspres işlevi ve bir app değişken. Daha sonra uygulamaya, her şeyden bir istek aldığında, her şey için yollar dosyasını kullanması gerektiğini söyleriz.
Son olarak, uygulama değişkenimizi içe aktarıp başka dosyalarda kullanılabilmesi için dışa aktarıyoruz.
In start.js:
const app = require('./app'); const server = app.listen(3000, () => { console.log(`Express is running on port ${server.address().port}`);
});
Burada oluşturduğumuz Express uygulamasını içe aktarıyoruz app.js. (Unutmayın ki .js dosya adından require Daha sonra uygulamamıza gelen bağlantılar için 3000 numaralı bağlantı noktasını dinlemesini ve sunucunun çalıştığını belirtmek için terminale bir mesaj göndermesini söyledik.
Ve routes/index.js:
const express = require('express'); const router = express.Router(); router.get('/', (req, res) => { res.send('It works!');
}); module.exports = router;
Burada, Express'i yollar dosyamıza içe aktarıyoruz ve ardından yönlendiriciyi ondan alıyoruz. Daha sonra, yönlendiriciyi kök URL'ye yapılan tüm isteklere yanıt vermek için kullanırız (bu durumda https://localhost:3000) "Çalışıyor!" İleti.
Uygulamayı Başlatın
Son olarak, nodemon uygulamamızı izlemeye başlamak için bir npm betiği ekleyelim. Değiştir scripts bölümünde package.json dosya şöyle görünecektir:
"scripts": { "watch": "nodemon ./start.js"
},
The scripts mülkiyeti package.json dosya, farklı senaryolarda çalıştırılacak rastgele komut dosyaları belirtmenize izin verdiği için son derece kullanışlıdır. Bu, hatırlanması zor bir sözdizimi ile uzun soluklu komutları tekrar tekrar yazmanız gerekmediği anlamına gelir. Npm komut dosyalarının neler yapabileceği hakkında daha fazla bilgi edinmek istiyorsanız, okuyun Grunt'a Botu Ver! Npm'yi Derleme Aracı Olarak Kullanma Kılavuzu.
Şimdi yaz npm run watch terminalden ve ziyaret https://localhost:3000.
“İşe yarıyor!”
Pug ile Temel Şablonlama
Rota işleyicisinden bir satır içi yanıt döndürmek iyi ve iyidir, ancak çok genişletilebilir değildir ve bu, geçici motorların devreye girdiği yerdir. Hızlı dokümanlar durum:
Şablon motoru, uygulamanızda statik şablon dosyaları kullanmanızı sağlar. Çalışma zamanında, şablon motoru bir şablon dosyasındaki değişkenleri gerçek değerlerle değiştirir ve şablonu istemciye gönderilen bir HTML dosyasına dönüştürür.
Uygulamada, bu, şablon dosyalarını tanımlayabildiğimiz ve her şeyi satır içine yazmak yerine rotalarımıza bunları kullanmasını söyleyebileceğimiz anlamına gelir. Şimdi yapalım.
Adlı bir klasör oluşturun views ve bu klasörde adlı bir dosya form.pug. Bu yeni dosyaya aşağıdaki kodu ekleyin:
form(action="." method="POST") label(for="name") Name: input( type="text" id="name" name="name" ) label(for="email") Email: input( type="email" id="email" name="email" ) input(type="submit" value="Submit")
Dosya sonundan çıkarabileceğiniz gibi, Pug şablon motoru bizim app. Pug (eski adıyla Jade), dinamik ve yeniden kullanılabilir HTML yazmak için kendi girintiye duyarlı sözdizimi ile birlikte gelir. Umarım yukarıdaki örneği takip etmek kolaydır, ancak ne yaptığını anlamakta zorluk çekiyorsanız, bunu bir tarayıcıda görüntüleyene kadar bekleyin, ardından ürettiği işaretlemeyi görmek için sayfa kaynağını inceleyin.
Devam etmeden önce Pug hakkında biraz daha fazla bilgi edinmek isterseniz, eğiticimizi okuyun Pug için Başlangıç Kılavuzu.
Pug yükleyin ve Express App entegre
Sonra, bir bağımlılık olarak kaydederek pug yüklememiz gerekecek:
npm install pug
Sonra yapılandırın app.js Pug'ı bir yerleşim motoru olarak kullanmak ve views Klasör:
const express = require('express');
const path = require('path');
const routes = require('./routes/index'); const app = express(); app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug'); app.use('/', routes); module.exports = app;
Ayrıca, Düğümün yerli olmasını istediğimizi fark edeceksiniz Yol modülü, dosya ve dizin yollarıyla çalışmak için yardımcı programlar sağlar. Bu modül, views klasörü kullanarak birleştirme yöntemi ve __dirname (şu anda yürütülen komut dosyasının bulunduğu dizini döndürür).
Şablonumuzu Kullanmak için Rotayı Değiştirin
Son olarak, yeni şablonumuzu kullanmak için rotamıza söylememiz gerekiyor. İçinde routes/index.js:
router.get('/', (req, res) => { res.render('form');
});
Bu kullanır oluşturma yöntemi işlenen görünümü istemciye göndermek için Express'in yanıt nesnesinde.
Bakalım işe yarayıp yaramadığını. Nodemon'u uygulamamızı değişiklikler için izlemek için kullandığımızdan, tarayıcınızı yenileyip acımasız şaheserinizi görebilmeniz gerekir.
Pug için bir Düzen Dosyası Tanımlama
Tarayıcınızı açar ve sayfa kaynağını incelerseniz, Express'in yalnızca form için HTML'yi gönderdiğini görürsünüz: sayfamızda başlık ve gövde bölümünün yanı sıra bir doküman türü bildirimi eksik. Tüm şablonlarımızın kullanması için bir ana düzen oluşturarak bunu düzeltelim.
Bunu yapmak için bir layout.pug içindeki dosyayı views ve aşağıdaki kodu ekleyin:
doctype html
html head title= `${title}` body h1 My Amazing App block content
Burada dikkat edilmesi gereken ilk şey başlangıç çizgisidir title=. Bir özniteliğe eşittir işareti eklemek Pug'ın enterpolasyon için kullandığı yöntemlerden biridir. Bununla ilgili daha fazla bilgi edinebilirsiniz okuyun. Bunu, başlığı her bir şablona dinamik bir şekilde aktarmak için kullanacağız.
Dikkat edilmesi gereken ikinci şey, block Anahtar kelime. Bir şablonda, bir blok basitçe bir alt şablonun değiştirebileceği bir Pug “bloğudur”. Kısa bir süre içinde nasıl kullanacağımızı göreceğiz, ancak daha fazlasını öğrenmek istiyorsanız, okuyun Pug web sitesinde bu sayfa.
Alt Şablondaki Düzen Dosyasını Kullanma
Geriye kalan tek şey form.pug düzen dosyasını kullanması gereken şablon. Bunu yapmak için değiştirin views/form.pug, şöyle:
extends layout block content form(action="." method="POST") label(for="name") Name: input( type="text" id="name" name="name" ) label(for="email") Email: input( type="email" id="email" name="email" ) input(type="submit" value="Submit")
Ve routes/index.js, şablonun görüntülenmesi için uygun bir başlık geçmeliyiz:
router.get('/', (req, res) => { res.render('form', { title: 'Registration form' });
});
Şimdi sayfayı yeniler ve kaynağı incelerseniz, işler çok daha iyi görünmelidir.
Express'te Formlarla Başa Çıkma
Şu anda, formumuzun Gönder düğmesini tıkladığınızda şu mesajı içeren bir sayfaya yönlendirileceksiniz: “POST / POST yapılamıyor”. Bunun nedeni, gönderildiğinde formumuzun içeriğinin /ve bunun üstesinden gelmek için henüz bir rota tanımlamadık.
Şimdi yapalım. Aşağıdakileri şuraya ekle: routes/index.js:
router.post('/', (req, res) => { res.render('form', { title: 'Registration form' });
});
Bu, GET rotamızla aynıdır, ancak kullandığımız hariç router.post farklı bir HTTP fiiline yanıt vermek için
Şimdi formu gönderdiğinizde, hata mesajı kaybolacak ve formun yeniden oluşturulması gerekir.
Tutamak Form Girişi
Bir sonraki görev, kullanıcının form aracılığıyla gönderdiği tüm verileri almaktır. Bunu yapmak için, adında bir paket yüklememiz gerekecek vücuda ayrıştırıcıForm verilerini istek gövdesinde kullanılabilir hale getirecek:
npm install body-parser
Ayrıca, uygulamamıza bu paketi kullanmasını söylememiz gerekecek, bu nedenle aşağıdakileri ekleyin: app.js:
const bodyParser = require('body-parser');
...
app.use(bodyParser.urlencoded({ extended: true }));
app.use('/', routes); module.exports = app;
POST yaptığınız verileri sunucuya biçimlendirmenin ve gövde ayrıştırıcısını kullanmanın çeşitli yolları olduğunu unutmayın urlen kodlu yöntemi, şu şekilde gönderilen verileri işlememize olanak tanır: application/x-www-form-urlencoded.
Ardından, gönderilen verileri terminale kaydetmeyi deneyebiliriz. Rota işleyiciyi şu şekilde değiştirin:
router.post('/', (req, res) => { console.log(req.body); res.render('form', { title: 'Registration form' });
});
Şimdi formu gönderdiğinizde, aşağıdaki satırlarda bir şeyler görmelisiniz:
{name: 'Jim', email: '[email protected]'}
Form çıktısı terminale kaydedildi
İstek ve Yanıt Nesneleri Hakkında Bir Not
Şimdiye kadar, Express'teki rotaları işlemek için kullandığımız kalıbı fark ettiniz:
router.METHOD(route, (req, res) => { // callback function
});
Geri arama işlevi, biri belirttiği yolla eşleşen bir URL'yi ziyaret ettiğinde yürütülür. Geri arama bir req ve res parametresi, nerede req gelen bilgilerle dolu bir nesnedir (form verileri veya sorgu parametreleri gibi) ve res kullanıcıya geri veri gönderme yöntemleriyle dolu bir nesnedir. Ayrıca isteğe bağlı next Herhangi bir veriyi geri göndermek istemiyorsanız veya isteği başka bir şeyin işlemesi için iletmek istiyorsanız yararlı olur.
Yabancı otlara fazla derin girmeden, bu, Express'te çok önemli olan ara katman yazılımı (özellikle yönlendirici düzeyinde ara katman yazılımı) olarak bilinen bir kavramdır. Express'in ara katman yazılımlarını nasıl kullandığı hakkında daha fazla bilgi edinmek istiyorsanız, Hızlı dokümanlar.
Form Girişini Doğrulama
Şimdi kullanıcının her iki alanımızı da doldurup doldurmadığını kontrol edelim. Bunu kullanarak yapabiliriz ekspres doğrulayıcı modülü, kullanıcı girişinin sterilize edilmesi ve onaylanması için bir dizi yararlı yöntem sağlayan bir ara katman yazılımı.
Aşağıdaki gibi yükleyebilirsiniz:
npm install express-validator
İhtiyacımız olan işlevleri talep edin routes/index.js:
const { check, validationResult } = require('express-validator');
Bunu rota işleyicimize şöyle ekleyebiliriz:
router.post('/', [ check('name') .isLength({ min: 1 }) .withMessage('Please enter a name'), check('email') .isLength({ min: 1 }) .withMessage('Please enter an email'), ], (req, res) => { ... });
Gördüğünüz gibi, biz check iki özelliği doğrulama yöntemi req.body - yani, name ve email. Bizim durumumuzda, bu özelliklerin var olduğunu (yani, birden fazla uzunluğa sahip olduklarını) kontrol etmek yeterlidir, ancak daha fazlasını yapmak istiyorsanız Doğrulayıcıların tamamını buradan kontrol edebilirsiniz.
İkinci bir adımda, doğrulamasonucu Doğrulamanın başarılı olup olmadığını görmek için yöntem. Herhangi bir hata yoksa, devam edebilir ve “Kayıt için teşekkürler” mesajı verebiliriz. Aksi takdirde, kullanıcıyı bir şeylerin yanlış olduğu konusunda bilgilendirmek için bu hataları şablonumuza geri göndermemiz gerekir.
Doğrulama başarısız olursa, req.body geçerli form girişlerinin sıfırlanmaması için şablona geri dönün:
router.post( '/', [ ... ], (req, res) => { const errors = validationResult(req); if (errors.isEmpty()) { res.send('Thank you for your registration!'); } else { res.render('form', { title: 'Registration form', errors: errors.array(), data: req.body, }); } }
);
Şimdi bazı değişiklikler yapmalıyız. form.pug şablonu. Öncelikle bir errors özelliği varsa ve varsa hataların üzerine gelin ve bunları bir listede görüntüleyin:
extends layout block content if errors ul for error in errors li= error.msg ...
Eğer li= tuhaf görünüyor, Pug'nın etiket adını eşittir işaretiyle takip ederek enterpolasyon yaptığını unutmayın.
Son olarak, bir data özniteliği vardır ve varsa, ilgili alanların değerlerini ayarlamak için bunu kullanın. Yoksa, boş bir nesneye başlatırız, böylece form ilk kez yüklendiğinde hala doğru şekilde işlenir. Bunu Pug'da eksi işareti ile belirtilen bazı JavaScript ile yapabiliriz:
-data = data || {}
Daha sonra, alanın değerini ayarlamak için bu özelliğe başvururuz:
input( type="text" id="name" name="name" value=data.name
)
Not: Pug'da, tüm özellikler varsayılan olarak kaçar. Yani, saldırıları önlemek için özel karakterler (siteler arası komut dosyası oluşturma gibi) kaçış dizileriyle değiştirilir.
Bu bize aşağıdakileri verir:
extends layout block content -data = data || {} if errors ul for error in errors li= error.msg form(action="." method="POST") label(for="name") Name: input( type="text" id="name" name="name" value=data.name ) label(for="email") Email: input( type="email" id="email" name="email" value=data.email ) input(type="submit" value="Submit")
Şimdi, başarılı bir kayıt gönderdiğinizde bir teşekkür mesajı görmelisiniz ve formu her iki alanı da doldurmadan gönderdiğinizde, şablon bir hata mesajı ile yeniden oluşturulmalıdır.
Bir Veri Tabanı ile Etkileşim
Artık formumuzu veritabanımıza bağlamak istiyoruz, böylece kullanıcının girdiği verileri kaydedebiliriz. Mongo'yu yerel olarak çalıştırıyorsanız, sunucuyu şu komutla başlatmayı unutmayın: mongod.
Bağlantı Ayrıntılarını Belirtme
Veritabanı bağlantı detaylarımızı belirtmek için bir yere ihtiyacımız olacak. Bunun için bir yapılandırma dosyası ( olmamalı sürüm kontrolünde kontrol edilebilir) ve dotenv paketi. Dotenv, bağlantı bilgilerimizi yapılandırma dosyasından Düğümlere yükleyecek süreç.env.
Aşağıdaki gibi yükleyin:
npm install dotenv
Ve üstündeki gerektirir start.js:
require('dotenv').config();
Ardından, adlı bir dosya oluşturun .env proje kökünde (nokta ile bir dosya adı başlatmanın belirli işletim sistemlerinde gizlenmesine neden olabileceğini unutmayın) ve Mongo bağlantı ayrıntılarınızı ilk satıra girin.
Mongo'yu yerel olarak çalıştırıyorsanız:
DATABASE=mongodb://localhost:27017/<dbname>
MLab kullanıyorsanız:
DATABASE=mongodb://<dbuser>:<dbpassword>@ds211709.mlab.com:11709/<dbname>?authSource=<dbname>
MongoDB'nin yerel kurulumlarının varsayılan bir kullanıcı veya parolaya sahip olmadığını unutmayın. Bu kesinlikle üretimde değiştirmek isteyeceğiniz bir şey, aksi takdirde bir güvenlik riski.
Veritabanına Bağlanma
Veritabanına bağlantı kurmak ve üzerinde işlem yapmak için şunu kullanacağız: Gelincik. Mongoose, MongoDB için bir ODM'dir (nesne-belge eşleştiricisidir) ve projenin ana sayfası:
Mongoose, uygulama verilerinizi modellemek için basit, şema tabanlı bir çözüm sunar. Dahili tip döküm, doğrulama, sorgu oluşturma, iş mantığı kancaları ve daha fazlasını içerir.
Bunun gerçek anlamda anlamı, veritabanımızla etkileşimi kolaylaştıran ve yazmamız gereken ortak levha miktarını azaltan Mongo üzerinde çeşitli soyutlamalar yaratmasıdır. Mongo'nun kaputun altında nasıl çalıştığı hakkında daha fazla bilgi edinmek isterseniz, MongoDB'ye Giriş.
Mongoose'ü kurmak için:
npm install mongoose
Ardından, start.js:
const mongoose = require('mongoose');
Bağlantı şu şekilde yapılır:
mongoose.connect(process.env.DATABASE, { useNewUrlParser: true, useUnifiedTopology: true
}); mongoose.connection .on('open', () => { console.log('Mongoose connection open'); }) .on('error', (err) => { console.log(`Connection error: ${err.message}`); });
Nasıl kullandığımıza dikkat edin DATABASE değişkenini .env veritabanı URL'sini belirtin.
Bu nedir start.js şimdi şöyle görünmeli:
require('dotenv').config();
const mongoose = require('mongoose'); mongoose.connect(process.env.DATABASE, { useNewUrlParser: true, useUnifiedTopology: true
}); mongoose.connection .on('open', () => { console.log('Mongoose connection open'); }) .on('error', (err) => { console.log(`Connection error: ${err.message}`); }); const app = require('./app');
const server = app.listen(3000, () => { console.log(`Express is running on port ${server.address().port}`);
});
Dosyayı kaydettiğinizde, nodemon uygulamayı yeniden başlatacak ve eğer her şey yolunda giderse “Mongoose bağlantısı açık” mesajını görmelisiniz.
Bir Firavun Faresi Şeması Tanımlama
MongoDB yapabilmek gevşek bir veritabanı olarak kullanılabilir, yani verilerin önceden nasıl görüneceğini tanımlamak gerekli değildir. Bununla birlikte, Mongoose'u onunla etkileşim kurmak için kullanıyoruz ve Mongoose'daki her şey bir plan. Mongoose'da, her şema bir MongoDB koleksiyonuyla eşleşir ve bu koleksiyondaki belgelerin şeklini tanımlar.
Bu amaçla, bir models klasöründe ve bu klasör içinde yeni bir dosya Registration.js.
Aşağıdaki kodu Registration.js:
const mongoose = require('mongoose'); const registrationSchema = new mongoose.Schema({ name: { type: String, trim: true, }, email: { type: String, trim: true, },
}); module.exports = mongoose.model('Registration', registrationSchema);
Burada, sadece bir tür tanımlıyoruz (zaten yerinde doğrulama yaptığımız için) ve Döşeme yardımcı yöntemi gereksiz beyaz alanı kullanıcı girişinden kaldırmak için. Sonra biz bir model derlemek Şema tanımından ve uygulamamızda başka bir yerde kullanmak için dışa aktarın.
Boyler plakasının son parçası, modeli start.js:
... require('./models/Registration');
const app = require('./app'); const server = app.listen(3000, () => { console.log(`Express is running on port ${server.address().port}`);
});
Veriyi Veritabanına Kaydet
Artık kullanıcı verilerini veritabanımıza kaydetmeye hazırız. Mongoose'u talep ederek ve modelimizi routes/index.js Dosya:
const express = require('express');
const mongoose = require('mongoose');
const { check, validationResult } = require('express-validator'); const router = express.Router();
const Registration = mongoose.model('Registration');
...
Şimdi, kullanıcı sunucuya veri gönderdiğinde, doğrulama başarılı olursa devam edebilir ve yeni bir Registration nesne ve kaydetmeye çalışın. Veritabanı işlemi bir Promise döndüren eşzamansız bir işlem olduğundan, .then() başarılı bir kesici uç ve a .catch() herhangi bir hata ile başa çıkmak için:
if (errors.isEmpty()) { const registration = new Registration(req.body); registration.save() .then(() => { res.send('Thank you for your registration!'); }) .catch((err) => { console.log(err); res.send('Sorry! Something went wrong.'); });
} else { ...
} ...
Şimdi, bilgilerinizi kayıt formuna girerseniz, bunlar veritabanında saklanmalıdır. Pusulayı kullanarak bunu kontrol edebilirsiniz (hala çalışıyorsa sol üstteki yenile düğmesine bastığınızdan emin olun).
Verilerimizin MongoDB'ye kaydedilip kaydedilmediğini kontrol etmek için Pusula kullanma
Veritabanından Veri Al
Uygulamayı tamamlamak için, tüm kayıtlarımızı listeleyen son bir rota oluşturalım. Umarım şimdiye kadar süreç hakkında makul bir fikre sahip olmalısınız.
Adresine yeni bir rota ekle routes/index.js, aşağıdaki gibi:
router.get('/registrations', (req, res) => { res.render('index', { title: 'Listing registrations' });
});
Bu, karşılık gelen bir görünüm şablonuna da ihtiyacımız olacağı anlamına gelir (views/index.pug):
extends layout block content p No registrations yet :(
Şimdi ziyaret ettiğinizde https://localhost:3000/registrations, herhangi bir kayıt olmadığını belirten bir mesaj görmelisiniz.
Kayıtlarımızı veritabanından alıp görünüme geçirerek düzeltelim. Yine de "Henüz kayıt yok" iletisini görüntüleyeceğiz, ancak yalnızca gerçekten yoksa.
In routes/index.js:
router.get('/registrations', (req, res) => { Registration.find() .then((registrations) => { res.render('index', { title: 'Listing registrations', registrations }); }) .catch(() => { res.send('Sorry! Something went wrong.'); });
});
Burada, Mongo'yu kullanıyoruz Koleksiyon # bulma yöntemiparametresiz çağrılırsa, koleksiyondaki tüm kayıtları döndürür. Veritabanı araması eşzamansız olduğundan, görünümü oluşturmadan önce tamamlanmasını bekliyoruz. Herhangi bir kayıt döndürüldüyse, bu kayıtlar registrations Emlak. Hiçbir kayıt döndürülmediyse, registrations boş bir dizi olacak.
In views/index.pugdaha sonra elimize geçtiğimiz her şeyin uzunluğunu kontrol edebilir ve üzerinde döngü yapabilir ve kayıtları ekrana gönderebilir veya “Kayıt yok” mesajı görüntüleyebiliriz:
extends layout block content if registrations.length table tr th Name th Email each registration in registrations tr td= registration.name td= registration.email else p No registrations yet :(
HTTP Kimlik Doğrulaması Ekle
Uygulamamıza ekleyeceğimiz son özellik HTTP kimlik doğrulamasımeraklı gözlerden başarılı kayıtlar listesini kilitler.
Bunu yapmak için, http-auth modülükullanarak yükleyebiliriz:
npm install http-auth
Daha sonra, routes/index.js, daha önce tanıştığımız Path modülüyle birlikte:
const path = require('path');
const auth = require('http-auth');
Ardından, kullanıcıları ve şifreleri listeleyeceğimiz dosyayı nerede bulacağınızı bildirin (bu durumda, users.htpasswd proje kökünde):
const basic = auth.basic({ file: path.join(__dirname, '../users.htpasswd'),
});
Bunu oluştur users.htpasswd sonra dosyaya ekleyin ve iki nokta üst üste işaretiyle ayrılmış bir kullanıcı adı ve şifre ekleyin. Bu düz metin olabilir, ancak http-auth modülü karma şifreleri de destekler, böylece şifreyi aşağıdaki gibi bir hizmet aracılığıyla da çalıştırabilirsiniz Htpasswd Jeneratör.
Benim için, içeriği users.htpasswd buna benzer:
jim:$apr1$FhFmamtz$PgXfrNI95HFCuXIm30Q4V0
Bu kullanıcıya çevirir: jim, parola: password.
Son olarak, korumak istediğiniz rotaya ekleyin ve gitmekte fayda var:
router.get('/registrations', auth.connect(basic), (req, res) => { ...
});
Express'te Statik Varlıkları Sunma
Uygulamaya biraz cila verelim ve kullanarak biraz stil ekleyelim Çizme atkısı. Yerleşik olanı kullanarak Express'te resim, JavaScript dosyaları ve CSS dosyaları gibi statik dosyaları sunabiliriz express.static ara katman yazılımı işlevi.
Kurulumu kolaydır. Aşağıdaki satırı ekleyin app.js:
app.use(express.static('public'));
Şimdi içindeki dosyaları yükleyebiliriz. public dizin.
Uygulamayı Bootstrap ile şekillendirin
Hat için bir public proje kök dizininde ve public dizin oluştur css dizin. İndir v4'ün küçültülmüş sürümünü kullanma bu dizine girerek bootstrap.min.css.
Ardından, pug şablonlarımıza biraz işaretleme eklememiz gerekecek.
In layout.pug:
doctype html
html head title= `${title}` link(rel='stylesheet', href='/css/bootstrap.min.css') link(rel='stylesheet', href='/css/styles.css') body div.container.listing-reg h1 My Amazing App block content
Burada, daha önce oluşturduğumuzdan iki dosya ekliyoruz css klasörü ve sarmalayıcı div ekleme.
In form.pug hata mesajlarına ve form öğelerine bazı sınıf adları ekliyoruz:
extends layout block content -data = data || {} if errors ul.my-errors for error in errors li= error.msg form(action="." method="POST" class="form-registration") label(for="name") Name: input( type="text" id="name" name="name" class="form-control" value=data.name ) label(for="email") Email: input( type="email" id="email" name="email" class="form-control" value=data.email ) input( type="submit" value="Submit" class="btn btn-lg btn-primary btn-block" )
Ve index.pug, daha fazlası:
extends layout block content if registrations.length table.listing-table.table-dark.table-striped tr th Name th Email each registration in registrations tr td= registration.name td= registration.email else p No registrations yet :(
Son olarak, şu adlı bir dosya oluşturun: styles.css içinde css ekleyin ve aşağıdakileri ekleyin:
body { padding: 40px 10px; background-color: #eee;
}
.listing-reg h1 { text-align: center; margin: 0 0 2rem;
} /* css for registration form and errors*/
.form-registration { max-width: 330px; padding: 15px; margin: 0 auto;
}
.form-registration { display: flex; flex-wrap: wrap;
}
.form-registration input { width: 100%; margin: 0px 0 10px;
}
.form-registration .btn { flex: 1 0 100%;
}
.my-errors { margin: 0 auto; padding: 0; list-style: none; color: #333; font-size: 1.2rem; display: table;
}
.my-errors li { margin: 0 0 1rem;
}
.my-errors li:before { content: "! Error : "; color: #f00; font-weight: bold;
} /* Styles for listing table */
.listing-table { width: 100%;
}
.listing-table th,
.listing-table td { padding: 10px; border-bottom: 1px solid #666;
}
.listing-table th { background: #000; color: #fff;
}
.listing-table td:first-child,
.listing-table th:first-child { border-right: 1px solid #666;
}
Şimdi sayfayı yenilediğinizde, tüm Bootstrap ihtişamını görmelisiniz!
Sonuç
Umarım bu dersi beğenmişsinizdir. Bir sonraki Facebook'u oluşturmamış olsak da, yine de Düğüm tabanlı web uygulamaları dünyasında bir başlangıç yapmanıza yardımcı olabileceğimi ve süreçteki bir sonraki projeniz için bazı sağlam paketler sunabileceğimi umuyorum.
Tabii ki, her şeyi tek bir öğreticide ele almak zordur ve burada inşa ettiklerimizi detaylandırmanın birçok yolu vardır. Örneğin, Düğüm uygulamalarını dağıtma hakkındaki makalemiz ve elinizi Heroku or şimdi. Alternatif olarak, kayıtları silme özelliğiyle CRUD işlevini artırabilir veya uygulamanın işlevselliğini test etmek için birkaç test bile yazabilirsiniz.
Buradan nereye giderseniz gidin, bana soru veya yorum göndermekten çekinmeyin Twitter'da.
Kaynak: https://www.sitepoint.com/build-simple-beginner-app-node-bootstrap-mongodb/?utm_source=rss
