Menu

92.更新话题(二)

本节说明

  • 对应视频教程第 92 小节:A Thread Can Be Updated: Part 2

本节内容

在开始之前,因为我们现在已经升级到 Laravel 5.5,所以我们来做点小修改:使用request()辅助方法。修改以下代码:
forum\app\Http\Controllers\ThreadsController.php

    .
    .
    public function store(Recaptcha $recaptcha)
    {
        request()->validate([
           'title' => 'required|spamfree',
            'body' => 'required|spamfree',
            'channel_id' => 'required|exists:channels,id',
            'g-recaptcha-response' => ['required',$recaptcha]
        ]);
        .
        .
    }
    .
    .

forum\app\Http\Controllers\RepliesController.php

    .
    .
    public function update(Reply $reply)
    {
        $this->authorize('update',$reply);

        request()->validate(['body' => 'required|spamfree']);

        $reply->update(request(['body']));
    }
    .
    .

forum\app\Http\Controllers\Api\UserAvatarController.php

    .
    .
    public function store()
    {
        request()->validate([
            'avatar' => ['required','image']
        ]);
        .
        .
    }
.

运行一下全部测试:
file
现在正式开始本节内容:更新话题功能的前端部分开发。首先我们将话题的内容抽取成独立的视图文件:
forum\resources\views\threads_topic.blade.php

{{-- Edit --}}
<div class="panel panel-default" v-if="editing">
    <div class="panel-heading">
        <div class="level">
            <input type="text" value="{{ $thread->title }}" class="form-control">
        </div>
    </div>

    <div class="panel-body">
        <div class="form-group">
            <textarea class="form-control" rows="10">{{ $thread->body }}</textarea>
        </div>
    </div>

    <div class="panel-footer">
        <div class="level">
            <button class="btn btn-xs level-item" @click="editing = true" v-show="! editing">Edit</button>
            <button class="btn btn-primary btn-xs level-item" @click="">Update</button>
            <button class="btn btn-xs level-item" @click="editing = false">Cancel</button>

            @can('update',$thread)
                <form action="{{ $thread->path() }}" method="POST" class="ml-a">
                    {{ csrf_field() }}
                    {{ method_field('DELETE') }}

                    <button type="submit" class="btn btn-link">Delete Thread</button>
                </form>
            @endcan
        </div>
    </div>
</div>

{{-- View --}}
<div class="panel panel-default" v-else>
    <div class="panel-heading">
        <div class="level">
            <img src="/storage/{{ $thread->creator->avatar_path }}" alt="{{ $thread->creator->name }}" width="25" height="25" class="mr-1">

            <span class="flex">
                <a href="{{ route('profile',$thread->creator) }}">{{ $thread->creator->name }}</a> posted: {{ $thread->title }}
            </span>
        </div>
    </div>

    <div class="panel-body">
        {{ $thread->body }}
    </div>

    <div class="panel-footer">
        <button class="btn btn-xs" @click="editing = true">Edit</button>
    </div>
</div>

我们将视图分成了两个部分,分别展示编辑区域和详情区域。然后我们引入该视图:
forum\resources\views\threads\show.blade.php

.
.
<thread-view :thread="{{ $thread }}" inline-template>
    <div class="container">
        <div class="row">
            <div class="col-md-8" v-cloak>
                @include('threads._topic')

                <replies @added="repliesCount++" @removed="repliesCount--"></replies>
            </div>
            .
            .

增加样式:
forum\resources\views\layouts\app.blade.php

.
.
<style>
    body{ padding-bottom: 100px; }
    .level { display: flex;align-items: center; }
    .level-item { margin-right: 1em; }
    .
    .
</style>
.
.

我们本节专注于前端效果的实现,所以我们先为editing赋值为false
forum\resources\assets\js\pages\Thread.vue

    .
    .
    data() {
        return {
            repliesCount:this.thread.replies_count,
            locked:this.thread.locked,
            editing:false
        };
    },
    .
    .

查看前端效果:
file

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


暂无话题~
刻意练习,每日精进。
1
点赞
40
浏览
0
讨论

维护者