摘要：接下來你就可以在項(xiàng)目的任何地方發(fā)送通知了像這樣其中的參數(shù)釋義發(fā)送通知的對象接收通知的對象動(dòng)詞短語鏈接到動(dòng)作的對象可選執(zhí)行通知的對象可選有點(diǎn)繞，舉個(gè)栗子杜賽在搭建個(gè)人博客中對你發(fā)表了評論。有疑問請?jiān)诙刨惖膫€(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。

憑借你勤奮的寫作，拜讀你文章的用戶越來越多，他們的評論也分散在眾多的文章之中。作為博主，讀者的留言肯定是要都看的；而讀者給你留言，自然也希望得到回復(fù)。

怎么將未讀的留言呈現(xiàn)給正確的用戶呢？總不能用戶自己去茫茫文章中尋找吧，那也太蠢了。給評論增加通知功能就是很流行的解決方案：比如微信朋友圈留言的通知、新浪微博留言的通知、以及各種社交平臺的“小紅點(diǎn)”。

本篇將以django-notifications為基礎(chǔ)，非常高效的搭建一個(gè)簡易的通知系統(tǒng)。

發(fā)送通知

前面的步驟我們已經(jīng)很熟悉了。

首先安裝django-notifications：

(env) > pip install django-notifications-hq

注冊app：

my_blog/settings.py

...
INSTALLED_APPS = [
    ...
    "notifications",
    ...
]
...

在根路由中安裝路徑：

my_blog/urls.py

...
import notifications.urls

urlpatterns = [
    ...
    path("inbox/notifications/", include(notifications.urls, namespace="notifications")),
    ...
]
...

注意這里的notifications.urls沒有像之前一樣用字符串，是為了確保模塊安裝到正確的命名空間中。

數(shù)據(jù)遷移：

(env) > python manage.py migrate

app就安裝好了。

接下來你就可以在項(xiàng)目的任何地方發(fā)送通知了！像這樣：

from notifications.signals import notify

notify.send(actor, recipient, verb, target, action_object)

其中的參數(shù)釋義：

actor：發(fā)送通知的對象

recipient：接收通知的對象

verb：動(dòng)詞短語

target：鏈接到動(dòng)作的對象（可選）

action_object：執(zhí)行通知的對象（可選）

有點(diǎn)繞，舉個(gè)栗子：杜賽 (actor) 在 Django搭建個(gè)人博客 (target) 中對 [你]() (recipient) [發(fā)表了]() (verb) [評論]() (action_object)。

因?yàn)槲覀兿胍谟脩?strong>發(fā)表評論的時(shí)候發(fā)送通知，因此修改一下發(fā)表評論的視圖：

comments/views.py

...
from notifications.signals import notify
from django.contrib.auth.models import User

...
def post_comment(...):
    ...

    # 已有代碼，創(chuàng)建新回復(fù)
    if comment_form.is_valid():
        ...

        # 已有代碼，二級回復(fù)
        if parent_comment_id:
            ...

            # 新增代碼，給其他用戶發(fā)送通知
            if not parent_comment.user.is_superuser:
                notify.send(
                    request.user,
                    recipient=parent_comment.user,
                    verb="回復(fù)了你",
                    target=article,
                    action_object=new_comment,
                )

            return HttpResponse("200 OK")
        
        new_comment.save()

        # 新增代碼，給管理員發(fā)送通知
        if not request.user.is_superuser:
            notify.send(
                    request.user,
                    recipient=User.objects.filter(is_superuser=1),
                    verb="回復(fù)了你",
                    target=article,
                    action_object=new_comment,
                )
            
        return redirect(article)
...

2019/6/4 修正此代碼。舊代碼錯(cuò)誤的將發(fā)送給管理員的notify放在了new_comment.save()的前面，導(dǎo)致action_object存儲(chǔ)為NULL。

增加了兩條notify的語句，分別位于兩個(gè)if語句中：

第一個(gè)notify：用戶之間可以互相評論，因此需要發(fā)送通知。if語句是為了防止管理員收到重復(fù)的通知。

第二個(gè)notify：所有的評論都會(huì)給管理員（也就是博主）發(fā)送通知，除了管理員自己。

其他的代碼沒有變化，注意位置不要錯(cuò)就行了。你可以試著發(fā)送幾條評論，然后打開SQLiteStudio，查看notifications_notification表中的數(shù)據(jù)變化。

有效代碼實(shí)際上只有4行，我們就完成了創(chuàng)建、發(fā)送通知的功能！相信你已經(jīng)逐漸體會(huì)到運(yùn)用第三方庫帶來的便利了。這就是站在了“巨人們”的肩膀上。

小紅點(diǎn)

后臺創(chuàng)建通知的邏輯已經(jīng)寫好了，但是如果不能在前端顯示出來，那也沒起到作用。

而前端顯示消息通知比較流行的是“小紅點(diǎn)”，流行得都已經(jīng)泛濫了，盡管很多軟件其實(shí)根本就不需要。另一種形式是消息徽章，即一個(gè)紅色方框中帶有消息條目的計(jì)數(shù)。這兩種方式都會(huì)用到博客頁面中。

在位置的選擇上，header是很合適的，因?yàn)樗诓┛偷乃形恢枚紩?huì)顯示，很符合通知本身的定位。

