django 传递中文

by Ogundipe Samuel

由Ogundipe Samuel

如何在Django中建立消息传递状态 (How to Build a Message Delivery Status in Django)

Today, we will make a real-time message delivery status framework with Django and Pusher.

今天，我们将使用Django和Pusher建立一个实时消息传递状态框架。

A basic understanding of Django and Vue is needed in order to follow this tutorial.

为了遵循本教程，需要对Django和Vue有基本的了解。

设置Django (Setting up Django)

First, we need to install the Python Django library if we don’t already have it. To install Django, we run:

首先，如果我们还没有Python Django库，则需要安装它。要安装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之后，就该创建我们的项目了。打开一个终端并使用以下命令创建一个新项目：

https://gist.github.com/4896cf41463ff83e191949a02bbead23

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

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

Once we are done setting up the new app, we need to tell Django about our new application, so we will go into our pusher_message\settings.py and add the message app to our installed apps as seen below:

设置好新应用程序后，我们需要将新应用程序告诉Django，因此我们将进入pusher_message\settings.py并将消息应用程序添加到已安装的应用程序中，如下所示：

After doing the above, it’s time for us 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 now need to set up Pusher, as well as grab our app credentials.

至此，Django已准备就绪并准备就绪。现在，我们需要设置Pusher，并获取我们的应用程序凭据。

We need to sign up on Pusher, create a new app, and also copy our secret application key and application id.

我们需要注册Pusher ，创建一个新应用，并复制我们的秘密应用密钥和应用ID。

The next step is to install the required libraries:

下一步是安装所需的库：

In the above bash command, we installed one package, pusher. This is the official Pusher library for Python, which we will be using to trigger and send our messages to Pusher.

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

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

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

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

In the above block of code, we defined a model called Conversation. The conversation table consists of the following fields:

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

A field to link the message to the user who created it
将消息链接到创建消息的用户的字段
A field to store the message
用于存储消息的字段
A field to store the status of the message
用于存储消息状态的字段
A filed to store the date and time the message was created
用于存储消息创建日期和时间的文件

运行迁移 (Running Migrations)

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

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

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

In Django, the views do not necessarily refer to the HTML structure of our application. In fact, we can see it as our Controller, as referred to in some other frameworks.

在Django中，视图不一定引用我们应用程序HTML结构。实际上，我们可以将其视为其他框架中提到的Controller 。

Let us open up our views.py in our message folder and replace the content with the following:

让我们在message文件夹中打开views.py并将内容替换为以下内容：

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

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

index
index
broadcast
broadcast
conversation
conversation
delivered
delivered

In the index function, we added the login required decorator, and we also passed the login URL argument which does not exist yet, as we will need to create it in the urls.py file. Also, we rendered a default template called chat.html that we will also create soon.

在index函数中，我们添加了登录所需的装饰器，并且还传递了尚不存在的登录URL参数，因为我们需要在urls.py文件中创建它。另外，我们渲染了一个默认模板chat.html ，我们还将很快创建它。

In the broadcast function, we retrieved the content of the message being sent, saved it into our database, and finally triggered a Pusher request passing in our message dictionary, as well as a channel and event name. In the conversations function, we simply grab all conversations and return them as a JSON response.

在broadcast功能中，我们检索了要发送的消息的内容，将其保存到我们的数据库中，最后触发了Pusher请求，该请求传递到消息字典中，以及通道和事件名称。在conversations功能中，我们仅获取所有对话并将其作为JSON响应返回。

Finally, we have the delivered function, which is the function that takes care of our message delivery status.

最后，我们具有delivered功能，该功能负责处理消息传递状态。

In this function, we get the conversation by the ID supplied to us. We then verify that the user who wants to trigger the delivered event isn’t the user who sent the message in the first place. Also, we pass in the socket_id so that Pusher does not broadcast the event back to the person who triggered it.

在此功能中，我们通过提供给我们的ID来获取对话。然后，我们验证要触发传递事件的用户不是最初发送消息的用户。另外，我们传入socket_id以便Pusher不会将事件广播回触发它的人。

The socket_id stands as an identifier for the socket connection that triggered the event.

socket_id代表触发事件的套接字连接的标识符。

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

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

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

What has changed in this file? We have added six new routes to the file. We have defined the entry point and assigned it to our index function. Next, we defined the login URL, which the login_required decorator would try to access to authenticate users.

该文件有什么变化？我们在文件中添加了6条新路线。我们已经定义了入口点并将其分配给index函数。接下来，我们定义了登录URL， login_required装饰器将尝试使用该URL进行身份验证用户。

We have used the default auth function to handle it but passed in our own custom template for login, which we will create soon.

我们使用默认的auth函数来处理它，但传入了我们自己的自定义模板进行登录，该模板将很快创建。

Next, we defined the routes for the conversation message trigger, all conversations, and finally the delivered conversation.

接下来，我们定义conversation消息触发器，所有conversations以及最终delivered对话的路由。

创建HTML文件 (Creating the HTML Files)

Now we will need to create two HTML pages so our application can run smoothly. We have referenced two HTML pages in the course of building the application.

现在，我们将需要创建两个HTML页面，以便我们的应用程序可以平稳运行。在构建应用程序的过程中，我们引用了两个HTML页面。

Let us create a new folder in our messages folder called templates.

让我们在messages文件夹中创建一个名为templates的新文件夹。

Next, we create a file called login.html in our templates folder and replace it with the following:

接下来，我们在templates文件夹中创建一个名为login.html文件，并将其替换为以下内容：

Vue组件和推杆绑定 (Vue Component And Pusher Bindings)

That’s it! Now, whenever a new message is delivered, it will be broadcast and we can listen, using our channel, to update the status in real-time. Below is our Example component written using Vue.js.

而已！现在，每当有新消息传递时，都会广播该消息，我们可以使用我们的频道收听实时更新状态。以下是我们使用Vue.js编写的示例组件。

Please note: In the Vue component below, a new function called **queryParams** was defined to serialize our POST body so it can be sent as **x-www-form-urlencoded** to the server in place of as a **payload**. We did this because Django cannot handle requests coming in as **payload**.

请注意：在下面的Vue组件中，定义了一个名为**queryParams**的新函数来序列化我们的POST正文，因此可以将它作为**x-www-form-urlencoded**发送给服务器，而不是作为**payload** 。我们这样做是因为Django无法处理以**payload**请求。

Below is the image demonstrating what we have built:

以下是展示我们所构建内容的图像：

结论 (Conclusion)

In this article, we have covered how to create a real-time message delivery status using Django and Pusher. We have gone through exempting certain functions from CSRF checks, as well as exempting the broadcaster from receiving an event they triggered.

在本文中，我们介绍了如何使用Django和Pusher创建实时消息传递状态。我们已经免除了CSRF检查中的某些功能，并且免除了广播公司接收它们触发的事件的机会。

The code is hosted on 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 by the author in the pusher blog here.

该帖子最初是由作者在此处的pusher博客中发布的。

This version has been edited for clarity and may appear different from the original post.

为了清晰起见，已对该版本进行了编辑，该版本可能与原始帖子有所不同。