Útmutató az URL-rövidítő alkalmazás létrehozásához a Django segítségével

A Django vagy bármely más készség elsajátításának legjobb módja a meglévő tudás alkalmazása funkcionális projektek létrehozásával.

A Django a leggyakrabban használt Python webfejlesztési keretrendszer. Beépített funkcióinak és kiterjedt mennyiségű harmadik féltől származó csomagnak köszönhetően a világ egyik legkedveltebb webes keretrendszere lett.

Gyors, megbízható, és rengeteg beépített funkcióval rendelkezik. Például egy lyukas hitelesítési rendszer, amely lehetővé teszi, hogy az alkalmazás fő funkcióira összpontosítson. Ezenkívül külső csomagokat is telepíthet még összetettebb feladatok elvégzésére, mint például a Django-allauth, amely lehetővé teszi a felhasználók regisztrálását közösségi fiókjaikkal.

De lássunk néhány tényt. Django olyan hatalmas keret, hogy néha nehéz elkezdeni.

Tehát ma a semmiből fogsz építeni egy teljesen működőképes Django alkalmazást.

Ennek az oktatóanyagnak a végére a következőket fogja tenni:

  • Írtál egy URL-rövidítő alkalmazást
  • Ismerje meg a Django MVT mintát
  • Megtanulta a projekt létrehozásának munkafolyamatát

Előzetes követelmények

A következő követelmények mindegyike nem kötelező, és segít követni az oktatóanyagot. De ha nincs tapasztalata ezekkel kapcsolatban, ne aggódjon. A legfontosabb lépés az első.

  • A UNIX-parancsok alapvető ismerete (ls, cd, rm, touch)
  • A Python osztályok és funkciók alapvető ismerete
  • Python telepítve a számítógépére (talán nyilvánvaló, de muszáj volt beletennem)
  • Jó lenne, ha már felépített valamit a Django-val

Az összes működő kód elérhető lesz ezen Github repo.

Most, hogy kristálytisztán tisztáztad az előző fogalmakat, térjünk rá a dologra.

Projekt nyilatkozat

Ebben az oktatóanyagban egy URL-rövidítőt fog készíteni. Alapvetően az URL-rövidítő egy olyan szolgáltatás, amely hosszú URL-t használ, és kompakttá alakítja.

Például, ha meg szeretne osztani egy tweetet, és el szeretné helyezni a webhelyére mutató hivatkozást, de a karakterkorlátozás előtt áll, használhat URL-rövidítőt.

Lássuk grafikával.

Amint láthatja, az URL-rövidítő hosszú URL-t kap, és egy rövidet ad vissza. Pontosan ezt fogod ma építeni.

Ezzel a projekttel gyakorolni fogja az MVT minta használatát, megtanulja az adatbázis-tervezés alapjait a Django modellekkel, és megtanulja, hogyan jeleníthet meg információkat a felhasználóknak nézeteken, URL-eken és sablonokon keresztül.

Egy Django projekt felépítése

Alapvetően a Django webhely egyetlen projektre és több különálló alkalmazásra épül. Ezen alkalmazások mindegyike sajátos funkciókkal rendelkezik, és képes önmagában is működni.

Képzeljünk el egy olyan összetett webalkalmazást, mint pl Stackoverflow. Működése két fő szemponton alapul.

  • Felhasználók kezelése: Bejelentkezés, kijelentkezés, hírnév, engedélyek
  • Fórum: Kérdések, válaszok, címkék, szűrők

Tehát a Django webhely szerkezetét követve a projekt StackOverflow nevet kapna, amely két fő alkalmazással rendelkezik. A felhasználói alkalmazás és a fórum alkalmazás.

Ezen alkalmazások mindegyike rendelkezik önálló funkcióval. Ez azt jelenti, hogy mindkettő tartalmazza a megfelelő működéshez szükséges összes kódot.

Ez magában foglalja a modelleket (adatbázis-struktúra), nézeteket (kérések és válaszok), konkrét URL-mintákat, és természetesen sablonokat és statikus fájlokat (képek, CSS, JavaScript). Ez azt jelenti, hogy bármely Django-alkalmazás újra felhasználható, mivel képesek önállóan dolgozni.

Lerövidítve a projekt olyan konfigurációk és alkalmazások halmazára utal, amelyek egy webalkalmazás létrehozására szolgálnak. Másrészt a Django alkalmazás egy projekt része, amely önálló (minden benne van, ami a működéshez kell), és célja egy adott művelet végrehajtása.

Állítson be egy Django projektet

Ebben a részben egy Django projektet fog beállítani. Ebből a célból különböző eszközöket fog használni, például egy virtuális környezetet a Python-függőségek és a legfontosabb Django szkriptek rendszerezésére. Django-admin és manage.py

Virtuális környezet

Mindig azt javaslom, hogy dolgozzon vele virtuális környezetek amikor alkalmazásokat készít a Django segítségével. Ez a leghatékonyabb módja egy adott függőségi készlet fenntartásának. De fő célja a fejlesztési csomagok elkülönítése a globális csomagoktól.

Tehát hozzunk létre egy virtuális környezetet a python beépített form paranccsal.

Megjegyzés: Ehhez a módszerhez Python 3.6 vagy újabb verzió szükséges.

python -m venv .venv

Ez a parancs a python -m vagy python –mod parancsot használja. Alapvetően egy modult vagy könyvtárat futtat szkriptként. A parancs jelentése szerint a venv az általunk futtatott könyvtár, a .venv pedig a létrehozni kívánt virtuális környezet nevére utal.

Tehát közérthető nyelven ez a parancs azt jelenti.

Hé Python, futtassa szkriptként a beépített venv könyvtárat, és hozzon létre egy virtualenv nevet .venv

Most itt az ideje aktiválni az imént létrehozott virtuális környezetet a következő paranccsal.

source .venv/bin/activate

Ha azt akarja kijelenteni, hogy nulla csomag van telepítve az új venv-ben, futtassa.

pip freeze

Ha megfelelően aktiválta a virtuális környezetet, nem fog semmilyen kimenetet kapni. Ez azért van, mert még nem telepítettünk semmit.

Lépjünk be a Django-ba

Ahhoz, hogy létrehozzuk az URL-rövidítő alkalmazásunkat, a Django csomag telepítésével kezdjük. A Django egy harmadik féltől származó csomag, ezért a Pip (Pip Installs Packages) segítségével kell telepítenünk.

$ 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

Megjegyzés: Ne feledje, hogy a $ nem más, mint a shell szimbólum.

Annak ellenőrzésére, hogy a telepítés rendben ment-e, ismét ellenőrizzük a venv telepített csomagjait.

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

Ne aggódjon, ha a kapott verziók eltérnek az enyémtől. Ha a Django a 3.x verzión áll, probléma nélkül folytathatja.

Django projekt indítása

Miután telepítette a Django-t, ideje létrehozni az URL-rövidítő webhely szerkezetét. Emlékszel, mi az a Django projekt? Hozzon létre egyet a következő parancs futtatásával.

django-admin startproject config

A parancsról mindent elmagyarázva, a django-admin egy parancssori segédprogram, amely elvégzi a Django projekt létrehozásához szükséges összes feladatot. A „startproject” rész a Django-admin segédprogram által futtatott parancs, a config pedig a létrehozandó projekt neve.

Fontos hangsúlyozni, hogy a config tetszőleges név lehet. A config-ot ennek a projektnek a neveként csak a kényelem miatt használom. Jó váltani a projektek között, és továbbra is ugyanaz az elnevezés. Tehát ne féljen más projektneveket használni, amikor csak akarja.

  Trainstation 2 kódok: Váltsd be most

Amint azt észreveheti, most van egy config/ mappája, és sok fájl van benne. Később látni fogjuk a projekt fájlszerkezetét. Egyelőre lépjünk be a projektkönyvtárba, és futtassuk a helyi szervert.

cd config/

A legfontosabb használt fájl a manage.py szkript. Ugyanazokkal a funkciókkal rendelkezik, mint a django-admin, de használatának fő előnye, hogy lehetővé teszi a beállítások kezelését a projekt futtatásakor.

Most nézzük meg, hogy minden megfelelően működik-e.

python manage.py runserver

Az URL-rövidítő alkalmazás létrehozása

Itt az ideje létrehozni a projekt fő alkalmazását. A feladat végrehajtásához a manage.py fájlt fogja használni.

python manage.py startapp urlshortener

Ezzel létrehoz egy Django alkalmazást urlshortener néven. Ha futtatja a fa parancsot, valami ilyesmit kapsz.

.
├── 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

Tisztázzuk az eddig létrehozott különböző fájlokat. A „config” a projektünk neve, és csak az egyezmény miatt kaptuk így. A config-on belül megkapja a settings.py fájlt, ez az a fájl, ahol beállíthatja a projekt összes beállítását. Az urls.py az URL-ek általános konfigurációja a projekten belül. Meghatározza a projekten belüli összes alkalmazás URL-útvonalát.

Ne aggódjon túl sokat az asgi.py és wsgi.py fájlok miatt. Ezek olyan fájlok, amelyek segítségével konfigurálhatja az alkalmazást a telepítés során.

A manage.py a python szkript, amely lehetővé teszi az összes elérhető parancs futtatását Django-admin.

Ha belenéz az urlshortenerbe, amely az imént létrehozott alkalmazás neve, észreveheti, hogy van egy „migrations/” nevű furcsa mappa, és néhány más fájl, amelyek létfontosságúak bármely alkalmazás logikája szempontjából.

Az apps.py az alkalmazáskonfiguráció helye. Általában nem vacakolsz vele, kivéve, ha elég előremutató dolgokat csinálsz.

Az admin.py oldalon regisztrálhatja modelljeit, hogy láthatóvá tegye őket a Django adminisztrációs panelen.

A models.py a legfontosabb. Ezen a modulon belül meg kell határozni a modelleket, amelyek (homályosan mondva) az adatok tárolásának módját jelentik. A modellekről később többet fog hallani.

migrations/ az a mappa, ahol a Django migrációkat tárolják. Később részletesen megvizsgáljuk.

A tests.py az a fájl, amelyben a tesztek tárolódnak. Ebben az oktatóanyagban nem térünk ki a tesztelésre.

A views.py a nézeteket tároló fájl. Alapvetően ez határozza meg, hogy a felhasználó hogyan fog interakcióba lépni az alkalmazás összes aspektusával.

Django alkalmazás telepítése

A folytatás előtt nyissa meg a settings.py fájlt, és módosítsa az INSTALLED_APPS változót az urlshortener alkalmazás hozzáadásával.

# 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',
]

Ez egy rutin folyamat az alkalmazás létrehozásakor. Tehát minden alkalommal, amikor ezt csinálja, ne felejtse el telepíteni a projektbeállítások közé.

Az MVT minta megértése

A Modell, View, Template minta az a szoftvertervezési minta, amelyet a Django fejlesztői webalkalmazások létrehozásához használnak.

3 fő koncepción alapul. Modell (adatok), Nézet (Felhasználói interakció az adatokkal), Sablon (Hogyan látják a felhasználók az adatokat).

A modellek Python-osztályok, amelyek meghatározzák a tárolni kívánt adatok összes mezőjét és viselkedését. Általában minden modell egy egyedi táblára hivatkozik az adatbázisban

A nézetek a legegyszerűbb kifejezésükben olyan hívhatók, amelyek fogadják a felhasználó kérését, és választ generálnak. A folyamat között zajlik az üzleti logika. Tudom, hogy az „üzleti logika” meglehetősen homályos fogalom, ezért hadd magyarázzam el pontosan, mi is az. Az üzleti logika az adatok létrehozásának, tárolásának és törlésének módja, ez minden.

Végül a sablonok szöveges dokumentumok (általában Html), amelyek megjelennek a felhasználók számára. Célja az adatok lehető legtisztább bemutatása. A Django tartalmaz egy mini-nyelvet, az úgynevezett Django sablonnyelv (DTL) amely lehetővé teszi, hogy a python erejét beépítse a szöveges dokumentumokba.

