Ubuntu 18.04'te Django ve React ile Müşteri Bilgi Yönetimi için Modern Bir Web Uygulaması Nasıl Oluşturulur

giriiş

İnsanlar internete bağlanmak ve web'de gezinmek için çeşitli cihazlar kullanır. Bu nedenle, uygulamalara çeşitli konumlardan erişilebilmesi gerekir. Geleneksel web siteleri için duyarlı bir kullanıcı arayüzü genellikle yeterlidir, ancak daha karmaşık uygulamalar genellikle farklı teknik ve mimarilerin kullanımını gerektirir. Bunlar arasında, istemci tarafı web uygulamaları, aşamalı web uygulamaları (PWA'lar) veya yerel mobil uygulamalar olarak çalıştırılabilen ayrı arka uç ve ön uç REST uygulamaları bulunur.

Daha karmaşık uygulamalar oluştururken kullanabileceğiniz bazı araçlar şunlardır:

• React, geliştiricilerin REST API arka uçları için web ve yerel sayfalar oluşturmalarına olanak tanıyan bir JavaScript çerçevesidir.
• Django, Model-Görünüm-Denetleyici (MVC) yazılım mimarisi modelini izleyen ücretsiz ve açık kaynaklı bir Python web çerçevesidir.
• Django REST Framework, Django'da REST API'leri oluşturmak için güçlü ve esnek bir araç setidir.

Bu eğitimde, React, Django ve Django REST Framework kullanarak ayrı bir REST API arka ucu ve ön ucu olan modern bir web uygulaması oluşturacaksınız. React'ı Django ile birlikte kullanarak, JavaScript ve ön uç geliştirmedeki en son gelişmelerden yararlanabilirsiniz. Yerleşik şablonlama motoru kullanan bir Django uygulaması oluşturmak yerine, React'ı sanal bir Belge Nesne Modeli (DOM), bildirimsel bir yaklaşım ve verilerdeki değişiklikleri hızla işleyen bileşenler kullanan bir kullanıcı arayüzü kütüphanesi olarak kullanacaksınız.

Oluşturacağınız web uygulaması, müşteri kayıtlarını bir veritabanında saklayacak ve bunu bir CRM uygulaması için başlangıç noktası olarak kullanabilirsiniz. İşiniz bittiğinde, Bootstrap 4 ile tasarlanmış bir React arayüzü kullanarak okuma, güncelleme ve silme işlemleri yapabilirsiniz.

Ön koşullar

Bu eğitimi tamamlamak için şunlara ihtiyacınız olacak:

• Ubuntu 18.04 yüklü bir geliştirme makinesi.
• Ubuntu 18.04'te Python 3'ü Yükleme ve Yerel Geliştirme Ortamı Ayarlama adlı makalenin 1. ve 2. adımlarını izleyerek makinenize Python 3, pip ve venv'i kurabilirsiniz.
• Bilgisayarınızda Node.js 6+ ve npm 5.2 veya üzeri yüklü olmalıdır. Her ikisini de Ubuntu 18.04'e Node.js Nasıl Kurulur? başlıklı PPA'dan Kurulum bölümündeki talimatları izleyerek yükleyebilirsiniz.

Adım 1 – Bir Python sanal ortamı oluşturun ve bağımlılıkları yükleyin

Bu adımda sanal bir ortam oluşturuyoruz ve uygulamamız için gerekli bağımlılıkları yüklüyoruz. Bunlara Django, Django REST framework ve django-cors-headers dahildir.

Uygulamamız Django ve React için iki farklı geliştirme sunucusu kullanacak. Bu sunucular farklı portlarda çalışacak ve iki ayrı etki alanı gibi davranacak. Bu nedenle, tarayıcı tarafından engellenmeden React'ten Django'ya HTTP istekleri göndermek için Çapraz Kaynak Paylaşımı'nı (CORS) etkinleştirmemiz gerekiyor.

Ana dizininize gidin ve Python 3 venv modülünü kullanarak sanal bir ortam oluşturun:

cd ~
python3 -m venv ./env

Oluşturulan sanal ortamı kaynak kullanarak etkinleştirin:

source env/bin/activate

Ardından, pip ile proje bağımlılıklarını yükleyin. Bunlar şunları içerecektir:

• Django: Projenin web framework’ü.
• Django REST Framework: Django ile REST API'leri oluşturan üçüncü taraf bir uygulama.
• django-cors-headers: CORS'u etkinleştiren bir paket.

Django çerçevesini kurun:

pip install django djangorestframework django-cors-headers

Proje bağımlılıklarını yükleyerek bir Django projesi ve bir React ön yüzü oluşturabilirsiniz.

Adım 2 – Bir Django Projesi Oluşturun

Bu adımda aşağıdaki komutları ve araçları kullanarak Django projesini oluşturuyoruz:

django-admin startproject-name: django-admin, Django ile görevleri gerçekleştirmek için kullanılan bir komut satırı aracıdır. startproject komutu yeni bir Django projesi oluşturur.

python manager.py startapp myapp: manager.py, her Django projesine otomatik olarak eklenen ve bir dizi yönetim görevini gerçekleştiren bir yardımcı program betiğidir: yeni uygulamalar oluşturma, veritabanlarını taşıma ve Django projesine yerel olarak hizmet verme. startapp komutu, Django projesi içinde bir Django uygulaması oluşturur. Django'da uygulama terimi, bir projeye bir dizi özellik sağlayan bir Python paketini tanımlar.

Başlamak için django-admin startproject ile bir Django projesi oluşturun. Projemize djangoreactproject adını vereceğiz:

django-admin startproject djangoreactproject

Devam etmeden önce Django projesinin dizin yapısına tree komutunu kullanarak bakalım.

Projenizin kök dizinindeki djangoreactproject klasörüne gidin ve tree komutunu çalıştırın:

cd ~/djangoreactproject
tree

Aşağıdaki çıktıyı göreceksiniz:

Output
├── djangoreactproject
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py

~/djangoreactproject klasörü projenin köküdür. Bu klasörde, çalışmanız için önemli olan birkaç dosya bulunur:

• manager.py: Bir dizi yönetimsel görevi gerçekleştiren bir yardımcı program betiği.
• settings.py: Bir Django projesinin proje ayarlarını değiştirebileceğiniz ana yapılandırma dosyası. Bu ayarlar, projeniz için etkin uygulamaları belirleyen dizelerin bir listesi olan INSTALLED_APPS gibi değişkenleri içerir. Django belgelerinde mevcut ayarlar hakkında daha fazla bilgi bulabilirsiniz.
• urls.py: Bu dosya, URL kalıplarının ve ilişkili görünümlerin bir listesini içerir. Her kalıp, bir URL ile o URL için çağrılması gereken işlev arasındaki ilişkiyi eşler. URL'ler ve görünümler hakkında daha fazla bilgi için lütfen Django görünümlerinin nasıl oluşturulacağına dair eğitimimize bakın.

Proje üzerinde çalışmaya başlamamızın ilk adımı, önceki adımda yüklediğimiz paketleri (Django REST framework ve Django CORS paketi dahil) settings.py'ye ekleyerek yapılandırmak. Dosyayı nano veya favori düzenleyicinizle açın:

nano ~/djangoreactproject/djangoreactproject/settings.py

INSTALLED_APPS ayarlarına gidin ve listenin sonuna rest_framework ve corsheaders uygulamalarını ekleyin:

...
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders'
]

Ardından, daha önce yüklenen CORS paketinden corsheaders.middleware.CorsMiddleware ara yazılımını MIDDLEWARE yapılandırmasına ekleyin. Bu yapılandırma, web uygulamanız her istek veya yanıt gönderdiğinde işlenen kodu içeren bir Python sınıfı olan bir ara yazılım listesidir:

...
MIDDLEWARE = [
...
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware'
]

Ardından, CORS'u etkinleştirebilirsiniz. CORS_ORIGIN_ALLOW_ALL ayarı, tüm etki alanları için CORS'a izin verip vermeyeceğinizi belirtir ve CORS_ORIGIN_WHITELIST, izin verilen URL'leri içeren bir Python dizisidir. Bizim örneğimizde, React geliştirme sunucusu http://localhost:3000 adresinde çalışacağından, settings.py dosyamıza yeni CORS_ORIGIN_ALLOW_ALL = False ve CORS_ORIGIN_WHITELIST('localhost:3000',) ayarlarını ekleyeceğiz. Bu ayarları dosyanın herhangi bir yerine ekleyin:

...
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
'localhost:3000',
)
...

Daha fazla yapılandırma seçeneğini django-cors-headers belgelerinde bulabilirsiniz.

Dosyayı kaydedin ve işiniz bittiğinde düzenleyiciden çıkın.

Hala ~/djangoreactproject dizininde, Customers adında yeni bir Django uygulaması oluşturun:

python manage.py startapp customers

Buna istemci yönetim modelleri ve görünümleri de dahildir. Modeller, uygulamamızın verilerinin alanlarını ve davranışlarını tanımlarken, görünümler uygulamamızın web isteklerini düzgün bir şekilde işlemesini ve gerekli yanıtları döndürmesini sağlar.

Ardından, bu uygulamayı projenizin settings.py dosyasındaki yüklü uygulamalar listesine ekleyin, böylece Django onu projenin bir parçası olarak tanıyacaktır. settings.py dosyasını tekrar açın:

nano ~/djangoreactproject/djangoreactproject/settings.py

Müşteri uygulamasını ekleyin:

...
INSTALLED_APPS = [
...
'rest_framework',
'corsheaders',
'customers'
]
...

Ardından, veritabanını taşıyın ve yerel geliştirme sunucusunu başlatın. Taşıma işlemleri, Django'nun modellerinizde yaptığınız değişiklikleri veritabanı şemanıza aktarma yöntemidir. Bu değişiklikler, alan ekleme veya model silme gibi işlemleri içerebilir. Modeller ve taşıma işlemleri hakkında daha fazla bilgi için Django Modelleri Nasıl Oluşturulur? bölümüne bakın.

Veritabanı transferi:

python manage.py migrate

Yerel geliştirme sunucusunu başlatın:

python manage.py runserver

Aşağıdakine benzer bir çıktı göreceksiniz:

Output
Performing system checks...
System check identified no issues (0 silenced).
October 22, 2018 - 15:14:50
Django version 2.1.2, using settings 'djangoreactproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Web uygulamanız http://127.0.0.1:8000 adresinden çalışacaktır. Web tarayıcınızda bu adrese gittiğinizde aşağıdaki sayfayı görmelisiniz:

Bu noktada programı çalışır durumda bırakın ve projeyi geliştirmeye devam etmek için yeni bir terminal açın.

Adım 3 – React Ön Ucu Oluşturun

Bu bölümde projemizin ön yüz uygulamasını React kullanarak oluşturacağız.

React, Webpack'i doğrudan yapılandırmanıza gerek kalmadan React projelerini hızla oluşturmanızı sağlayan resmi bir araca sahiptir. Webpack, JavaScript kodu, CSS ve görseller gibi web varlıklarını paketlemek için kullanılan bir modül paketleyicidir. Normalde Webpack'i kullanmadan önce çeşitli yapılandırma seçenekleri ayarlamanız gerekir, ancak Create-react-app aracı sayesinde, daha fazla kontrole ihtiyaç duymadığınız sürece Webpack ile doğrudan uğraşmanıza gerek kalmaz. Create-react-app'i çalıştırmak için, npm paketli ikili dosyalarını çalıştıran bir araç olan npx'i kullanabilirsiniz.

İkinci terminalinizde proje dizininizde olduğunuzdan emin olun:

cd ~/djangoreactproject

create-react-app ve npx kullanarak frontend adında bir React projesi oluşturun:

npx create-react-app frontend

Ardından React uygulamanızın içine gidin ve geliştirme sunucusunu başlatın:

cd ~/djangoreactproject/frontend
npm start

Uygulamanız http://localhost:3000/ adresinden çalışacaktır:

React geliştirme sunucusunu çalışır durumda bırakın ve devam etmek için başka bir terminal penceresi açın.

Bu noktada tüm projenin dizin yapısını görmek için kök klasöre gidin ve ağacı tekrar çalıştırın:

cd ~/djangoreactproject
tree

Şu şekilde bir yapı göreceksiniz:

Output
├── customers
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── djangoreactproject
│ ├── __init__.py
│ ├── __pycache__
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── frontend
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ └── manifest.json
│ ├── README.md
│ ├── src
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── index.css
│ │ ├── index.js
│ │ ├── logo.svg
│ │ └── registerServiceWorker.js
│ └── yarn.lock
└── manage.py

Uygulamamız React arayüzünü biçimlendirmek için Bootstrap 4 kullanıyor, bu yüzden bunu CSS ayarlarımızı yönetecek olan frontend/src/App.css dosyasına koyacağız. Dosyayı açın:

nano ~/djangoreactproject/frontend/src/App.css

Dosyanın başına aşağıdaki girişi ekleyin. Dosyanın mevcut içeriğini silebilirsiniz, ancak bu gerekli değildir:

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

Burada @import, diğer stil sayfalarından stil kurallarını içe aktarmak için kullanılan bir CSS yönergesidir.

Artık hem Back-end hem de Front-end uygulamalarımızı oluşturduğumuza göre, Müşteri modelini ve bazı demo verilerini oluşturalım.

4. Adım – Müşteri Modeli ve İlk Verileri Oluşturun

Django uygulamasını ve React örneğini oluşturduktan sonraki adımımız, müşteri bilgilerini tutan veritabanı tablosunu temsil eden müşteri modelini oluşturmak olacak. Herhangi bir SQL bilgisine ihtiyacınız yok çünkü Django Nesne İlişkisel Eşleyici (ORM), Python sınıflarını ve değişkenlerini SQL tablolarına ve sütunlarına eşleyerek veritabanı işlemlerini gerçekleştirir. Bu şekilde, Django ORM, veritabanıyla olan SQL etkileşimlerini bir Python arayüzü aracılığıyla soyutlar.

Sanal ortamınızı yeniden etkinleştirin:

cd ~
source env/bin/activate

İstemciler dizinine gidin ve uygulamanızın modellerini barındıran bir Python dosyası olan models.py'yi açın:

cd ~/djangoreactproject/customers/
nano models.py

Dosya aşağıdaki içeriği içerecektir:

from django.db import models
# Create your models here.

Müşteri modeli API'si, import import models from django.db ifadesi sayesinde dosyaya zaten dahil edilmiştir. Şimdi, models.Model'i genişleten Müşteri sınıfını ekleyeceksiniz. Django'daki her model, django.db.models.Model'i genişleten bir Python sınıfıdır.

Müşteri modeli şu veritabanı alanlarına sahip olacaktır:

• ilk adı – Müşterinin adı.
• soy isim – Müşterinin soyadı.
• E-POSTA – Müşteri e-posta adresi.
• telefon – Müşteri telefon numarası.
• ADRES – Müşteri adresi.
• TANIM – Müşteri açıklaması.
• createAt – Müşterinin eklendiği tarih.

Ayrıca, modelin nasıl görüntüleneceğini belirten __str__() fonksiyonunu da ekliyoruz. Bizim örneğimizde bu, müşterinin adı olacak. Sınıf oluşturma ve nesne tanımlama hakkında daha fazla bilgi için lütfen Python 3'te Sınıf Oluşturma ve Nesne Tanımlama bölümüne bakın.

Dosyaya aşağıdaki kodu ekleyin:

from django.db import models
class Customer(models.Model):
first_name = models.CharField("First name", max_length=255)
last_name = models.CharField("Last name", max_length=255)
email = models.EmailField()
phone = models.CharField(max_length=20)
address = models.TextField(blank=True, null=True)
description = models.TextField(blank=True, null=True)
createdAt = models.DateTimeField("Created At", auto_now_add=True)

def __str__(self):
return self.first_name

Ardından, veritabanı tablolarını oluşturmak için veritabanını taşıyın. makemigrations komutu, model değişikliklerinin eklendiği taşıma dosyalarını oluşturur ve migrate, taşıma dosyalarındaki değişiklikleri veritabanına uygular.

Proje kök klasörüne geri dönün:

cd ~/djangoreactproject

Göç dosyalarını oluşturmak için aşağıdakileri çalıştırın:

python manage.py makemigrations

Aşağıdaki gibi bir çıktı alacaksınız:

Output
customers/migrations/0001_initial.py
- Create model Customer

Bu değişiklikleri veritabanına uygulayın:

python manage.py migrate

Başarılı bir transferin gerçekleştiğini gösteren çıktıyı göreceksiniz:

Output
Operations to perform:
Apply all migrations: admin, auth, contenttypes, customers, sessions
Running migrations:
Applying customers.0001_initial... OK

Ardından, ilk müşteri verilerini oluşturmak için bir veri aktarım dosyası kullanacaksınız. Veri aktarım dosyası, veritabanına veri ekleyen veya veritabanında değişiklik yapan bir geçiştir. Müşteriler uygulaması için boş bir veri aktarım dosyası oluşturun:

python manage.py makemigrations --empty --name customers customers

Göç dosyanızın adıyla birlikte aşağıdaki onayı göreceksiniz:

Output
Migrations for 'customers':
customers/migrations/0002_customers.py

Göç dosyanızın adının 0002_customers.py olduğunu unutmayın.

Daha sonra istemci uygulamasının migrations klasörüne gidin:

cd ~/djangoreactproject/customers/migrations

Oluşturulan geçiş dosyasını açın:

nano 0002_customers.py

Dosyanın ilk içeriği şu şekildedir:

from django.db import migrations

class Migration(migrations.Migration):
dependencies = [
('customers', '0001_initial'),
]
operations = [
]

Import ifadesi, veritabanlarıyla çalışmak için sınıflar içeren yerleşik bir paket olan django.db'den, göçler oluşturmak için bir Django API'si olan Göçler API'sini içe aktarır.

Migration sınıfı, bir veritabanını taşırken gerçekleştirilen işlemleri tanımlayan bir Python sınıfıdır. migrations.Migration sınıfını genişletir ve iki listeye sahiptir:

• bağımlılıklar: Bağımlı göçleri içerir.
• operasyonlar: Göçlerin uygulanmasıyla gerçekleştirilen işlemleri içerir.

Ardından, test müşteri verilerini oluşturmak için bir yöntem ekleyin. Migration sınıfını tanımlamadan önce aşağıdaki yöntemi ekleyin:

...
def create_data(apps, schema_editor):
Customer = apps.get_model('customers', 'Customer')
Customer(first_name="Customer 001", last_name="Customer 001", email="[email protected]", phone="00000000", address="Customer 000 Address", description= "Customer 001 description").save()
...

Bu yöntemde müşteri uygulamamızın Customer sınıfını alıp veritabanına eklemek üzere bir test müşterisi oluşturuyoruz.

Yeni müşteriler oluşturmamızı sağlayan Customer sınıfını elde etmek için apps nesnesinin get_model() metodunu kullanırız. Apps nesnesi, yüklü uygulamaların kayıt defterini ve veritabanı modellerini temsil eder.

create_data()'yı çalıştırmak için RunPython() yöntemini kullandığımızda, apps nesnesi geçirilir. migrations.RunPython() yöntemini boş işlemler listesine ekleyin:

...
operations = [
migrations.RunPython(create_data),
]

RunPython(), bir geçişte özel Python kodu çalıştırmanıza olanak tanıyan Geçiş API'sinin bir parçasıdır. İşlem listemiz, geçişi uyguladığımızda bu yöntemin çalıştırılacağını belirtir.

İşte dosyanın tamamı:

from django.db import migrations

def create_data(apps, schema_editor):
Customer = apps.get_model('customers', 'Customer')
Customer(first_name="Customer 001", last_name="Customer 001", email="[email protected]", phone="00000000", address="Customer 000 Address", description= "Customer 001 description").save()

class Migration(migrations.Migration):
dependencies = [
('customers', '0001_initial'),
]
operations = [
migrations.RunPython(create_data),
]

Veri taşıma hakkında daha fazla bilgi için Django Veri Taşıma belgelerine bakın.

Veritabanınızı taşımak için öncelikle projenizin ana klasörüne geri dönün:

cd ~/djangoreactproject

Test verilerini oluşturmak için veritabanınızı taşıyın:

python manage.py migrate

Göçü onaylayan çıktıyı göreceksiniz:

Output
Operations to perform:
Apply all migrations: admin, auth, contenttypes, customers, sessions
Running migrations:
Applying customers.0002_customers... OK

Müşteri modeli ve temsil verileri oluşturulduktan sonra REST API'yi oluşturmaya geçebiliriz.

Adım 5 – REST API'yi oluşturun

Bu adımda, Django REST çerçevesini kullanarak bir REST API oluşturacağız. Birkaç farklı API görünümü oluşturacağız. API görünümü, bir API isteğini veya çağrısını işleyen bir işlevdir; API uç noktası ise REST sistemiyle bir temas noktasını temsil eden benzersiz bir URL'dir. Örneğin, bir kullanıcı bir API uç noktasına GET isteği gönderdiğinde, Django isteği işlemek ve olası sonuçları döndürmek için ilgili işlevi veya API görünümünü çağıracaktır.

Serileştiricileri de kullanacağız. Django REST çerçevesindeki bir serileştirici, karmaşık model örneklerinin ve Sorgu Kümelerinin API kullanımı için JSON biçimine dönüştürülmesini sağlar. Serileştirici sınıfı, Django modelleri ve Sorgu Kümelerindeki verileri ayrıştırmak ve ayırmak için mekanizmalar sağlayarak ters yönde de çalışabilir.

API uç noktalarımız şunları içerecektir:

• api/customers: Bu uç nokta, müşteriler oluşturmak ve müşterilerin sayfalandırılmış koleksiyonlarını döndürmek için kullanılır.
• api/müşteriler/ : Bu uç nokta, birincil anahtar veya kimliğe göre bireysel müşterileri almak, güncellemek ve silmek için kullanılır.

Ayrıca projenin urls.py dosyasında ilgili uç noktalar için URL'ler oluşturuyoruz (yani api/customers ve api/customers/ ).

İstemci modelimiz için serileştirici sınıfını oluşturarak başlayalım.

Bir serileştirici sınıfı ekleyin

Customer modelimiz için bir serileştirici sınıfı oluşturmak, Customer örneklerini ve QuerySet'leri JSON'a ve JSON'dan dönüştürmek için önemlidir. Serileştirici sınıfını oluşturmak için önce Customers uygulamasının içinde bir serializers.py dosyası oluşturun:

cd ~/djangoreactproject/customers/
nano serializers.py

API seri ve istemci modelini içe aktarmak için aşağıdaki kodu ekleyin:

from rest_framework import serializers
from .models import Customer

Daha sonra, Serializers.ModelSerializer'ı genişleten ve serileştirilecek alanları belirten bir serileştirici sınıfı oluşturun:

...
class CustomerSerializer(serializers.ModelSerializer):

class Meta:
model = Customer
fields = ('pk','first_name', 'last_name', 'email', 'phone','address','description')

Meta sınıfı, serileştirme için modeli ve alanları belirtir: pk, first_name, last_name, email, phone, address, description.

Dosyanın tam içeriği şöyle:

from rest_framework import serializers
from .models import Customer

class CustomerSerializer(serializers.ModelSerializer):

class Meta:
model = Customer
fields = ('pk','first_name', 'last_name', 'email', 'phone','address','description')

Artık serileştirici sınıfımızı oluşturduğumuza göre API görünümlerini ekleyebiliriz.

API Görünümleri Ekleme

Bu bölümde, kullanıcı view fonksiyonuna karşılık gelen uç noktayı ziyaret ettiğinde Django tarafından çağrılacak uygulamamız için API view'ları oluşturacağız.

~/djangoreactproject/müşteriler/görünümler.py Açık:

nano ~/djangoreactproject/customers/views.py

Mevcut olanları silin ve aşağıdaki içe aktarımları ekleyin:

from rest_framework.response import Response
from rest_framework.decorators import api_view
from rest_framework import status
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from .models import Customer 
from .serializers import *

Oluşturduğumuz serileştirmeyi, istemci modeli ve Django REST framework API'leriyle birlikte içe aktarıyoruz.

Daha sonra POST ve GET HTTP isteklerini işleyecek görünümü ekleyin:

