TDD 构建 Laravel 论坛笔记45.话题订阅（五）
- 本系列文章为
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，让我们来调试一下：
组件已经可以正常显示了，接下来我们进一步完善我们的组件，获取到正确的通知的内容：
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()
];
}
}现在我们订阅一个话题，并且使用其他账号添加一个回复。然后我们进行测试：
接下来我们来完成我们的组件，当点击链接后消息标志为已读：
<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>最后，我们测试一下：
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：