使用 Django 构建 URL 缩短器应用程序的指南

学习 Django 或任何技能的最佳方法是通过创建功能性项目来应用您所拥有的知识。

Django 是最常用的 Python Web 开发框架。 它的内置功能和大量的第 3 方包使其成为全世界最受欢迎的 Web 框架之一。

它快速、可靠,并具有许多内置功能。 例如,一个漏洞认证系统,让您专注于应用程序的主要功能。 此外,您可以安装外部包来完成更复杂的任务,例如 Django-allauth,它允许您使用他们的社交帐户注册用户。

但是让我们揭露一些事实。 姜戈 是一个如此巨大的框架,有时很难开始使用它。

所以今天您将从头开始构建一个功能齐全的 Django 应用程序。

在本教程结束时,您将:

  • 编写了一个 URL 缩短器应用程序
  • 了解 Django MVT 模式
  • 了解了创建项目的工作流程

先决条件

以下所有要求都是可选的,将帮助您按照教程进行操作。 但是,如果您没有任何这些方面的经验,请不要担心。 最重要的一步是第一步。

  • 基本了解 UNIX 命令(ls、cd、rm、touch)
  • 对 Python 类和函数的基本理解
  • Python 安装在您的计算机上(可能很明显,但我必须包含它)
  • 如果您已经使用 Django 构建了一些东西,那就太好了

所有的工作代码都将在此可用 Github 回购.

现在您已经清楚地了解了前面的概念,让我们进入正题。

项目声明

在本教程中,您将构建一个 URL 缩短器。 基本上,URL 缩短器是一种将长 URL 转换为紧凑型 URL 的服务。

例如,如果您想分享一条推文并包含指向您网站的链接,但面临字符数限制,您可以使用 URL 缩短器。

让我们用一张图来看。

如您所见,URL 缩短器获取一个长 URL 并返回一个短 URL。 这正是您今天要构建的内容。

通过此项目,您将练习 MVT 模式的用法,学习使用 Django 模型设计数据库的基础知识,并学习如何通过视图、URL 和模板向用户显示信息。

Django 项目的结构

基本上,一个 Django 网站是建立在一个项目和多个独立的应用程序之上的。 这些应用程序中的每一个都具有特定的功能,并且能够独立运行。

让我们想象一个复杂的 Web 应用程序,例如 堆栈溢出. 它的功能基于两个主要方面。

  • 用户管理:登录、注销、信誉、权限
  • 论坛:问题、答案、标签、过滤器

因此,按照 Django 网站结构,该项目将被命名为 StackOverflow,其中有两个主要应用程序。 用户的应用程序和论坛应用程序。

这些应用程序中的每一个都具有独立的功能。 这意味着两者都包含正常工作所需的所有代码。

这包括模型(数据库结构)、视图(请求和响应)、特定的 URL 模式,当然还有模板和静态文件(图像、CSS、JavaScript)。 这意味着任何 Django 应用程序都可以重复使用,因为它们能够独立运行。

简而言之,项目是指一组旨在构建 Web 应用程序的配置和应用程序。 另一方面,Django 应用程序是项目的一部分,它是独立的(拥有工作所需的一切),其目的是执行特定操作。

设置 Django 项目

在本节中,您将设置一个 Django 项目。 为此,您将使用虚拟环境等不同工具来组织 Python 依赖项和最重要的 Django 脚本。 Django-admin 和 manage.py

虚拟环境

我总是建议与 虚拟环境 使用 Django 构建应用程序时。 这是维护一组特定依赖项的最有效方法。 但它的主要目的是将开发包与全局包隔离开来。

因此,让我们使用 python 内置的表单命令创建一个虚拟环境。

注意:此方法需要 Python 3.6 或更新版本才能运行。

python -m venv .venv

此命令使用 python -m 或 python –mod 命令。 从根本上说,它以脚本的形式运行模块或库。 根据这条命令的意思,venv就是我们正在运行的库,.venv就是我们要创建的虚拟环境的名称。

所以用通俗的语言来说,这个命令的意思是。

嘿 Python,作为脚本运行内置库 venv 并创建一个名为 .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

注意:请记住 $ 只是您的 shell 符号。

为了检查安装是否正确,我们再次检查 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

创建网址缩短器应用程序

是时候创建项目的主应用程序了。 您将使用 manage.py 文件来完成此任务。

python manage.py startapp urlshortener

这将创建一个名为 urlshortener 的 Django 应用程序。 如果你运行 命令,你会得到这样的东西。

.
├── 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 是 URLs 在项目中的整体配置。 它定义了项目内所有应用程序的 URL 路径。

  如何在 Microsoft Teams 中取消会议

不要太担心 asgi.py 和 wsgi.py 文件。 这些文件可让您在部署中配置应用程序。

manage.py 是 python 脚本,可让您运行所有可用的命令 Django-admin.

查看 urlshortener,这是您刚刚创建的应用程序的名称,您可能会注意到有一个名为“migrations/”的奇怪文件夹和其他一些对任何应用程序的逻辑都至关重要的文件。

apps.py 是应用程序配置所在的位置。 通常,你不会乱搞它,除非你在做一些非常先进的事情。

admin.py 是你注册模型的地方,使它们在 Django 管理面板中可见。

models.py 是最重要的一个。 在这个模块中,您必须定义模型,(含糊地说)模型是数据存储的方式。 稍后您会听到更多关于模型的信息。

migrations/ 是存储 Django 迁移的文件夹。 稍后我们将深入了解。

tests.py 是存储测试的文件。 我们不会在本教程中介绍测试。

views.py 是存储视图的文件。 基本上,它定义了用户将如何与您的应用程序的所有方面进行交互。

安装 Django 应用程序

在继续之前,打开 settings.py 文件并通过添加 urlshortener 应用修改 INSTALLED_APPS 变量。

# 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 模式

模型、视图、模板模式是 Django 开发人员用来创建 Web 应用程序的软件设计模式。

它基于 3 个主要概念。 模型(数据)、视图(用户与数据的交互)、模板(用户如何查看数据)。

模型是 Python 类,它定义了您愿意存储的数据的所有字段和行为。 通常每个模型都引用数据库中的唯一表

最简单的视图是可调用的,它接受用户的请求并生成响应。 在该流程之间发生业务逻辑。 我知道“业务逻辑”是一个相当晦涩的概念,所以让我来解释一下它到底是什么。 业务逻辑就是创建、存储和删除数据的方式,仅此而已。

最后,模板是显示给用户的文本文档(通常是 Html)。 其目的是尽可能清晰地呈现数据。 Django 集成了一种迷你语言,称为 Django 模板语言 (DTL) 它可以让你在文本文档中加入 python 的一些强大功能。

创建 Shortener 模型

快速掌握 MVT 模式后,让我们从头开始创建 Django URL 缩短器。

首先,让我们在 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”模型,首先要注意的是它扩展了 models.Model。 事实上,任何 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())将由最近的对象区分。

__str__ 方法告诉必须如何打印模型。 因此,如果我们有一个 long_url = “https://techblik.com.com/” 和缩短部分 “123456” 的对象,我们将打印它。

https://techblik.com.com/ to 123456

现在是时候寻找一种以随机方式保存短链接的方法了。

创建缩短功能

我们将创建 2 个自定义函数。 第一个将生成一个随机代码,第二个将防止从 Shortener 模型中获取重复的随机代码。 为此,在“urlshortener”应用程序中创建一个文件 utils.py。

touch utils.py

在这个文件中,我们将使用 random 内置模块中的 choose 函数。 这有助于选择随机字符来创建代码的任务。

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

稍后您将与 shell 交互,以便仔细查看此功能。

创建效用函数后,让我们用它在缩短模型中创建随机代码。

修改保存方法

在“Shortener”类的末尾,您将修改模型保存方法。 每次将对象保存到数据库时都会调用 save 方法,因此我们将在此处了解如何使用它。

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