...
@api_view(['GET', 'POST'])
def customers_list(request):
"""
List customers, or create a new customer.
"""
if request.method == 'GET':
data = []
nextPage = 1
previousPage = 1
customers = Customer.objects.all()
page = request.GET.get('page', 1)
paginator = Paginator(customers, 10)
try:
data = paginator.page(page)
except PageNotAnInteger:
data = paginator.page(1)
except EmptyPage:
data = paginator.page(paginator.num_pages)
serializer = CustomerSerializer(data,context={'request': request} ,many=True)
if data.has_next():
nextPage = data.next_page_number()
if data.has_previous():
previousPage = data.previous_page_number()
return Response({'data': serializer.data , 'count': paginator.count, 'numpages' : paginator.num_pages, 'nextlink': '/api/customers/?page=' + str(nextPage), 'prevlink': '/api/customers/?page=' + str(previousPage)})
elif request.method == 'POST':
serializer = CustomerSerializer(data=request.data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data, status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Öncelikle, GET ve POST isteklerini kabul edebilen bir API görünümü oluşturmak için @api_view(['GET', 'POST']) dekoratörünü kullanıyoruz. Dekoratör, başka bir işlevi alıp dinamik olarak genişleten bir işlevdir.

Metot gövdesinde, geçerli HTTP metodunu kontrol etmek ve istek türüne bağlı olarak uygun mantığı yürütmek için request.method değişkenini kullanırız:

• İstek GET ise, bu yöntem Django Paginator'ı kullanarak verileri sayfalandırır ve serileştirmeden sonraki ilk veri sayfasını, kullanılabilir müşteri sayısını, kullanılabilir sayfa sayısını ve önceki ve sonraki sayfalara bağlantılar döndürür. Paginator, bir veri listesini sayfalara ayıran ve her sayfadaki öğelere erişim yöntemleri sağlayan yerleşik bir Django sınıfıdır.
• İstek bir POST ise, yöntem alınan istemci verilerini serileştirir ve ardından serileştirici nesnesinin save() yöntemini çağırır. Ardından, 201 durum koduna sahip bir HttpResponse örneği olan bir Response nesnesi döndürür. Oluşturduğunuz her profil, bir HttpResponse nesnesi döndürmekten sorumludur. save() yöntemi, serileştirilmiş verileri veritabanına kaydeder.

HttpResponse ve görünümler hakkında daha fazla bilgi için görünüm fonksiyonları oluşturma konusundaki bu tartışmaya bakın.

Şimdi müşterileri pk (birincil anahtar) ile almak, güncellemek ve silmek için GET, PUT ve DELETE isteklerini işlemekten sorumlu API görünümünü ekleyin:

...
@api_view(['GET', 'PUT', 'DELETE'])
def customers_detail(request, pk):
"""
Retrieve, update or delete a customer by id/pk.
"""
try:
customer = Customer.objects.get(pk=pk)
except Customer.DoesNotExist:
return Response(status=status.HTTP_404_NOT_FOUND)

if request.method == 'GET':
serializer = CustomerSerializer(customer,context={'request': request})
return Response(serializer.data)

elif request.method == 'PUT':
serializer = CustomerSerializer(customer, data=request.data,context={'request': request})
if serializer.is_valid():
serializer.save()
return Response(serializer.data)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

elif request.method == 'DELETE':
customer.delete()
return Response(status=status.HTTP_204_NO_CONTENT)

Bu yöntem, GET, PUT ve DELETE isteklerini kabul edebilen bir API görünümü olduğunu belirtmek için @api_view(['GET', 'PUT', 'DELETE']) ile dekore edilmiştir.

request.method alanındaki kontrol, istek yöntemini doğrular ve değerine bağlı olarak doğru mantığı çağırır:

• İstek GET ise, istemci verileri serileştirilir ve Response nesnesi kullanılarak gönderilir.
• Bu bir PUT isteğiyse, bu yöntem yeni istemci verileri için bir serileştirici oluşturur. Ardından, save() yöntemi oluşturulan serileştirici nesnesini çağırır. Son olarak, güncellenmiş istemciyle birlikte bir Response nesnesi gönderir.
• Eğer bir DELETE isteği ise, delete() metodu silmek için istemci nesnesinin delete() metodunu çağırır, ardından veri içermeyen bir Response nesnesi döndürür.

Tamamlanmış dosya şu şekilde görünüyor:

from rest_framework.response import Response
from rest_framework.decorators import api_view
from rest_framework import status

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from .models import Customer
from .serializers import *


@api_view(['GET', 'POST'])
def customers_list(request):
"""
List customers, or create a new customer.
"""
if request.method == 'GET':
data = []
nextPage = 1
previousPage = 1
customers = Customer.objects.all()
page = request.GET.get('page', 1)
paginator = Paginator(customers, 5)
try:
data = paginator.page(page)
except PageNotAnInteger:
data = paginator.page(1)
except EmptyPage:
data = paginator.page(paginator.num_pages)

serializer = CustomerSerializer(data,context={'request': request} ,many=True)
if data.has_next():
nextPage = data.next_page_number()
if data.has_previous():
previousPage = data.previous_page_number()

return Response({'data': serializer.data , 'count': paginator.count, 'numpages' : paginator.num_pages, 'nextlink': '/api/customers/?page=' + str(nextPage), 'prevlink': '/api/customers/?page=' + str(previousPage)})

elif request.method == 'POST':
serializer = CustomerSerializer(data=request.data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data, status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

@api_view(['GET', 'PUT', 'DELETE'])
def customers_detail(request, pk):
"""
Retrieve, update or delete a customer by id/pk.
"""
try:
customer = Customer.objects.get(pk=pk)
except Customer.DoesNotExist:
return Response(status=status.HTTP_404_NOT_FOUND)

if request.method == 'GET':
serializer = CustomerSerializer(customer,context={'request': request})
return Response(serializer.data)

elif request.method == 'PUT':
serializer = CustomerSerializer(customer, data=request.data,context={'request': request})
if serializer.is_valid():
serializer.save()
return Response(serializer.data)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

elif request.method == 'DELETE':
customer.delete()
return Response(status=status.HTTP_204_NO_CONTENT)

Artık uç noktalarımızı oluşturmaya devam edebiliriz.

API uç noktalarının eklenmesi

Şimdi müşterileri sorgulamak ve oluşturmak için API uç noktalarını oluşturacağız: api/customers/ ve api/customers/ , bireysel müşterileri pk'larına göre almak, güncellemek veya silmek için.

~/djangoreactproject/djangoreactproject/urls.py dosyasını açın:

nano ~/djangoreactproject/djangoreactproject/urls.py

Orada olanı bırakın, ancak içe aktarmayı dosyanın en üstündeki Müşteriler görünümüne ekleyin:

from django.contrib import admin
from django.urls import path
from customers import views
from django.conf.urls import url

Daha sonra api/customers/ ve api/customers/ URL'leri Uygulama URL'lerini içeren URL desenleri listesine şunu ekleyin:

...

urlpatterns = [
path('admin/', admin.site.urls),
url(r'^api/customers/$', views.customers_list),
url(r'^api/customers/(?P<pk>[0-9]+)$', views.customers_detail),
]

REST uç noktaları oluşturulduktan sonra bunları nasıl tüketebileceğimize bakalım.

Adım 6 – Axios ile REST API'yi Kullanma

Bu adımda, API çağrıları yapmak için kullanacağımız HTTP istemcisi olan Axios'u kuracağız. Ayrıca, oluşturduğumuz API uç noktalarını tüketecek bir sınıf da oluşturacağız.

Öncelikle sanal ortamınızı devre dışı bırakın:

deactivate

Daha sonra ön uç klasörünüze gidin:

cd ~/djangoreactproject/frontend

Axios'u npm'den şu şekilde kurun:

npm install axios --save

–save seçeneği, uygulamanızın package.json dosyasına axios bağımlılığını ekler.

Ardından, REST API'lerini çağırmak için gereken kodu içeren CustomersService.js adlı bir JavaScript dosyası oluşturun. Bunu, projemizin uygulama kodunun bulunduğu src klasöründe oluşturacağız:

cd src
nano CustomersService.js

Django REST API'sine bağlanmak için yöntemler içeren aşağıdaki kodu ekleyin:

import axios from 'axios';
const API_URL = 'http://localhost:8000';

export default class CustomersService{

constructor(){}


getCustomers() {
const url = `${API_URL}/api/customers/`;
return axios.get(url).then(response => response.data);
}
getCustomersByURL(link){
const url = `${API_URL}${link}`;
return axios.get(url).then(response => response.data);
}
getCustomer(pk) {
const url = `${API_URL}/api/customers/${pk}`;
return axios.get(url).then(response => response.data);
}
deleteCustomer(customer){
const url = `${API_URL}/api/customers/${customer.pk}`;
return axios.delete(url);
}
createCustomer(customer){
const url = `${API_URL}/api/customers/`;
return axios.post(url,customer);
}
updateCustomer(customer){
const url = `${API_URL}/api/customers/${customer.pk}`;
return axios.put(url,customer);
}
}

CustomersService sınıfı aşağıdaki Axios yöntemlerini çağırır:

• getCustomers(): Müşterilerin ilk sayfasını getirir.
• getCustomersByURL(): Müşterileri URL'ye göre alır. Bu, /api/customers/?page=2 gibi bağlantılar ile sonraki müşteri sayfalarına erişmenizi sağlar.
• getCustomer(): Müşteriyi birincil anahtara göre alır.
• createCustomer(): Bir müşteri oluşturur.
• updateCustomer(): Bir müşteriyi günceller.
• deleteCustomer(): Bir müşteriyi siler.

Artık CustomersList bileşenini oluşturarak API verilerimizi React UI'da görüntüleyebiliriz.

Adım 7 – API'den gelen verileri React uygulamasında görüntüleme

Bu adımda, CustomersList React bileşenini oluşturacağız. Bir React bileşeni, kullanıcı arayüzünün bir parçasını temsil eder. Ayrıca, kullanıcı arayüzünü bağımsız, yeniden kullanılabilir parçalara bölmenize de olanak tanır.

Öncelikle frontend/src'de CustomersList.js'yi oluşturarak başlayalım:

nano ~/djangoreactproject/frontend/src/CustomersList.js

React bileşeni oluşturmak için öncelikle React ve Component'i içe aktarın:

import React, { Component } from 'react';

Daha sonra, önceki adımda oluşturduğunuz ve arka uç REST API'siyle iletişim kuran yöntemler sağlayan CustomersService modülünü içe aktarın ve örnekleştirin:

...
import CustomersService from './CustomersService';
const customersService = new CustomersService();

Ardından, REST API'yi çağırmak için Component sınıfını genişleten bir CustomersList bileşeni oluşturun. Bir React bileşeni, Component sınıfını genişletmeli veya alt sınıfa ayırmalıdır. E6 sınıfları ve kalıtım hakkında daha fazla bilgi için lütfen JavaScript'te sınıfları anlama eğitimimize bakın.

react.Component'ı genişleten bir React bileşeni oluşturmak için aşağıdaki kodu ekleyin:

...
class CustomersList extends Component {

constructor(props) {
super(props);
this.state = {
customers: [],
nextPageURL: ''
};
this.nextPage = this.nextPage.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}
}
export default CustomersList;

Oluşturucunun içinde durum nesnesini başlatıyoruz. Bu nesne, bileşenimizin durum değişkenlerini boş bir müşteri dizisi kullanarak tutar. Bu dizi, müşterileri ve destek API'sinden alınacak bir sonraki sayfanın URL'sini tutan nextPageURL'yi tutar. Ayrıca, HTML kodundan erişilebilmeleri için nextPage() ve handleDelete() yöntemlerini de buna ekliyoruz.

Daha sonra CustomersList sınıfında, kapanış süslü parantezinden önce bir componentDidMount() metodu ve getCustomers() çağrısı ekleyin.

componentDidMount() yöntemi, bileşen oluşturulduğunda ve DOM'a eklendiğinde çağrılan bir bileşen yaşam döngüsü yöntemidir. getCustomers(), Django arka ucundan ilk sayfadaki verileri ve sonraki sayfa bağlantısını almak için Customer Service nesnesini çağırır:

...
componentDidMount() {
var self = this;
customersService.getCustomers().then(function (result) {
self.setState({ customers: result.data, nextPageURL: result.nextlink})
});
}

Şimdi, istemci silme işlemini gerçekleştiren handleDelete() metodunu componentDidMount()'un altına ekleyin:

...
handleDelete(e,pk){
var self = this;
customersService.deleteCustomer({pk : pk}).then(()=>{
var newArr = self.state.customers.filter(function(obj) {
return obj.pk !== pk;
});
self.setState({customers: newArr})
});
}

handleDelete yöntemi, müşteriyi pk (birincil anahtar) kullanarak silmek için deleteCustomer() yöntemini çağırır. İşlem başarılı olursa, customers dizisi silinen müşteri için filtrelenir.

Daha sonra, bir sonraki sayfanın verilerini almak ve bir sonraki sayfa bağlantısını güncellemek için nextPage() metodunu ekleyin:

...
nextPage(){
var self = this;
customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {
self.setState({ customers: result.data, nextPageURL: result.nextlink})
});
}

nextPage() yöntemi, bir sonraki sayfanın URL'sini durum nesnesinden (this.state.nextPageURL) alan getCustomersByURL() yöntemini çağırır ve döndürülen verilerle customers dizisini günceller.

Son olarak, bileşenin durumundan müşterilerin bir tablosunu oluşturan bileşenin render() metodunu ekleyin:

...
render() {

return (
<div className="customers--list">
<table className="table">
<thead key="thead">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Email</th>
<th>Address</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{this.state.customers.map( c =>
<tr key={c.pk}>
<td>{c.pk} </td>
<td>{c.first_name}</td>
<td>{c.last_name}</td>
<td>{c.phone}</td>
<td>{c.email}</td>
<td>{c.address}</td>
<td>{c.description}</td>
<td>
<button onClick={(e)=> this.handleDelete(e,c.pk) }> Delete</button>
<a href={"/customer/" + c.pk}> Update</a>
</td>
</tr>)}
</tbody>
</table>
<button className="btn btn-primary" onClick= { this.nextPage }>Next</button>
</div>
);
}

Dosyanın tam içeriği şöyle:

import React, { Component } from 'react';
import CustomersService from './CustomersService';

const customersService = new CustomersService();

class CustomersList extends Component {

constructor(props) {
super(props);
this.state = {
customers: [],
nextPageURL: ''
};
this.nextPage = this.nextPage.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}

componentDidMount() {
var self = this;
customersService.getCustomers().then(function (result) {
console.log(result);
self.setState({ customers: result.data, nextPageURL: result.nextlink})
});
}
handleDelete(e,pk){
var self = this;
customersService.deleteCustomer({pk : pk}).then(()=>{
var newArr = self.state.customers.filter(function(obj) {
return obj.pk !== pk;
});

self.setState({customers: newArr})
});
}

nextPage(){
var self = this;
console.log(this.state.nextPageURL);
customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {
self.setState({ customers: result.data, nextPageURL: result.nextlink})
});
}
render() {

return (
<div className="customers--list">
<table className="table">
<thead key="thead">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Email</th>
<th>Address</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{this.state.customers.map( c =>
<tr key={c.pk}>
<td>{c.pk} </td>
<td>{c.first_name}</td>
<td>{c.last_name}</td>
<td>{c.phone}</td>
<td>{c.email}</td>
<td>{c.address}</td>
<td>{c.description}</td>
<td>
<button onClick={(e)=> this.handleDelete(e,c.pk) }> Delete</button>
<a href={"/customer/" + c.pk}> Update</a>
</td>
</tr>)}
</tbody>
</table>
<button className="btn btn-primary" onClick= { this.nextPage }>Next</button>
</div>
);
}
}
export default CustomersList;

Müşterilerin listesini görüntülemek için CustomersList bileşenini oluşturduğumuza göre, şimdi müşteri oluşturma ve güncelleme işlemlerini gerçekleştiren bir bileşen ekleyebiliriz.

Adım 8 – React Oluşturma Bileşenini Ekleyin ve İstemciyi Güncelleyin

Bu adımda, müşteri oluşturma ve güncelleme işlemlerini gerçekleştiren CustomerCreateUpdate bileşenini oluşturuyoruz. Bu bileşen, kullanıcıların yeni müşteri verilerini girmek veya mevcut girişleri güncellemek için kullanabilecekleri bir form sağlayarak bunu gerçekleştirir.

Frontend/src'de CustomerCreateUpdate.js dosyasını oluşturun:

nano ~/djangoreactproject/frontend/src/CustomerCreateUpdate.js

React ve Component'i içe aktararak bir React bileşeni oluşturmak için aşağıdaki kodu ekleyin:

import React, { Component } from 'react';

Önceki adımda oluşturduğumuz ve arka uç REST API ile iletişim kuran yöntemler sağlayan CustomersService sınıfını da içe aktarabilir ve örneklendirebiliriz:

...
import CustomersService from './CustomersService';

const customersService = new CustomersService();

Daha sonra, müşterileri oluşturmak ve güncellemek için Component'i genişleten bir CustomerCreateUpdate bileşeni oluşturun:

