TDD 构建 Laravel 论坛笔记86.锁定话题（三）
- 本系列文章为
laracasts.com的系列视频教程 ——Let's Build A Forum with Laravel and TDD 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频， 支持正版 ；- 视频源码地址：github.com/laracasts/Lets-Build-a-...；
- 本项目为一个 forum（论坛）项目，与本站的第二本实战教程 《Laravel 教程 - Web 开发实战进阶》 类似，可互相参照。
本节说明#
- 对应视频教程第 86 小节：An Administrator May Lock Any Thread: Part 3
本节内容#
在之前的章节中，我们定义了用户名为 NoNo1 的用户为管理员，但是谁都能注册为 NoNo1。所以本节开始之前我们首先来为用户名加上唯一性限制：
forum\database\migrations\2014_10_12_000000_create_users_table.php
.
.
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->increments('id');
$table->string('name')->unique();
$table->string('email')->unique();
$table->string('password');
$table->string('avatar_path')->nullable();
$table->boolean('confirmed')->default(false);
$table->string('confirmation_token',25)->nullable()->unique();
$table->rememberToken();
$table->timestamps();
});
}
.
.运行迁移：
$ php artisan migrate:refresh现在我们继续锁定话题功能的开发，本节我们来实现锁定功能前端效果。首先我们加入前端管理员的判定：
forum\resources\assets\js\authorizations.js
let user = window.App.user;
module.exports = {
owns (model,prop = 'user_id') {
return model[prop] == user.id;
},
isAdmin() {
return ['NoNo1'].includes(user.name);
}
};接着我们来修改话题页面：
forum\resources\views\threads\show.blade.php
.
.
// 绑定 data-locked 属性
<thread-view :data-replies-count="{{ $thread->replies_count }}" :data-locked="{{ $thread->locked }}" inline-template>
.
.
<p>
<subscribe-button :active="{{ json_encode($thread->isSubscribedTo)}}" v-if="signedIn"></subscribe-button>
// 增加 Lock 按钮
<button class="btn btn-default" v-if="authorize('isAdmin')" @click="locked = true">Lock</button>
</p>
.
.
</thread-view>
@endsection修改 Thread.vue 组件，接收绑定的属性：
forum\resources\assets\js\pages\Thread.vue
<script>
import Replies from '../components/Replies';
import SubscribeButton from '../components/SubscribeButton';
export default {
props: ['dataRepliesCount','dataLocked'],
components: { Replies,SubscribeButton},
data() {
return {
repliesCount:this.dataRepliesCount,
locked:this.dataLocked //接收属性
}
}
}
</script>我们设定的是，当话题被锁定时无法进行回复，所以我们还要设定 NewReply.vue 组件在话题被锁定时不可见：
forum\resources\assets\js\components\Replies.vue
<template>
.
.
<p v-if="$parent.locked">
This thread is locked.No more replies are allowed.
</p>
<new-reply @created="add" v-else></new-reply>
</div>
</template>
.
.查看效果：
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：