Hozd létre a Shortener modellt

Miután gyorsan megértette az MVT mintát, kezdje el a Django URL-rövidítő létrehozását a semmiből.

Először is definiáljuk a rövidítő modellt a models.py fájlban.

'''
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}'

Tudom. Ez egy elég hatalmas osztály, sok furcsa dologgal, de ne ess kétségbe. Lépésről lépésre haladok minden fontos dolgot.

Modellmagyarázat

Először is importáljuk a modellek modult. Ez a modul tartalmazza a Django modell létrehozásához szükséges összes funkciót.

Ha egy pillantást vetünk a „Shortener” modellre, az első dolog, amit meg kell jegyezni, hogy kiterjeszti a modelleket.Model. Valójában bármely Django-alkalmazásban lévő modellnek az alosztályának kell lennie modellek.Modell osztály.

Ezután meghatározzuk a modell összes mezőjét az adatbázisban. A „létrehozott” mező a rövidített hivatkozás létrehozásának dátuma és időpontja, ezért a DateTimeField-et használjuk az ilyen jellegű funkciók létrehozására. Az auto_now_add=True argumentumot használjuk, mert azt akarjuk, hogy a mező csak a példány létrehozásakor módosuljon.

A második time_followed mező a rövidített URL használatának időpontjaira utal. Ez egy PositiveIntegerField, és az alapértelmezett nullát adjuk meg. Ez azt jelenti, hogy minden alkalommal, amikor egy példány létrehozza a times_followed mezőt, a Django 0-val tölti ki azt.

Másrészt a long_url a felhasználó által megadott URL-re utal. Ez egy URL-mező, mivel azt akarjuk, hogy a felhasználó csak a következő űrlap karaktereit írja be: http://webhely.com.

Az utolsó mező a short_url, és érdekes részleteket tartalmaz. Meghatározzuk, hogy csak 15 karakter hosszúságú lehet, egyedinek kell lennie, ami azt jelenti, hogy ebben a mezőben nem lehetnek ismétlődő elemek. Végül jelezzük, hogy üresen hagyható, ami azt jelenti, hogy az űrlapokkal való munka során a felhasználóknak nem kell saját rövidítő kódot írniuk.

A Meta belső osztály megmondja, hogyan kell viselkednie az osztálynak, és beállítjuk, hogy a Shortener.objects.all()) sorrendje a legfrissebb objektumok alapján legyen megkülönböztetve.

A __str__ metódus megmondja, hogyan kell kinyomtatni a modellt. Tehát ha van egy objektumunk, amelynek long_url = „https://etoppc.com.com/” és rövidített része „123456”, és kinyomtatjuk.

https://etoppc.com.com/ to 123456

Most itt az ideje, hogy megkeresse a rövid hivatkozás véletlenszerű mentésének módját.

Rövidítési funkció létrehozása

2 egyedi funkciót fogunk létrehozni. Az első véletlenszerű kódot generál, a második pedig megakadályozza, hogy ismétlődő véletlenszerű kódokat kapjon a Shortener modellből. Ehhez hozzon létre egy utils.py fájlt az „urlshortener” alkalmazásban.

touch utils.py

Ezen a fájlon belül a véletlenszerű beépített modul választás funkcióját fogjuk használni. Ez megkönnyíti a véletlenszerű karakterek kiválasztását a kód létrehozásához.

'''
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)]
    )

Amint láthatja, ez a függvény egy véletlenszerű karakterláncot ad vissza, amelynek hossza a beállítási fájlban megadott, vagy alapértelmezés szerint 7. A getattr függvényt használod egy változó lekéréséhez a beállítások modulból, de anélkül, hogy hibát adnál, ha a változó nincs megadva.

  WebSphere 8.5 adminisztrációs tanfolyam

Számoljunk egy kicsit. Ha van 7 olyan helyünk, ahol minden helyre akár 62 karakter is elérhető, akkor a lehetséges permutációk vannak:

E gyors számítások alapján tehát a lerövidített rész akár 2,5 billió különböző kódot is kitölthet. Így elfelejthetjük a véletlenszerűen rövidített URL-ek elhagyását.

Bár ilyen sok permutáció létezhet, kicsi a valószínűsége annak, hogy ismétlődő rövidített részeket kapunk. Ez egy probléma, mivel a shortened_url mezőt egyedinek állítottuk be. Ezért olyan hasznos a következő funkció.

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

Lássuk, mi történik itt. A függvény argumentumként egy „Shortener” modellpéldányt vesz fel. Először a függvény egy véletlenszerű kódot generál a create_random_code segítségével. Ezután megkapja a modellosztályt, és ellenőrzi, hogy van-e más objektum, amelynek ugyanaz a short_url. Ha igen, akkor még egyszer lefutja magát, de ha minden rendben van, akkor a random_code-ot adja vissza.

Később interakcióba lép a héjjal, hogy közelebbről is megvizsgálhassa ezt a funkciót.

A segédfunkció létrehozása után készítsünk vele véletlenszerű kódokat a rövidítő modellben.

A mentési mód módosítása

A „Shortener” osztály végén módosítani fogja a modellmentési módszert. A mentési metódust minden alkalommal meghívjuk, amikor egy objektumot elmentünk az adatbázisba, ezért itt meglátjuk, hogyan kell használni.

# 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)

A mentési módszer felülírásra kerül, ami azt jelenti, hogy új funkciókat vezet be egy már meglévő szülőmetódushoz. Alapvetően azt mondja a Django-nak, hogy minden alkalommal, amikor egy „Shortener” objektumot elmentenek, és a short_url nincs megadva, azt véletlenszerű kóddal kell kitölteni.

Migrációk futtatása

Most itt az ideje elkészíteni és futtatni a Shortener modell migrációit. Ehhez futtassa a következő parancsokat a gyökérprojekt mappában.

$ 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

Egyelőre nem kell azon törődnie, hogy mi az a migráció. Ne feledje, hogy e két parancs futtatásakor a Django létrehoz egy db.sqlite adatbázis fájlt, az Ön által definiált modellek alapján.

Hozzunk létre néhány objektumot a Django shell segítségével.

$ python manage.py shell

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

Nagyjából így fog működni az összes rövidítő objektum.

Nézetek írása

Ahogy korábban mondtam, a nézet egy egyszerű függvény, amely fogad egy kérést és egy választ ad vissza. Lássuk tehát, hogyan hozhatunk létre egy helló világképet.

Alapvető sablon válasz

Az „urlshortener/views.py” fájlban hozzon létre egy home_view függvényt. 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")

Egy egyszerű üzenetet ad vissza: „Hello world”. Később látni fogja, hogyan néz ki a böngészőben. Most hozzon létre egy „urls.py” fájlt, ahol az alkalmazás összes URL-mintája meg fog állni.

érintse meg az urls.py elemet

Adja hozzá a következő kódot.

'''
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")
]

Az appname változó deklarálja (ahogy a neve is sugallja) az urlshortener alkalmazás névterét.

Gyorsan elmagyarázva importáljuk a útvonal függvény, amely egy elemet ad vissza, amelyet bele kell foglalni az alkalmazás URL-mintájába. A name attribútum az elérési út névtere, amely szükség esetén sablonokon belül is meghívható.

Most módosítsuk a projekt általános URL-címét.

# 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'))
]

Most futtassuk újra a szervert.

python manage.py runserver

Ha futtatja a szervert, egy egyszerű „Hello world” üzenetet fog kapni. Ennek az az oka, hogy az URL-rövidítő alkalmazás URL-mintáit belefoglalja a teljes projektbe.

Ez csak egy kiindulópont. Itt az ideje egy űrlap létrehozásának, amely lehetővé teszi a felhasználó számára, hogy saját maga hozzon létre Rövidített URL-eket.

Űrlapok létrehozása

A Djangoban a forma egy egyszerű osztály, amely lehetővé teszi a felhasználó bevitelét.

Létre kell hoznia egy forms.py fájlt. Az a konvenció, hogy az alkalmazás összes formáját ebben a fájlban tárolják.

cd urlshortener/
touch forms.py

Ezen a fájlon belül létrehoz egy „ShortenerForm” osztályt, amely a „ModelForm”-ból terjed ki.

'''
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',)

