Verwenden eine dynamische URL innerhalb der Vorlage in Django
Wir werden mit dieser Erklärung lernen, wie man das url-Tag in Templates verwendet und Links innerhalb der Templates in Django hinzufügt.
Verwenden Sie dynamische URLs innerhalb der Vorlage mit Hilfe des url-Tags in Django
Beginnen wir damit, einen Link in unsere HTML-Datei einzufügen. Wir müssen zwei HTML-Dateien im Vorlagenordner erstellen, die wir in unserer Django-App namens demo erstellt haben.
Wir erstellen die Datei index.html und fügen in diese Datei eine Bootstrap-Startvorlage ein, eine kostenlose Quelle für Benutzer.
Wenn Sie in Ihrer App auf andere Seiten verlinken möchten, geht das am einfachsten so:
<a href='/profile'>User profile</a>
Jetzt erstellen wir eine neue URL für die Profilseite und erstellen dann eine Ansicht namens Profil.
from django.urls import path
from . import views
urlpatterns = [
path("", views.INDEX),
path("profile", views.PROFILE),
]
Jetzt erstellen wir zwei Ansichten, INDEX und PROFILE, in der Datei views.py. Dann werden wir zwei Vorlagen zurückgeben: Die erste ist index.html und eine andere ist profile.html.
from django.shortcuts import render
def INDEX(request):
return render(request, "index.html")
def PROFILE(request):
return render(request, "profile.html")
Jetzt erstellen wir eine profile.html-Datei im Vorlagenordner mit derselben Bootstrap-Startvorlage.
Nachdem wir dies gespeichert und den Server ausgeführt haben, gehen wir zu /profile. Wir werden sehen, dass, wenn wir zu dem von uns erstellten Link gehen, er uns auf dieselbe Seite schickt, weil wir direkt darauf verweisen, indem wir diesen Code <a href='/profile'>Benutzerprofil</a> innerhalb der index.html -Datei.
Aber wenn wir die URL von profile zu myprofile in urlpatterns ändern, die sich in der demo-App in der urls.py-Datei befinden:
path("myprofile", views.PROFILE),
Wenn wir nach dem Speichern zum Browser gehen und auf den Link klicken, erhalten wir eine Page not found.
Als erstes gilt es, den Fehler zu beheben. Wir können damit umgehen, indem wir ein name-Argument verwenden, das wir in die path()-Funktion einfügen, die auf profile gesetzt wird.
Dann verwenden wir im Index, anstatt direkt auf das Profil zu verweisen, das url-Tag in den geschweiften Klammern. Und in diesem Fall wäre der Name der URL profile.
path("myprofile", views.PROFILE, name="profile"),
Wenn wir zu unserem Browser zurückkehren und auf den Link klicken, aktualisiert er automatisch den Endpunkt für uns.
Wir können einen weiteren Vorteil nutzen, indem wir Variablen innerhalb der Endpunkte verwenden, um sie mit einem führenden Schrägstrich zu übergeben. Wir werden str verwenden, weil wir einen String-Datentyp senden und unseren Variablennamen hinzufügen möchten.
path("myprofile/<str:username>", views.PROFILE, name="profile")
Nun gehen wir zu views.py und fügen innerhalb der Funktion PROFILE() einen Parameter username hinzu. Dann erstellen wir einen CONTEXT, übergeben den username als Wert und übergeben diese CONTEXT-Variable an die render()-Funktion.
Wir greifen auf den Benutzernamen zu, indem wir ihn in die doppelten geschweiften Klammern in der Datei index.html schreiben.
def PROFILE(request, username):
CONTEXT = {"username": username}
return render(request, "profile.html", CONTEXT)
Wenn wir zu unserem Browser gehen und den Benutzernamen an den Endpunkt übergeben und Enter drücken, sehen wir die Profilseite mit dem Benutzernamen, den wir an den Endpunkt übergeben haben.
Wenn wir den Benutzernamen über den Link weitergeben möchten, müssen wir zu Ansichten gehen und in der Funktion INDEX() dasselbe tun wie in der Funktion PROFILE(). Wir übergeben den CONTEXT an die Datei index.html.
def INDEX(request):
CONTEXT = {"name": "John"}
return render(request, "index.html", CONTEXT)
Jetzt übergeben wir den name an das url-Tag, damit es automatisch den Namen übernimmt.
<a href="{% url 'profile' name %}"">User profile</a>
Es wird nach einer Stelle suchen, an der es es in die urls.py einfügen kann, die hier <str:username> ist, und es wird diese automatisch aktualisieren.
Wenn wir fortfahren und auf den Link klicken, können wir sehen, dass er den Namen genommen hat, den wir ihm gegeben haben, und ihn an das Profil gesendet hat, weil es weiß, dass das Profil ein zusätzliches Argument verarbeiten kann.
Wenn wir mehrere Argumente hätten, würden wir dort einfach ein Leerzeichen einfügen, und wir können weitere Dinge hinzufügen, die an das url-Tag übergeben werden.
Vollständiger Quellcode der views.py-Datei:
from django.shortcuts import render
def INDEX(request):
CONTEXT = {"name": "John"}
return render(request, "index.html", CONTEXT)
def PROFILE(request, username):
CONTEXT = {"username": username}
return render(request, "profile.html", CONTEXT)
Vollständiger Quellcode der Datei index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hi user, this is home page</h1>
<a href="{% url 'profile' name %}"">User profile</a>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Vollständiger Quellcode der Datei profile.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Profile Section</h1>
<p>This is a profile section of {{username}}</p>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn