FosJsRoutingBundle的使用-Symfony5全面开发

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

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

立即登录

点击Bundle名称,回到Bundle文档的首页,这里有个安装文档,我们点击进去,通过composer命令行来安装这个Bundle。

#安装FosJsRoutingBundle 
composer require friendsofsymfony/jsrouting-bundle

回到项目,打开控制台粘贴命令行回车,FOSJsRoutingBundle是第三方的包,第三方的包如果提供了recipe配置,那么命令行就会提示我们是否执行这个recipe配置。我们选择yes,现在安装就完成了。

回到文档,我们后退一步回到文档首页,我们打开使用方法的文档,在使用方法这里。如果我们应用程序没有使用webpack,直接复制这两行代码就可以了。但是我们使用了webpack,使用了webpack,首先我们要复制命令行,将路由的信息导出到json文件中。

复制命令行,打开控制台。执行命令行,现在路由信息就生成到了public目录中。再次查看文档,复制下面的JS代码,到我们的app.js文件中,最后使用Routinggenerate()方法来生成路由的链接地址。

我们复制前三行,回到app.js文件,在ready()方法上面一行,现在文件的路径出错了,我们调整一下,上级目录,然后同样的也是上级目录的vendor。

再看文档,在controller方法中设置expose将路由的配置暴露出来。回到CommentController,在Route注解中,我们添加options配置 expose我们设置为true。然后路由的名称我们修改一下,修改为reply_comment

再次查看文档,最后在JS代码中使用Routing.generate()方法生成路由的链接,使用大括号的方式来传递路由的参数。

回到app.js文件,现在我们就可以直接在URL这里,设置使用Routing.generate()方法来生成路由的链接了。第一个参数是路由的名称 我们复制reply_comment,粘贴,然后为路由的名称传递参数,使用大括号的方式设置post_id和parent_id,回到浏览器刷新文章详情页。点击右键检查,打开network选项,我们点击回复按钮,它提示我们reply_comment路由没有找到。

我们回到项目,打开控制台,重新生成一下路由信息。再次刷新页面,点击右键检查,打开network选项卡我们再次点击回复按钮。我们参数的名称输错了,这里应该是comment_id。修改一下,等刷新后点击回复按钮,浏览器发送了一个Ajax请求。点击请求,它的响应结果是个form标签。

我们直接在ajax()的done()方法中将响应的代码追加到回复按钮的后方。回到代码,这里我们为按钮的点击事件方法添加一个参数,我们将表单代码添加到按钮后面$(element.target).after(response);

#assets/app.js

import './bootstrap';
import $ from 'jquery';

import 'bootstrap';

const routes = require('../public/js/fos_js_routes.json');
import Routing from '../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';

Routing.setRoutingData(routes);

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

        $.ajax({
            url: Routing.generate('reply_comment', {post_id: postId, comment_id: parentId}),
            type: 'POST'
        }).done(function (response){

            $(element.target).after(response)
        }).fail(function (jqXHR){

        })
    })
})

回到浏览器刷新,点击按钮,现在表单就动态的添加到按钮后面,我们还需要调整一下样式。回到项目,我们打开回复表单的模板代码,表单前后添加一些div标签,我这边就直接复制。已经写好的代码了,再次回到浏览器,刷新,点击回复按钮。现在在回复按钮后面就添加了一个回复评论的表单。

在下节课,我们来处理回复评论表单的提交以及评论列表的嵌套显示。

课程讨论

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