Ez egy modellforma, mivel célja egy modell objektum létrehozása a felhasználói bevitelből. Használjuk a widget argumentumot is, amely lehetővé teszi a „class” (class a CSS-ben, nem a python) attribútum megadását. Ennek az az oka, hogy később bootstrappel fogjuk stilizálni az alkalmazást.

A nézetek befejezése

Az űrlapok elkészítése után itt az ideje az alkalmazás végső üzleti logikájának elkészítésére.

Keresse meg a views.py fájlt a shortener alkalmazásban, és módosítsa a home_view nézetet. Megnézheti a Github repo ebben a pillanatban, hogy képet kapjon a projekt felépítéséről.

Az URL-rövidítő alkalmazásnak két nézete van:

  A Gmailhez hasonlóan visszavonhatja a küldést az Outlookban
  • Kezdőlap nézet: Ez a rövidítő űrlapot és az új URL-t mutatja, ha az űrlapot már elküldték.
  • Nézet átirányítása: Ez a hosszú URL-re irányít át, és 1-et ad a követett időpontokhoz.
  • Kezdjük az otthoni nézettel, amely a legösszetettebb. Importálnia kell a Shortener modellt és űrlapot. Még mindig használ egy függvényt, mert szeretném, ha megértené a nézet összes adatfolyamát. Ezenkívül egy sablon elérési útját fogja használni (amely még nincs létrehozva).

    Otthoni nézet

    '''
    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)
    

    A nézet két feltételen alapul:

  • Ha a HTTP metódus egyenlő a GET-tel: Csak kontextusként adjuk át a Shortener űrlapot, amelyet a Shortener objektumok létrehozására használnak.
  • Ha a HTTP metódus megegyezik a POST-val: Továbbra is a kontextusban adjuk át az űrlapot, mivel azt szeretnénk, hogy a felhasználó egy másik URL-t is beírhasson. Ám a közzétételi kérelmet egy másik használt_forma nevű űrlapra továbbítjuk.
  • A webhely teljes URL-címének dinamikus lekérésének bonyolult módja a build_absolute_uri kérési objektum metódus használata.

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

    A hibás kérés feldolgozásának biztonságos módja (a felhasználó nem adott meg érvényes URL-t) megkapjuk az űrlaphibákat, átadjuk őket kontextusként, és a sablont a szokásos módon jelenítjük meg. Később látni fogja, hogyan kell megvalósítani a hibakijelzést a sablonban.

    Nézet átirányítása

    A redirect_url_view egy kicsit egyszerűbb. Ez egy részletes nézet, ami azt jelenti, hogy a nézet csak egy objektummal működik.

    Ez a függvény paraméterként a felhasználó kérését és az URL rövidített_részét veszi fel. Nem szükséges megerősíteni a kapott kérés típusát, mivel ebben a nézetben nem dolgozunk űrlapokkal.

    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 :(')

    A nézetet try/except utasítással védjük arra az esetre, ha a rövidített rész nem található az adatbázisban. Ha az objektumot megtalálja, 1-et ad a time_followed mezőhöz, és a HttpResponseRedirect függvénnyel átirányítja a véletlenszerű kódnak megfelelő webhely URL-címére.

    URL-ek frissítése

    Miután létrehozta az alkalmazás két nézetét, itt az ideje létrehozni a végső URL-mintákat a redirect_url_view elérési útjának megadásával.

    Mint mindig, először a nézetek importálásával kezdi, majd létrehoz egy elérési út függvényt, és argumentumként továbbítja:

    • Az URL útvonala
    • Az útra mutató kilátás
    • Az útvonal neve
    '''
    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"),
    ]
    

    Ezzel az URL-beállítással az alkalmazás útválasztása így néz ki.

    • localhost:8000/: Főoldal nézet
    • localhost:8000/URL-code: Átirányítás a hosszú URL-re

    Sablonok készítése

    Már majdnem ott vagy. Az egyetlen dolog, ami elválaszt attól, hogy elkészítette ezt az alkalmazást, az a felhasználói felület. Ehhez Django sablonokat használunk.

    A sablonokat arra használják, hogy tiszta felületet jelenítsenek meg az alkalmazás felhasználója számára. Ezek a fájlok az alkalmazáson belül, kettős mappastruktúrában jönnek létre: „sablonok/alkalmazásnév”

    # urlshortener directory
    mkdir -p templates/urlshortener/

    Megjegyzés: A dupla mappastruktúra és a Django Template nyelv túlmutat ennek az oktatóanyagnak a keretein, de ezekről a hivatalos dokumentáció.

    Alap sablon

    A Django lehetővé teszi a sablon öröklését. Ez azt jelenti, hogy rendelkezhetünk egy alapsablonnal, és bővíthetjük azt a SZÁRAZ (Ne ismételd magad) elvet követve.

    cd templates/urlshortener
    touch base.html

    A base.html fájl egy konvenció, és azt jelenti, hogy az alkalmazás minden más sablonjának ennek a sablonnak a kiterjesztésének kell lennie.

    <!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>
    

    A bootstrap CDN-t fogjuk használni, hogy egy gyors és szép felületet készítsünk anélkül, hogy CSS- vagy javascript-fájlokra lenne szükség.

    Ha mélyebben szeretne tanulni a DTL-címkékről, megteheti a hivatalos dokumentumok.

    Kezdőlap sablon

    Az otthoni sablon, inherence a base.html fájlból. Ez azt jelenti, hogy ez a sablon tartalmazza a szülőfájl összes HTML-jét.

    {% 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 %}

    Gyorsan elmagyarázom ennek a sablonnak az adatfolyamát:

    • Megjelenik a Rövidítő űrlap. Benne crsf token be van állítva (Biztonsági okok), és csak az űrlap hosszú URL mezője jelenik meg. Ne feledje, hogy ennek a mezőnek a CSS osztálya van, „form-control form-control-lg”, mert ezt beállítottuk az űrlapban.
    • Ha bármilyen hibát talál, mutassa meg
    • Ha a POST művelet sikeres, megjelenik az új URL.

    Végső alkalmazás

    Gratulálunk! 🎉. Egy teljes funkcionális URL-rövidítő alkalmazást épített fel a Django segítségével.

    Íme néhány képernyőkép az alkalmazás kinézetéről.

    Csak:

    Hiba az URL lerövidítésekor:

    Sikeres rövidített URL:

    URL átirányítva:

    Mi a véleményed arról, hogy valakinek kiteszed ennek az URL-rövidítő alkalmazásnak a demóját? Nézze meg, hogyan teheti közzé a Django Demo alkalmazást az interneten.

    Kihívás 🔥

    Ha jól érzed magad a Django képességeidben, miért ne gyakorolhatnál egy kihívással?

    Klónozza az alkalmazás kódját, és hozzon létre egy hitelesítési rendszert, ahol csak a regisztrált felhasználók rövidíthetik le URL-címeiket.

    Ha végzett, küldjön lehívási kérelmet, és ping-eljen Twitter hogy bemutassa eredményeit.

    Becsomagolás

    Elérkezett ennek az oktatóanyagnak a végére. Akár hiszi, akár nem, most áttekintette a Django projekt létrehozásának főbb szempontjait. Remélem, rendkívül hasznosnak találtad.

    Ebben az oktatóanyagban Ön:

    • Megismerte a Django alkalmazás létrehozásának munkafolyamatát.
    • Felépített egy önéletrajzi projektet
    • Megértette a Django projektek és a Django alkalmazások különbségeit és szerkezetét.
    • Felfedezte az MVT mintát.
    • Létrehozva a függvény alapnézeteit
    • A Django ORM-et (Object Relational Mapper) használta egyszerű modellek létrehozásához

    Ez minden, sok mindent fedezni kell a Django webes keretrendszerezért tartsa a kapcsolatot további csodálatos oktatóanyagokért.