FosJsRoutingBundle的使用-Symfony5全面开发
点击Bundle名称,回到Bundle文档的首页,这里有个安装文档,我们点击进去,通过composer命令行来安装这个Bundle。
#安装FosJsRoutingBundle
composer require friendsofsymfony/jsrouting-bundle
回到项目,打开控制台粘贴命令行回车,FOSJsRoutingBundle
是第三方的包,第三方的包如果提供了recipe配置,那么命令行就会提示我们是否执行这个recipe配置。我们选择yes,现在安装就完成了。
回到文档,我们后退一步回到文档首页,我们打开使用方法的文档,在使用方法这里。如果我们应用程序没有使用webpack,直接复制这两行代码就可以了。但是我们使用了webpack,使用了webpack,首先我们要复制命令行,将路由的信息导出到json文件中。
复制命令行,打开控制台。执行命令行,现在路由信息就生成到了public目录中。再次查看文档,复制下面的JS代码,到我们的app.js文件中,最后使用Routing
的generate()
方法来生成路由的链接地址。
我们复制前三行,回到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标签,我这边就直接复制。已经写好的代码了,再次回到浏览器,刷新,点击回复按钮。现在在回复按钮后面就添加了一个回复评论的表单。
在下节课,我们来处理回复评论表单的提交以及评论列表的嵌套显示。