在 Django 中构建和处理 POST 请求——第 3 部分

项目概况

在本节中，您将大致了解本教程系列的第三部分将涵盖哪些主题。您还将有机会重新审视完整的项目实施步骤，以防您需要跳回本系列前面的上一个步骤，或者如果您想看看还有什么要做。

至此，您应该已经完成了本教程系列的第一部分和第二部分。如果您这样做了，那么您现在已准备好继续本教程系列的后续步骤。这些步骤侧重于关注和取消关注配置文件的代码逻辑，以及如何设置 dweets：

完成教程系列第三部分中的所有步骤后，您可以继续第四部分。

要深入了解如何完成本教程系列关于构建 Django 社交网络的所有四个部分，您可以展开下面的可折叠部分：

考虑到本教程系列的高级结构，您对自己所处的位置以及将在最后一部分中处理的实施步骤有了一个很好的了解。

在开始下一步之前，请快速查看先决条件，以浏览任何可能对您有帮助的其他资源的链接。

先决条件

要成功完成项目的这一部分，您需要完成关于模型和关系的第一部分以及关于模板和样式的第二部分，并且您应该确认您的项目按照那里的描述工作。如果您也对以下概念感到满意，那将是最好的：

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

请记住确保您已完成本教程系列的前两部分。这第三部分将在您在第二部分结束时离开的地方继续。

然而，即使信息现在以更加用户友好的方式显示，单击可点击按钮实际上并没有做任何事情。为此，您需要创建一个 HTML 表单并在代码逻辑中处理表单提交。

在 Django 代码逻辑中处理 POST 请求

您的下一步是实现当有人单击其中一个按钮时应该发生什么的逻辑。为此，您需要一个 HTML 表单，以便您可以提交数据并在视图中处理它：

 1<form method="post">
 2    {% csrf_token %}
 3    <div class="buttons has-addons">
 4    {% if profile in user.profile.follows.all %}
 5        <button class="button is-success is-static">Follow</button>
 6        <button class="button is-danger" name="follow" value="unfollow">
 7            Unfollow
 8        </button>
 9    {% else %}
10        <button class="button is-success" name="follow" value="follow">
11            Follow
12        </button>
13        <button class="button is-danger is-static">Unfollow</button>
14    {% endif %}
15    </div>
16</form>

您通过更新此代码对模板应用了一些基本更改：

• 第 1 行和第 16 行：您将两个按钮包装在一个 HTML<form>元素中，并添加了method带有值的 HTML 属性，"post"以阐明您将使用此表单发送数据。

• 第 2 行：您通过 Django 提供的方便的模板标签添加了CSRF 令牌。如果您想允许您的用户在您的 Django 应用程序中提交表单，您需要出于安全原因添加它。

• 第 6 行和第 10 行：<button>您为两个元素添加了两个 HTML 属性：

  1. name定义您将使用什么键来访问视图函数中的值。您将此键设置"follow"为两个按钮。

  2. valuename定义当您按下其中一个按钮时表单将在定义的键名下发送到您的视图函数的值。您将“关注”按钮的值设置为，将“取消关注”按钮"follow"的值设置为。"unfollow"

添加此代码后，您不会在 Web 应用程序的前端看到任何更改，但这些更改是必要的，以便 Django 可以将用户提交的数据转发到您的视图逻辑。您还需要在第 6 行和第 10 行中定义的属性值来区分用户在后端按下了哪个按钮。

在 中设置好所有前端逻辑后profile.html，您可以切换到views.py，您可以在其中获取用户提交的数据并进行处理：

 1# dwitter/views.py
 2
 3# ...
 4
 5def profile(request, pk):
 6    profile = Profile.objects.get(pk=pk)
 7    if request.method == "POST":
 8        current_user_profile = request.user.profile
 9        data = request.POST
10        action = data.get("follow")
11        if action == "follow":
12            current_user_profile.follows.add(profile)
13        elif action == "unfollow":
14            current_user_profile.follows.remove(profile)
15        current_user_profile.save()
16    return render(request, "dwitter/profile.html", {"profile": profile})

由于您在 中设置表单的方式profile.html，表单将重定向回同一页面，这意味着 Django 将使用profile(). 由于您设置 URL 配置的方式，它会以这种方式工作。然而，这一次，Django 发送一个包含用户提交数据的 HTTP POST 请求，您可以在代码更新中解决这个问题：

• 第 7 行：引入条件检查以查看 Django 视图函数的传入请求是否是 HTTP POST 请求。仅当有人profile.html通过单击“关注”或“取消关注”按钮提交表单时才会出现这种情况。

• 第 8 行：您使用userDjangorequest对象中的属性（引用当前登录的用户）来访问该用户的.profile对象并将其分配给current_user_profile. 稍后您需要访问此用户的个人资料才能更改他们关注的对象。

• 第 9 行：您从request.POST字典中获取用户提交的数据并将其存储在data. request.POST当用户提交带有属性的表单时，Django 会放入数据method="post"。

• 第 10 行：您通过访问 key 处的数据来检索提交的值，该 key"follow"是您在模板中使用元素name上的 HTML 属性定义的。<button>

• 第 11 到 14 行：.follows您设置了一个条件语句，根据他们按下的按钮，从当前登录用户的 中添加或删除用户配置文件。这两个按钮为数据键提交不同的值"follow"，您可以使用它来区分这两个按钮。

• 第 15 行：您使用.save()oncurrent_user_profile将更改传播.follows回数据库。

最后，在所有这些条件操作之后——Django 仅在使用表单提交的 POST 请求调用页面时执行该操作——您再次呈现相同的模板。render()单击按钮后将重新加载页面并正确显示更改的关注者列表。

您现在可以在您的社交网络上关注和取消关注其他用户的个人资料。通过浏览您的个人资料列表中的个人资料并有选择地关注和取消关注它们，确认这是否按预期工作。您应该会在侧边栏中看到相应更新的列表。

有了这个，您已经将关注和取消关注后端逻辑与前端完全连接起来。您在 中添加了一个 HTML<form>元素和两个按钮profile.html。您还实现了profile()将按钮按下转换为影响数据库的更改的代码逻辑。

制作模型

您需要一种将用户创建的基于文本的消息存储在数据库中的方法。为此，您需要在以下位置创建一个新模型dwitter/models.py：

# dwitter/models.py

# ...

class Dweet(models.Model):
    user = models.ForeignKey(
        User, related_name="dweets", on_delete=models.DO_NOTHING
    )
    body = models.CharField(max_length=140)
    created_at = models.DateTimeField(auto_now_add=True)

您的Dweet模型只需要三个字段：

1. user:该字段建立与 Django 内置模型的模型关系User。您定义它将是一个外键关系，这意味着每个 dweet 都将与一个用户相关联。您还传递"dweets"到related_name，它允许您从关系的用户端访问 dweet 对象.dweets。最后，您可以通过设置为来指定孤立的 dweets 应该留下on_delete来models.DO_NOTHING。

2. body：此字段定义您的内容类型。您将其设置为最大长度为 140 个字符的字符字段。

3. created_at：您的新模型的最后一个字段记录了基于文本的消息提交的日期和时间。在对象上设置auto_now_add为可确保在用户提交 dweet 时自动添加此值。TrueDateTimeField

设置这三个字段后，您就完成了Dweet模型的创建！makemigrations接下来，您需要通过运行和migrate管理命令将更改应用到数据库：

(social) $ python manage.py makemigrations
(social) $ python manage.py migrate

运行这两个命令后，您的更改models.py已应用于您的数据库。您的后端已全部设置为记录 dweets，但到目前为止，您还无法通过 Web 应用程序提交它们。

通过管理界面添加 Dweets

最终，您希望您的社交网络用户通过您的 Web 应用程序的前端提交 dweets。但是，首先，您将确保到目前为止您构建的所有内容都按预期工作。您将首先添加通过管理界面创建 dweets 的功能。

要Dweet在管理界面中访问新模型，您需要注册它：

# dwitter/admin.py

from django.contrib import admin
from django.contrib.auth.models import Group, User
from .models import Dweet, Profile

# ...

admin.site.register(Dweet)

如果您在执行此操作后转到您的管理界面，您会看到Dwitter → Dweets选项现在出现了。单击它旁边的+ 添加按钮并创建一个新的 dweet：

在每个个人资料页面上显示个人 Dweets

首先，您将返回profile.html，您将在其中添加代码以显示与此配置文件关联的用户的所有 dweets。稍后，您将创建另一个网站，显示您关注的人的所有 dweets。

在个人资料页面上，您可以访问profile. 您如何以类似于您对个人资料的关注者所做的方式迭代用户的 dweets？

如果您回想起写作Dweet，您可能会记得您设置related_name为"dweets". 您在此处定义的名称使您可以通过模型反向访问关联Dweet对象。User此外，您可以通过在上下文字典中传递的对象访问链接User实例：Profile

profile.user.dweets

好的！使用此代码，您将全面了解您在此项目期间设置的所有模型关系。继续使用它，profile.html以便您可以在他们的个人资料页面上看到每个用户的 dweets：

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

<!-- ... -->

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

在关闭之后添加这个包含 Bulma 样式的 HTML 片段<div class="block">：

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

{% extends 'base.html' %}

{% block content %}

