django構(gòu)建網(wǎng)頁(yè)

by Ogundipe Samuel

由Ogundipe Samuel

如何使用Django構(gòu)建照片供稿 (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創(chuàng)建一個(gè)實(shí)時(shí)照片提要框架。 這就像一個(gè)迷你Instagram，但沒有評(píng)論和過濾功能。

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

要學(xué)習(xí)本教程，需要對(duì)Django和jQuery有基本的了解。

設(shè)置Django (Setting up Django)

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

首先，您需要安裝Django庫(kù)(如果我們沒有)。

To install Django, we run:

要安裝Django，我們運(yùn)行：

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

安裝Django之后，就該創(chuàng)建我們的項(xiàng)目了。 打開一個(gè)終端并使用以下命令創(chuàng)建一個(gè)新項(xiàng)目：

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:

在上面的命令中，我們創(chuàng)建了一個(gè)名為photofeed的新項(xiàng)目。 下一步將是在我們的新項(xiàng)目中創(chuàng)建一個(gè)應(yīng)用程序。 為此，我們運(yùn)行以下命令：

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:

一旦我們完成了新應(yīng)用的設(shè)置，Django就需要了解我們的新應(yīng)用。 為此，我們將進(jìn)入feed\settings.py并將消息應(yīng)用添加到已安裝的應(yīng)用中，如下所示：

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

完成上述操作后，該運(yùn)行該應(yīng)用程序并查看是否一切正常。 在終端外殼中，運(yùn)行：

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

如果將瀏覽器導(dǎo)航到http://localhost:8000 ，則應(yīng)該看到以下內(nèi)容：

在Pusher上設(shè)置應(yīng)用 (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已準(zhǔn)備就緒并準(zhǔn)備就緒。 接下來(lái)，我們需要設(shè)置Pusher，并獲取我們的應(yīng)用程序憑據(jù)。 如果還沒有，請(qǐng)注冊(cè)一個(gè)免費(fèi)的Pusher帳戶并創(chuàng)建一個(gè)新應(yīng)用，然后復(fù)制您的秘密，應(yīng)用密鑰和應(yīng)用ID。

The next step is to install the required libraries:

下一步是安裝所需的庫(kù)：

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命令中，我們安裝了一個(gè)程序包Pusher。 — Pusher：這是Python的官方Pusher庫(kù)。 我們將使用該庫(kù)來(lái)觸發(fā)消息并將其發(fā)送到Pusher HTTP API。

創(chuàng)建我們的應(yīng)用程序 (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:

首先，讓我們創(chuàng)建一個(gè)模型類，該類將生成我們的數(shù)據(jù)庫(kù)結(jié)構(gòu)。 讓我們打開feed\models.py并替換為以下內(nèi)容：

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

在上面的代碼塊中，我們定義了一個(gè)名為Feed的模型。 Feed表將包含以下字段：

• A field to store the description of the photo
  用于存儲(chǔ)照片描述的字段

• 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

  存儲(chǔ)照片的字段在上面的代碼中，在聲明文檔字段時(shí)，我們包含了一個(gè)upload_to屬性，我們將其設(shè)置為static/documents

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

  請(qǐng)注意，此路徑是相對(duì)于

  DJANGO MEDIA ROOT, which we will set now.

  DJANGO MEDIA ROOT ，我們現(xiàn)在設(shè)置。

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應(yīng)用程序中將MEDIA_ROOT設(shè)置為靜態(tài)文件夾，以便可以將其用作靜態(tài)文件。 為此，讓我們移至photofeed/settings.py并在STATIC_URL聲明之后立即將以下代碼添加到我們的文件中。

運(yùn)行遷移 (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:

我們需要進(jìn)行遷移并運(yùn)行它們，以便可以創(chuàng)建數(shù)據(jù)庫(kù)表。 為此，讓我們?cè)诮K端中運(yùn)行以下命令：

創(chuàng)建我們的觀點(diǎn) (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:

我們的視圖指向的是支撐應(yīng)用程序背后邏輯的文件(通常稱為Controller 。 讓我們?cè)趂eed文件夾中打開views.py并替換為以下內(nèi)容：

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

在上面的代碼中，我們定義了三個(gè)主要功能：

• index
  指數(shù)
• 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功能中，我們獲取數(shù)據(jù)庫(kù)中所有可用的照片。 然后在視圖中渲染照片。 這樣，新用戶就可以查看所有先前可用的提要。

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

在pusher_authentication函數(shù)中，我們驗(yàn)證當(dāng)前用戶可以訪問我們的私有頻道。

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函數(shù)中，我們檢查它是否為POST請(qǐng)求，然后在將表單保存到數(shù)據(jù)庫(kù)之前嘗試對(duì)其進(jìn)行驗(yàn)證。 (此方法中使用的名為DocumentForm的表單尚不可用。我們將很快創(chuàng)建它。)在表單驗(yàn)證之后，我們將調(diào)用放置到Pusher庫(kù)中進(jìn)行實(shí)時(shí)交互。

創(chuàng)建表單類 (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處理用戶輸入，驗(yàn)證輸入并將其轉(zhuǎn)換為Python對(duì)象。 他們也有一些方便的渲染方法。 讓我們?cè)趂eed文件夾中創(chuàng)建一個(gè)名為forms.py文件，并向其中添加以下內(nèi)容：

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.

在上面的代碼塊中，我們導(dǎo)入了Feed模型并將其用于創(chuàng)建表單。 現(xiàn)在，此表單將處理驗(yàn)證并將圖像上傳到正確的文件夾。

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

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

讓我們打開我們的photofeed\urls.py文件，并替換為以下內(nèi)容：

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.

該文件有什么變化？ 我們?cè)谖募刑砑恿?條新路線。 我們已經(jīng)定義了入口點(diǎn)，并將其分配給index函數(shù)。 我們還定義了push_feed URL，并將其分配給我們的push_feed函數(shù)。 這將負(fù)責(zé)實(shí)時(shí)將更新推送到Pusher。 最后， pusher_authentication端點(diǎn)處理我們的專用通道的身份驗(yàn)證。

創(chuàng)建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:

現(xiàn)在，我們需要?jiǎng)?chuàng)建index.html文件，該文件已作為索引函數(shù)的模板被引用。 讓我們?cè)趂eed文件夾中創(chuàng)建一個(gè)名為templates的新文件夾。 接下來(lái)，我們?cè)趖emplates文件夾中創(chuàng)建一個(gè)名為index.html文件，并將其替換為以下代碼：

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

