Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

MySQL gibi ilişkisel veritabanları, geleneksel olarak tercih edilen veri tabanı seçimi olmuştur. Bununla birlikte, MongoDB gibi NoSQL veritabanları, veri depolama için esnek yapıları ve verileri hızlı bir şekilde depolama ve alma yetenekleri nedeniyle popülaritesini artırdı.

Bu veritabanları, modern web ve mobil uygulamalarla sorunsuz bir şekilde entegre edebileceğiniz alternatif bir sorgulama dili sunar. React verilerinin bir MongoDB veritabanında nasıl saklanacağını öğrenmek için okumaya devam edin.

NoSQL Veritabanı Nedir?

NoSQL, ilişkisel olmayan bir veritabanı olan Yalnızca SQL değil anlamına gelir. Bu veritabanı türü, geleneksel ilişkisel veritabanı modeline dayanmaz. Tanımlanmış bir sütun-satır yapısı yoktur ve verileri çeşitli farklı biçimlerde depolayarak daha esnek ve ölçeklenebilir hale getirir.

instagram viewer

NoSQL ile ilişkisel veritabanlarının temel farkı, NoSQL veritabanlarının satır ve sütunlar yerine dinamik bir yapıya sahip belgelerde veri depolamasıdır.

Bir MongoDB Veritabanı Kurun

MongoDB, en popüler NoSQL veritabanıdır. Verileri koleksiyonlar (veritabanları) içinde JSON benzeri belgelerde (tablolarda) depolayan açık kaynaklı bir veritabanıdır.

Basit bir MongoDB belge yapısı şöyle görünür:

{
 İlk Ad: 'Andrew',
 Rol: "Arka Uç Geliştiricisi"
}

Başlamak için önce yapmanız gerekenler bir MongoDB veritabanı kurun. MongoDB'yi yapılandırmayı bitirdikten sonra MongoDB Compass uygulamasını açın. Ardından, Yeni bağlantı Yerel olarak çalışan MongoDB sunucusuyla bağlantı oluşturmak için düğme.

MongoDB Compass GUI aracına erişiminiz yoksa, Bir veritabanı ve koleksiyon oluşturmak için MongoDB kabuk aracı.

Bağlantı URI'sini ve bağlantının adını sağlayın, ardından Kaydet ve Bağlan.

Son olarak, Veritabanı Oluştur düğmesine tıklayın, veritabanı adını girin ve bir demo koleksiyonu için bir koleksiyon adı girin.

Bir React İstemcisi Oluşturun

Bu uygulamanın kodunu kendi içinde bulabilirsiniz. GitHub deposu.

Bir React uygulamasını hızlı bir şekilde önyüklemek için yerel makinenizde bir proje klasörü oluşturun, bu dizine geçin ve geliştirme sunucusunu oluşturmak ve döndürmek için bu terminal komutlarını çalıştırın:

npx oluştur-tepki-uygulama benim-uygulamam
uygulamam cd
Npm başlangıç

Ardından, Axios'u kurun. Bu paket, verileri MongoDB veritabanınızda depolamak için arka uç Express.js sunucunuza HTTP istekleri göndermenizi sağlayacaktır.

npm kurulum eksenleri

Kullanıcı Verilerini Toplamak için Bir Demo Formu Oluşturun

Aç kaynak/Uygulama.js dosya, standart React kodunu silin ve aşağıdakiyle değiştirin:

içe aktarmak'./Uygulama.css';
içe aktarmak Tepki, { useState } itibaren'tepki';
içe aktarmak eksenler itibaren"eksen";
işlevUygulama() {
sabit [isim, setName] = useState("")
sabit [rol, setRole] = useState("")


sabit işlemeGönder = (e) => {
 e.preventDefault();


 Axios.post(' http://localhost: 4000/ekle', {
 tamAdı: ad,
 şirket Rolü: rol
 })
 }


geri dönmek (


"Uygulama">
"Uygulama başlığı"> 
"Giriş Formu">


İsim</p>


 sınıfAdı = "İsim"
 tür="metin"
 yer tutucu="İlk adı ..."
 onChange={(e) => {setName (e.target.value)}}
 />




 Şirket Rolü</p>


 sınıfAdı = "Rol"
 tür="metin"
 yer tutucu = "Rol..."
 onChange={(e) => {setRole (e.target.value)}}
 />








ihracatvarsayılan Uygulama;

Hadi parçalayalım:

  • UseState kancasını kullanarak giriş alanlarından toplanan kullanıcı verilerini tutmak için iki durum, bir ad ve bir rol durumu bildirin.
  • bu onChange yöntemi, kullanıcının form aracılığıyla gönderdiği verileri yakalamak ve depolamak için durum yöntemlerini kullanan bir geri arama çalıştırır.
  • Verileri arka uç sunucusuna göndermek için onSubmit işleyici işlevi, Axios.post durumlardan bir nesne olarak geçirilen verileri arka uç API uç noktasına gönderme yöntemi.

İşlenen formun stilini belirlemek için App.css dosyasına aşağıdaki kodu ekleyin.

* {
dolgu malzemesi: 0;
marj: 0;
kutu boyutlandırma: sınır kutusu;
}
vücut {
font ailesi: 'Poppins', sans Serif;
arka plan rengi: #8EC1D6;
}


.Giriş Formu {
marj: 100pikselOto;
Genişlik: 200piksel;
yükseklik: 250piksel;
arka plan rengi: #ffff;
sınır yarıçapı: 10piksel; 
}


.Giriş FormuP {
Metin hizalama: merkez;
yazı Boyutu: 12piksel;
yazı tipi ağırlığı: 600;
renk: #B8BFC6;
dolgu malzemesi: 10piksel 10piksel;
}


.Giriş Formugiriş {
görüntülemek: engellemek;
Genişlik: 80%;
yükseklik: 40piksel;
marj: 10pikselOto;
sınır: 1pikselsağlam#ccc;
sınır yarıçapı: 5piksel;
dolgu malzemesi: 0 10piksel;
yazı Boyutu: 16piksel;
renk: siyah;
}
.Giriş Formudüğme {
arka plan rengi: #8EC1D6;
renk: #ffff;
imleç: Işaretçi;
yazı Boyutu: 15piksel;
sınır yarıçapı:7px;
dolgu malzemesi: 5piksel 10piksel;
sınır: hiçbiri;
}

Şimdi, değişiklikleri güncellemek ve şuraya gitmek için geliştirme sunucusunu döndürün: http://localhost: Sonuçları görüntülemek için tarayıcınızda 3000.

Bir Express.js Arka Ucu Oluşturun

Bir Ekspres arka uç, React istemciniz ile MongoDB veritabanı arasında ara yazılım görevi görür. Sunucudan veri şemalarınızı tanımlayabilir ve istemci ile veritabanı arasındaki bağlantıyı kurabilirsiniz.

Ekspres web sunucusu oluşturun ve şu iki paketi kurun:

npm firavun faresi korlarını kurar

Mongoose, MongoDB ve Node.js için bir Nesne Veri Modelleme (ODM) kitaplığıdır. Uygulama verilerinizi modellemek ve bir MongoDB veritabanında depolamak için basitleştirilmiş şema tabanlı bir yöntem sağlar.

CORS (Çapraz Kaynak Paylaşımı) paketi, arka uç sunucusu ve bir ön uç istemcisinin API uç noktaları aracılığıyla iletişim kurması ve veri iletmesi için bir mekanizma sağlar.

Bir Veri Şeması Oluşturun

Sunucu proje klasörünüzün kök dizininde yeni bir klasör oluşturun ve adlandırın modeller. Bu klasörde yeni bir dosya oluşturun: dataSchema.js.

Bu durumda bir şema, veritabanınızın mantıksal yapısını temsil eder. Veri tabanındaki koleksiyonları oluşturan belgeleri (kayıtları) ve alanları (özellikleri) tanımlar.

dataSchema.js dosyasına aşağıdaki kodu ekleyin:

sabit firavun faresi = gerekmek('firavun faresi');
sabit ReactFormDataSchema = yeni firavun faresi Şema({
 isim: {
 tip: Sicim,
 gerekli: doğru
 },
 rol: {
 tip: Sicim,
 gerekli: doğru
 }
});
sabit Kullanıcı = mongoose.model("Kullanıcı", ReactFormDataSchema);
modül.exports = Kullanıcı;

Bu kod, bir Kullanıcı modeli için bir Mongoose şeması oluşturur. Bu şema, kullanıcının adı ve rolü dahil olmak üzere kullanıcı verileri için veri yapısını tanımlar. Şema daha sonra Kullanıcı için bir model oluşturmak için kullanılır. Bu, modelin verileri Şema'da tanımlanan yapıya göre bir MongoDB koleksiyonunda depolamasını sağlar.

Ekspres Sunucuyu Kurma

Ardından, index.js sunucu proje klasöründeki dosya ve bu kodu ekleyin:

sabit ifade = gerekmek('ifade etmek');
sabit firavun faresi = gerekmek('firavun faresi');
sabit korlar = gerekmek('kors');
sabit uygulama = ekspres();
sabit Kullanıcı= gerekmek('./modeller/ReactDataSchema')
app.use (express.json());
app.use (kors());


firavun faresi.connect('mongodb://localhost: 27017/reactdata', { useNewUrlParser: doğru });


uygulama.post('/sokmak', zaman uyumsuz(gerekli, res) => {
sabit FirstName = req.body.firstName
sabit CompanyRole = req.body.companyRole


sabit formVeri = yeni kullanıcı({
 ad: Ad,
 rol: CompanyRole
 })


denemek {
beklemek formData.save();
 res.gönder("veri eklendi..")
 } yakalamak(hata) {
konsol.log (hata)
 }
});


sabit bağlantı noktası = işlem.env. LİMAN || 4000;
app.listen (bağlantı noktası, () => {
konsol.kayıt(`Sunucu bağlantı noktasında başladı ${bağlantı noktası}`);
});

Hadi parçalayalım:

  • Sunucuda Express, firavun faresi ve CORS'u başlatın.
  • Mongoose paketi, kullanarak MongoDB veritabanına bağlantı kurar. bağlamak URI etki alanını ve bir nesneyi alan yöntem. URI, MongoDB veritabanıyla bağlantı kurmak için kullanılan bir bağlantı dizesidir. Nesne konfigürasyonu belirtir; bu durumda, en yeni URL ayrıştırıcı biçimini kullanmak için bir ayar içerir.
  • Web sunucusu, esas olarak farklı yollardan gelen isteklere uygun işleyici işleviyle yanıt verir. Bu durumda sunucunun, React istemcisinden veri alan, bunları bir değişkende depolayan ve içe aktarılan veri modeline ileten bir POST yolu vardır.
  • Sunucu daha sonra verileri MongoDB veritabanında depolamak ve kaydetmek için bir dene ve yakala bloğunu kullanır ve varsa hataların günlüğünü kapatır.

Son olarak, değişiklikleri güncellemek için geliştirme sunucusunu döndürün ve tarayıcınızda React istemcinize gidin. Forma herhangi bir veri yazın ve sonuçları MongoDB veritabanında görüntüleyin.

Uygulamalar Oluşturmak için MERN Yığınını Kullanma

MERN yığını, bina uygulamaları için verimli ve güçlü bir araç seti sağlar. MongoDB, Express, React ve Node.js kullanarak tam teşekküllü gerçek dünya uygulamaları oluşturabilirsiniz,

React ekosistemi, web formlarıyla çalışmanıza yardımcı olacak paketler de sağlar. En popüler olanlardan bazıları Formik, KendoReact Form ve React Hook Form'dur.