วิธีใช้การกำหนดเส้นทางแบบไดนามิกด้วย Django

ผู้อ่านเช่นคุณช่วยสนับสนุน MUO เมื่อคุณทำการซื้อโดยใช้ลิงก์บนเว็บไซต์ของเรา เราอาจได้รับค่าคอมมิชชั่นจากพันธมิตร

หากไม่มีการกำหนดเส้นทางแบบไดนามิก การนำทางหน้าเว็บจะเป็นเรื่องยาก คุณจะต้องพิมพ์เส้นทางแบบเต็มของทุกหน้าที่คุณเยี่ยมชมบนเบราว์เซอร์ ช่างเป็นประสบการณ์ที่แย่มาก

Dynamic Uniform Resource Locators (URL) ช่วยให้คุณสามารถนำทางไปยังหน้าต่างๆ ในแอปได้ด้วยการคลิกปุ่ม Django ทำให้ง่ายต่อการออกแบบ URL แบบไดนามิก มีโมดูลการกำหนดค่า URL (URLconf) ที่เชื่อมต่อนิพจน์ URL กับมุมมอง

คลิปวิดีโอประจำวันนี้

โค้ดทั้งหมดใน URLconf อยู่ในรูปแบบ Python ทำให้ง่ายต่อการสร้าง URL แบบไดนามิก มาเรียนรู้เพิ่มเติมเกี่ยวกับ URL แบบไดนามิกโดยการสร้างโปรเจ็กต์ Django

1. สร้างโครงการจังโก้

อันดับแรก, สร้างโปรเจกต์จังโก้ และแอพพลิเคชั่น (แอพ)

ตั้งชื่อแอปของคุณ Boma-watch . แอพจะรวบรวมสถานที่ คำอธิบาย และหมายเลขที่อยู่อาศัยจากละแวกใกล้เคียงต่างๆ สร้างแบบจำลองชื่อ ละแวกบ้าน . ใช้แบบจำลองเพื่อเพิ่มข้อมูลเกี่ยวกับละแวกใกล้เคียงลงในฐานข้อมูล เรียนรู้วิธีการ สร้างแบบจำลองใน Django และฐานข้อมูลหากคุณไม่คุ้นเคย

ถัดไป สร้างฟังก์ชันมุมมองสำหรับพื้นที่ใกล้เคียง

2. สร้างฟังก์ชั่นดู

ใน Django มุมมองคือฟังก์ชัน Python ที่รับคำขอ HTTP และตอบกลับ บนหน้าเว็บที่ขับเคลื่อนโดย Django มุมมองดำเนินการงานและภารกิจที่หลากหลาย

หากต้องการเรียกใช้มุมมอง คุณต้องเรียกใช้ผ่าน URL URL เป็นเส้นทางที่ไม่ซ้ำกันไปยังทรัพยากรบนเว็บ ทรัพยากรอาจเป็นหน้า HTML รูปภาพ หรือปลายทาง API

สร้าง URL ที่ดึงข้อมูลพื้นที่ใกล้เคียงตามพารามิเตอร์ที่ส่งผ่าน ในการทำเช่นนั้น คุณสามารถใช้ คีย์หลัก (pk) หรือ บัตรประจำตัว (id) เพื่อดึงข้อมูล คุณจะใช้เทมเพลตเดียวในการดำเนินการนี้

คุณสามารถสร้างมุมมองโดยกำหนดในไฟล์ชื่อ views.py ในโฟลเดอร์ของแอพ เริ่มต้นด้วยการนำเข้า เรนเดอร์ ฟังก์ชันจาก Django เพื่อแสดงข้อมูลที่ URL ยังนำเข้า ละแวกบ้าน นางแบบจาก model.py .

from django.shortcuts import render 
from .models import NeighbourHood

ถัดไป สร้างฟังก์ชันการดูชื่อ บ้าน ที่แสดงย่านใกล้เคียงทั้งหมดบนเทมเพลตบ้าน ดิ เพื่อนบ้านHood.objects.all() ฟังก์ชั่นรับข้อมูลสำหรับละแวกใกล้เคียงทั้งหมดจากฐานข้อมูล

def home(request): 
     neighborhoods = NeighbourHood.objects.all() 
     return render (request, "home.html", {'neighborhoods':neighborhoods})

สร้างฟังก์ชันมุมมองสำหรับ .ด้วย join_hood ที่จะแสดงข้อมูลของพื้นที่ใกล้เคียง ดิ เพื่อนบ้านHood.objects.get(id=id) ฟังก์ชั่นขอข้อมูลตาม ID ข้อมูลจะแสดงผลบนเทมเพลต

def join_hood(request, id): 
     neighborhood = NeighbourHood.objects.get(id=id) 
     return render (request, 'join_hood.html', {'neighborhood':neighborhood})

ต่อมา เมื่อคุณนำทางไปยังพื้นที่ใกล้เคียง คุณจะสามารถดูข้อมูลโปรไฟล์ได้

3. สร้างไดนามิก URL

ขณะนี้ คุณสามารถสร้าง URL แบบไดนามิกสำหรับฟังก์ชันมุมมองที่คุณสร้างขึ้น

from django.urls import path 
from . import views 
from django.conf import settings 
from django.conf.urls.static import static 
from django.contrib.staticfiles.urls import staticfiles_urlpatterns 
  
urlpatterns = [ 
      path ('home', views.home, name='home'), 
      path ('join_hood/<str:id>/', views.join_hood, name='join_hood'), 
] 
  
if settings.DEBUG: 
     urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

นำเข้า เส้นทาง จาก Django URL เพื่อสร้างเส้นทางสำหรับมุมมอง จากนั้นนำเข้าฟังก์ชั่นมุมมองจาก views.py .

ดิ join_hood URL มีตัวยึดตำแหน่งในวงเล็บมุม: . ซึ่งจะจับส่วนนั้นของ URL และส่งไปยังมุมมอง

ใครใช้ซิมการ์ดของคุณได้บ้าง

วงเล็บเหลี่ยมมักจะมีข้อกำหนดเกี่ยวกับตัวแปลง ข้อมูลจำเพาะอาจเป็นสตริง (str) หรือจำนวนเต็ม (int) จังโก้ยังเสนอ ทาก เส้นทาง , หรือ ตัวระบุที่ไม่ซ้ำกันในระดับสากล (อุอิอิอิ) ข้อกำหนดจำกัดชนิดของตัวแปรหรือจำนวนอักขระที่ส่งผ่านใน URL ไปยังมุมมอง

การระบุชื่อ URL จะช่วยระบุ URL บนเทมเพลต

ดิ คงที่ และ staticfiles การนำเข้าจะแสดงไฟล์สแตติกบนเส้นทาง URL เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการจัดโครงสร้างพารามิเตอร์ URL อย่างเป็นทางการ จังโก้ เอกสาร

4. เพิ่ม URL ให้กับเทมเพลต

เมื่อคุณเพิ่มฟังก์ชันมุมมองไปยัง URL แล้ว ให้สร้างเทมเพลต HTML เพื่อแสดงข้อมูล คุณตั้งชื่อเทมเพลต join_hood.html .

{% extends "base.html" %} 
  
{% load static %} 
  
{% block content %} 
<div class="card mb-3" style="max-width:fit content;"> 
    <div class="row g-0"> 
        <div class="col-md-4"> 
            <div class="col-md-8" > 
                <div class="card-body"> 
                    <h5 class="card-title"> Welcome!</h5> 
                    <p class="card-text pt-4"> Name: {{neighbourhood.name}}</p> 
                    <p class="card-text pt-4"> Location: {{neighbourhood.location}}</p> 
                    <p class="card-text pt-4"> Description: {{neighbourhood.description}}</p> 
                    <p class="card-text pt-4"> Health Tel:{{neighbourhood.health_tell}}</p> 
                    <p class="card-text pt-4"> Police Number: {{neighbourhood.police_number}}</p> 
                    <p class="card-text pt-4"> Residents : {{neighbourhood.Count}}</p> 
                </div> 
            </div> 
        </div> 
    </div> 
</div> 
{% endblock %}

สร้าง join_hood เทมเพลตในโฟลเดอร์แอปเพื่อแสดงข้อมูลพื้นที่ใกล้เคียง ขั้นแรกให้ขยาย base.html เทมเพลตที่มีสไตล์ชีต (bootstrap) ที่คุณจะใช้เพื่อจัดรูปแบบเทมเพลต จากนั้นแสดงตัวแปรที่จะแสดงข้อมูลบนหน้า

