Menu

45.话题订阅(五)

本节说明

  • 对应视频教程第 45 小节:Thread Subscriptions(Part 5)

本节内容

本节我们将未读消息显示出来。首先我们增加入口:
forum\resources\views\layouts\nav.blade.php

    .
    .
    <!-- Right Side Of Navbar -->
            <ul class="nav navbar-nav navbar-right">
                <!-- Authentication Links -->
                @if (Auth::guest())
                    <li><a href="{{ route('login') }}">Login</a></li>
                    <li><a href="{{ route('register') }}">Register</a></li>
                @else
                    <user-notifications></user-notifications>
                    .
                    .

接下来我们新建消息通知组件。我们先注册,再填写内容:
forum\resources\assets\js\app.js

.
.
Vue.component('flash', require('./components/Flash.vue'));
Vue.component('paginator', require('./components/Paginator.vue'));
Vue.component('user-notifications', require('./components/UserNotifications.vue'));
.
.

forum\resources\assets\js\components\UserNotifications.vue

<template>
    <li class="dropdown" v-show="notifications.length">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="glyphicon glyphicon-bell"></span>
        </a>

        <ul class="dropdown-menu">
            <li v-for="notification in notifications">
                <a href="#">Foobar</a>
            </li>
        </ul>
    </li>
</template>

<script>
    export default {
        data() {
            return { notifications:['foobar'] }
        }
    }
</script>

我们暂时 Hard Coding 了notifications,让我们来调试一下:
file
组件已经可以正常显示了,接下来我们进一步完善我们的组件,获取到正确的通知的内容:
forum\resources\assets\js\components\UserNotifications.vue

<template>
    <li class="dropdown" v-show="notifications.length">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="glyphicon glyphicon-bell"></span>
        </a>

        <ul class="dropdown-menu">
            <li v-for="notification in notifications">
                <a :href="notification.data.link" v-text="notification.data.message"></a>
            </li>
        </ul>
    </li>
</template>

<script>
    export default {
        data() {
            return { notifications:false }
        },

        created() {
            axios.get("/profiles/" + window.App.user.name + "/notifications")
                .then(response => this.notifications = response.data);
        }
    }
</script>

可以看到我们使用了messagelink,但是我们要先保存相应内容:
forum\app\Notifications\ThreadWasUpdated.php

    .
    .
    public function toArray($notifiable)
    {
        return [
            'message' => $this->reply->owner->name . 'replied to ' . $this->thread->title,
            'link' => $this->reply->path()
        ];
    }
}

现在我们订阅一个话题,并且使用其他账号添加一个回复。然后我们进行测试:
file
接下来我们来完成我们的组件,当点击链接后消息标志为已读:

<template>
    <li class="dropdown" v-show="notifications.length">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="glyphicon glyphicon-bell"></span>
        </a>

        <ul class="dropdown-menu">
            <li v-for="notification in notifications">
                <a :href="notification.data.link" v-text="notification.data.message" @click="markAsRead(notification)"></a>
            </li>
        </ul>
    </li>
</template>

<script>
    export default {
        data() {
            return { notifications:false }
        },

        created() {
            axios.get("/profiles/" + window.App.user.name + "/notifications")
                .then(response => this.notifications = response.data);
        },

        methods: {
            markAsRead(notification){
                axios.delete("/profiles/" + window.App.user.name + "/notifications/" + notification.id);
            }
        }
    }
</script>

最后,我们测试一下:
file

本文章首发在 Laravel China 社区
上一篇 下一篇
讨论数量: 0
发起讨论


暂无话题~