<div class="column">

    <div class="block">
    <h1 class="title is-1">
        {{profile.user.username|upper}}'s Dweets
    </h1>

    <form method="post">
        {% csrf_token %}
        <div class="buttons has-addons">
        {% if profile in user.profile.follows.all %}
            <button class="button is-success is-static">
                Follow
            </button>
            <button class="button is-danger"
                    name="follow"
                    value="unfollow">
                Unfollow
            </button>
        {% else %}
            <button class="button is-success"
                    name="follow"
                    value="follow">
                Follow
            </button>
            <button class="button is-danger is-static">
                Unfollow
            </button>
        {% endif %}
        </div>
    </form>
    </div>

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

</div>

<div class="column is-one-third">

    <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">
        <h3 class="title is-4">
            {{profile.user.username}} follows:
        </h3>
        <div class="content">
            <ul>
            {% for following in profile.follows.all %}
                <li>
                    <a href="{% url 'dwitter:profile' following.id %} ">
                        {{ following }}
                    </a>
                </li>
            {% endfor %}
            </ul>
        </div>
    </div>

    <div class="block">
        <h3 class="title is-4">
            {{profile.user.username}} is followed by:
        </h3>
        <div class="content">
            <ul>
            {% for follower in profile.followed_by.all %}
                <li>
                    <a href="{% url 'dwitter:profile' follower.id %} ">
                        {{ follower }}
                    </a>
                </li>
            {% endfor %}
            </ul>
        </div>
    </div>

</div>

{% endblock content %}

这是诀窍！迭代在逐步完成模型关系后工作，并且由于 Bulma 的样式表，您可以以愉快的方式查看当前用户的 dweets：

通过单击您之前设置的链接之一来查看另一个用户配置文件。您所有的个人资料页面都按预期工作，它们看起来很可爱！您现在可以探索每个人的关注者、他们关注的对象以及他们的 dweets。您还可以通过单击按钮来关注或取消关注每个个人资料。这正是大多数用户希望在他们的个人资料页面上看到的。

您仍然缺少一种方法来显示您关注的所有个人资料的所有 dweets 的提要。您将通过更新仪表板视图来实现此功能。

创建仪表板视图

您已经在本系列的第二部分中设置了占位符仪表板视图，这意味着已经定义了适当的路由，dashboard()当您导航到基本 URL 时 Django 将调用。到目前为止，没有什么可看的，因为它只呈现您的基本模板。现在您将更新此端点以使其更有用并显示您的仪表板页面。在仪表板上，您希望能够做两件事：

1. 从您关注的个人资料中阅读所有 dweets
2. 提交 dweet

您将在本系列的下一部分中处理第二个任务。现在，您将专注于显示您关注的所有个人资料的 dweets。更新dashboard()以views.py将其指向不同的模板：

# dwitter/views.py

from django.shortcuts import render
from .models import Profile

def dashboard(request):
    return render(request, "dwitter/dashboard.html")

当然，那个模板还不存在。为了不让 Django 抱怨，您可以前往dwitter/templates/dwitter/并创建一个名为的新模板dashboard.html并添加一些草稿代码逻辑以确认它按预期工作：

 1<!-- dwitter/templates/dwitter/dashboard.html -->
 2
 3{% for followed in user.profile.follows.all %}
 4    {% for dweet in followed.user.dweets.all %}
 5        <li>{{dweet.user.username}} ({{ dweet.created_at }}): {{ dweet.body }}</li>
 6    {% endfor %}
 7{% endfor %}

将此代码片段添加到dashboard.html并导航到基本 URL 后localhost:8000/，您应该会看到一个未格式化的列表，其中包含您关注的所有配置文件的所有 dweets 混合在一起。

在使用 Bulma 的样式使此列表看起来更好之前，值得首先重新审视您在 Django 模板中链接在一起的模型关系：

• 第 3 行：深入user了解 Django 随每个 POST 或 GET 请求发送的对象。它指的是登录用户，当前是您的管理员用户。使用.profile，您可以访问管理员用户的配置文件，该配置文件是您在扩展 DjangoUser模型时设置的。该配置文件有一个名为的属性，该属性.follows包含该配置文件所遵循的所有用户配置文件的集合。最后，使用.all，您可以访问该集合的可迭代对象。

• 第 4 行：将另一个循环嵌套for到前一个循环中。在这里，您可以访问followed以获取当前登录用户关注的每个用户配置文件。然后，您逐步浏览.user对象及其related_name, .dweets，以访问该用户编写的所有 dweets。使用.all，您可以再次访问该集合的可迭代对象。

• 第 5 行：您现在可以访问dweet. 您可以使用它从每条基于文本的消息中挑选出您想要的信息，并将这些信息组合到一个 HTML 列表项中。

如何使用 Django 的模型关系来精确查找您正在寻找的信息是非常强大的，即使它需要您钻取一系列不同的步骤！请记住，由于您在前面的步骤中设置模型的方式，它会以这种方式工作：