因此修改header.html：

templates/header.html


{% load notifications_tags %}
{% notifications_unread as unread_count %}

...



    
        
        
        {% if unread_count %}
            
        {% endif %}
        
        {{ user.username }}
    
    
    

        
        
        通知
            {% if unread_count %}
            {{ unread_count }}
            {% endif %}
        
        
        ...
        退出登錄
    


...

django-notifications自帶簡易的模板標(biāo)簽，可以在前臺模板中調(diào)用重要的通知相關(guān)的對象，在頂部引入就可以使用了。比如unread_count是當(dāng)前用戶的未讀通知的計(jì)數(shù)。

Bootstrap自帶有徽章的樣式，但是卻沒有小紅點(diǎn)的樣式（至少我沒有找到），所以就只能用svg自己畫了，好在也不難。

svg是繪制矢量圖形的標(biāo)簽，這里就不展開講了，感興趣請自行搜索相關(guān)文章。

隨便評論幾條，刷新頁面看一看：

效果不錯(cuò)。但是鏈接的href是空的，接下來就處理。

未讀與已讀

既然是通知，那么肯定能夠分成”未讀的“和”已讀的“兩種。在適當(dāng)?shù)臅r(shí)候，未讀通知又需要轉(zhuǎn)換為已讀的。現(xiàn)在我們來開發(fā)功能集中處理它。

通知是一個(gè)獨(dú)立的功能，以后有可能在任何地方用到，放到評論app中似乎并不合適。

所以新建一個(gè)app：

(env) > python manage.py startapp notice

注冊：

my_blog/settings.py

...
INSTALLED_APPS = [
    ...
    "notice",
]
...

根路由：

my_blog/urls.py

...
urlpatterns = [
    ...
    # notice
    path("notice/", include("notice.urls", namespace="notice")),
]
...

接下來就是視圖了。之前所有的視圖都是用的視圖函數(shù)，這次我們更進(jìn)一步，用類視圖來完成。忘記什么是類視圖的，回憶一下前面類的視圖章節(jié)。

編寫視圖：

notice/views.py

from django.shortcuts import render, redirect
from django.views import View
from django.views.generic import ListView
from django.contrib.auth.mixins import LoginRequiredMixin
from article.models import ArticlePost


class CommentNoticeListView(LoginRequiredMixin, ListView):
    """通知列表"""
    # 上下文的名稱
    context_object_name = "notices"
    # 模板位置
    template_name = "notice/list.html"
    # 登錄重定向
    login_url = "/userprofile/login/"

    # 未讀通知的查詢集
    def get_queryset(self):
        return self.request.user.notifications.unread()


class CommentNoticeUpdateView(View):
    """更新通知狀態(tài)"""
    # 處理 get 請求
    def get(self, request):
        # 獲取未讀消息
        notice_id = request.GET.get("notice_id")
        # 更新單條通知
        if notice_id:
            article = ArticlePost.objects.get(id=request.GET.get("article_id"))
            request.user.notifications.get(id=notice_id).mark_as_read()
            return redirect(article)
        # 更新全部通知
        else:
            request.user.notifications.mark_all_as_read()
            return redirect("notice:list")

視圖共兩個(gè)。

CommentNoticeListView：繼承自ListView，用于展示所有的未讀通知。get_queryset方法返回了傳遞給模板的上下文對象，unread()方法是django-notifications提供的，用于獲取所有未讀通知的集合。另外視圖還繼承了“混入類”LoginRequiredMixin，要求調(diào)用此視圖必須先登錄。

CommentNoticeUpdateView：繼承自View，獲得了如get、post等基礎(chǔ)的方法。mark_as_read()、mark_all_as_read都是模塊提供的方法，用于將未讀通知轉(zhuǎn)換為已讀。if語句用來判斷轉(zhuǎn)換單條還是所有未讀通知。

重復(fù)：閱讀有困難的同學(xué)，請重新閱讀類的視圖查閱。

接下來就是新建urls.py了，寫入：

notice/urls.py

from django.urls import path
from . import views

app_name = "notice"

urlpatterns = [
    # 通知列表
    path("list/", views.CommentNoticeListView.as_view(), name="list"),
    # 更新通知狀態(tài)
    path("update/", views.CommentNoticeUpdateView.as_view(), name="update"),
]

path()的第二個(gè)參數(shù)只能接收函數(shù)，因此別忘了要調(diào)用類視圖的as_view()方法。

集中處理通知需要一個(gè)多帶帶的頁面。新建templates/notice/list.html模板文件：

templates/notice/list.html

{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
    通知
{% endblock title %}

{% block content %}

    

        清空所有通知
    
    
    

        

            {% for notice in notices %}
                

                    
                    
                        {{ notice.actor }}
                    
                        在 {{ notice.target }} {{ notice.verb }}。
                    
                         {{ notice.timestamp|date:"Y/m/d H:i" }}
                
            {% endfor %}
        
    



{% endblock content %}

模板中主要提供了兩個(gè)功能：

點(diǎn)擊button按鈕清空所有未讀通知

點(diǎn)擊單個(gè)通知，將其轉(zhuǎn)換為已讀通知，并前往此評論所在的文章

末尾