Spring boot +Thymeleaf 实现 文章浏览量和点赞量功能

版本以及所需第三方库

Spring boot == 2.2.4
Mybatis Plus == 3.0.5
jquery.min.js
jquery.cookie.js

前端代码

1、点赞

                <div class="praise">
                    <span id="am_praise" class="target-fix">暗锚,解决锚点偏移</span>
                    <p>如喜欢，就留下一颗心吧❤️🌹🌹🌹</p>
                    <button id="btnLike" type="button" class="layui-btn">LIKE&nbsp;|&nbsp;
                        <span  class="like_count_text" th:text="${sysNews.likeCount}">  </span>
                    </button>
                </div>

2、浏览量

<span id="click_count_text" class="viewCount"> [[${sysNews.viewCount}]] </span>

3、JS代码

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jquery.cookie.js}"></script>
<script type="text/javascript">
    console.log("123");
    function increaseViewCount() {
        // 访问量
        console.log([[${sysNews.viewCount}]]);
        if ($.cookie("viewId") != [[${sysNews.viewCount}]]) {
            $.ajax({
                async: false,
                type: "POST",
                url: "/Sysnewsview",
                data: {articleId: [[${sysNews.newsId}]]},
                // dataType: "text",
                success: function (data) {
                    $(".viewCount").html(data);
                    $.cookie(
                        "viewId",
                        [[${sysNews.newsId}]],//需要cookie写入的业务
                        {
                            "path": "/", //cookie的默认属性
                        }
                    );
                },
                error: function () {
                    alert("获取数据出错!");
                },
            });
        }
    }

   increaseViewCount();

    $("#btnLike").click(function () {

        console.log("btnLike");

        if ($.cookie("likeId") != [[${sysNews.newsId}]]) {
            $.ajax({
                async: false,
                type: "POST",
                url: "/Sysnewslike",
                data: {articleId: [[${sysNews.newsId}]]},
                // dataType: "text",
                success: function (data) {
                    $(".like_count_text").html(data);
                    $.cookie(
                        "likeId",
                        [[${sysNews.newsId}]],//需要cookie写入的业务
                        {
                            "path": "/", //cookie的默认属性
                        }
                    );
                },
                error: function () {
                    alert("获取数据出错!");
                },
            });
        }
    });
</script>

后端控制器代码

1、点赞

    @ResponseBody
    @RequestMapping("/Sysnewslike")
    public String setLikeCount(String articleId) {
        int id = Integer.parseInt(articleId);
        System.out.println(id);
        // 得到这一篇文章
        Sysnews sysnewsById = sysnewsimpl.getSysnewsById(id);
        Integer likeCount = sysnewsById.getLikeCount();
        sysnewsById.setNewsId(id);
        sysnewsById.setLikeCount(likeCount + 1);
        sysnewsimpl.updateSysnews(sysnewsById, id);
        return "ok";
    }

2、浏览量

    @ResponseBody
    @RequestMapping("/Sysnewsview")
    public String setViewCount(String articleId) {
        int id = Integer.parseInt(articleId);
        System.out.println(id);
        // 得到这一篇文章
        Sysnews sysnewsById = sysnewsimpl.getSysnewsById(id);
        Integer viewCount = sysnewsById.getViewCount();
        sysnewsById.setViewCount(viewCount + 1);
        sysnewsimpl.updateSysnews(sysnewsById, id);
        return "ok";
    }

3、服务层代码

    @Autowired
    private SysnewsMapper sysnewsMapper;

    @Override
    public void updateSysnews(Sysnews sysnews, Integer id) {
        QueryWrapper<Sysnews> wrapper = new QueryWrapper<>();
        wrapper.eq("news_id", id);
        sysnewsMapper.update(sysnews, wrapper);
        Sysnews one = sysnewsMapper.selectOne(wrapper);
        System.out.println(one);
    }

4、数据库