save 方法正在被覆盖,这意味着您正在为预先存在的父方法引入新功能。 它基本上是在告诉 Django 每次保存一个“Shortener”对象并且没有指定 short_url 时,它必须用一个随机代码填充。

  如何破解 WiFi 密码

运行迁移

现在是时候制作并运行 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://techblik.com.com")
>>> s.short_url
''
>>> s.save()
>>> s.short_url
'kdWFVIc'
>>> s.long_url
'https://techblik.com.com'
>>> print(s)
https://techblik.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 模式。

触摸 urls.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")
]

appname 变量声明(顾名思义)urlshortener 应用程序的命名空间。

快速解释我们正在导入 路径函数,它返回一个元素以包含在应用程序的 urlpatterns 中。 name 属性是路径的命名空间,必要时可以在模板内部调用。

现在,让我们修改整个项目的 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 缩短器应用程序中的 urlpatterns 包含到整个项目中。

这只是一个起点。 现在是时候创建一个表单,让用户自己创建缩短的 URL。

创建表单

在 Django 中,一个 形式 是一个允许从用户获取输入的简单类。

您将创建一个 forms.py 文件。 将应用程序的所有形式存储在该文件中是一种惯例。

cd urlshortener/
touch forms.py

在该文件中,您将创建一个从“ModelForm”扩展的类“ShortenerForm”。

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

它是一个模型表单,因为它的目的是根据用户输入创建一个模型对象。 我们还使用了 widget 参数,它允许我们指定“类”(CSS 中的类,而不是 python)属性。 这是因为我们稍后将使用 bootstrap 对应用程序进行样式化。

完成视图

构建表单后是时候创建应用程序的最终业务逻辑了。

导航到缩短器应用程序内的 views.py 文件,并修改 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。 但是我们将 Post 请求传递给另一个名为 used_form 的表单。
  •   如何在线查看未发送消息

    动态获取完整站点 URL 的一种巧妙方法是使用请求对象方法 build_absolute_uri。

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

    作为处理错误请求(用户未输入有效 URL)的安全方法,我们获取表单错误,将它们作为上下文传递并正常呈现模板。 稍后您将看到如何在模板中实现错误显示。

    重定向视图

    redirect_url_view 稍微简单一些。 这是一个详细视图,这意味着该视图仅适用于对象。

    此函数将用户的请求和 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 :(')

    我们使用 try/except 语句保护视图,以防在数据库中找不到缩短的部分。 如果找到该对象,它会将 1 添加到 times_followed 字段并使用 HttpResponseRedirect 函数重定向到与随机代码对应的站点 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 模板。

    模板用于向应用程序用户呈现干净的界面。 这些文件是在应用程序内部创建的,格式为双文件夹结构:“templates/appname”

    # 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 或 javascript 文件。

    如果你想深入了解 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。

    最终申请

    恭喜! 🎉。 您已经使用 Django 构建了一个完整的功能性 URL 缩短器应用程序。

    以下是应用程序外观的一些屏幕截图。

    只得到:

    缩短网址时出错:

    成功缩短网址:

    重定向的网址:

    您如何看待向某人展示此 URL 缩短器应用程序的演示? 检查如何将 Django 演示应用程序公开到互联网。

    挑战🔥

    如果您对自己的 Django 技能感到满意,为什么不挑战一下练习呢?。

    克隆此应用程序的代码并创建一个身份验证系统,只有注册用户才能缩短他们的 URL。

    完成后,发送拉取请求并 ping 我 推特 展示你的成就。

    包起来

    您已完成本教程的结尾。 信不信由你,您刚刚回顾了创建 Django 项目的所有主要方面。 我希望你发现它非常有用。

    在本教程中,您:

    • 了解了创建 Django 应用程序的工作流程。
    • 建立了一个简历项目
    • 了解 Django 项目和 Django 应用程序的区别和结构。
    • 发现了 MVT 模式。
    • 创建函数基础视图
    • 使用 Django ORM(对象关系映射器)创建简单模型

    仅此而已,还有很多内容要涵盖 Django 网络框架,所以请保持联系以获取更多精彩教程。