...
class CustomerCreateUpdate extends Component {

constructor(props) {
super(props);
}
}
export default CustomerCreateUpdate;

Sınıf tanımında, müşteri bilgilerini yakalayan bir HTML formu oluşturan bileşenin render() metodunu ekleyin:

...
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label>
First Name:</label>
<input className="form-control" type="text" ref='firstName' />

<label>
Last Name:</label>
<input className="form-control" type="text" ref='lastName'/>

<label>
Phone:</label>
<input className="form-control" type="text" ref='phone' />

<label>
Email:</label>
<input className="form-control" type="text" ref='email' />

<label>
Address:</label>
<input className="form-control" type="text" ref='address' />

<label>
Description:</label>
<textarea className="form-control" ref='description' ></textarea>

<input className="btn btn-primary" type="submit" value="Submit" />
</div>
</form>
);
}

Her form giriş öğesi için, yöntem form öğesinin değerine erişmek ve onu ayarlamak için bir ref niteliği ekler.

Daha sonra, kullanıcı gönder düğmesine tıkladığında uygun davranışı sergilemek için render() metodunun üstünde bir handleSubmit(event) metodu tanımlayın:

...
handleSubmit(event) {
const { match: { params } } = this.props;
if(params && params.pk){
this.handleUpdate(params.pk);
}
else
{
this.handleCreate();
}
event.preventDefault();
}
...

handleSubmit(event) yöntemi, form gönderimini yönetir ve rotaya bağlı olarak, istemciyi iletilen pk ile güncellemek için handleUpdate(pk) yöntemini veya yeni bir istemci oluşturmak için handleCreate() yöntemini çağırır. Bu yöntemleri birazdan tanımlayacağız.

Bileşen oluşturucusuna geri döndüğünüzde, yeni eklenen handleSubmit() metodunu buna bağlayın, böylece formunuzda buna erişebilirsiniz:

...
class CustomerCreateUpdate extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
...

Ardından, form verilerinden müşteriyi oluşturmak için handleCreate() metodunu tanımlayın. handleSubmit(event) metodunun üstüne aşağıdaki kodu ekleyin:

...
handleCreate(){
customersService.createCustomer(
{
"first_name": this.refs.firstName.value,
"last_name": this.refs.lastName.value,
"email": this.refs.email.value,
"phone": this.refs.phone.value,
"address": this.refs.address.value,
"description": this.refs.description.value
}).then((result)=>{
alert("Customer created!");
}).catch(()=>{
alert('There was an error! Please re-check your form.');
});
}
...

handleCreate() yöntemi, giriş verilerinden bir müşteri oluşturmak için kullanılır. Müşteriyi oluşturmak için arka uçtaki gerçek API'yi çağıran ilgili CustomersService.createCustomer() yöntemini çağırır.

Daha sonra handleCreate metodunun altında, güncellemeleri uygulamak için handleUpdate(pk) metodunu tanımlayın:

...
handleUpdate(pk){
customersService.updateCustomer(
{
"pk": pk,
"first_name": this.refs.firstName.value,
"last_name": this.refs.lastName.value,
"email": this.refs.email.value,
"phone": this.refs.phone.value,
"address": this.refs.address.value,
"description": this.refs.description.value
}
).then((result)=>{

alert("Customer updated!");
}).catch(()=>{
alert('There was an error! Please re-check your form.');
});
}

updateCustomer() yöntemi, müşteri bilgi formundaki yeni bilgileri kullanarak müşteriyi günceller. customersService.updateCustomer() yöntemini çağırır.

Ardından bir componentDidMount() metodu ekleyin. Kullanıcı customer/:pk rotasını ziyaret ederse, formu URL'deki birincil anahtarı kullanarak müşteri bilgileriyle doldurmak istiyoruz. Bunu yapmak için, componentDidMount() yaşam döngüsü olayında bileşen bağlandıktan sonra getCustomer(pk) metodunu ekleyebiliriz. Bu metodu eklemek için, bileşen oluşturucusunun altına aşağıdaki kodu ekleyin:

...
componentDidMount(){
const { match: { params } } = this.props;
if(params && params.pk)
{
customersService.getCustomer(params.pk).then((c)=>{
this.refs.firstName.value = c.first_name;
this.refs.lastName.value = c.last_name;
this.refs.email.value = c.email;
this.refs.phone.value = c.phone;
this.refs.address.value = c.address;
this.refs.description.value = c.description;
})
}
}

Dosyanın tam içeriği şöyle:

import React, { Component } from 'react';
import CustomersService from './CustomersService';
const customersService = new CustomersService();
class CustomerCreateUpdate extends Component {
constructor(props) {
super(props);

this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount(){
const { match: { params } } = this.props;
if(params && params.pk)
{
customersService.getCustomer(params.pk).then((c)=>{
this.refs.firstName.value = c.first_name;
this.refs.lastName.value = c.last_name;
this.refs.email.value = c.email;
this.refs.phone.value = c.phone;
this.refs.address.value = c.address;
this.refs.description.value = c.description;
})
}
}
handleCreate(){
customersService.createCustomer(
{
"first_name": this.refs.firstName.value,
"last_name": this.refs.lastName.value,
"email": this.refs.email.value,
"phone": this.refs.phone.value,
"address": this.refs.address.value,
"description": this.refs.description.value
} 
).then((result)=>{
alert("Customer created!");
}).catch(()=>{
alert('There was an error! Please re-check your form.');
});
}
handleUpdate(pk){
customersService.updateCustomer(
{
"pk": pk,
"first_name": this.refs.firstName.value,
"last_name": this.refs.lastName.value,
"email": this.refs.email.value,
"phone": this.refs.phone.value,
"address": this.refs.address.value,
"description": this.refs.description.value
} 
).then((result)=>{
console.log(result);
alert("Customer updated!");
}).catch(()=>{
alert('There was an error! Please re-check your form.');
});
}
handleSubmit(event) {
const { match: { params } } = this.props;
if(params && params.pk){
this.handleUpdate(params.pk);
}
else
{
this.handleCreate();
}
event.preventDefault();
}

render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label>
First Name:</label>
<input className="form-control" type="text" ref='firstName' />

<label>
Last Name:</label>
<input className="form-control" type="text" ref='lastName'/>

<label>
Phone:</label>
<input className="form-control" type="text" ref='phone' />

<label>
Email:</label>
<input className="form-control" type="text" ref='email' />

<label>
Address:</label>
<input className="form-control" type="text" ref='address' />

<label>
Description:</label>
<textarea className="form-control" ref='description' ></textarea>

<input className="btn btn-primary" type="submit" value="Submit" />
</div>
</form>
);
} 
}
export default CustomerCreateUpdate;

CustomerCreateUpdate bileşenini oluşturarak, oluşturduğumuz çeşitli bileşenlere bağlantılar eklemek için ana Uygulama bileşenini güncelleyebiliriz.

Adım 9 – Ana uygulama bileşenini güncelleyin

Bu bölümde, Uygulama bileşenimizi önceki adımlarda oluşturduğumuz bileşenlere bağlanacak şekilde güncelleyeceğiz.

Ön uç klasöründen, farklı React bileşenleri arasında yönlendirme ve gezinme eklemenize olanak tanıyan React yönlendiricisini yüklemek için aşağıdaki komutu çalıştırın:

cd ~/djangoreactproject/frontend
npm install --save react-router-dom

Daha sonra ~/djangoreactproject/frontend/src/App.js dosyasını açın:

nano ~/djangoreactproject/frontend/src/App.js

Mevcut tüm öğeleri silin ve yönlendirme eklemek için gerekli sınıfları içe aktarmak üzere aşağıdaki kodu ekleyin. Bunlar, bir Yönlendirici bileşeni oluşturan BrowserRouter ve bir Rota bileşeni oluşturan Route'dur:

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom'
import { Route, Link } from 'react-router-dom'
import CustomersList from './CustomersList'
import CustomerCreateUpdate from './CustomerCreateUpdate'
import './App.css';

BrowserRouter, HTML5 geçmiş API'sini kullanarak kullanıcı arayüzünü URL ile senkronize tutar.

Sonra, BrowserRouter bileşeni tarafından sarılacak temel bileşeni sağlayan bir temel düzen oluşturun:

...
const BaseLayout = () => (
<div className="container-fluid">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Django React Demo</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<a className="nav-item nav-link" href="/">CUSTOMERS</a>
<a className="nav-item nav-link" href="/customer">CREATE CUSTOMER</a>
</div>
</div>
</nav>
<div className="content">
<Route path="/" exact component={CustomersList} />
<Route path="/customer/:pk" component={CustomerCreateUpdate} />
<Route path="/customer/" exact component={CustomerCreateUpdate} />
</div>
</div>
)

Uygulama rotalarımızı tanımlamak için Route bileşenini kullanıyoruz. Bu bileşen, yönlendiricinin bir eşleşme bulunur bulunmaz yüklemesi gereken bileşendir. Her rota, eşleştirilecek rotayı belirtmek için bir rota ve eşleştirilecek bileşeni belirtmek için bir bileşen gerektirir. exact niteliği, yönlendiriciye rotayı tam olarak eşleştirmesini söyler.

Son olarak, React uygulamamızın ana veya en üst düzey bileşeni olan App bileşenini oluşturun:

...
class App extends Component {
render() {
return (
<BrowserRouter>
<BaseLayout/>
</BrowserRouter>
);
}
}
export default App;

Uygulamamız tarayıcıda çalışacağı için BaseLayout bileşenini BrowserRouter bileşeniyle sardık.

Tamamlanmış dosya şu şekilde görünüyor:

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom'
import { Route, Link } from 'react-router-dom'
import CustomersList from './CustomersList'
import CustomerCreateUpdate from './CustomerCreateUpdate'
import './App.css';
const BaseLayout = () => (
<div className="container-fluid">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Django React Demo</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<a className="nav-item nav-link" href="/">CUSTOMERS</a>
<a className="nav-item nav-link" href="/customer">CREATE CUSTOMER</a>

</div>
</div>
</nav>
<div className="content">
<Route path="/" exact component={CustomersList} />
<Route path="/customer/:pk" component={CustomerCreateUpdate} />
<Route path="/customer/" exact component={CustomerCreateUpdate} />
</div>
</div>
)
class App extends Component {
render() {
return (
<BrowserRouter>
<BaseLayout/>
</BrowserRouter>
);
}
}
export default App;

Uygulamamıza yönlendirmeyi ekledikten sonra, uygulamayı test etmeye hazırız. http://localhost:3000 adresine gidin. Uygulamanın ana sayfasını görmelisiniz:

Bu programla artık bir CRM programının temeline sahipsiniz.

Sonuç

Bu eğitimde, Django ve React kullanarak bir demo uygulaması oluşturdunuz. REST API'yi oluşturmak için Django REST çerçevesini, API'yi kullanmak için Axios'u ve CSS stiliniz için Bootstrap 4'ü kullandınız. Bu projenin kaynak kodunu bu GitHub deposunda bulabilirsiniz.