ถัดไป สร้าง a home.html เทมเพลตที่คุณจะแสดงย่านใกล้เคียงทั้งหมด

{% extends 'base.html' %} 
  
{% load static %} 
  
{% block content %} 
<div class="container" style="color:black;"> 
    <img src="{{neighborhood.hood_logo.url}}" class="card-img-top" alt="{{user.neighborhood.name}}"> 
  
    <div class="row"> 
        {% for neighborhood in neighborhoods %} 
        <div class="col-md-4"> 
            <div class="card mb-4" style="min-height:340px"> 
                <img src="{{neighborhood.hood_logo.url}}" class="card-img-top" alt="{{user.hood.name}}"> 
  
                <div class="card-body"> 
                    <h5 class="card-title"> 
                       {{neighborhood.name}} 
                       ({{neighborhood.location}}) 
                       <span class="ml-4">{{neighborhood.Count}} member{{neighborhood.members.count|pluralize}}</span> 
                   </h5> 
  
                    <p class="card-text">{{neighborhood.description}}</p> 
                    <p class="card-text">{{neighborhood.member.Count}}</p> 
  
                    <a href="{% url 'join_hood' neighborhood.id %}" class="btn btn-primary btn-sm">Join Hood</a> 
                </div> 
            </div> 
        </div> 
    </div> 
</div> 
{% endblock %}

บนโฮมเพจ แสดงข้อมูลทั้งหมดที่คุณต้องการแสดงเกี่ยวกับละแวกใกล้เคียง คุณจะเพิ่มปุ่มและแท็กสมอบนโฮมเพจ แท็ก Anchor มี URL ชื่อ และ ID พื้นที่ใกล้เคียง .

เมื่อคลิก ปุ่มจะนำทางไปยังพื้นที่ใกล้เคียงของ ID นั้น เทมเพลตหลักปรากฏที่ URL http://127.0.0.1:8000/home/. The picture below demonstrates this page:

5. ทดสอบการกำหนดเส้นทางแบบไดนามิก

ตอนนี้คุณสามารถทดสอบว่าการกำหนดเส้นทางแบบไดนามิกทำงานบนเทมเพลตได้หรือไม่ เมื่อคุณคลิก เข้าร่วมประทุน ปุ่ม มันนำทางไปยัง join_hood แม่แบบ ดิ join_hood เทมเพลตจะแสดงข้อมูลโปรไฟล์เกี่ยวกับพื้นที่ใกล้เคียงที่คุณเลือก

คุณจะเห็น ID ของพื้นที่ใกล้เคียงที่แสดงบนเบราว์เซอร์ URL http://127.0.0.1:8000/join_hood/2/

จะปรากฏดังภาพด้านล่าง:

หน้า join_hood แสดงรายละเอียดของพื้นที่ใกล้เคียงบนเบราว์เซอร์

ยินดีด้วย! คุณได้สร้าง URL แบบไดนามิก

ทำไมต้องใช้ Django URL?

URL แบบไดนามิกเป็นคุณลักษณะที่สำคัญในเว็บแอปพลิเคชัน Django ทำให้ง่ายต่อการออกแบบ URL ตามความต้องการของคุณ มันลบข้อจำกัดที่คุณอาจเชื่อมโยงกับเฟรมเวิร์กอื่นๆ

โมดูล URLconf เต็มไปด้วยทรัพยากรที่สนับสนุนการสร้าง Django URL นอกจากนี้ยังช่วยให้ให้บริการไฟล์แบบคงที่บนเทมเพลตได้ง่ายขึ้นและปรับปรุงการจัดการข้อผิดพลาด

Django มีคุณสมบัติอื่นๆ ที่ออกแบบมาเพื่อเพิ่มประสิทธิภาพแอปพลิเคชันแบ็กเอนด์ มันทำให้การตรวจสอบผู้ใช้ การจัดการเนื้อหา และแผนผังเว็บไซต์ เป็นไปโดยอัตโนมัติ รวมถึงคุณสมบัติอื่นๆ