thymeleaf 异步刷新局部块_使用thymeleaf模板实现博客评论的异步刷新

使用thymeleaf模板实现博客评论的异步刷新

最简单的一个要求：用户可以在博客下面进行评论，然后评论后点击提交后直接上传到数据库，并且局部刷新

这是前端页面的展示，使用的semanticUI进行构造出来的模型，另外semanticUi已经不再更新了。

进入重点：如果想要进行局部刷新，使用fragment标签进行更新，如下第二行可以看到将这一块的所有信息都给包裹起来。

评论

Matt

博主

Today at 5:42PM

How artistic!

回复

小红 

博主

@ 小白

Today at 5:42PM

How artistic!

回复

这里是提交表单的所有内容，由于评论是一个嵌套的类，即一个评论可以有多个评论，一层层的嵌套下来，在这里需要注意的是，使用springdatajpa的过程中，尽量避免使用Lombok插件中的@Data进行注解类，它会直接产生所有属性的toString，如果使用了，会报出stackoverflow异常，原因是你一直调用的toString方法，一直递归下去，导致栈溢出。最简便的方法就是破坏toString方法中的输出该类的信息，在这里就是不要输出Comment的信息。

提交评论信息的同时，需要设置一个字段证明是新提交的信息而不是回复别人的信息。这段代码就是实现这个功能，如果是评论博客而不是回复别人的信息，则直接将parentComent.id设置成-1，然后在后端进行判断如果是-1则是新评论。

发布

js部分：

$(function () {

//当页面加载完成之后，需要把评论都给加载出来

$("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comments/6");

});

$("#commentpost-btn").click(function () {

let boo=$('.ui.form').form('validate form');

if (boo){

postData();

console.log('校验成功');

}else{

console.log('校验失败');

}

});

function postData(){

$("#comment-container").load(/*[[@{/comments}]]*/"",{

"parentComment.id":$("[name='parentComent.id']").val(),

"blog.id":$("[name='blog.id']").val(),

"nickname":$("[name='nickname']").val(),

"email":$("[name='email']").val(),

"content":$("[name='content']").val()

},function (responseTxt,statusTxt,xhr) {

clearContent();

//滚动到最上面的评论

})

}

function clearContent(){

$("[name='content']").val('');

$("[name='parentComent.id']").val(-1);

$("[name='content']").attr("placeholder","请输入评论信息...");

}

function reply(obj) {

let commentId=$(obj).data('commentid');

let nickNickname=$(obj).data('commentnickname');

$("[name='content']").attr("placeholder","@"+nickNickname).focus();

$("[name='parentComent.id']").val(commentId);

$(window).scrollTo($("#comment-form"),500);

}

以上着重讲下异步的过程：

commentpost-btn是提交按钮的id，有一个点击事件，点击后进行提交 postData()方法，然后找到div的id为comment-container的标签进行重新加载，加载的数据源为

/*[[@{/comments}]]*/

也就是找到controller层的url进行提交数据，然后将表单中的数据进行传递给后台，后台进行处理：

@PostMapping("/comments")

public String post(Comment comment, HttpSession session){

Long blogId = comment.getBlog().getId();

comment.setBlog(blogService.getBlog(blogId));

User user=(User)session.getAttribute("user");

if (user!=null){

comment.setAvatar(user.getAvatar());

comment.setAdminComment(true);

/* comment.setNickname(user.getNickName());*/

}else{

comment.setAvatar(avatar);

}

commentService.saveComment(comment);

return "redirect:/comments/" + blogId;

}

提交后在重定向给获取所有评论的controller的url：

@GetMapping("/comments/{blogId}")

public String comments(@PathVariable Long blogId, @NotNull Model model){

model.addAttribute("comments",commentService.listCommentByBlogId(blogId));

return "blog :: commentList";

}

这里将所有的数据全部返回给blog页面的commentList的fragment。

到此，异步刷新结束。

$(function () {

//当页面加载完成之后，需要把评论都给加载出来

$("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comments/6");

});

这段代码的意思是党页面加载完成之后，将所有的评论都加载出来。