Question

我正在创建评论系统。现在，我想发布一个新评论，但是当我发送评论时，我在http://127.0.0.1:8000/comments/51中遇到了一个错误。

此路由不支持GET方法。支持的方法： POST。

我想在此URL http://127.0.0.1:8000/results/51中发表评论。

在我的chrome开发工具控制台中，出现此错误

无法加载资源：服务器响应状态为500 （内部服务器错误）

web.php

Route::middleware(['auth'])->group(function(){
    //post a comment
    Route::POST('comments/{post}', 'CommentController@store')->name('comment.store');
});


//comment area
Route::get('results/{post}/comments', 'CommentController@index');
Route::get('comments/{comment}/replies', 'CommentController@show');

comments.vue

<template>
<div class="commentarea" > 
    <div class="comment-posts" >
        <div v-if="!auth" class="user-comment-area" >
            <div  class="user-post">
                <!---<img src="{{asset('people/person7.jpg')}}" class="image-preview__image">--->
                <input v-model="newComment" type="text" name="comment">
            </div>
            <div class="comments-buttons">
                <button class="cancel-button">Cancel</button>
                <button @click="addComment" class="comment-button" type="submit">Comment</button>
            </div>
        </div>
        <h4>Comments ()</h4>

        <div class="reply-comment"  v-for="comment in comments.data" :key="comment.id">
                <div class="user-comment">
                <div class="user">
                    <!---<img src="{{ $comment->user->img }}" class="image-preview__image">--->
                    <avatar :username="comment.user.name"></avatar>
                </div>
                <div class="user-name">
                    <span class="comment-name"><a href="">{{ comment.user.name }}</a></span>
                    <p>{{ comment.body }}</p>
                </div>
            </div>
            <div class="reply">
                <button class="reply-button">
                    <i class="fas fa-reply"></i>
                </button>
            </div>
                <replies :comment="comment"></replies>
        </div>
    </div>
    <div>
        <button v-if="comments.next_page_url" @click="fetchComments" class="load">Load More</button>
    </div>
</div>
</template>

<script>
import Avatar from 'vue-avatar'
import Replies from './replies.vue'
export default {
    props: ['post'],
    components: {
        Avatar,
        Replies
    },
    mounted() {
        this.fetchComments()
    },
    data: () => ({
        comments: {
            data: []
        },
        newComment: '',
        auth: ''
    }),
    methods: {
        fetchComments() {
            const url = this.comments.next_page_url ? this.comments.next_page_url : `/results/${this.post.id}/comments`

            axios.get(url).then(({ data }) => {
                this.comments = {
                    ...data,
                    data: [
                        ...this.comments.data,
                        ...data.data
                    ]
                }
            })
            .catch(function (error) {
                console.log(error.response);
            })
        },
        addComment() {
            if(! this.newComment) return
            axios.post(`/comments/${this.post.id}`, {
                body: this.newComment
            }).then(( {data} ) => {
                this.comments = {
                    ...this.comments,
                    data: [
                        data,
                        ...this.comments.data
                    ]
                }
            })
        }
    }
}
</script>

commentsController.php

public function store(Request $request, Post $post)
{
    return auth()->user()->comments()->create([
        'body' => $request->body,
        'post_id' => $post->id,
        'comment_id' => $request->comment_id
    ])->fresh();
}

comment.php

protected $appends = ['repliesCount'];

public function post()
{
    return $this->belongsTo(Post::class);
}

public function getRepliesCountAttribute()
{
    return $this->replies->count();
}

很高兴有人帮我。

Answer 1

您的URL是：http://127.0.0.1:8000/results/51。

您的路线应为：

Route::group(['middleware' => 'auth'],function () {
    Route::post('comments/{post_id}', 'CommentController@store')->name('comment.store');
});

您的控制者将是：

public function store(Request $request,$post_id)
{
    return auth()->user()->comments()->create([
        'body' => $request->body,
        'post_id' => $post_id,
        'comment_id' => $request->comment_id
    ])->fresh();
}

Answer 2

谢谢，我放置了catch方法，问题是我没有在注释模型中包含受保护的$ fillable ['body'，'post_id'，'comment_id']。

laravel vue.js此路由不支持GET方法。支持的方法：POST

2 个答案: