个人中心项目--朋友圈模块(四)

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:

不积跬步无以至千里…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值