Ошибка кнопки «Нравится» Laravel / AJAX: Ошибка запроса с кодом состояния 404

Question

Я очень новичок в Laravel, AJAX и т. Д. Я студент, работающий над проектом типа Twitter, и это мой первый вопрос в стеке.Я пытался искать ответы, но код, с которым мне помог мой учитель, сильно отличается от других примеров.Я почти уверен, что моя проблема с непохожим методом внутри моего "Tweet Controller" ... Любая помощь очень ценится!Надеюсь, я предоставил достаточно информации, и, надеюсь, это поможет другим в будущем:)

Это моя ошибка: [1]: https://i.stack.imgur.com/zkxsd.png

POST http://localhost:8000/tweets/19/unlike 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404
at createError (app.js:14253)
at settle (app.js:35706)
at XMLHttpRequest.handleLoad (app.js:14127)

Это моя таблица лайков /Миграция

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateLikesTable extends Migration
{
/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
    Schema::create('likes', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('tweet_id');
        $table->integer('user_id');
        $table->timestamps();
    });
}

/**
 * Reverse the migrations.
 *
 * @return void
 */
public function down()
{
    Schema::dropIfExists('likes');
}
}

Это мой Tweet Controller

public function like($id){


     $like = Like::create([
         'user_id'=>auth()->id(),
         'tweet_id'=> $id

     ]);
     if($like){
         return json_encode(array('status' => 'success'));

     }
     return json_encode(array('status' => 'failed'));

 }

 public function unlike($id){
     $like = Like::delete([
         'user_id'=>auth()->id(),
         'tweet_id'=> $id

     ]);

    if($like){
        return json_encode(array('status' => 'success'));
    }
}

Это мои веб-маршруты

Route::post('tweets/{tweet}/like', 'TweetController@like');
Route::delete('tweets/{tweet}/like', 'TweetController@unlike');

Это моя модель

    public function likes(){
    return $this->hasMany(Like::class);
}

public function likedByCurrentUser(){
    $userId=auth()->id();

    //like boolean
    $like = $this->likes->first(function($v) use ($userId){
        //$v is a reference to the single like
        return $v->user_id == $userId;
    });

    //if the user has liked a post
    if($like){
       return true;
   }
   return false;

}

Это мой Vue компонент:

<script>
export default {
    name: 'likeButton',
    props: ['likeCount','hasLiked','tweetId','csrf'],

     mounted(){
         this.dataLikeCount = this.likeCount;
         this.dataHasLiked = this.hasLiked;
     },
        data(){
            return{
                dataLikeCount:0,
                dataHasLiked:false

            }
        },

        methods:{
            doLike(){
                var type='like';

                if(this.dataHasLiked){
                    type='unlike'
                }

                axios({
                    method:'POST',
                    url:'/tweets/' + this.tweetId + '/'+ type,
                    headers:{
                        'X-CSRFToken':this.csrf
                    },
                    json: true

                    }).then((response) => {
                        if(response.data.status == 'success'){
                            // response was successful (regardless of type)
                            return true
                            // if type is like
                                // add one to like count, set hasLiked to true
                                if(type == 'like'){
                                    this.dataLikeCount++
                                }
                            // if type is unlike
                                // deduct one from like count, set hasLiked to false
                                if(type =='unlike'){
                                    return false
                                    this.dataLikeCount--
                                }
                        }
                    });
                }
            }
        }
</script>

<template>
<div>
    <button type="submit"
    :class="{'btn btn-link':dataHasLiked}"
    @click="doLike">

          <i class="star"></i>
          Like {{ dataLikeCount }}

    </button>
</div>


</template>

Answer 1

Как сказал @DigitalDrifter, у вас нет маршрута для сравнения.поэтому нужно изменить это.

Ваши маршруты похожи на

Route::delete('tweets/{tweet}/unlike', 'TweetController@unlike');

Поэтому нужно вызывать этот маршрут с помощью метода DELETE с использованием ajax.у вас есть ajax-вызов с post method.it также выдаст ошибку метода не допускается.

Так что измените ваш веб-маршрут,

С

 Route::delete('tweets/{tweet}/unlike', 'TweetController@unlike');

На

 Route::post('tweets/{tweet}/unlike', 'TweetController@unlike');

И измените ответный ответ в ваших методах контроллера, он будет выглядеть следующим образом

Tweet Controller

public function like($id){


     $like = Like::create([
         'user_id'=>auth()->id(),
         'tweet_id'=> $id

     ]);
     if($like){
         return response()->json(['status' => 'success']);

     }
     return response()->json(['status' => 'failed']);

 }

 public function unlike($id){
     $like = Like::delete([
         'user_id'=>auth()->id(),
         'tweet_id'=> $id

     ]);

    if($like){
        return response()->json(['status' => 'success']);
    }
}

Надеюсь, это поможет сейчас !!

Answer 2

Используйте это

Route::delete('tweets/{tweet}/unlike', 'TweetController@unlike');

Answer 3

У вас нет подходящего маршрута для unlike.

Изменить

Route::delete('tweets/{tweet}/like', 'TweetController@unlike');

На

Route::delete('tweets/{tweet}/unlike', 'TweetController@unlike');