92.更新话题(二)
- 本系列文章为
laracasts.com
的系列视频教程——Let's Build A Forum with Laravel and TDD 的学习笔记。若喜欢该系列视频,可去该网站订阅后下载该系列视频, 支持正版 ;- 视频源码地址:github.com/laracasts/Lets-Build-a-...;
- 本项目为一个 forum(论坛)项目,与本站的第二本实战教程 《Laravel 教程 - Web 开发实战进阶》 类似,可互相参照。
本节说明
- 对应视频教程第 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']
]);
.
.
}
.
运行一下全部测试:
现在正式开始本节内容:更新话题功能的前端部分开发。首先我们将话题的内容抽取成独立的视图文件:
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
};
},
.
.
查看前端效果:
推荐文章: