laravel5.3 vue 实现收藏夹功能实例详解(4)

Vue.component('favorite', require('./components/Favorite.vue'));

npm run dev

php artisan make:controller UsersController

app/Http/Controllers/UsersController.php ​ 
<?php​
namespace App\Http\Controllers;​
use Illuminate\Http\Request;​
use Illuminate\Support\Facades\Auth;​
class UsersController extends Controller
{
 public function myFavorites()
 {
 $myFavorites = Auth::user()->favorites;
 return view('users.my_favorites', compact('myFavorites'));
 }
}

// resources/views/users/my_favorites.blade.php
​
extends('layouts.app')
​
@section('content')
<div class="container">
 <div class="row">
 <div class="col-md-8 col-md-offset-2">
  <div class="page-header">
  <h3>My Favorites</h3>
  </div>
  @forelse ($myFavorites as $myFavorite)
  <div class="panel panel-default">
   <div class="panel-heading">
   <a href="/article/{{ $myFavorite->id }}" rel="external nofollow" >
    {{ $myFavorite->title }}
   </a>
   </div>
​
   <div class="panel-body" style="max-height:300px;overflow:hidden;">
   <img src="/uploads/{!! ($myFavorite->cover)[0] !!}" style="max-width:100%;overflow:hidden;" alt="">
   </div>
   @if (Auth::check())
   <div class="panel-footer">
    <favorite
    :post={{ $myFavorite->id }}
    :favorited={{ $myFavorite->favorited() ? 'true' : 'false' }}
    ></favorite>
   </div>
   @endif
  </div>
  @empty
  <p>You have no favorite posts.</p>
  @endforelse
  </div>
 </div>
</div>
@endsection

Route::get('/', 'ArticleController@index');