添加回复评论controller方法-Symfony5全面开发

您需要登录后才可观看此视频

为了更好的为您提供服务,请您登录后再查看本课程。

立即登录 注册账号

在文章详情页,当我们点击回复按钮时,会发送一个Ajax请求。将父评论的id和文章的id当做参数传递到一个controller方法中,然后在controller方法中动态的生成一个评论表单,然后再使用jquery方法将表单动态的添加到评论消息的下方。

我们先来完成这个controller方法。回到项目,打开控制台,我们输入symfony console make:controller,来创建一个Controller,Controller的类名,我们叫做CommentController

打开CommentController类,修改一下路由的路径,我们要生成一个回复评论表单,传递的参数是文章的id和父评论的id,我们可以把这两个id添加到路由的参数中,路由路径我们修改为/post/{post_id}/comment/{comment_id}/reply,修改方法名称为replyComment()

通过传入的参数,我们可以直接获取到文章对象和父评论对象,通过依赖注入的方式直接使用,引用一下Post类和Comment类。占位符的名称和对象id并不相同,我们需要使用ParamConverter注解来设置一下,第一个参数我们先设置post,参数名就是$post,然后是options。

我们让id属性指向post_id,再来设置父评论对象,按着command键+d复制一行,属性名就是parentComment,然后同样的id我们指向comment_id 这样就设置好了。

在controller方法中,我们可以使用Controller提供的createForm()方法来创建表单,表单的类型就是我们之前创建的CommentType类型,这里直接使用CommentType全类名。

它的返回值我们设置一个变量,createForm()有三个参数,第一个参数就是表单的类型。第二个参数是表单的数据,是在数据回显时可以传入第二个参数,通常在编辑表单中需要传入第二个参数。第三个参数就是对表单的一些设置。

我们需要修改回复表单的提交地址,提交地址就设置为我们当前的路由地址,第二个参数我们传入null,第三个参数我们设置一个数组,设置action就是我们当前的路由路径。

我们需要注入Request对象,使用HttpFoundation下的Request对象,我们通过$request->getUri()来获取当前的路由地址,然后我们创建一个模板文件,将表单渲染到模板文件中。

在templates目录中我们打开comment文件夹,删除index.html.twig文件。我们创建一个Twig文件,名称叫做_reply_comment_form.html.twig文件。我们在render()方法中将表单的View对象传入模板文件,这里输入reply_comment_form,修改模板名称。

class CommentController extends AbstractController
{
    #[
        Route('/post/{post_id}/comment/{comment_id}/reply', name: 'comment'),
        ParamConverter('post', options: ['id' => 'post_id']),
        ParamConverter('parentComment', options: ['id' => 'comment_id']),
    ]
    public function replyComment(Request $request, Post $post, Comment $parentComment): Response
    {
        $replyComment = $this->createForm(CommentType::class, null, [
            'action' => $request->getUri()
        ]);
        return $this->render('comment/_reply_comment_form.html.twig', [
            'reply_comment_form' => $replyComment->createView(),
        ]);
    }
}

再回到模板文件使用form()方法来渲染表单,表单名称就是reply_comment_form。回到浏览器,我们手动的输入回复表单的路由地址,查看一下最新的评论id,id是4,它成功的返回了一个表单。我们可以在文章详情页使用jquery方法动态的访问这个路由,然后生成表单,再将表单渲染到评论的下方。

回到项目,我们打开assets目录下的app.js文件,这里我们调整一下jquery和bootstrap的顺序。当页面文档加载完成后,我们在jquery的ready()方法中处理回复按钮的事件,获取回复按钮的DOM元素。

回到show.html.twig文件复制按钮的样式类,监听click事件,在click事件中当按钮点击时,我们向路由的地址发送两个参数,一个是父评论的id还有一个是文章的id。这里我们添加一下data-post-id属性,属性的值就是post.id。在按钮事件中我们获取这两个id,首先是postId我们让他等于$(this).data('post-id')。然后是parentId,$(this).data('parent-id');

获取到这两个参数后,我们通过jquery的ajax()方法来发送一个请求,请求的地址我们这里先设置为空,然后是请求的类型type,我们使用POST类型。当请求完成后,我们使用done()方法来处理结果,如果请求发送失败,我们使用fail()方法来处理返回的结果。

#assets/app.js

import './bootstrap';
import $ from 'jquery';
import 'bootstrap';
$(document).ready(function(){
    $('button.js-reply-comment-btn').on('click', function () {
        let postId = $(this).data('post-id');
        let parentId = $(this).data('parent-id');

        $.ajax({
            url: '',
            type: 'POST'
        }).done(function (response){

        }).fail(function (jqXHR){

        })
    })
})

请求的地址我们可以使用硬编码的方式进行字符串的拼接,但是这样的话不够灵活。回到浏览器,我们搜索symfony FOSJsRoutingFOSJsRoutingBundle可以在JS代码中动态的生成路由的路径。

在下节课,我们将使用FOSJSRoutingBundle动态的生成路由的链接地址。

课程讨论

当前内容评论功能已关闭。