คู่มือการสร้างแอปย่อ URL ด้วย Django

วิธีที่ดีที่สุดในการเรียนรู้ Django หรือทักษะอื่นๆ คือการใช้ความรู้ที่คุณมีโดยการสร้างโครงการที่ใช้งานได้

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

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

แต่ขอเปิดเผยข้อเท็จจริงบางอย่าง จังโก้ เป็นกรอบการทำงานขนาดใหญ่ที่บางครั้งก็ท้าทายในการเริ่มต้นใช้งาน

ดังนั้นวันนี้คุณกำลังจะสร้างแอปพลิเคชัน Django ที่ใช้งานได้ทั้งหมดตั้งแต่ต้น

ในตอนท้ายของบทช่วยสอนนี้ คุณจะ:

  • ได้เขียนแอปย่อ URL
  • ทำความเข้าใจรูปแบบ Django MVT
  • ได้เรียนรู้ขั้นตอนการทำงานของการสร้างโครงการ

ข้อกำหนดเบื้องต้น

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

  • ความเข้าใจพื้นฐานของคำสั่ง UNIX (ls, cd, rm, touch)
  • ความเข้าใจพื้นฐานของคลาสและฟังก์ชันของ Python
  • ติดตั้ง Python บนคอมพิวเตอร์ของคุณ (อาจชัดเจน แต่ฉันต้องรวมไว้ด้วย)
  • จะดีมากถ้าคุณสร้างบางอย่างด้วย Django แล้ว

รหัสการทำงานทั้งหมดจะมีอยู่ในนี้ ที่เก็บ Github.

ตอนนี้คุณได้เข้าใจแนวคิดก่อนหน้านี้แล้ว มาเข้าเรื่องกันเลย

แถลงการณ์โครงการ

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

ตัวอย่างเช่น ถ้าคุณต้องการแชร์ทวีตและต้องการใส่ลิงก์ไปยังเว็บไซต์ของคุณ แต่จำนวนอักขระที่คุณใช้ถึงขีดจำกัด คุณสามารถใช้ตัวย่อ URL ได้

มาดูกันด้วยกราฟ

อย่างที่คุณเห็น เครื่องมือย่อ URL จะรับ URL แบบยาวและส่งคืน URL แบบสั้น นั่นคือสิ่งที่คุณกำลังจะสร้างในวันนี้

ในโครงการนี้ คุณจะได้ฝึกฝนการใช้รูปแบบ MVT เรียนรู้พื้นฐานของการออกแบบฐานข้อมูลด้วยโมเดล Django และเรียนรู้วิธีแสดงข้อมูลต่อผู้ใช้ผ่านมุมมอง URL และเทมเพลต

โครงสร้างของโครงการ Django

โดยพื้นฐานแล้ว เว็บไซต์ Django สร้างขึ้นจากโปรเจ็กต์เดียวและแอพที่แยกจากกันหลายแอพ แอปเหล่านี้แต่ละแอปมีฟังก์ชันเฉพาะและสามารถทำงานได้ด้วยตัวมันเอง

ลองจินตนาการถึงเว็บแอปพลิเคชันที่ซับซ้อนเช่น สแต็กโอเวอร์โฟลว์. การทำงานของมันขึ้นอยู่กับสองด้านหลัก

  • การจัดการผู้ใช้: ลงชื่อเข้าใช้ ออกจากระบบ ชื่อเสียง สิทธิ์
  • ฟอรัม: คำถาม คำตอบ แท็ก ตัวกรอง

ตามโครงสร้างเว็บไซต์ Django โครงการจะมีชื่อว่า StackOverflow ซึ่งมีแอปหลักสองแอป แอปของผู้ใช้และแอปฟอรัม

แอปเหล่านี้แต่ละแอปมีฟังก์ชันการทำงานในตัวเอง นั่นหมายความว่าทั้งสองมีรหัสทั้งหมดที่จำเป็นในการทำงานอย่างถูกต้อง

