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_feed
push_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 library
jQuery JavaScript庫
Pusher JavaScript library
Pusher 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

這篇文章最初發表在推的博客在這里