使用 Django 构建和提交 HTML 表单——第 4 部分

项目概况

在本节中，您将大致了解本教程系列的最后一部分将涵盖哪些主题。您还将有机会重新访问完整的项目实施步骤，以防您需要跳回到您在本系列的前一部分中完成的上一个步骤。

至此，您应该已经完成了本教程系列的第一、二和三部分。恭喜！您已经进入最后一部分，重点是构建表单和处理表单提交：

完成本系列最后一部分的步骤后，您就完成了 Django 社交网络的基本版本。您将准备好自己采取任何后续步骤，以使该项目在您的 Web 开发人员组合中脱颖而出。

要深入了解本系列中关于构建 Django 社交网络的最后一部分如何适应整个项目的上下文，您可以展开下面的可折叠部分：

考虑到本教程系列的高级结构，您对自己所处的位置以及可能必须赶上哪些实施步骤（如果您尚未完成它们）有一个很好的了解。

在开始下一步之前，请快速查看先决条件，以浏览可能在此过程中有用的其他资源的任何链接。

先决条件

要成功完成项目的最后一部分，您需要完成关于模型和关系的第一部分，关于模板和样式的第二部分，以及关于关注和 dweets 的第三部分。请确认您的项目按照那里的描述工作。您还应该熟悉以下概念：

• 在 Python 中使用面向对象编程
• 设置一个基本的 Django 项目
• 在 Django 中管理路由和重定向、查看函数、模板、模型和迁移
• 使用和自定义 Django 管理界面

确保您已完成本系列的前三部分。这最后一部分将在您在第三部分结束时离开的地方继续。

创建文本输入表单

如果您熟悉 HTML 表单，那么您可能知道可以通过创建另一个<form>具有特定<input>元素的 HTML 元素来处理文本提交。但是，它必须看起来与您为按钮构建的表单有点不同。

在本教程中，您将学习如何使用Django 表单创建 HTML 表单。您将编写一个 Django 表单，Django 将<form>在呈现页面时将其转换为 HTML 元素。

要开始本教程的这一部分，请在您的 Djangodwitter应用程序中创建一个新文件，并将其命名为forms.py. 该文件可以包含您的项目可能需要的所有表单。您只需要一个表单，以便您的用户可以提交他们的 dweets：

 1# dwitter/forms.py
 2
 3from django import forms
 4from .models import Dweet
 5
 6class DweetForm(forms.ModelForm):
 7    body = forms.CharField(required=True)
 8
 9    class Meta:
10        model = Dweet
11        exclude = ("user", )

在此代码片段中，您创建DweetForm并继承自 Django 的ModelForm. 以这种方式创建表单在很大程度上依赖于 Django 设置的抽象，这意味着在本教程中，您需要自己定义很少的内容来获得工作表单：

• 第 3 到 4 行：您导入 Django 的内置forms模块和Dweet您在本教程系列的前一部分中创建的模型。

• 第 6 行：创建一个新类DweetForm，它继承自forms.ModelForm。

• 第 7 行：传递希望表单呈现的字段，并定义其类型。在这种情况下，您需要一个字符字段来允许文本输入。body是唯一的字段，您将其设为必填字段，这样就不会有任何空的 dweets。

• Meta第 9行：您在DweetForm. 此选项类允许您将任何不是字段的信息传递给您的表单类。

• 第 10 行：您需要定义ModelForm应该从哪个模型获取信息。因为您想制作一个允许用户创建 dweets 的表单，Dweet所以这里是正确的选择。

• 第 11 行：通过将要排除的模型字段的名称添加到exclude元组中，可以确保 Django 在创建表单时将其省略。记得在后面添加一个逗号 ( ,)，"user"以便 Python 为您创建一个元组！

您想让 dweet 提交内容尽可能方便用户使用。用户登录后只能在您的社交网络上发表推文，并且他们只能为自己创建推文。因此，您不需要在表单中明确传递哪个用户正在发送 dweet。

本教程中描述的设置包含 Django 创建 HTML 表单所需的所有信息，这些表单在前端捕获您需要的所有信息。是时候从那一端看看了。

在模板中呈现表单

在中创建DweetForm后forms.py，您可以将其导入代码逻辑并将信息发送到您的仪表板模板：

# dwitter/views.py

from django.shortcuts import render
from .forms import DweetForm
from .models import Profile

def dashboard(request):
    form = DweetForm()
    return render(request, "dwitter/dashboard.html", {"form": form})

通过对 的这些更改views.py，您首先DweetForm从forms.py. 然后，您创建了一个新DweetForm实例，将其分配给form，并将其传递到您的上下文字典中的仪表板模板中的 key 下"form"。此设置允许您在模板中访问和呈现表单：

<!-- dwitter/templates/dwitter/dashboard.html -->

{% extends 'base.html' %}

{% block content %}

<div class="column">
    {% for followed in user.profile.follows.all %}
        {% for dweet in followed.user.dweets.all %}
            <div class="box">
                {{dweet.body}}
                <span class="is-small has-text-grey-light">
                    ({{ dweet.created_at }} by {{ dweet.user.username }}
                </span>
            </div>
        {% endfor %}
    {% endfor %}
</div>

<div class="column is-one-third">
    {{ form.as_p }}
</div>

{% endblock content %}

您分配给该<div>元素的 HTML 类使用 Bulma 的 CSS 规则在您的仪表板页面上创建一个新列。这个额外的列使页面感觉不那么拥挤，并将提要内容与表单分开。然后，您使用{{ form.as_p }}. 确实，出现了一个输入框：

第 11 步：防止重复提交并处理错误

此时，您可以通过应用程序的前端创建新的 dweets，并查看您自己的 dweets 以及您在仪表板上关注的个人资料的 dweets。在这一步结束时，您将防止双重 dweet 提交并了解 Django 如何显示文本输入错误。

但首先，您应该了解问题所在。转到您的仪表板，写一篇鼓舞人心的 dweet，然后单击Dweet提交它。您会看到它出现在时间轴中显示的 dweets 列表中，并且 dweet 表单将再次显示为空。

不做任何其他事情，使用键盘快捷键重新加载页面：

• Cmd+R在 macOS 上
• Ctrl+R在 Windows 和 Linux 上

您的浏览器可能会通过弹出窗口提示您是否要再次发送表单。如果出现此消息，请按发送确认。现在您会注意到您之前发送的相同 dweet 再次出现在您的仪表板上。您可以根据需要多次执行此操作：

防止重复提交

为避免重复提交，您必须阻止您的应用程序保留请求数据，以便重新加载没有机会重新提交数据。您可以通过使用Django 重定向来做到这一点：

# dwitter/views.py

from django.shortcuts import render, redirect

# ...

def dashboard(request):
    if request.method == "POST":
        form = DweetForm(request.POST)
        if form.is_valid():
            dweet = form.save(commit=False)
            dweet.user = request.user
            dweet.save()
            return redirect("dwitter:dashboard")
    form = DweetForm()
    return render(request, "dwitter/dashboard.html", {"form": form})

在成功将新提交的 dweet 添加到数据库后，通过导入redirect()并返回对它的调用，您可以将用户发送回同一页面。但是，这次您在重定向时发送了一个 GET 请求，这意味着任何数量的页面重新加载都只会显示已经存在的 dweets，而不是创建大量克隆的 dweets。

您可以通过引用您在 URL 配置中定义的app_name变量和name关键字参数来设置它：path()

• "dwitter"是app_name描述应用程序命名空间的变量。:您可以在传递给的字符串参数中的冒号 () 之前找到它redirect()。
• "dashboard"是指向name的条目的关键字参数的值。您需要在传递给的字符串参数中的冒号 ()之后添加它。path()dashboard():redirect()

要redirect()如上所示使用，您需要相应地设置命名空间dwitter/urls.py，您在教程系列的前一部分中已经这样做了：

# dwitter/urls.py

# ...

app_name = "dwitter"

urlpatterns = [
    path("", dashboard, name="dashboard"),

    # ...

通过urls.py如上所示的设置，您可以redirect()在成功处理来自表单提交的 POST 请求后，使用 GET 请求将用户指向他们的仪表板页面。

在条件语句结束时返回后redirect()，任何重新加载都只会加载页面而不重新提交表单。您的用户现在可以安全地提交简短的 dweets，而不会出现意外结果。但是，当 dweet 超过 140 个字符限制时会发生什么？

尝试输入超过 140 个字符限制的长 dweet 并提交。怎么了？没有什么！但是也没有错误消息，因此您的用户甚至可能不知道他们做错了什么。

此外，您输入的文本消失了，这是设计不佳的用户表单的主要烦恼。因此，您可能希望通过通知用户他们做错了什么并保留他们输入的文本来为您的用户提供更好的体验！

处理提交错误

您在模型中定义了基于文本的消息的最大长度为 140 个字符，并且您在用户提交文本时强制执行此操作。但是，当他们超过字符限制时，您不会告诉他们。当他们提交过长的 dweet 时，他们的输入就会丢失。

好消息是，您可以使用 Django 表单{{ form.as_p }}来显示与表单对象一起发送的错误消息，而无需添加任何代码。这些错误消息可以显着改善用户体验。

但是目前，您看不到任何错误消息，那为什么呢？再看看dashboard()：

 1# dwitter/views.py
 2
 3# ...
 4
 5def dashboard(request):
 6    if request.method == "POST":
 7        form = DweetForm(request.POST)
 8        if form.is_valid():
 9            dweet = form.save(commit=False)
10            dweet.user = request.user
11            dweet.save()
12            return redirect("dwitter:dashboard")
13    form = DweetForm()
14    return render(request, "dwitter/dashboard.html", {"form": form})

在突出显示的行中，您可以看到您正在创建两个不同DweetForm对象之一，绑定或未绑定表单：

1. 第 7 行：如果您的函数是从 POST 请求中调用的，则使用请求DweetForm随附的数据进行实例化。Django 创建一个绑定表单，该表单可以访问数据并且可以得到验证。
2. 第 13 行：如果您的页面通过 GET 请求被调用，则您正在实例化一个未绑定的表单，该表单没有任何关联的数据。

到目前为止，此设置运行良好并且有意义。如果用户通过导航访问页面，您希望显示一个空表单，并且如果用户编写 dweet 并将其发送到数据库，您希望验证和处理表单中提交的数据。

然而，症结在于这里的细节。您可以而且应该验证绑定的表单，这在第 8 行中执行。如果验证通过，则 dweet 将被写入您的数据库。但是，如果用户添加了太多字符，那么您的表单验证将失败，并且您的条件语句中的代码不会被执行。

formPython 将执行跳转到第 13 行，在这里您用一个空的未绑定DweetForm对象覆盖。此表单是发送到您的模板并呈现的内容。由于您使用未绑定的表单覆盖了包含验证错误信息的绑定表单，因此 Django 不会显示任何发生的验证错误。

如果发生验证错误，要将绑定的表单发送到模板，您需要稍微更改代码：

# dwitter/views.py

# ...

def dashboard(request):
    form = DweetForm(request.POST or None)
    if request.method == "POST":
        if form.is_valid():
            dweet = form.save(commit=False)
            dweet.user = request.user
            dweet.save()
            return redirect("dwitter:dashboard")
    return render(request, "dwitter/dashboard.html", {"form": form})

通过此更改，您删除了 的重复实例化，DweetForm因此无论用户是否提交了有效表单，都只会将一个实例form传递给您的模板。

您用于此更改的语法可能看起来不熟悉。所以这就是发生的事情：

• POST 请求：如果您dashboard()使用包含任何数据的 POST 请求进行调用，request.POST QueryDict则将包含您的表单提交数据。该request.POST对象现在有一个真值，Python 将短路or操作符以返回 的值request.POST。这样，您将在实例化 时将表单内容作为参数传递DweetForm，就像您之前使用form = DweetForm(request.POST).

• GET 请求：如果您dashboard()使用 GET 请求调用，request.POST将为空，这是一个假值。Python 将继续计算or表达式并返回第二个值None. 因此，Django 将实例DweetForm化为一个未绑定的表单对象，就像您之前对form = DweetForm().

这种设置的优点是即使表单验证失败，您现在也可以将绑定的表单传递给模板，这允许 Django{{ form.as_p }}为您的用户提供开箱即用的描述性错误消息：

改进导航

您的社交网络具有用户可能希望在不同时间访问的三个不同页面：

1. 空 URL 路径 ( /) 指向仪表板页面。
2. /profile_listURL 路径指向配置文件列表。
3. /profile/<int>URL 路径指向特定用户的个人资料页面。

您的用户已经可以通过他们各自的 URL slug 访问所有这些页面。但是，虽然您的用户可以通过单击所有配置文件列表中的用户名卡来访问配置文件页面，但目前没有直接导航来访问配置文件列表或仪表板页面。是时候添加更多链接了，以便用户可以方便地在 Web 应用程序的不同页面之间移动。

回到您的模板文件夹并打开dashboard.html. 在 dweet 表单上方添加两个按钮，以允许您的用户导航到应用程序中的不同页面：

1. 个人资料列表页面
2. 他们的个人资料页面

您可以将动态 URL 模式与您以前使用过的 Django 的 {% url %} 标签一起使用：

<!-- dwitter/templates/dwitter/dashboard.html -->

<!-- ... -->

<div class="block">
    <a href="{% url 'dwitter:profile_list' %} ">
        <button class="button is-dark is-outlined is-fullwidth">
            All Profiles
        </button>
    </a>
</div>
<div class="block">
    <a href="{% url 'dwitter:profile' request.user.profile.id %} ">
        <button class="button is-success is-light is-outlined is-fullwidth">
            My Profile
        </button>
    </a>
</div>

<!-- ... -->

您可以将此代码作为前两个元素添加到<div class="column is-one-third">. 您还可以在 dweet 表单上方添加一个标题，以更清楚地解释该表单的用途：

<!-- dwitter/templates/dwitter/dashboard.html -->

<!-- ... -->

<div class="block">
    <div class="block">
        <h2 class="title is-2">Add a Dweet</p>
    </div>
    <div class="block">
        <form method="post">
            {% csrf_token %}
            {{ form.as_p }}
            <button class="button is-success is-fullwidth is-medium mt-5"
                    type="submit">Dweet
            </button>
        </form>
    </div>
</div>

<!-- ... -->

通过这两个添加，您使用"block"类将三个<div>元素排列在一起，并添加了合理的导航按钮，以增强仪表板页面上的用户体验：

结论

在本教程中，您使用 Django 构建了一个小型社交网络。您的应用程序用户可以关注和取消关注其他用户个人资料，发布基于文本的简短消息，以及查看他们关注的其他个人资料的消息。

在构建这个项目的过程中，您已经学会了如何：

• 从头到尾构建一个Django 项目
• Django模型之间的实现OneToOne和ForeignKey 关系
• 使用自定义模型扩展 Django用户模型Profile
• 自定义Django 管理界面
• 集成Bulma CSS为您的应用设置样式

您已经在本教程中了解了很多内容，并构建了一个可以与您的朋友和家人分享的应用程序。您还可以将其显示为潜在雇主的投资组合项目。