ซึ่งรวมถึงโมเดล (โครงสร้างฐานข้อมูล) มุมมอง (คำขอและการตอบสนอง) รูปแบบ URL เฉพาะ และแน่นอน เทมเพลตและไฟล์คงที่ (รูปภาพ, CSS, JavaScript) ซึ่งหมายความว่าแอป Django ใด ๆ สามารถนำมาใช้ใหม่ได้เนื่องจากสามารถทำงานได้ด้วยตัวเอง

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

ตั้งค่าโครงการ Django

ในส่วนนี้ คุณจะตั้งค่าโครงการ Django เพื่อจุดประสงค์นั้น คุณจะใช้เครื่องมือต่างๆ เช่น สภาพแวดล้อมเสมือนจริง เพื่อจัดระเบียบการพึ่งพา Python และสคริปต์ Django ที่สำคัญที่สุด ผู้ดูแลระบบ Django และ Manage.py

สภาพแวดล้อมเสมือนจริง

ฉันมักจะแนะนำให้ทำงานกับ สภาพแวดล้อมเสมือนจริง เมื่อสร้างแอพด้วย Django เป็นวิธีที่มีประสิทธิภาพมากที่สุดในการรักษาชุดของการพึ่งพาเฉพาะ แต่จุดประสงค์หลักคือการแยกแพ็คเกจการพัฒนาออกจากแพ็คเกจทั่วโลก

ดังนั้นมาสร้างสภาพแวดล้อมเสมือนจริงด้วย python คำสั่งฟอร์มในตัว

หมายเหตุ: วิธีนี้ต้องใช้ Python 3.6 หรือเวอร์ชันที่ใหม่กว่าในการทำงาน

python -m venv .venv

คำสั่งนี้ใช้คำสั่ง python -m หรือ python –mod โดยพื้นฐานแล้วรันโมดูลหรือไลบรารีเป็นสคริปต์ ตามความหมายของคำสั่งนี้ venv คือไลบรารีที่เรากำลังเรียกใช้ และ .venv หมายถึงชื่อของสภาพแวดล้อมเสมือนที่เราต้องการสร้าง

ดังนั้นในภาษาธรรมดา คำสั่งนี้จึงหมายถึง

เฮ้ Python ทำงานเป็นสคริปต์ในไลบรารี venv และสร้างชื่อ virtualenv .venv

ตอนนี้ ได้เวลาเปิดใช้งานสภาพแวดล้อมเสมือนจริงที่เราเพิ่งสร้างขึ้นด้วยคำสั่งต่อไปนี้

source .venv/bin/activate

เพื่อยืนยันว่าคุณไม่มีแพ็คเกจที่ติดตั้งใน venv ใหม่ คุณต้องเรียกใช้

pip freeze

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

เข้าสู่ Django กันเถอะ

ในการสร้างแอปพลิเคชันตัวย่อ URL เราจะเริ่มต้นด้วยการติดตั้งแพ็คเกจ Django Django เป็นแพ็คเกจของบุคคลที่สาม ดังนั้นเราจึงจำเป็นต้องติดตั้งด้วย 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

หมายเหตุ: จำไว้ว่า $ ไม่ใช่อะไรนอกจากสัญลักษณ์เชลล์ของคุณ

ในการตรวจสอบว่าการติดตั้งดำเนินไปอย่างถูกต้องหรือไม่ เราตรวจสอบแพ็คเกจที่ติดตั้งของ venv ของเราอีกครั้ง

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

ไม่ต้องกังวลหากเวอร์ชันที่คุณได้รับแตกต่างจากของฉัน หาก Django ยังคงเป็นเวอร์ชัน 3.x คุณสามารถดำเนินการต่อได้โดยไม่มีปัญหาใดๆ

เริ่มโครงการ Django

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

django-admin startproject config

อธิบายทั้งหมดเกี่ยวกับคำสั่งนี้ django-admin เป็นโปรแกรมอรรถประโยชน์บรรทัดคำสั่งที่ทำงานที่จำเป็นทั้งหมดเพื่อสร้างโครงการ Django ส่วน “startproject” คือคำสั่งที่เรียกใช้โดยยูทิลิตี้ Django-admin และ config คือชื่อของโครงการที่เราจะสร้าง

