django构建网页

by Ogundipe Samuel

由Ogundipe Samuel

如何使用Django构建照片供稿 (How to build a photo feed using Django)

Today, we will make a real-time photo feed framework using Django and Pusher. This is like a mini Instagram, but without the comments and filter functionality.

今天，我们将使用Django和Pusher创建一个实时照片提要框架。这就像一个迷你Instagram，但没有评论和过滤功能。

A basic understanding of Django and jQuery is needed to follow this tutorial.

要学习本教程，需要对Django和jQuery有基本的了解。

设置Django (Setting up Django)

First, you need to install the Django library (if we don’t have it).

首先，您需要安装Django库(如果我们没有)。

To install Django, we run:

要安装Django，我们运行：

After installing Django, it’s time to create our project. Open up a terminal and create a new project using the following command:

安装Django之后，就该创建我们的项目了。打开一个终端并使用以下命令创建一个新项目：

In the above command, we created a new project called photofeed. The next step will be to create an app inside our new project. To do that, let’s run the following commands:

在上面的命令中，我们创建了一个名为photofeed的新项目。下一步将是在我们的新项目中创建一个应用程序。为此，我们运行以下命令：

Once we’re done setting up the new app, Django needs to know about our new application. To do this, we will go into our feed\settings.py and add the message app to our installed apps as seen below:

一旦我们完成了新应用的设置，Django就需要了解我们的新应用。为此，我们将进入feed\settings.py并将消息应用添加到已安装的应用中，如下所示：

After doing the above, it’s time to run the application and see if all went well. In our terminal shell, we run:

完成上述操作后，该运行该应用程序并查看是否一切正常。在终端外壳中，运行：

If we navigate our browser to http://localhost:8000, we should see the following:

如果将浏览器导航到http://localhost:8000 ，则应该看到以下内容：

在Pusher上设置应用 (Set up an App on Pusher)

At this point, Django is ready and set up. We need to set up Pusher next, as well as grab our app credentials. If you haven’t already, sign up to a free Pusher account and create a new app, then copy your secret, application key and application id.

至此，Django已准备就绪并准备就绪。接下来，我们需要设置Pusher，并获取我们的应用程序凭据。如果还没有，请注册一个免费的Pusher帐户并创建一个新应用，然后复制您的秘密，应用密钥和应用ID。

The next step is to install the required libraries:

下一步是安装所需的库：

In the above bash command, we installed one package, Pusher. — Pusher: This is the official Pusher library for Python. We will be using this library to trigger and send our messages to the Pusher HTTP API.

在上面的bash命令中，我们安装了一个程序包Pusher。 — Pusher：这是Python的官方Pusher库。我们将使用该库来触发消息并将其发送到Pusher HTTP API。

创建我们的应用程序 (Creating Our Application)

First, let us create a model class, which will generate our database structure. Let’s open up feed\models.py and replace with the following:

首先，让我们创建一个模型类，该类将生成我们的数据库结构。让我们打开feed\models.py并替换为以下内容：

In the above block of code, we defined a model called Feed. The Feed table will consist of the following fields:

在上面的代码块中，我们定义了一个名为Feed的模型。 Feed表将包含以下字段：

A field to store the description of the photo用于存储照片描述的字段
A field to store the photo In the above code, while declaring our document field, we have included an upload_to attribute, which we set to static/documents

存储照片的字段在上面的代码中，在声明文档字段时，我们包含了一个upload_to属性，我们将其设置为static/documents

Please note that this path is relative to the path of the

请注意，此路径是相对于

DJANGO MEDIA ROOT, which we will set now.

DJANGO MEDIA ROOT ，我们现在设置。

While in this article, we will be setting the MEDIA_ROOT to the static folder in our feed app, so it can get served as a static file. To do that, let us move to our photofeed/settings.py and add the code below to our file, immediately after the STATIC_URL declaration.

在本文中，我们将在feed应用程序中将MEDIA_ROOT设置为静态文件夹，以便可以将其用作静态文件。为此，让我们移至photofeed/settings.py并在STATIC_URL声明之后立即将以下代码添加到我们的文件中。

运行迁移 (Running Migrations)

We need to make migrations and run them, so our database table can get created. To do that, let us run the following in our terminal:

我们需要进行迁移并运行它们，以便可以创建数据库表。为此，让我们在终端中运行以下命令：

创建我们的观点 (Creating Our Views)

Our views refer to the file/files that hold up the logic behind the application, often referred to as the Controller. Let us open up our views.py in our feed folder and replace with the following:

我们的视图指向的是支撑应用程序背后逻辑的文件(通常称为Controller 。让我们在feed文件夹中打开views.py并替换为以下内容：

In the code above, we have defined three main functions which are:

在上面的代码中，我们定义了三个主要功能：

index指数
pusher_authentication_pusher_authentication_
push_feedpush_feed

In the index function, we fetch all the available photos in the database. The photos are then rendered in the view. This enables a new user to see all previous feeds that are available.

在index功能中，我们获取数据库中所有可用的照片。然后在视图中渲染照片。这样，新用户就可以查看所有先前可用的提要。

In the pusher_authentication function, we verify that the current user can access our private channel.

在pusher_authentication函数中，我们验证当前用户可以访问我们的私有频道。

In the push_feed function, we check if it is a POST request, then we try validating our form before saving it into the database. (The form used in this method named DocumentForm is not available yet. We will be creating it soon.) After the form validation, we then place our call to the Pusher library for real-time interaction.

在push_feed函数中，我们检查它是否为POST请求，然后在将表单保存到数据库之前尝试对其进行验证。 (此方法中使用的名为DocumentForm的表单尚不可用。我们将很快创建它。)在表单验证之后，我们将调用放置到Pusher库中进行实时交互。

创建表单类 (Creating The Form Class)

A Django Form handles taking user input, validating it, and turning it into Python objects. They also have some handy rendering methods. Let us create a file called forms.py in our feed folder and add the following content to it:

Django Form处理用户输入，验证输入并将其转换为Python对象。他们也有一些方便的渲染方法。让我们在feed文件夹中创建一个名为forms.py文件，并向其中添加以下内容：

In the above code block, we have imported our Feed model and used it to create a form. This form will now handle the validation and upload of images to the right folder.

在上面的代码块中，我们导入了Feed模型并将其用于创建表单。现在，此表单将处理验证并将图像上传到正确的文件夹。

填充URL的.py (Populating The URL’s.py)

Let us open up our photofeed\urls.py file and replace with the following:

让我们打开我们的photofeed\urls.py文件，并替换为以下内容：

What has changed in this file? We have added 3 new routes to the file. We have defined the entry point, and have assigned it to our index function. We also defined the push_feed URL and assigned it to our push_feed function. This will be responsible for pushing updates to Pusher in real-time. Finally, the pusher_authentication endpoint handles the authentication of our private channel.

该文件有什么变化？我们在文件中添加了3条新路线。我们已经定义了入口点，并将其分配给index函数。我们还定义了push_feed URL，并将其分配给我们的push_feed函数。这将负责实时将更新推送到Pusher。最后， pusher_authentication端点处理我们的专用通道的身份验证。

创建HTML文件 (Creating the HTML Files)

Now we need to create the index.html file which we have referenced as the template for our index function. Let us create a new folder in our feed folder called templates. Next, we create a file called index.html in our templates folder and replace it with the code below:

现在，我们需要创建index.html文件，该文件已作为索引函数的模板被引用。让我们在feed文件夹中创建一个名为templates的新文件夹。接下来，我们在templates文件夹中创建一个名为index.html文件，并将其替换为以下代码：

In this HTML snippet, note that we have included some required libraries such as:

在此HTML代码段中，请注意，我们包含了一些必需的库，例如：

Bootstrap CSS引导CSS
jQuery JavaScript libraryjQuery JavaScript库
Pusher JavaScript libraryPusher JavaScript库

Pusher绑定和jQuery代码段 (Pusher Bindings And jQuery Snippet)

That’s it! Now, once a photo gets uploaded, it also gets broadcast and we can listen using our channel to update the feed in real-time. Below is our example jQuery snippet used to handle the file upload as well as Pusher’s real-time updates.

而已！现在，一旦照片被上传，它也将被广播，我们可以使用我们的频道收听实时更新供稿。以下是我们的示例jQuery代码段，用于处理文件上传以及Pusher的实时更新。

Below is an image of what we have built:

下面是我们构建的图像：

结论 (Conclusion)

In this article, we have covered how to create a real-time photo feed using Django and Pusher as well as passing CSRF tokens in AJAX request using Django.

在本文中，我们介绍了如何使用Django和Pusher创建实时照片供稿，以及如何使用Django在AJAX请求中传递CSRF令牌。

The code base to this tutorial is available in a public Github repository. You can download it for educational purposes.

本教程的代码库可在公共Github存储库中找到。您可以出于教育目的下载它。

Have a better way we could have built our application, reservations or comments, let us know in the comments. Remember sharing is learning.

有更好的方法可以构建我们的应用程序，保留或评论，请在评论中告知我们。记住分享就是学习。

This post was originally published on Pusher’s blog here

这篇文章最初发表在推的博客在这里

翻译自: https://www.freecodecamp.org/news/how-to-build-a-photo-feed-using-django-2d81c8519594/