Aracılığıyla paylaş


4. Adım: Django Web Projesi şablonunun tamamını kullanma

Önceki adım: Statik dosyalar sunma, sayfa ekleme ve şablon devralmayı kullanma

Visual Studio'da Django'nun temellerini incelediğinize göre, "Django Web Projesi" şablonu tarafından sunulan daha eksiksiz uygulamayı kolayca anlayabilirsiniz.

Bu adımda, şimdi şunları gerçekleştirirsiniz:

  • "Django Web Projesi" şablonunu kullanarak daha dolu bir Django web uygulaması oluşturun ve proje yapısını inceleyin (4-1. adım)
  • Temel sayfa şablonundan devralınan ve jQuery ve Bootstrap gibi statik JavaScript kitaplıklarını kullanan üç sayfadan oluşan proje şablonu tarafından oluşturulan görünümleri ve sayfa şablonlarını anlayın (4-2. adım)
  • Şablon tarafından sağlanan URL yönlendirmesini anlama (4-3. adım)

Şablon, 5. Adımda ele alınan temel kimlik doğrulamasını da sağlar.

4-1. Adım: Şablondan proje oluşturma

  1. Visual Studio'da Çözüm Gezgini gidin, bu öğreticinin önceki bölümlerinde oluşturulan LearningDjango çözümüne sağ tıklayın. Ardından Yeni Proje Ekle'yi>seçin. (Yeni bir çözüm kullanmak istiyorsanızBunun yerine Yeni>Proje'ye dosya> ekleyin.)

  2. Yeni Proje iletişim kutusunda Django Web Projesi şablonunu arayın ve seçin. Projeyi "DjangoWeb" olarak çağırın ve oluştur'u seçin.

  3. Şablon bir requirements.txt dosyası içerdiğinden, Visual Studio bağımlılıkları yüklemek için konumu ister. İstendiğinde, Sanal ortama yükle seçeneğini belirleyin ve Sanal Ortam Ekle iletişim kutusunda Oluştur'u seçerek varsayılanları kabul edin.

  4. Visual Studio sanal ortamı ayarlamayı tamamladığında, bir Django süper kullanıcısı (yönetici) oluşturmak için readme.html dosyasında görüntülenen yönergeleri izleyin. Visual Studio projesine sağ tıklayın ve Python>Django Create Superuser komutunu seçin, ardından istemleri izleyin. Uygulamanın kimlik doğrulama özelliklerini kullanırken kullanıcı adınızı ve parolanızı kullanırken kaydettiğinizden emin olun.

  5. Çözüm Gezgini'daprojeye sağ tıklayıp Başlangıç Projesi Olarak Ayarla'yı seçerek DjangoWeb projesini Visual Studio çözümü için varsayılan olarak ayarlayın. Kalın olarak gösterilen başlangıç projesi, hata ayıklayıcıyı başlattığınızda çalıştırılan projedir.

    Solution Explorer showing the DjangoWeb project as the startup project.

  6. Hata AyıklamaYı>Başlat Hata Ayıklama (F5) öğesini seçin veya sunucuyu çalıştırmak için araç çubuğundaki Web Sunucusu düğmesini kullanın.

    Run web server toolbar button in Visual Studio.

  7. Şablon tarafından oluşturulan uygulamanın Giriş, Hakkında ve Kişi olarak üç sayfası vardır. Gezinti çubuğunu kullanarak sayfalar arasında gezinebilirsiniz. Uygulamanın farklı bölümlerini incelemek için bir veya iki dakika bekleyin. Oturum aç komutu aracılığıyla uygulamayla kimlik doğrulaması yapmak için daha önce oluşturulan süper kullanıcı kimlik bilgilerini kullanın.

    Full browser view of the Django Web Project app.

  8. "Django Web Projesi" şablonu tarafından oluşturulan uygulama, mobil form faktörlerine uygun yanıt veren düzen için Bootstrap'i kullanır. Bu yanıt hızını görmek için, içeriğin dikey olarak işlenmesi ve gezinti çubuğunun menü simgesine dönüşmesi için tarayıcıyı dar bir görünüme yeniden boyutlandırın.

    Mobile (narrow) view of the Django Web Project app.

  9. Uygulamayı sonraki bölümler için çalışır durumda bırakabilirsiniz.

    Uygulamayı durdurmak ve değişiklikleri kaynak denetimine işlemek istiyorsanız, Ekip Gezgini'nde Değişiklikler sayfasını açın, sanal ortamın klasörüne (büyük olasılıkla env) sağ tıklayın ve Bu yerel öğeleri yoksay'ı seçin.

Şablonun ne oluşturduğunu inceleme

En geniş düzeyde, "Django Web Projesi" şablonu aşağıdaki yapıyı oluşturur:

  • Proje kökündeki dosyalar:
    • manage.py: Django yönetim yardımcı programı.
    • db.sqlite3: Varsayılan SQLite veritabanı.
    • requirements.txt: Django 1.x'e bağımlılık içerir.
    • readme.html: Projeyi oluşturduktan sonra Visual Studio'da görüntülenen bir dosya. Önceki bölümde belirtildiği gibi, uygulama için bir süper kullanıcı (yönetici) hesabı oluşturmak için buradaki yönergeleri izleyin.
  • Uygulama klasörü görünümler, modeller, testler, formlar, şablonlar ve statik dosyalar da dahil olmak üzere tüm uygulama dosyalarını içerir (bkz. 4-2. adım). Bu klasörü genellikle daha ayırt edici bir uygulama adı kullanacak şekilde yeniden adlandırırsınız.
  • DjangoWeb (Django projesi) klasörü tipik Django proje dosyalarını içerir: __init__.py, settings.py, urls.py ve wsgi.py. settings.py dosyası, proje şablonu kullanılarak uygulama ve veritabanı dosyası için zaten yapılandırılmıştır. urls.py dosyası, oturum açma formu da dahil olmak üzere tüm uygulama sayfalarının yolları ile zaten ayarlanmıştır.

Soru: Visual Studio projeleri arasında sanal ortam paylaşmak mümkün mü?

Yanıt: Evet, ancak bunu farklı projelerin büyük olasılıkla zaman içinde farklı paketler kullandığı farkındalığıyla yapın. Bu nedenle, paylaşılan bir sanal ortamın onu kullanan tüm projeler için tüm paketleri içermesi gerekir.

Bununla birlikte, mevcut bir sanal ortamı kullanmak için aşağıdaki adımları izleyin:

  1. Visual Studio'da bağımlılıkları yüklemeniz istendiğinde, Bunları kendim yükleyeyim seçeneğini belirleyin.
  2. Çözüm Gezgini Python Ortamları düğümüne sağ tıklayın ve Var Olan Sanal Ortamı Ekle'yi seçin.
  3. Sanal ortamı içeren klasöre gidin ve seçin, ardından Tamam'ı seçin.

4-2. Adım: Proje şablonu tarafından oluşturulan görünümleri ve sayfa şablonlarını anlama

Projeyi çalıştırdığınızda gözlemlediğiniz gibi uygulama üç görünüm içerir: Giriş, Hakkında ve Kişi. Bu görünümlerin kodu views.py dosyasında bulunur. Her görünüm işlevi, bir şablonun yolu ve basit bir sözlük nesnesiyle çağrır django.shortcuts.render . Örneğin, Hakkında sayfası işlevi tarafından about işlenir:

def about(request):
    """Renders the about page."""
    assert isinstance(request, HttpRequest)
    return render(
        request,
        'app/about.html',
        {
            'title':'About',
            'message':'Your application description page.',
            'year':datetime.now().year,
        }
    )

Şablonlar, uygulamanın şablonlar/uygulama klasöründe bulunur (ve genellikle uygulamayı gerçek uygulamanızın adıyla yeniden adlandırmak istersiniz). En kapsamlı şablon olan layout.html temel şablonudur. layout.html dosyası tüm gerekli statik dosyaları (JavaScript ve CSS) ifade eder. Layout.html dosyası, diğer sayfaların geçersiz kıldığını "content" adlı bir bloğu da tanımlar ve "betikler" adlı başka bir blok sağlar. Layout.html dosyasından aşağıdaki açıklamalı alıntılar bu belirli alanları gösterir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <!-- Define a viewport for Bootstrap's responsive rendering -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - My Django Application</title>

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
    <script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>
<body>
    <!-- Navbar omitted -->

    <div class="container body-content">

<!-- "content" block that pages are expected to override -->
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; {{ year }} - My Django Application</p>
        </footer>
    </div>

<!-- Additional scripts; use the "scripts" block to add page-specific scripts.  -->
    <script src="{% static 'app/scripts/jquery-1.10.2.js' %}"></script>
    <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
    <script src="{% static 'app/scripts/respond.js' %}"></script>
{% block scripts %}{% endblock %}

</body>
</html>

Hakkında.html, contact.html ve index.html gibi tek tek sayfa şablonlarının her biri temel şablon layout.html dosyasını genişletir. about.html şablon dosyası en basittir ve ve {% block content %} etiketlerini {% extends %} gösterir:

{% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<p>Use this area to provide additional information.</p>

{% endblock %}

index.html ve contact.html şablon dosyaları aynı yapıyı kullanır ve "content" bloğunda daha uzun içerik sağlar.

Templates/app klasöründe ayrıca, kullanılarak {% include %}layout.html dosyasına getirilen loginpartial.html ile birlikte dördüncü bir login.html sayfası bulunur. Bu şablon dosyaları kimlik doğrulamasıyla ilgili 5. adımda ele alınıyor.

Soru: Django sayfa şablonunda {% block %} ve {% endblock %} girintili olabilir mi?

Yanıt: Evet. Django sayfa şablonları, blok etiketlerini girintili hale getirdiğinizde düzgün çalışır, belki de bunları uygun üst öğeleriyle hizalamak için. Blok etiketlerinin yerleştirildiği yeri net bir şekilde görüntülemek için, Visual Studio sayfa şablonları blok etiketlerini girintilemiyor.

4-3. Adım: Şablon tarafından oluşturulan URL yönlendirmesini anlama

"Django Web Projesi" şablonu tarafından oluşturulan Django projesinin urls.py dosyası aşağıdaki kodu içerir:

from datetime import datetime
from django.urls import path
from django.contrib import admin
from django.contrib.auth.views import LoginView, LogoutView
from app import forms, views

urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('login/',
         LoginView.as_view
         (
             template_name='app/login.html',
             authentication_form=forms.BootstrapAuthenticationForm,
             extra_context=
             {
                 'title': 'Log in',
                 'year' : datetime.now().year,
             }
         ),
         name='login'),
    path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
    path('admin/', admin.site.urls),
]

İlk üç URL deseni doğrudan homeuygulamanın views.py dosyasındaki , contactve about görünümlerine eşler. Ve desenleri ^login/$^logout$ise uygulama tanımlı görünümler yerine yerleşik Django görünümlerini kullanır. Yöntemine yapılan çağrılar url , görünümü özelleştirmek için ek veriler de içerir. 5. adım bu çağrıları inceler.

Soru: Oluşturduğum projede neden "hakkında" URL deseni burada gösterildiği gibi '^about$' yerine '^about' kullanıyor?

Yanıt: Normal ifadede sondaki '$' değerinin olmaması, proje şablonunun birçok sürümünde basit bir gözetimdi. URL düzeni , "hakkında" adlı bir sayfa için mükemmel şekilde çalışır. Ancak, sondaki '$' olmadan URL deseni "about=django", "about09876", "aboutoflaughter" gibi URL'lerle de eşleşir. Sonundaki '$' yalnızca "hakkında" ile eşleşen bir URL deseni oluşturmak için burada gösterilir.

Sonraki adımlar

Daha derine git