สิ่งสำคัญคือต้องเน้นว่า config สามารถเป็นชื่อใดก็ได้ที่คุณต้องการ เหตุผลที่ฉันใช้ config เป็นชื่อโครงการนี้ก็เพราะความสะดวก เป็นการดีที่จะสลับไปมาระหว่างโครงการและยังคงมีหลักการตั้งชื่อเดียวกัน ดังนั้นอย่ากลัวที่จะใช้ชื่อโครงการอื่นเมื่อใดก็ตามที่คุณต้องการ

คุณอาจสังเกตเห็นว่าตอนนี้คุณมีโฟลเดอร์ config/ และข้างในมีไฟล์มากมาย ต่อมาเราจะเห็นโครงสร้างไฟล์ของโครงการ สำหรับตอนนี้ ให้เข้าสู่ไดเร็กทอรีโครงการและเรียกใช้เซิร์ฟเวอร์ภายในเครื่อง

cd config/

ไฟล์ที่สำคัญที่สุดที่คุณจะใช้คือสคริปต์ Manage.py มีฟังก์ชันการทำงานเหมือนกับ django-admin แต่ข้อดีหลักของการใช้งานคือช่วยให้คุณจัดการการตั้งค่าเมื่อรันโปรเจ็กต์

ทีนี้มาดูกันว่าทุกอย่างทำงานถูกต้องหรือไม่

python manage.py runserver

การสร้างแอปย่อ URL

ได้เวลาสร้างแอปหลักของโครงการแล้ว คุณกำลังจะใช้ไฟล์ Manage.py เพื่อทำงานนี้ให้สำเร็จ

python manage.py startapp urlshortener

สิ่งนี้สร้างแอป Django พร้อมชื่อ urlshortener หากคุณเรียกใช้ ต้นไม้ คำสั่ง คุณจะได้สิ่งนี้

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

เรามาอธิบายไฟล์ต่างๆ ที่สร้างขึ้นจนถึงขณะนี้กันดีกว่า “config” เป็นชื่อโครงการของเราและตั้งชื่อตามการประชุมเท่านั้น ภายใน config คุณจะได้ไฟล์ settings.py ซึ่งเป็นไฟล์ที่คุณตั้งค่าทั้งหมดของโครงการ urls.py คือการกำหนดค่าโดยรวมของ URL ภายในโครงการ กำหนดเส้นทาง URL ของแอปพลิเคชันทั้งหมดภายในโครงการ

  วิธีใช้ปฏิกิริยาใน 'Animal Crossing: New Horizons' จากสมาร์ทโฟนของคุณ

ไม่ต้องกังวลมากเกินไปเกี่ยวกับไฟล์ asgi.py และ wsgi.py ไฟล์เหล่านี้เป็นไฟล์ที่ให้คุณกำหนดค่าแอปพลิเคชันของคุณในการปรับใช้

Manage.py เป็นสคริปต์ไพทอนที่ให้คุณเรียกใช้คำสั่งที่มีอยู่ทั้งหมดของ Django-ผู้ดูแลระบบ.

เมื่อดูใน urlshortener ซึ่งเป็นชื่อของแอปที่คุณเพิ่งสร้างขึ้น คุณอาจสังเกตเห็นว่ามีโฟลเดอร์แปลก ๆ ชื่อ “migrations/” และไฟล์อื่นๆ บางไฟล์ที่มีความสำคัญต่อตรรกะของแอปใดๆ

apps.py เป็นที่อยู่ของการกำหนดค่าแอป โดยปกติแล้ว คุณจะไม่ยุ่งกับมัน เว้นแต่ว่าคุณกำลังทำสิ่งที่ค่อนข้างล่วงหน้า

admin.py คือที่ที่คุณลงทะเบียนโมเดลของคุณเพื่อให้มองเห็นได้ในแผงการดูแลระบบ Django

models.py เป็นไฟล์ที่สำคัญที่สุด ภายในโมดูลนี้ คุณต้องกำหนดโมเดลซึ่ง (พูดคลุมเครือ) คือวิธีการจัดเก็บข้อมูล คุณจะได้ยินข้อมูลเพิ่มเติมเกี่ยวกับรุ่นต่างๆ ในภายหลัง

การโยกย้าย/ เป็นโฟลเดอร์ที่จัดเก็บการโยกย้าย Django เราจะพิจารณาในเชิงลึกในภายหลัง

test.py เป็นไฟล์ที่เก็บการทดสอบ เราจะไม่กล่าวถึงการทดสอบในบทช่วยสอนนี้

views.py เป็นไฟล์ที่เก็บมุมมอง โดยพื้นฐานแล้ว จะกำหนดวิธีที่ผู้ใช้จะโต้ตอบกับทุกแง่มุมของแอปของคุณ

การติดตั้งแอป Django

ก่อนดำเนินการต่อ ให้เปิดไฟล์ settings.py และแก้ไขตัวแปร INSTALLED_APPS โดยเพิ่มแอป 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',
]

นี่เป็นกระบวนการที่ทำเป็นประจำเมื่อคุณสร้างแอป ดังนั้นทุกครั้งที่คุณทำ อย่าลืมติดตั้งในการตั้งค่าโครงการ

ทำความเข้าใจกับรูปแบบ MVT

รูปแบบ Model, View, Template เป็นรูปแบบการออกแบบซอฟต์แวร์ที่นักพัฒนา Django ใช้เพื่อสร้างเว็บแอปพลิเคชัน

โดยมีพื้นฐานมาจาก 3 แนวคิดหลัก โมเดล (ข้อมูล), มุมมอง (การโต้ตอบของผู้ใช้กับข้อมูล), เทมเพลต (วิธีที่ผู้ใช้เห็นข้อมูล)

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

มุมมองในนิพจน์ที่ง่ายที่สุดคือ callable ที่รับคำขอจากผู้ใช้และสร้างการตอบกลับ ระหว่างกระบวนการที่เกิดขึ้นตรรกะทางธุรกิจ ฉันรู้ว่า “ตรรกะทางธุรกิจ” เป็นแนวคิดที่ค่อนข้างคลุมเครือ ดังนั้นให้ฉันอธิบายว่ามันคืออะไร ตรรกะทางธุรกิจคือวิธีการสร้าง จัดเก็บ และลบข้อมูล นั่นคือทั้งหมด

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

สร้างแบบจำลอง Shortener

เมื่อคุณเข้าใจรูปแบบ MVT อย่างรวดเร็วแล้ว เรามาเริ่มสร้างตัวย่อ URL ของ Django ตั้งแต่เริ่มต้น

ก่อนอื่น มากำหนดโมเดลย่อภายในไฟล์ 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}'

ฉันรู้. เป็นคลาสที่ค่อนข้างใหญ่ มีเรื่องแปลกๆ เกิดขึ้นมากมาย แต่อย่าเพิ่งหมดหวังไป ฉันจะไปทีละขั้นตอนในแต่ละสิ่งสำคัญ

คำอธิบายแบบจำลอง

ก่อนอื่น เรานำเข้าโมดูลโมเดล โมดูลนี้มีฟังก์ชันทั้งหมดที่เราต้องใช้ในการสร้างโมเดล Django

เมื่อดูที่โมเดล “Shortener” สิ่งแรกที่ควรทราบคือมันขยายโมเดลโมเดล อันที่จริง โมเดลใดๆ ในแอป Django ต้องเป็นคลาสย่อยของ โมเดล.โมเดล ระดับ.

จากนั้นเราจะกำหนดฟิลด์ทั้งหมดที่โมเดลจะมีในฐานข้อมูล ฟิลด์ “สร้าง” คือวันที่และเวลาที่สร้างลิงก์แบบย่อ ดังนั้นเราจึงใช้ DateTimeField เพื่อสร้างฟังก์ชันประเภทนี้ เราใช้อาร์กิวเมนต์ auto_now_add=True เนื่องจากเราต้องการให้ฟิลด์ถูกแก้ไขเมื่อสร้างอินสแตนซ์เท่านั้น

ฟิลด์ที่สอง times_followed หมายถึงจำนวนครั้งที่ URL แบบสั้นถูกใช้ เป็น PositiveIntegerField และเราระบุค่าเริ่มต้นเป็นศูนย์ นั่นหมายความว่าทุกครั้งที่อินสแตนซ์สร้างฟิลด์ times_followed Django จะเติมฟิลด์นั้นด้วย 0

ในทางกลับกัน long_url หมายถึง URL ที่ผู้ใช้ป้อน เป็น URLField เนื่องจากเราต้องการให้ผู้ใช้ป้อนเฉพาะอักขระของแบบฟอร์ม: http://yoursite.com

ฟิลด์สุดท้ายคือ short_url ซึ่งมีรายละเอียดที่น่าสนใจ เราระบุว่าต้องมีความยาว 15 อักขระเท่านั้น และต้องไม่ซ้ำกัน ซึ่งหมายความว่าไม่สามารถมีองค์ประกอบซ้ำในฟิลด์นั้น สุดท้าย เราระบุว่าสามารถเว้นว่างไว้ได้ ซึ่งหมายความว่าเมื่อทำงานกับฟอร์ม ผู้ใช้ไม่จำเป็นต้องเขียนรหัสย่อของตนเอง

คลาสภายใน Meta บอกเราว่าคลาสต้องประพฤติตัวอย่างไร และเราตั้งค่าว่าการจัดลำดับ (การเรียก Shortener.objects.all()) ของอ็อบเจกต์ shortener จะถูกเลือกปฏิบัติโดยอันล่าสุด

เมธอด __str__ บอกวิธีการพิมพ์โมเดล ดังนั้นหากเรามีวัตถุที่มี long_url = “https://admintrick.com.com/” และส่วนย่อ “123456” และเราพิมพ์ออกมา

https://admintrick.com.com/ to 123456

ถึงเวลาค้นหาวิธีบันทึกลิงก์สั้นด้วยวิธีสุ่ม

การสร้างฟังก์ชันย่อ

เรากำลังจะสร้าง 2 ฟังก์ชันที่กำหนดเอง ตัวแรกจะสร้างรหัสสุ่มและตัวที่สองจะป้องกันไม่ให้รับรหัสสุ่มซ้ำจากโมเดล Shortener ในการทำเช่นนี้ ให้สร้างไฟล์ utils.py ภายในแอป “urlshortener”

touch utils.py

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

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

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

มาทำคณิตศาสตร์กัน หากเรามีสถานที่ 7 แห่งที่สามารถมีอักขระที่ใช้ได้สูงสุด 62 ตัวสำหรับแต่ละสถานที่ เป็นไปได้ การเรียงสับเปลี่ยน เป็น:

ดังนั้นจากการคำนวณอย่างรวดเร็วเหล่านี้ ส่วนที่ย่อจึงสามารถกรอกรหัสต่างๆ ได้มากถึง 2.5 ล้านล้านรหัส ดังนั้นเราจึงสามารถลืมเกี่ยวกับการออกจาก URL ที่สั้นลงแบบสุ่ม

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

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

มาดูกันว่าเกิดอะไรขึ้นที่นี่ ฟังก์ชันใช้เป็นอาร์กิวเมนต์ของอินสแตนซ์โมเดล “Shortener” ขั้นแรก ฟังก์ชันสร้างรหัสสุ่มโดยใช้ create_random_code จากนั้นจะได้รับคลาสโมเดลและตรวจสอบว่ามีวัตถุอื่นที่มี short_url เหมือนกันหรือไม่ ถ้ามันทำงานเองอีกครั้ง แต่ถ้าทุกอย่างปกติ มันจะคืนค่า random_code

หลังจากนั้น คุณจะโต้ตอบกับเชลล์ เพื่อดูฟังก์ชันนี้อย่างใกล้ชิด

หลังจากสร้างฟังก์ชันยูทิลิตี้แล้ว ให้ใช้เพื่อสร้างรหัสสุ่มในโมเดลย่อ

การแก้ไขวิธีการบันทึก

ในตอนท้ายของคลาส “Shortener” คุณจะแก้ไขวิธีการบันทึกโมเดล วิธีการบันทึกจะถูกเรียกใช้ทุกครั้งที่มีการบันทึกวัตถุลงในฐานข้อมูล ดังนั้นเราจะดูวิธีใช้ที่นี่

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

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

  วิธีตรึงตำแหน่งบนค้นหา iPhone ของฉัน