在此HTML代碼段中，請(qǐng)注意，我們包含了一些必需的庫(kù)，例如：

• Bootstrap CSS
  引導(dǎo)CSS
• jQuery JavaScript library
  jQuery JavaScript庫(kù)
• Pusher JavaScript library
  Pusher JavaScript庫(kù)

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.

而已！ 現(xiàn)在，一旦照片被上傳，它也將被廣播，我們可以使用我們的頻道收聽實(shí)時(shí)更新供稿。 以下是我們的示例jQuery代碼段，用于處理文件上傳以及Pusher的實(shí)時(shí)更新。

Below is an image of what we have built:

下面是我們構(gòu)建的圖像：

結(jié)論 (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創(chuàng)建實(shí)時(shí)照片供稿，以及如何使用Django在AJAX請(qǐng)求中傳遞CSRF令牌。

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

本教程的代碼庫(kù)可在公共Github存儲(chǔ)庫(kù)中找到 。 您可以出于教育目的下載它。

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

有更好的方法可以構(gòu)建我們的應(yīng)用程序，保留或評(píng)論，請(qǐng)?jiān)谠u(píng)論中告知我們。 記住分享就是學(xué)習(xí)。

This post was originally published on Pusher’s blog here

這篇文章最初發(fā)表在推的博客在這里

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

django構(gòu)建網(wǎng)頁(yè)

總結(jié)

以上是生活随笔為你收集整理的django构建网页_如何使用Django构建照片供稿的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。