用户发布的话题
我们在个人中心页面里,将当前用户的所有发布过的话题显示出来。
一、新增导航栏入口
为了更方便的进入『个人中心』,我们将在顶部导航栏新增个人中心的链接,并为下拉列表增加图标:
resources/views/layouts/_header.blade.php
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-static-top">
<div class="container">
<!-- Branding Image -->
<a class="navbar-brand " href="{{ url('/') }}">
LaraBBS
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- 导航栏 -->
<ul class="navbar-nav mr-auto">
<li class="nav-item {{ active_class(if_route('topics.index')) }}"><a class="nav-link" href="{{ route('topics.index') }}">话题</a></li>
<li class="nav-item {{ category_nav_active(1) }}"><a class="nav-link" href="{{ route('categories.show', 1) }}">分享</a></li>
<li class="nav-item {{ category_nav_active(2) }}"><a class="nav-link" href="{{ route('categories.show', 2) }}">教程</a></li>
<li class="nav-item {{ category_nav_active(3) }}"><a class="nav-link" href="{{ route('categories.show', 3) }}">问答</a></li>
<li class="nav-item {{ category_nav_active(4) }}"><a class="nav-link" href="{{ route('categories.show', 4) }}">公告</a></li>
</ul>
<ul class="navbar-nav navbar-right">
<!-- Authentication Links -->
@guest
<li class="nav-item"><a class="nav-link" href="{{ route('login') }}">登录</a></li>
<li class="nav-item"><a class="nav-link" href="{{ route('register') }}">注册</a></li>
@else
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img
src="{{ Auth::user()->avatar }}"
class="img-responsive img-circle" width="30px" height="30px">
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('users.show', Auth::id()) }}">
<i class="far fa-user mr-2"></i>
个人中心</a>
<a class="dropdown-item" href="{{ route('users.edit', Auth::id()) }}">
<i class="far fa-edit mr-2"></i>
编辑资料</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" id="logout" href="#">
<form action="{{ route('logout') }}" method="POST" onsubmit="return confirm('您确定要退出吗?');">
@csrf
<button class="btn btn-block btn-danger" type="submit" name="button">退出</button>
</form>
</a>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
上面代码中,我们为下拉列表里的选项都加上了链接和图标,并且在退出登录的按钮那加了一个确认功能,防止用户误操作:
二、新增模型关联
接下来我们在用户模型中新增与话题模型的关联:
app/Models/User.php
// 一个用户拥有多个话题
public function topics()
{
return $this->hasMany(Topic::class);
}
三、个人页面新增入口
接下来我们需要修改下个人页面的模板,将 『暂无数据 _』子串替换为新增『Ta 的话题』和『Ta 的回复』两个入口:
resources/views/users/show.blade.php
{{-- 用户发布的内容 --}}
<div class="card">
<div class="card-body">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active bg-transparent" href="#">Ta 的话题</a></li>
<li class="nav-item"><a class="nav-link" href="#">Ta 的回复</a></li>
</ul>
@include('users._topics', ['topics' => $user->topics()->recent()->paginate(5)])
</div>
</div>
话题的列表我们使用了子模板,接下来新建此文件,并写入以下内容:
resources/views/users/_topics.blade.php
@if (count($topics))
<ul class="list-group mt-4 border-0">
@foreach ($topics as $topic)
<li class="list-group-item pl-2 pr-2 border-right-0 border-left-0 @if($loop->first) border-top-0 @endif">
<a href="{{ route('topics.show', $topic->id) }}">
{{ $topic->title }}
</a>
<span class="meta float-right text-secondary">
{{ $topic->reply_count }} 回复
<span> ⋅ </span>
{{ $topic->created_at->diffForHumans() }}
</span>
</li>
@endforeach
</ul>
@else
<div class="empty-block">暂无数据 ~_~ </div>
@endif
{{-- 分页 --}}
<div class="mt-4 pt-1">
{!! $topics->render() !!}
</div>
代码高亮:
@if($loop->first) border-top-0 @endif"
如果是第一个 list-group-item 的话,我们去掉上面的边。
刷新页面: