Laravel 5.6 点赞按钮

Laravel 5.6 Like Button

我在 Laravel 5.6 中使用这个包 here 在我的项目中添加喜欢系统。

我已经根据他们的文档更新了模型。但是,我对如何使用这个包感到困惑。

我添加了以下尝试,当登录用户访问 link.

时,将登录用户添加到特定文章喜欢列表中
public function show(ArticleCategory $articlecategory, $slug)
{
    $categories = ArticleCategory::all();
    $article = Article::where('slug', $slug)->first();
    $user = User::first();
    $user->addFavorite($article);
    return view('articles.show', compact('article', 'categories'));
}

并且在我的用户仪表板中,我能够调出用户喜欢的所有文章

$user = Auth::user();
$favoritearticles = $user->favorite(Article::class);

但我正在寻找一种功能,我在文章页面上有一个按钮,当登录用户点击它时,他就会被添加到喜欢的列表中。我之前没有尝试过这个,所以卡在这一点上。

我替换了

$user->addFavorite($article);

$user->toggleFavorite($article);

但这只是切换收藏夹列表。我的意思是,当我访问 link 一次时,已登录的用户会被添加到喜欢的列表中。当我第二次访问 link 时,已登录的用户已从喜欢列表中删除。循环往复。

谁能给我解释一下如何用一个按钮实现类似的功能?

在您的文章页面中创建一个带有按钮的表单

<form action="{{url('favorite/{$post->id}')}}" method="post">
@if($post->isFavorited())
<button type="submit">Remove from favorite</button>
@else
<button type="submit">Add to favorite</button>
@endif
</form>

创建最喜欢的路线和控制器

Router::post('favorite/{id}',"ArticleController@toggleFavorite");


public function toggleFavorite($id) {
 $article = ArticleCategory::find($id);//get the article based on the id
 Auth::user()->toggleFavorite($article);//add/remove the user from the favorite list
 return Redirect::to('article/{$id}');//redirect back (optionally with a message)
}

你快到了, 您必须添加一个 button 并在单击时触发对服务器的 AJAX 请求以在不刷新页面的情况下执行您想要的操作,这是一个示例:

首先,您将添加一个按钮并为其指定一个 ID 或 class:

<button class="like">Like</button>

然后在你点击它的那一刻,你将调用 url,你需要将其替换为你的函数的路由,

然后你必须像这样声明一个方法:

public function like($slug)
{
    $article = Article::where('slug', $slug)->first();
    $user = \Auth::user(); //to get authenticated user...
    $user->toggleFavorite($article); // toggle so if u already like it u remove it from the liked table
    return response()->json(['status': 1])
}

当然还要将路线添加到您的 routes.php:

Router::get('like/{slug}',"ArticleController@like");

然后添加函数(这里使用jQuery)挂钩AJAX调用

$('.like').on('click', function(){
  $.ajax({
    type: "GET",
    url: 'wwww.example.com/articles/slug',
    data: {slug: 'the slug'},
    success: function(data){
      alert('its done')
    },
  });
})