Przewodnik tworzenia aplikacji do skracania adresów URL za pomocą Django

Najlepszym sposobem na nauczenie się Django lub jakiejkolwiek innej umiejętności jest zastosowanie posiadanej wiedzy poprzez tworzenie funkcjonalnych projektów.

Django to najczęściej używany framework do tworzenia stron internetowych w Pythonie. Wbudowane funkcje i duża liczba pakietów innych firm sprawiły, że jest to jeden z najbardziej lubianych frameworków internetowych na całym świecie.

Jest szybki, niezawodny i ma wiele wbudowanych funkcji. Na przykład system uwierzytelniania dziur, który pozwala skupić się na głównych funkcjach Twojej aplikacji. Możesz także zainstalować zewnętrzne pakiety, aby wykonać jeszcze bardziej złożone zadania, takie jak Django-allauth, który pozwala rejestrować użytkowników za pomocą ich kont społecznościowych.

Ale ujawnijmy kilka faktów. Django to tak ogromny framework, że czasami trudno jest zacząć z nim korzystać.

Więc dzisiaj zbudujesz od podstaw w pełni funkcjonalną aplikację Django.

Pod koniec tego samouczka będziesz:

  • Napisałem aplikację do skracania adresów URL
  • Zrozumienie wzorca Django MVT
  • Poznali przepływ pracy podczas tworzenia projektu

Wymagania wstępne

Wszystkie poniższe wymagania są opcjonalne i pomogą Ci postępować zgodnie z samouczkiem. Ale jeśli nie masz doświadczenia z żadnym z nich, nie martw się. Najważniejszy krok to pierwszy.

  • Podstawowa znajomość poleceń systemu UNIX (ls, cd, rm, touch)
  • Podstawowe zrozumienie klas i funkcji Pythona
  • Python zainstalowany na twoim komputerze (może to oczywiste, ale musiałem to uwzględnić)
  • Byłoby wspaniale, gdybyś już zbudował coś z Django

Na tym będzie dostępny cały działający kod Repozytorium Github.

Teraz, gdy masz już krystalicznie czyste poprzednie koncepcje, przejdźmy do rzeczy.

Oświadczenie projektowe

W tym samouczku zbudujesz narzędzie do skracania adresów URL. Zasadniczo narzędzie do skracania adresów URL to usługa, która pobiera długi adres URL i zamienia go w zwarty.

Na przykład, jeśli chcesz udostępnić tweet i dołączyć link do swojej witryny, ale zbliżasz się do limitu znaków, możesz użyć narzędzia do skracania adresów URL.

Zobaczmy to z grafiką.

Jak widać, narzędzie do skracania adresów URL pobiera długi adres URL i zwraca krótki. To jest dokładnie to, co dzisiaj zbudujesz.

Dzięki temu projektowi przećwiczysz użycie wzorca MVT, poznasz podstawy projektowania baz danych za pomocą modeli Django i nauczysz się, jak wyświetlać informacje użytkownikowi za pomocą widoków, adresów URL i szablonów.

Struktura projektu Django

Zasadniczo witryna Django jest zbudowana na jednym projekcie i wielu oddzielnych aplikacjach. Każda z tych aplikacji ma określoną funkcjonalność i może działać samodzielnie.

Wyobraźmy sobie złożoną aplikację internetową, np Przepełnienie stosu. Jego funkcjonalność opiera się na dwóch głównych aspektach.

  • Zarządzanie użytkownikami: logowanie, wylogowanie, reputacja, uprawnienia
  • Forum: pytania, odpowiedzi, tagi, filtry

Tak więc, zgodnie ze strukturą witryny Django, projekt miałby nazwę StackOverflow, która ma dwie główne aplikacje. Aplikacja użytkowników i aplikacja forum.

Każda z tych aplikacji ma niezależną funkcjonalność. Oznacza to, że oba zawierają cały kod potrzebny do prawidłowego działania.

Obejmuje to modele (strukturę bazy danych), widoki (żądania i odpowiedzi), określone wzorce adresów URL oraz oczywiście szablony i pliki statyczne (obrazy, CSS, JavaScript). Oznacza to, że każda aplikacja Django może być ponownie użyta, ponieważ może działać samodzielnie.

W skrócie projekt odnosi się do zestawu konfiguracji i aplikacji, które mają na celu zbudowanie aplikacji internetowej. Z drugiej strony aplikacja Django jest częścią projektu, który jest samowystarczalny (ma wszystko, czego potrzebuje do pracy), a jego celem jest wykonanie określonej operacji.

Skonfiguruj projekt Django

W tej sekcji skonfigurujesz projekt Django. W tym celu użyjesz różnych narzędzi, takich jak środowisko wirtualne do uporządkowania zależności Pythona i najważniejszych skryptów Django. Django-admin i Manage.py

Wirtualne środowisko

Zawsze polecam współpracę środowiska wirtualne podczas tworzenia aplikacji z Django. Jest to najskuteczniejszy sposób utrzymywania określonego zestawu zależności. Ale jego głównym celem jest odizolowanie pakietów programistycznych od globalnych.

Stwórzmy więc wirtualne środowisko za pomocą wbudowanego polecenia formularza Pythona.

Uwaga: ta metoda wymaga do działania Pythona w wersji 3.6 lub nowszej.

python -m venv .venv

To polecenie używa polecenia python -m lub python –mod. Zasadniczo uruchamia moduł lub bibliotekę jako skrypt. Zgodnie ze znaczeniem tego polecenia, venv to biblioteka, którą uruchamiamy, a .venv odnosi się do nazwy wirtualnego środowiska, które chcemy stworzyć.

Więc w prostym języku to polecenie oznacza.

Hej Python, uruchom jako skrypt wbudowaną bibliotekę venv i utwórz nazwę virtualenv .venv

Teraz nadszedł czas, aby aktywować właśnie utworzone środowisko wirtualne za pomocą następującego polecenia.

source .venv/bin/activate

Aby upewnić się, że nie masz zainstalowanych żadnych pakietów w nowym venv, uruchamiasz.

pip freeze

Jeśli prawidłowo aktywowałeś środowisko wirtualne, nie otrzymasz żadnych danych wyjściowych. To dlatego, że jeszcze niczego nie zainstalowaliśmy.

Przejdźmy do Django

Aby stworzyć naszą aplikację do skracania adresów URL, zaczniemy od zainstalowania pakietu Django. Django to pakiet innej firmy, dlatego musimy go zainstalować za pomocą Pip (Pip Installs Packages).

$ pip install django
Collecting django
  Downloading Django-3.2.1-py3-none-any.whl (7.9 MB)
     |████████████████████████████████| 7.9 MB 344 kB/s 
Collecting asgiref<4,>=3.3.2
  Using cached asgiref-3.3.4-py3-none-any.whl (22 kB)
Collecting sqlparse>=0.2.2
  Using cached sqlparse-0.4.1-py3-none-any.whl (42 kB)
Collecting pytz
  Using cached pytz-2021.1-py2.py3-none-any.whl (510 kB)
Installing collected packages: asgiref, sqlparse, pytz, django
Successfully installed asgiref-3.3.4 django-3.2.1 pytz-2021.1 sqlparse-0.4.1

Uwaga: Pamiętaj, że $ to nic innego jak symbol powłoki.

Aby sprawdzić, czy instalacja przebiegła poprawnie, ponownie sprawdzamy zainstalowane pakiety naszego venv.

$ pip freeze
asgiref==3.3.4
Django==3.2.1
pytz==2021.1
sqlparse==0.4.1

Nie martw się, jeśli otrzymane wersje różnią się od moich. Jeśli Django nadal działa w wersji 3.x, możesz kontynuować bez żadnego problemu.

Rozpoczęcie projektu Django

Po zainstalowaniu Django, czas na stworzenie struktury serwisu skracającego adresy URL. Czy pamiętasz, czym jest projekt Django? Utwórzmy go, uruchamiając następujące polecenie.

django-admin startproject config

Wyjaśniając wszystko na temat tego polecenia, django-admin to narzędzie wiersza poleceń, które wykonuje wszystkie zadania potrzebne do stworzenia projektu Django. Część „startproject” to polecenie uruchamiane przez narzędzie Django-admin, a config to nazwa projektu, który zamierzamy utworzyć.

Należy podkreślić, że config może mieć dowolną nazwę. Powodem, dla którego używam config jako nazwy tego projektu, jest po prostu wygoda. Miło jest przełączać się między projektami i nadal mieć tę samą konwencję nazewnictwa. Więc nie bój się używać innych nazw projektów, kiedy tylko chcesz.

Jak możesz zauważyć, teraz masz folder config/, aw środku jest wiele plików. Później zobaczymy strukturę plików projektu. Na razie przejdźmy do katalogu projektu i uruchommy lokalny serwer.

cd config/

Najważniejszym plikiem, którego będziesz używać, jest skrypt manage.py. Ma taką samą funkcjonalność jak django-admin, ale główną zaletą korzystania z niego jest to, że pozwala zarządzać ustawieniami podczas uruchamiania projektu.

Teraz sprawdźmy, czy wszystko działa poprawnie.

python manage.py runserver

Tworzenie aplikacji do skracania adresów URL

Czas stworzyć główną aplikację projektu. Do wykonania tego zadania użyjesz pliku manage.py.

python manage.py startapp urlshortener

Spowoduje to utworzenie aplikacji Django o nazwie urlshortener. Jeśli uruchomisz drzewo polecenie, otrzymasz coś takiego.

.
├── config
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
└── urlshortener
    ├── admin.py
    ├── apps.py
    ├── __init__.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py

Wyjaśnijmy różne pliki utworzone do tej chwili. „config” to nazwa naszego projektu i jest tak nazwana dla konwencji. Wewnątrz config dostajesz settings.py, jest to plik, w którym ustawiasz wszystkie ustawienia swojego projektu. urls.py to ogólna konfiguracja adresów URL w projekcie. Definiuje ścieżki URL wszystkich aplikacji wewnątrz projektu.

Nie przejmuj się zbytnio plikami asgi.py i wsgi.py. Są to pliki, które umożliwiają skonfigurowanie aplikacji we wdrożeniu.

Manage.py to skrypt Pythona, który pozwala uruchamiać wszystkie dostępne polecenia Administrator Django.

Zaglądając do urlshortener, który jest nazwą właśnie utworzonej aplikacji, możesz zauważyć, że istnieje dziwny folder o nazwie „migracje /” i kilka innych plików, które są kluczowe dla logiki dowolnej aplikacji.

apps.py to miejsce, w którym znajduje się konfiguracja aplikacji. Zwykle nie zadzierasz z tym, poza tym, że robisz całkiem zaawansowane rzeczy.

admin.py to miejsce, w którym rejestrujesz swoje modele, aby były widoczne w panelu administracyjnym Django.

Models.py jest najważniejszy. Wewnątrz tego modułu musisz zdefiniować modele, które (mówiąc niejasno) są sposobem przechowywania danych. Więcej o modelach dowiesz się później.

migracje/ to folder, w którym przechowywane są migracje Django. Później przyjrzymy się dokładniej.

testing.py to plik, w którym przechowywane są testy. W tym samouczku nie omówimy testowania.

views.py to plik przechowujący widoki. Zasadniczo określa, w jaki sposób użytkownik będzie wchodzić w interakcje ze wszystkimi aspektami Twojej aplikacji.

Instalowanie aplikacji Django

Zanim przejdziesz dalej, otwórz plik settings.py i zmodyfikuj zmienną INSTALLED_APPS, dodając aplikację urlshortener.

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # Custom apps
    'urlshortener',
]

Jest to rutynowy proces podczas tworzenia aplikacji. Więc za każdym razem, gdy to robisz, nie zapomnij zainstalować go w ustawieniach projektu.

Zrozumienie wzorca MVT

Wzorzec Model, Widok, Szablon to wzorzec projektowania oprogramowania, którego programiści Django używają do tworzenia aplikacji internetowych.

Opiera się na 3 głównych koncepcjach. Model (dane), Widok (interakcja użytkownika z danymi), Szablon (jak użytkownicy widzą dane).

Modele to klasy Pythona, które definiują wszystkie pola i zachowanie danych, które chcesz przechowywać. Zwykle każdy model odnosi się do unikalnej tabeli w bazie danych

Widoki w swoim najprostszym wyrażeniu są wywoływalnymi obiektami, które pobierają żądanie od użytkownika i generują odpowiedź. Pomiędzy tym procesem zachodzi logika biznesowa. Wiem, że „logika biznesowa” jest dość niejasnym pojęciem, więc pozwólcie, że wyjaśnię dokładnie, co to jest. Logika biznesowa to sposób tworzenia, przechowywania i usuwania danych, to wszystko.

Wreszcie szablony to dokumenty tekstowe (zwykle HTML), które są wyświetlane użytkownikom. Jego celem jest przedstawienie danych tak czysto, jak to tylko możliwe. Django zawiera mini-język o nazwie Język szablonów Django (DTL) co pozwala na włączenie części mocy Pythona do dokumentów tekstowych.

Utwórz model Shortenera

Po szybkim zrozumieniu wzorca MVT przejdźmy do tworzenia narzędzia do skracania adresów URL w Django od podstaw.

Przede wszystkim zdefiniujmy model skracający w pliku models.py.

'''
Url shortener model
'''

from django.db import models

# Create your models here.

class Shortener(models.Model):
    '''
    Creates a short url based on the long one
    
    created -> Hour and date a shortener was created 
    
    times_followed -> Times the shortened link has been followed

    long_url -> The original link

    short_url ->  shortened link https://domain/(short_url)
    ''' 
    created = models.DateTimeField(auto_now_add=True)

    times_followed = models.PositiveIntegerField(default=0)    

    long_url = models.URLField()

    short_url = models.CharField(max_length=15, unique=True, blank=True)

    class Meta:

        ordering = ["-created"]


    def __str__(self):

        return f'{self.long_url} to {self.short_url}'

Wiem. To dość duża klasa, w której dzieje się wiele dziwnych rzeczy, ale nie rozpaczaj. Omówię krok po kroku każdą ważną rzecz.

Modelowe wyjaśnienie

W pierwszej kolejności importujemy moduł models. Ten moduł zawiera wszystkie funkcje potrzebne do stworzenia modelu Django.

Przyglądając się modelowi „Shortener”, pierwszą rzeczą, na którą należy zwrócić uwagę, jest to, że rozszerza on modele.Model. W rzeczywistości każdy model w dowolnej aplikacji Django musi być podklasą modele.Model klasa.

Następnie definiujemy wszystkie pola, które model będzie miał w bazie danych. Pole „utworzony” to data i godzina utworzenia skróconego linku, dlatego do stworzenia tego rodzaju funkcjonalności używamy pola DateTimeField. Używamy argumentu auto_now_add=True, ponieważ chcemy, aby pole było zmieniane tylko podczas tworzenia instancji.

Drugie pole times_followed odnosi się do czasów użycia skróconego adresu URL. Jest to PositiveIntegerField i określamy domyślną wartość zero. Oznacza to, że za każdym razem, gdy instancja utworzy pole times_followed, Django wypełni to pole wartością 0.

Z drugiej strony long_url odnosi się do adresu URL wprowadzonego przez użytkownika. Jest to URLField, ponieważ chcemy, aby użytkownik wpisywał tylko znaki postaci: http://twojawitryna.com.

Ostatnie pole to short_url i zawiera interesujące szczegóły. Określamy, że może mieć tylko 15 znaków, musi być unikalny, co oznacza, że ​​w tym polu nie mogą się powtarzać elementy. Na koniec zaznaczamy, że można go pozostawić pustym, co oznacza, że ​​podczas pracy z formularzami użytkownicy nie będą musieli pisać własnego skróconego kodu.

Wewnętrzna klasa Meta mówi nam, jak musi się zachowywać klasa, a my ustalamy, że kolejność (wywołanie Shortener.objects.all()) obiektów skracających będzie dyskryminowana przez te najnowsze.

Metoda __str__ informuje, w jaki sposób należy wydrukować model. Czyli jeśli mamy obiekt z long_url = “https://newsblog.pl.com/” i skróconą częścią “123456” i drukujemy go.

https://newsblog.pl.com/ to 123456

Teraz nadszedł czas, aby znaleźć sposób na zapisanie krótkiego linku w losowy sposób.

Tworzenie funkcjonalności skracania

Stworzymy 2 funkcje niestandardowe. Pierwszy wygeneruje losowy kod, a drugi uniemożliwi otrzymanie powtarzających się losowych kodów z modelu Shortener. Aby to zrobić, utwórz plik utils.py w aplikacji „urlshortener”.

touch utils.py

Wewnątrz tego pliku użyjemy funkcji select z wbudowanego modułu random. Ułatwia to zadanie wyboru losowych znaków do utworzenia kodu.

'''
Utilities for Shortener
'''
from django.conf import settings

from random import choice

from string import ascii_letters, digits

# Try to get the value from the settings module
SIZE = getattr(settings, "MAXIMUM_URL_CHARS", 7)

AVAIABLE_CHARS = ascii_letters + digits


def create_random_code(chars=AVAIABLE_CHARS):
    """
    Creates a random string with the predetermined size
    """
    return "".join(
        [choice(chars) for _ in range(SIZE)]
    )

