86.锁定话题(三)

未匹配的标注

本节说明

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

查看效果:
file

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。