45.话题订阅（五）

TDD 构建 Laravel 论坛笔记 /

本系列文章为laracasts.com 的系列视频教程——Let's Build A Forum with Laravel and TDD 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频， 支持正版 ；

视频源码地址：github.com/laracasts/Lets-Build-a-...；

本项目为一个 forum（论坛）项目，与本站的第二本实战教程《Laravel 教程 - Web 开发实战进阶》类似，可互相参照。

本节说明

对应视频教程第 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>

可以看到我们使用了message和link，但是我们要先保存相应内容：
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