个人中心项目--朋友圈模块（四）

1.描述：

这部分主要是实现评论的功能，代码量很少，而且简单，主要是前端页面的一些布局优化等。

2.效果展示：

点击comment按钮，显示评论框：

点击发表评论，提交后台并刷当前页面，这里优化了一下，刷新网页后先前浏览位置不变，点击comment按钮旁边的小按钮，显示评论信息框：

3.代码：

3.1Mapper和Service：

只是一个comment表插入操作，就不截图了。

3.2 Controller：

id为登录用户的id标识，即我的id字段；toId是动态对应的id；mycomment即评论的内容：

    @PostMapping("/comment")
    @ResponseBody
    public String comment(String id,String toId,String mycomment){
        Comment comment = new Comment();
        comment.setFromId(Integer.parseInt(id));
        comment.setContent(mycomment);
        comment.setToId(Integer.parseInt(toId));
        dynamicService.commentInsert(comment);
        return "success";
    }

3.3 html：

<!--comment按钮-->

<button type="button" class="btn btn-outline-danger btn-sm ml-1 btn-rounded"
        th:text="${dynamics.comments.size()}+' comment'"
        data-toggle="collapse"  th:data-target="'#writeComment'+${dynamics.dynamic.id}" aria-expanded="false"
        th:aria-controls="writeComment+${dynamics.dynamic.id}">Action
</button>


<!--评论框即表单-->
<div class="collapse" th:id="writeComment+${dynamics.dynamic.id}">
    <div class="card card-body">
        <form id="discrubcomment">
            <textarea th:id="${session.user.id}+comment+${dynamics.dynamic.id}" style="word-wrap: break-word;font-family: 华文行楷;font-size: medium ;width: 95%" placeholder="请输入评论..."></textarea>
            <div align="center">
                <button  th:onclick="|comment(${session.user.id},${dynamics.dynamic.id},${dynamics.comments.size()})|" class="mt-3 btn waves-effect waves-light btn-success">发表评论</button>
            </div>
        </form>
    </div>
</div>

下面是刷新网页后先前浏览位置不变的代码以及异步提交表单函数：

 $(window).onbeforeunload()
    {
        var scrollPos;
        if (typeof window.pageYOffset != 'undefined') {
            scrollPos = window.pageYOffset;
        }
        else if (typeof document.compatMode != 'undefined' &&
            document.compatMode != 'BackCompat') {
            scrollPos = document.documentElement.scrollTop;
        }
        else if (typeof document.body != 'undefined') {
            scrollPos = document.body.scrollTop;
        }
        document.cookie="scrollTop="+scrollPos; //存储滚动条位置到cookies中
    }
    $(window).onload()
    {
        if(document.cookie.match(/scrollTop=([^;]+)(;|$)/)!=null){
            var arr=document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
            document.documentElement.scrollTop=parseInt(arr[1]);
            document.body.scrollTop=parseInt(arr[1]);
        }
    }


    function comment(fromId,toId) {
        var text = $("#"+fromId+'comment'+toId).val();
        alert(text);
        $.ajax({
            type:"POST",
            url: '/dynamic/comment?id=' + fromId + '&toId=' + toId,//url
            data: {
                mycomment:text
            },
            success: function (data) {
                location.reload();
            },
            error: function () {
                alert("异常！");
            }
        });
        return false;
    }

参见：
【前端/JS】刷新网页后先前浏览位置不变的处理方法.

4.PS：

不积跬步无以至千里…