Jak widać, ta funkcja zwraca losowy ciąg o długości określonej w pliku ustawień lub domyślnie 7. Używasz funkcji getattr, aby pobrać zmienną z modułu ustawień, ale bez zgłaszania błędu, jeśli zmienna nie jest określona.

Zróbmy matematykę. Jeśli mamy 7 miejsc, w których może być maksymalnie 62 dostępnych znaków dla każdego miejsca, to jest to możliwe permutacje są:

Tak więc w oparciu o te szybkie obliczenia skróconą część można wypełnić do 2,5 biliona różnych kodów. Możemy więc zapomnieć o wychodzeniu z losowych skróconych adresów URL.

Chociaż może istnieć tak wiele permutacji, istnieje małe prawdopodobieństwo uzyskania powtarzających się skróconych części. Jest to problem, ponieważ ustawiliśmy unikatowe pole shorted_url. Dlatego poniższa funkcja jest tak przydatna.

def create_shortened_url(model_instance):
    random_code = create_random_code()
    # Gets the model class

    model_class = model_instance.__class__

    if model_class.objects.filter(short_url=random_code).exists():
        # Run the function again
        return create_shortened_url(model_instance)

    return random_code

Zobaczmy, co się tutaj dzieje. Funkcja przyjmuje jako argument instancję modelu „Shortener”. Najpierw funkcja generuje losowy kod przy użyciu metody create_random_code. Następnie pobiera klasę modelu i sprawdza, czy istnieje inny obiekt, który ma ten sam short_url. Jeśli tak, uruchamia się jeszcze raz, ale jeśli wszystko jest w porządku, zwraca random_code.

Później wejdziesz w interakcję z powłoką, aby dokładnie przyjrzeć się tej funkcji.

Po utworzeniu funkcji użyteczności użyjmy jej do stworzenia losowych kodów w modelu skracacza.

Modyfikowanie metody składowania

Na koniec zajęć „Shortener” zmodyfikujesz metodę zapisu modelu. Metoda save jest wywoływana za każdym razem, gdy obiekt jest zapisywany w bazie danych, więc zobaczymy, jak jej użyć tutaj.

# Import the function used to create random codes
from .utils import create_shortened_url

# At the end of the  Shortener model
    def save(self, *args, **kwargs):

        # If the short url wasn't specified
        if not self.short_url:
            # We pass the model instance that is being saved
            self.short_url = create_shortened_url(self)

        super().save(*args, **kwargs)

Metoda zapisu jest zastępowana, co oznacza, że ​​wprowadzasz nową funkcjonalność do wcześniej istniejącej metody nadrzędnej. Zasadniczo mówi Django, że za każdym razem, gdy obiekt „Shortener” jest zapisywany, a short_url nie jest określony, musi być wypełniony losowym kodem.

Uruchamianie migracji

Teraz czas na wykonanie i uruchomienie migracji modelu Shortener. Aby to zrobić, uruchom następujące polecenia w głównym folderze projektu.

$ python manage.py makemigrations
Migrations for 'urlshortener':
  urlshortener/migrations/0001_initial.py
    - Create model Shortener

$ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions, urlshortener
Running migrations:
  ......
  # Apply the URL shortener migrations
  Applying urlshortener.0001_initial... OK

Na razie nie musisz się martwić czym są migracje. Pamiętaj tylko, że podczas uruchamiania tych dwóch poleceń Django tworzy plik Baza danych db.sqlite plik na podstawie zdefiniowanych modeli.

Stwórzmy kilka obiektów za pomocą powłoki Django.

$ python manage.py shell

>>> from urlshortener.models import Shortener
>>> s = Shortener(long_url="https://newsblog.pl.com")
>>> s.short_url
''
>>> s.save()
>>> s.short_url
'kdWFVIc'
>>> s.long_url
'https://newsblog.pl.com'
>>> print(s)
https://newsblog.pl.com to kdWFVIc

Tak mniej więcej będą działać wszystkie obiekty skracające.

Pisanie poglądów

Jak powiedziałem wcześniej, widok jest prostą funkcją, która przyjmuje żądanie i zwraca odpowiedź. Zobaczmy więc, jak stworzyć widok hello world.

Podstawowa odpowiedź szablonu

Wewnątrz pliku „urlshortener/views.py” utwórz funkcję home_view. aa

'''
Shortener views
'''
from django.shortcuts import render, get_object_or_404 # We will use it later

from django.http import HttpResponse 

# Create your views here.

def home_view(request):
    return HttpResponse("Hello world")

Zwraca prostą wiadomość „Witaj, świecie”. Później zobaczysz jak to wygląda w przeglądarce. Teraz utwórz plik „urls.py”, który będzie zawierał wszystkie wzorce adresów URL aplikacji.

dotknij urls.py

Dodaj następujący kod.

'''
Urls for shortener app urlshortener/urls.py
'''

from django.urls import path

# Import the home view
from .views import home_view

appname = "shortener"

urlpatterns = [
    # Home view
    path("", home_view, name="home")
]

Zmienna appname deklaruje (jak sama nazwa wskazuje) przestrzeń nazw aplikacji urlshortener.

Szybko wyjaśniając, że importujemy plik funkcja ścieżki, która zwraca element do uwzględnienia we wzorcach adresów URL aplikacji. Atrybut name to przestrzeń nazw ścieżki, którą w razie potrzeby można wywołać wewnątrz szablonów.

Teraz zmodyfikujmy ogólne adresy URL projektu.

# config/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    
    # Shortener Urls
    path('', include('urlshortener.urls'))
]

Teraz ponownie uruchommy serwer.

python manage.py runserver

Jeśli uruchomisz serwer, otrzymasz prosty komunikat „Witaj, świecie”. Dzieje się tak, ponieważ dołączasz wzorce adresów URL z aplikacji do skracania adresów URL do całego projektu.

To tylko punkt wyjścia. Teraz czas na stworzenie formularza, który pozwoli użytkownikowi na samodzielne tworzenie skróconych adresów URL.

Tworzenie formularzy

W Django, A Formularz to prosta klasa, która umożliwia pobieranie danych od użytkownika.

Zamierzasz utworzyć plik forms.py. Konwencją jest przechowywanie wszystkich formularzy aplikacji w tym pliku.

cd urlshortener/
touch forms.py

Wewnątrz tego pliku utworzysz klasę „ShortenerForm”, która rozciąga się od „ModelForm”.

'''
Shortener Forms urlshortener/forms.py
'''

from django import forms

from .models import Shortener

class ShortenerForm(forms.ModelForm):
    
    long_url = forms.URLField(widget=forms.URLInput(
        attrs={"class": "form-control form-control-lg", "placeholder": "Your URL to shorten"}))
    
    class Meta:
        model = Shortener

        fields = ('long_url',)

Jest to formularz modelu, ponieważ jego celem jest utworzenie obiektu modelu na podstawie danych wprowadzonych przez użytkownika. Korzystamy również z argumentu widżet, który pozwala nam określić atrybut „class” (klasa w CSS, a nie w pythonie). To dlatego, że później będziemy stylizować aplikację za pomocą bootstrap.

Kończę widoki

Po zbudowaniu formularzy przychodzi czas na stworzenie finalnej logiki biznesowej aplikacji.

Przejdź do pliku views.py w aplikacji skracającej i zmodyfikuj widok home_view. Możesz sprawdzić Repozytorium Github w tej chwili, aby zorientować się, jak wygląda struktura projektu.

Istnieją dwa widoki aplikacji do skracania adresów URL:

  • Widok strony głównej: pokazuje skrócony formularz i nowy adres URL, jeśli formularz został już przesłany.
  • Widok przekierowania: przekierowuje do długiego adresu URL i dodaje 1 do obserwowanych czasów.
  • Zacznijmy od widoku głównego, który jest najbardziej złożony. Będziesz musiał zaimportować model i formularz Shortener. Nadal używasz funkcji, ponieważ chcę, abyś zrozumiał cały przepływ danych w widoku. Będziesz także używać ścieżki do szablonu (który nie został jeszcze utworzony).

    Widok domu

    '''
    Shortener views
    '''
    from django.shortcuts import render # We will use it later
    
    from django.http import HttpResponse, Http404, HttpResponseRedirect
    
    
    # Model
    from .models import Shortener
    
    # Custom form
    
    from .forms import ShortenerForm
    
    # Create your views here.
    
    def home_view(request):
        
        template="urlshortener/home.html"
    
        
        context = {}
    
        # Empty form
        context['form'] = ShortenerForm()
    
        if request.method == 'GET':
            return render(request, template, context)
    
        elif request.method == 'POST':
    
            used_form = ShortenerForm(request.POST)
    
            if used_form.is_valid():
                
                shortened_object = used_form.save()
    
                new_url = request.build_absolute_uri('/') + shortened_object.short_url
                
                long_url = shortened_object.long_url 
                 
                context['new_url']  = new_url
                context['long_url'] = long_url
                 
                return render(request, template, context)
    
            context['errors'] = used_form.errors
    
            return render(request, template, context)
    

    Widok jest oparty na dwóch warunkach:

  • Gdy metoda HTTP równa się GET: Podajemy tylko jako kontekst, formę Shortener używaną do tworzenia obiektów Shortener.
  • Gdy metoda HTTP równa się POST: Nadal przekazujemy formularz w kontekście, ponieważ chcemy, aby użytkownik mógł wprowadzić inny adres URL. Ale przekazujemy żądanie Post do innego formularza o nazwie used_form.
  • Podstępnym sposobem dynamicznego uzyskiwania pełnego adresu URL witryny jest użycie metody obiektu żądania build_absolute_uri .

    >>> print(request.build_absolute_uri('/'))
    'https://localhost:8080/'

    Jako bezpieczny sposób przetworzenia błędnego żądania (użytkownik nie podał poprawnego adresu URL), otrzymujemy błędy formularza, przekazujemy je jako kontekst i renderujemy szablon w normalny sposób. Później zobaczysz, jak zaimplementować wyświetlanie błędów w szablonie.

    Widok przekierowania

    Redirect_url_view jest trochę prostszy. Jest to widok szczegółowy, co oznacza, że ​​widok działa tylko z obiektem.

    Ta funkcja przyjmuje jako parametry żądanie użytkownika i skróconą część adresu URL. Nie jest konieczne określanie rodzaju otrzymywanego żądania, ponieważ w tym widoku nie pracujemy z formularzami.

    def redirect_url_view(request, shortened_part):
    
        try:
            shortener = Shortener.objects.get(short_url=shortened_part)
    
            shortener.times_followed += 1        
    
            shortener.save()
            
            return HttpResponseRedirect(shortener.long_url)
            
        except:
            raise Http404('Sorry this link is broken :(')

    Zabezpieczamy widok instrukcją try/except na wypadek, gdyby skrócona część nie została znaleziona w bazie danych. Jeśli obiekt zostanie znaleziony, dodaje 1 do pola times_followed i przekierowuje funkcją HttpResponseRedirect na adres URL witryny odpowiadający losowemu kodowi.

    Aktualizowanie adresów URL

    Po utworzeniu dwóch widoków aplikacji nadszedł czas, aby utworzyć wzorce końcowych adresów URL, uwzględniając ścieżkę do widoku redirect_url_view.

    Jak zawsze zaczynasz od zaimportowania widoków, a następnie tworzysz funkcję ścieżki i przekazujesz jako argumenty:

    • Trasa URL
    • Widok wskazujący na ścieżkę
    • Nazwa ścieżki
    '''
    Urls for shortener app urlshortener/urls.py
    '''
    
    from django.urls import path
    
    # Import the home view
    from .views import home_view, redirect_url_view
    
    appname = "shortener"
    
    urlpatterns = [
        # Home view
        path('', home_view, name="home"),
        path('<str:shortened_part>', redirect_url_view, name="redirect"),
    ]
    

    W przypadku tej konfiguracji adresu URL routing aplikacji wygląda następująco.

    • Lokalny Gospodarz:8000/: Widok strony głównej
    • localhost:8000/URL-code: Przekierowanie do długiego adresu URL

    Tworzenie szablonów

    Już prawie jesteś. Jedyną rzeczą, która oddziela Cię od zbudowania tej aplikacji, jest interfejs użytkownika. W tym celu używamy szablonów Django.

    Szablony służą do renderowania przejrzystego interfejsu dla użytkownika aplikacji. Pliki te są tworzone wewnątrz aplikacji w podwójnej strukturze folderów w postaci: „szablony/nazwa aplikacji”

    # urlshortener directory
    mkdir -p templates/urlshortener/

    Uwaga: Podwójna struktura folderów i język szablonów Django wykraczają poza zakres tego samouczka, ale możesz o nich przeczytać w oficjalna dokumentacja.

    Szablon bazowy

    Django umożliwia dziedziczenie szablonów. Oznacza to, że możemy mieć szablon bazowy i rozszerzać go w celu przestrzegania zasady DRY (nie powtarzaj się).

    cd templates/urlshortener
    touch base.html

    Plik base.html jest konwencją i oznacza, że ​​każdy inny szablon w aplikacji musi być rozszerzeniem tego szablonu.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Django Url shortener</title>
    
        <link
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
          crossorigin="anonymous"
        />
    
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
          integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
          crossorigin="anonymous"
        />
      </head>
      <body>
       
        {% block body %} 
       
       
        
        {% endblock body %}
        
        <script
          src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
          crossorigin="anonymous"
        ></script>
      </body>
    </html>
    

    Zamierzamy użyć bootstrap CDN, aby stworzyć szybki i ładny interfejs bez potrzeby używania plików CSS lub javascript.

    Jeśli chcesz dowiedzieć się dogłębnie o tagach DTL, możesz to zrobić za pomocą oficjalne dokumenty.

    Szablon do domu

    Szablon domowy, inherencja z pliku base.html. Oznacza to, że ten szablon zawiera cały kod HTML z pliku nadrzędnego.

    {% extends 'urlshortener/base.html' %} 
    
    {% block body %}
    
    <div class="container">
      <div class="card mt-5">
        <div class="card-header text-center py-3">
          <h1>URL Shortner Application <i class="fas fa-link px-2"></i></h1>
        </div>
        <div class="px-3 py-4">
          <form action="" method="POST">
            {% csrf_token %}
            <div class="row g-1">
              <div class="col-10">{{form.long_url}}</div>
              <div class="col-2">
                <button class="btn btn-success btn-lg w-100" type="submit">
                  Shorten
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
      {% if errors %}
      <div class="alert alert-danger mt-4" role="alert">
        <p>{{errors}}</p>
      </div>
      {% endif %}
    
      {% if new_url %}
    
      <div class="mx-auto text-center mt-5">
        <h2 class="text-danger">Your shortened Url</h2>
        <p>You can copy the Link below and share it with your friends</p>
        <p class="">{{new_url}}</p>
        <p><span class="text-danger">Previous URL:</span> {{long_url}}</p>
      </div>
      {% endif %}
    </div>
    {% endblock body %}

    Szybko wyjaśnię przepływ danych w tym szablonie:

    • Zostanie wyświetlony formularz Skracacz. W środku token crsf jest ustawiona (względy bezpieczeństwa) i wyświetlane jest tylko pole długiego adresu URL formularza. Pamiętaj, że to pole ma klasę CSS „form-control form-control-lg”, ponieważ ustawiliśmy to w formularzu.
    • Jeśli zostaną znalezione błędy, pokaż je
    • Jeśli operacja POST powiedzie się, zostanie wyświetlony nowy adres URL.

    Aplikacja końcowa

    Gratulacje! 🎉. Zbudowałeś kompletną funkcjonalną aplikację do skracania adresów URL za pomocą Django.

    Oto kilka zrzutów ekranu, jak wygląda aplikacja.

    Zdobądź tylko:

    Błąd skracania adresu URL:

    Udany skrócony adres URL:

    Adres URL przekierowany:

    Co sądzisz o udostępnieniu komuś wersji demonstracyjnej tej aplikacji do skracania adresów URL? Sprawdź, jak udostępnić aplikację Django Demo w Internecie.

    Wyzwanie 🔥

    Jeśli czujesz się komfortowo ze swoimi umiejętnościami Django, dlaczego nie poćwiczyć z wyzwaniem?

    Sklonuj kod tej aplikacji i stwórz system uwierzytelniania, w którym tylko zarejestrowani użytkownicy mogą skracać swoje adresy URL.

    Kiedy skończysz, wyślij pull request i pinguj mnie Świergot aby zaprezentować swoje osiągnięcia.

    Podsumowanie

    Dotarłeś do końca tego samouczka. Wierz lub nie, ale właśnie przejrzałeś wszystkie główne aspekty tworzenia projektu Django. Mam nadzieję, że okazało się to niezwykle przydatne.

    W tym samouczku:

    • Dowiedziałem się o przepływie pracy tworzenia aplikacji Django.
    • Zbudowałem projekt CV
    • Zrozumienie różnic i struktury projektów Django i aplikacji Django.
    • Odkrył wzór MVT.
    • Utworzone podstawowe widoki funkcji
    • Używał Django ORM (Object Relational Mapper) do tworzenia prostych modeli

    To wszystko, jest wiele do pokrycia Framework sieciowy Djangowięc bądź w kontakcie, aby uzyskać więcej niesamowitych samouczków.