实战

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

通知栏问题

来源：10-11 WebSocket触发Ajax请求-自动更新点赞数和评论数

鲨鱼辣椒辣

2021-04-07

我的点赞，评论都正常，也都能实时刷新，有了新消息之后通知栏也能变红，但是通知栏内点开没内容，提示没有未读通知！也没有报错！

写回答

8回答

Jack

2021-04-09

已采纳

点击铃铛只有会调用url中的这个

path('latest-notifications/', views.get_latest_notifications, name='latest_notifications'),

视图是这样

@login_required
def get_latest_notifications(request):
   """最近的未读通知"""
   notifications = request.user.notifications.get_most_recent()
   return render(request, 'notifications/most_recent.html',
                 {'notifications': notifications})

0
2
Jack
回复
鲨鱼辣椒辣
哈哈 别放弃 继续
2021-04-09
共2条回复

Jack

2021-04-09

//img.mukewang.com/szimg/606fc7de09cddcb910120480.jpg

是铃铛点击之后没有下面的弹框，对吗？

排错的话思路是这样：小铃铛点击，是要向这个url：

/notifications/latest-notifications/

发送get请求的，可以看http://zanhu.liaogx.com/ 这个部署的demo

然后，要么是js出错了，点击没有发送get请求，看浏览器console有什么报错；要么是后段出错了，没有正确返回数据，在开发环境中（debug=True）看后端有什么报错，在上面url函数的地方打断点调试

0
0

鲨鱼辣椒辣

提问者

2021-04-08

$(function () {
    const emptyMessage = '没有未读通知'
    const notice = $('#notifications')

    function CheckNotifications() {
        $.ajax({
            url: '/notifications/latest-notifications/',
            cache: false,
            success: function (data) {
                if (!data.includes(emptyMessage)) {
                    notice.addClass('btn-danger')
                }
            }
        })
    }

    CheckNotifications()

    function update_social_activity(id_value) {
        const newsToUpdate = $('[news-id=' + id_value + ']');
        $.ajax({
            url: '/news/update-interactions/',
            data: {'id_value': id_value},
            type: 'POST',
            cache: false,
            success: function (data) {
                $(".like-count", newsToUpdate).text(data.likes);
                $(".comment-count", newsToUpdate).text(data.comments);
            },
        });
    }

    notice.click(function () {
        if ($('.popover').is(':visible')) {
            notice.popover('hide');
            CheckNotifications();
        } else {
            notice.popover('dispose')
            $.ajax({
                url: '/notifications/latest-notifications/',
                cache: false,
                success: function (data) {
                    notice.popover({
                        html: true,
                        trigger: 'focus',
                        container: 'body',
                        placement: 'bottom',
                        content: data,
                    });
                    notice.popover('show');
                    notice.removeClass('btn-danger')
                }
            });
        }
        return false; //不是False
    });

    // WebSocket连接，使用wss(https)或者ws(http)
    const ws_scheme = window.location.protocol === 'https' ? 'wss' : 'ws';
    const ws_path = ws_scheme + '://' + window.location.host + '/ws/notifications/';
    const ws = new ReconnectingWebSocket(ws_path);

    ws.onmessage = function (event) {
        const data = JSON.parse(event.data);
        switch (data.key) {
            case "notification":
                if (currentUser !== data.actor_name) {  // 消息提示的发起者不提示
                    notice.addClass('btn-danger');
                }
                break;

            case "social_update":
                if (currentUser !== data.actor_name) {
                    notice.addClass('btn-danger');
                }
                update_social_activity(data.id_value);
                break;

            case "additional_news":
                if (currentUser !== data.actor_name) {
                    $('.stream-update').show();
                }
                break;

            default:
                console.log('error', data);
                break
        }

    }

});


0
1
Jack
这个看了一圈只发发现一个问题 const ws_scheme = window.location.protocol === 'https:' ? 'wss' : 'ws'; https后面应该有: 不过这个应该和你的报错无关，网站部署没用https也不会触发报错
2021-04-09
共1条回复

Jack

2021-04-08

用代码格式编辑一下吧，这样我好对比

0
1
鲨鱼辣椒辣
编辑好咯
2021-04-08
共1条回复

鲨鱼辣椒辣

提问者

2021-04-08

notification_list.html

{% extends "base.html" %}
{% load static thumbnail %}

{% block title %}通知 - {{ block.super }}{% endblock %}

{% block css %}
   <link href="{% static 'css/notifications.css' %}" rel="stylesheet">
{% endblock css %}

{% block content %}
   <h4>
       {{ request.user.get_profile_name }}的未读通知列表
       <a class="btn btn-dark pull-right" href="{% url 'notifications:mark_all_read' %}">全部标为已读</a>
   </h4>
   <ul class="notifications">
       {% for notification in notification_list %}
           <li class="notification">
               <div class="media">
                   <div class="media-object">
                       {% thumbnail notification.actor.picture "x75" as im %}
                           <img src="{{ im.url }}" style="border-radius: 50%;" alt="用户头像" id="pic">
                       {% empty %}
                           <img src="{% static 'img/user.png' %}" height="75px" alt="没有头像"/>
                       {% endthumbnail %}
                   </div>
                   <div class="media-body">
                       <a class="btn btn-success btn-sm pull-right" title="标为已读" href="{% url 'notifications:mark_as_read' notification.slug %}">
                           <i class="fa fa-check-circle"></i></a>
                       <strong class="notification-title">
                           <a href="{% url 'users:detail' notification.actor.username %}">{{ notification.actor.get_profile_name }}</a>
                       </strong>
                       <p class="notification-desc">
                           {{ notification.get_verb_display }}
                           {% if notification.action_object %}
                               {{ notification.action_object }}
                           {% endif %}
                       </p>
                       <div class="notification-meta">
                           <small class="timestamp">{{ notification.created_at|timesince }}之前</small>
                       </div>
                   </div>
               </div>
           </li>
       {% empty %}
           您没有收到任何通知
       {% endfor %}
   </ul>

{% endblock content %}


0
1
Jack
这个没发现问题
2021-04-09
共1条回复

鲨鱼辣椒辣

提问者

2021-04-08

{% extends "base.html" %}
{% load static thumbnail %}

{% block title %}通知 - {{ block.super }}{% endblock %}

{% block css %}
    <link href="{% static 'css/notifications.css' %}" rel="stylesheet">
{% endblock css %}

{% block content %}
    <h4>
        {{ request.user.get_profile_name }}的未读通知列表
        <a class="btn btn-dark pull-right" href="{% url 'notifications:mark_all_read' %}">全部标为已读</a>
    </h4>
    <ul class="notifications">
        {% for notification in notification_list %}
            <li class="notification">
                <div class="media">
                    <div class="media-object">
                        {% thumbnail notification.actor.picture "x75" as im %}
                            <img src="{{ im.url }}" style="border-radius: 50%;" alt="用户头像" id="pic">
                        {% empty %}
                            <img src="{% static 'img/user.png' %}" height="75px" alt="没有头像"/>
                        {% endthumbnail %}
                    </div>
                    <div class="media-body">
                        <a class="btn btn-success btn-sm pull-right" title="标为已读" href="{% url 'notifications:mark_as_read' notification.slug %}">
                            <i class="fa fa-check-circle"></i></a>
                        <strong class="notification-title">
                            <a href="{% url 'users:detail' notification.actor.username %}">{{ notification.actor.get_profile_name }}</a>
                        </strong>
                        <p class="notification-desc">
                            {{ notification.get_verb_display }}
                            {% if notification.action_object %}
                                {{ notification.action_object }}
                            {% endif %}
                        </p>
                        <div class="notification-meta">
                            <small class="timestamp">{{ notification.created_at|timesince }}之前</small>
                        </div>
                    </div>
                </div>
            </li>
        {% empty %}
            您没有收到任何通知
        {% endfor %}
    </ul>

{% endblock content %}


0
0

鲨鱼辣椒辣

提问者

2021-04-08

老师，编辑好了

0
0

Jack

2021-04-07

您好，看对应的js和html 文件是不是写错了。求截图一下

0
0

Django高级实战 开发企业级问答网站

融合Django高级用法/算法/设计模式/TestCase测试/云计算打造项目

900 学习 · 756 问题

查看课程

相似问题

私信功能的通知处理器

回答 2

老师，问个问题：pycharm中的左侧边栏的database如何设置才能连接上mysql啊？

回答 2

使用Django的GCBV，如何嵌入消息通知

回答 1

开发环境可以直接使用win10么？

回答 2

Django admin 分页性能问题

回答 1

打开慕课网App查看更多内容