springboot+thymeleaf实现记录文章上次读的位置

最新推荐文章于 2024-11-02 20:35:51 发布

坟场唱情歌

最新推荐文章于 2024-11-02 20:35:51 发布

阅读量418

点赞数 10

本文链接：https://blog.csdn.net/Qq949426/article/details/136327885

版权

本文介绍了如何在前端开发中实现一个面试题库项目的阅读位置记录功能，包括使用JavaScript处理滚动事件，以及后端通过接口与Redis管理用户阅读位置信息，确保在短暂浏览或页面刷新时能保持上次阅读位置。

摘要由CSDN通过智能技术生成

背景：开发了一个面试题库的项目，在阅读文章的时候，每次都需要想想上次阅读到什么位置，在这个需求下，实现了一个文章上次阅读的位置记录。

1、前端代码如下，当文章太短，或者浏览时间太短，则不用记录

 <script>
        /**
         * 初始加载的时候，保存上次阅读的位置信息
         * 点击阅读的时候，将位置信息记录在内存中
         */
        var start = new Date();
        //onload时，取出并滚动到上次保存位置
        window.onload = function () {
            $(document).scrollTop([[${offsetTop}]]);
        };

        //监听滚动条事件并记录阅读位置
        $(document).on("mousewheel DOMMouseScroll", function (event) {
            var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1));
            //这部分是实现鼠标下滑，隐藏标题的实现，记录位置的逻辑可忽略
            if (delta > 0) { // 向上滚
                $(".site-header").show(1);//显示div
            } else {
                $(".site-header").hide(1);//隐藏div
            }

            end = new Date()
            var costTime = Math.round((end.getTime() - start.getTime()) / 1000); //秒
            var position = $(window).scrollTop();
            var distance = "[[${article.id}]]" + "#" + position;
            if (position > 1000 && costTime > 8) { //每8秒更新一次
                saveReadPosition(distance);
                start = new Date();
            }
        })

        function saveReadPosition(scrollTop) {
            $.ajax({
                url: "/article/offset/save",
                data: {scrollTop: scrollTop},
                type: "GET",
                success: function (data) {}
            });
        }

    </script>

2、后端代码接口/article/offset/save部分

看个人需求：当鼠标回滚的时候，不变更位置信息，静态缓存isUpdateKeyCache对象存储key，只要存在，都是最新文章的位置，否则从redis获取位置，增加定时任务存储到redis中。

public static final Set<String> isUpdateKeyCache = new HashSet<>();

    @Resource
    private RedisUtil redis;

@RequestMapping("/offset/save")
    @MethodDesc(value = "保存文章读取的位置,一往无前")
    public void saveReadArticlePosition(String scrollTop) {
        if (StringUtils.hasText(scrollTop)) {
            Map<String, Object> cacheMap = ArticleController.cacheMap;
            String[] scroll = scrollTop.split("#");
            String key = getKey("article:offsetTop", scroll[0]);
            double readIndex = Double.valueOf(scroll[1]);
            if (cacheMap.containsKey(key)) {
                Double aDouble = (Double) cacheMap.get(key);
                if (aDouble < readIndex) setCache(scroll[0], key, readIndex);
            } else if (redis.hasKey(key)) {
                Double aDouble = (Double) redis.get(key);
                if (aDouble < readIndex) setCache(scroll[0], key, readIndex);
            } else {
                setCache(scroll[0], key, readIndex);
            }
        }
    }

    private void setCache(String id, String key, Object value) {
        ArticleController.cacheMap.put(key, value);
        isUpdateKeyCache.add(id);
    }

    private String getKey(String... k) {
        StringBuilder sb = new StringBuilder();
        for (String key : k) sb.append(key).append(":");
        sb.deleteCharAt(sb.length() - 1);
        return sb.toString();
    }

其他的微小逻辑，根据自己来变更