กำลังดำเนินการย้ายข้อมูล

ถึงเวลาสร้างและเรียกใช้การโยกย้ายของโมเดล Shortener ในการทำเช่นนั้นให้รันคำสั่งต่อไปนี้ในโฟลเดอร์รูทโปรเจ็กต์

$ 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

สำหรับตอนนี้ คุณไม่ต้องกังวลว่าการย้ายข้อมูลคืออะไร โปรดทราบว่าเมื่อเรียกใช้คำสั่งทั้งสองนี้ Django จะสร้างไฟล์ ฐานข้อมูล db.sqlite ไฟล์ตามรุ่นที่คุณกำหนด

มาสร้างวัตถุด้วย Django shell กันเถอะ

$ python manage.py shell

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

นั่นเป็นวิธีที่วัตถุที่สั้นลงทั้งหมดจะทำงานได้ค่อนข้างมาก

มุมมองการเขียน

อย่างที่ฉันพูดไปก่อนหน้านี้ มุมมองเป็นฟังก์ชันง่ายๆ ที่รับคำขอและส่งคืนการตอบกลับ มาดูวิธีสร้างมุมมองแบบ Hello World กัน

การตอบสนองแม่แบบพื้นฐาน

ภายในไฟล์ “urlshortener/views.py” ให้สร้างฟังก์ชัน home_view อ่า

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

มันส่งคืนข้อความง่ายๆ “Hello world” หลังจากนั้นคุณจะเห็นว่ามันมีลักษณะอย่างไรในเบราว์เซอร์ ตอนนี้สร้าง “urls.py” ซึ่งจะมีรูปแบบ URL ทั้งหมดของแอป

สัมผัส url.py

เพิ่มรหัสต่อไปนี้

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

ตัวแปรชื่อแอปประกาศ (ตามชื่อของมัน) การเว้นวรรคของแอป urlshortener

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

ตอนนี้ เรามาแก้ไข URL ของโครงการโดยรวมกัน

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

ตอนนี้ให้เรียกใช้เซิร์ฟเวอร์อีกครั้ง

python manage.py runserver

หากคุณใช้งานเซิร์ฟเวอร์ คุณจะได้รับข้อความ “Hello world” แบบเรียบง่าย นี่เป็นเพราะคุณกำลังรวมรูปแบบ url จากแอปตัวย่อ URL ลงในโครงการโดยรวม

นี่เป็นเพียงจุดเริ่มต้นเท่านั้น ถึงเวลาสร้างฟอร์มเพื่อให้ผู้ใช้สร้าง Shortened URL ด้วยตัวเอง

การสร้างแบบฟอร์ม

ใน Django ก รูปร่าง เป็นคลาสง่าย ๆ ที่อนุญาตให้รับข้อมูลจากผู้ใช้

คุณกำลังจะสร้างไฟล์ form.py เป็นแบบแผนในการจัดเก็บรูปแบบทั้งหมดของแอพในไฟล์นั้น

cd urlshortener/
touch forms.py

ภายในไฟล์นั้น คุณจะสร้างคลาส “ShortenerForm” ซึ่งขยายมาจาก “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',)

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

จบการชม

หลังจากสร้างแบบฟอร์มแล้ว ก็ถึงเวลาสร้างตรรกะทางธุรกิจขั้นสุดท้ายของแอปพลิเคชัน

ไปที่ไฟล์ views.py ภายในแอป shortener และแก้ไขมุมมอง home_view ท่านสามารถตรวจสอบได้ที่ ที่เก็บ Github ในขณะนี้เพื่อทำความเข้าใจว่าโครงสร้างโครงการเป็นอย่างไร

มีสองมุมมองสำหรับแอปตัวย่อ URL:

  • มุมมองหน้าแรก: แสดงแบบฟอร์มที่สั้นลง และ URL ใหม่หากส่งแบบฟอร์มแล้ว
  • มุมมองเปลี่ยนเส้นทาง: เปลี่ยนเส้นทางไปยัง URL แบบยาว และเพิ่ม 1 ในเวลาถัดไป
  • เริ่มกันที่โฮมวิวซึ่งซับซ้อนที่สุด คุณจะต้องนำเข้าโมเดลและแบบฟอร์ม Shortener คุณยังคงใช้ฟังก์ชันอยู่ เนื่องจากฉันต้องการให้คุณเข้าใจการไหลของข้อมูลทั้งหมดของมุมมอง นอกจากนี้ คุณจะใช้เส้นทางสำหรับเทมเพลต (ซึ่งยังไม่ได้สร้าง)

    มุมมองบ้าน

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

    มุมมองขึ้นอยู่กับสองเงื่อนไข:

  • เมื่อเมธอด HTTP เท่ากับ GET เราจะส่งผ่านเป็นบริบทเท่านั้น รูปแบบ Shortener ที่ใช้สร้างวัตถุ Shortener
  • เมื่อเมธอด HTTP เท่ากับ POST: เรายังคงส่งแบบฟอร์มในบริบท เนื่องจากเราต้องการให้ผู้ใช้สามารถป้อน URL อื่นได้ แต่เรากำลังส่งคำขอโพสต์ไปยังแบบฟอร์มอื่นที่เรียกว่า used_form
  • วิธีที่ยุ่งยากในการรับ URL ของไซต์ที่สมบูรณ์แบบไดนามิกคือการใช้เมธอดวัตถุคำขอ build_absolute_uri

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

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

    มุมมองเปลี่ยนเส้นทาง

    redirect_url_view นั้นง่ายกว่าเล็กน้อย เป็นมุมมองแบบละเอียด ซึ่งหมายความว่ามุมมองจะใช้งานได้กับวัตถุเท่านั้น

    ฟังก์ชันนี้ใช้เป็นพารามิเตอร์ คำขอของผู้ใช้ และ shortened_part ของ URL ไม่จำเป็นต้องยืนยันประเภทคำขอที่เราได้รับ เนื่องจากเราไม่ได้ทำงานกับฟอร์มในมุมมองนี้

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

    เราปกป้องมุมมองด้วยคำสั่งลอง/ยกเว้น ในกรณีที่ไม่พบส่วนที่ย่อในฐานข้อมูล หากพบวัตถุ ให้เพิ่ม 1 ลงในช่อง times_followed และเปลี่ยนเส้นทางด้วยฟังก์ชัน HttpResponseRedirect ไปยัง URL ของไซต์ที่สอดคล้องกับรหัสสุ่ม

      วิธียกเลิกการสมัครสมาชิก Apple TV+ ของคุณ

    กำลังอัปเดต URL

    เมื่อคุณสร้างมุมมองทั้งสองของแอปแล้ว ก็ถึงเวลาสร้างรูปแบบ URL สุดท้ายโดยใส่เส้นทางไปยัง redirect_url_view

    เช่นเคย คุณเริ่มต้นด้วยการนำเข้ามุมมอง จากนั้นสร้างฟังก์ชันพาธและส่งผ่านเป็นอาร์กิวเมนต์:

    • เส้นทาง URL
    • มุมมองที่ชี้ไปยังเส้นทาง
    • ชื่อของเส้นทาง
    '''
    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"),
    ]
    

    ด้วยการตั้งค่า URL นี้ การกำหนดเส้นทางของแอปจะมีลักษณะดังนี้

    • localhost:8000/: มุมมองบ้าน
    • localhost:8000/URL-code: การเปลี่ยนเส้นทางไปยัง URL แบบยาว

    การสร้างเทมเพลต

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

    เทมเพลตใช้เพื่อแสดงอินเทอร์เฟซใหม่สำหรับผู้ใช้แอป ไฟล์เหล่านี้ถูกสร้างขึ้นภายในแอพในโครงสร้างโฟลเดอร์สองรูปแบบ: “เทมเพลต/ชื่อแอพ”

    # urlshortener directory
    mkdir -p templates/urlshortener/

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

    เทมเพลตพื้นฐาน

    Django อนุญาตการสืบทอดเทมเพลต ซึ่งหมายความว่าเราสามารถมีเทมเพลตพื้นฐานและขยายได้โดยมีวัตถุประสงค์เพื่อปฏิบัติตามหลักการ DRY (อย่าทำซ้ำตัวเอง)

    cd templates/urlshortener
    touch base.html

    ไฟล์ base.html เป็นแบบแผนและหมายความว่าเทมเพลตอื่นๆ ทั้งหมดในแอปจะต้องเป็นส่วนขยายของเทมเพลตนี้

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

    เราจะใช้ bootstrap CDN เพื่อสร้างอินเทอร์เฟซที่รวดเร็วและสวยงามโดยไม่ต้องใช้ไฟล์ CSS หรือจาวาสคริปต์

    หากคุณต้องการเรียนรู้อย่างลึกซึ้งเกี่ยวกับแท็ก DTL คุณสามารถทำได้โดยใช้ เอกสารอย่างเป็นทางการ.

    แม่แบบบ้าน

    เทมเพลตหน้าแรก สืบทอดมาจากไฟล์ base.html นั่นหมายความว่าเทมเพลตนี้มี HTML ทั้งหมดจากไฟล์พาเรนต์

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

    ฉันจะอธิบายการไหลของข้อมูลของเทมเพลตนี้อย่างรวดเร็ว:

    • แบบฟอร์ม Shortener จะปรากฏขึ้น ข้างใน โทเค็น crsf ถูกตั้งค่า (เหตุผลด้านความปลอดภัย) และจะแสดงเฉพาะฟิลด์ URL แบบยาวของแบบฟอร์มเท่านั้น โปรดจำไว้ว่าฟิลด์นี้มีคลาส CSS คือ “form-control form-control-lg” เพราะเราตั้งค่าไว้ในฟอร์ม
    • หากพบข้อผิดพลาดให้แสดง
    • หากดำเนินการ POST สำเร็จ URL ใหม่จะแสดงขึ้น

    การสมัครครั้งสุดท้าย

    ยินดีด้วย! 🎉. คุณได้สร้างแอปย่อ URL ที่ทำงานได้อย่างสมบูรณ์ด้วย Django

    นี่คือภาพหน้าจอบางส่วนที่แสดงลักษณะของแอปพลิเคชัน

    รับเฉพาะ:

    เกิดข้อผิดพลาดในการย่อ URL:

    URL ที่ย่อสำเร็จ:

    เปลี่ยนเส้นทาง URL:

    คุณคิดอย่างไรกับการเปิดเผยตัวอย่างแอปตัวย่อ URL นี้ให้ใครบางคนเห็น ตรวจสอบวิธีเปิดเผยแอป Django Demo บนอินเทอร์เน็ต

    ท้าทาย 🔥

    หากคุณรู้สึกพอใจกับทักษะ Django ของคุณ ทำไมไม่ลองฝึกกับความท้าทายดูล่ะ

    คัดลอกรหัสของแอปพลิเคชันนี้และสร้างระบบตรวจสอบสิทธิ์ ซึ่งเฉพาะผู้ใช้ที่ลงทะเบียนเท่านั้นที่สามารถย่อ URL ได้

    เมื่อเสร็จแล้ว ให้ส่งคำขอดึงและ ping ฉัน ทวิตเตอร์ เพื่อแสดงความสำเร็จของคุณ

    ห่อ

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

    ในบทช่วยสอนนี้ คุณ:

    • เรียนรู้เกี่ยวกับขั้นตอนการสร้างแอป Django
    • สร้างโครงการดำเนินการต่อ
    • เข้าใจความแตกต่างและโครงสร้างของโปรเจ็กต์ Django และแอป Django
    • ค้นพบรูปแบบ MVT
    • สร้างมุมมองฐานฟังก์ชัน
    • ใช้ Django ORM (Object Relational Mapper) เพื่อสร้างโมเดลอย่างง่าย

    นั่นคือทั้งหมด มีหลายสิ่งหลายอย่างที่จะครอบคลุมกับ กรอบเว็บ Djangoดังนั้นโปรดติดตามบทแนะนำที่น่าทึ่งเพิ่มเติม

    เรื่องล่าสุด

    x