Mr丶冷文

文章 分类 评论
115 10 5698

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

(十八)目录处理与文章浏览量的处理

MR丶冷文 2022-10-13 164 0条评论 个人博客项目视频教程 javaspringboot个人博客博客系统

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

(十八)目录处理与文章浏览量的处理

说明

上节课我们把文章的详情信息已经渲染出来了,而且还为文章生成了目录,这节课我们将这个目录浮动起来,然后为我们的站点加上返回顶部的按钮,再把文章浏览功能做一下

返回顶部

这里可以直接参考我之前写的文章:jQuery实现一个优雅的返回顶部

  • 用一个div做父容器并让其的positionfixed这样就可以固定位置了
  • 将返回顶部的按钮及QQ联系的按钮放入容器并将到顶部的按钮隐藏
  • 判断滚动条高度大于屏幕高度一半时展示到顶部的按钮
  • 给顶部按钮一个滚动到滚动条到顶部的功能
<!--common.html-->
<style>
  #lw-right-bottom-bar {
    position: fixed;
    bottom: 50px;
    font-size: 18px;
    right: 20px;
  }

  #lw-right-bottom-bar a {
    margin-top: 4px;
    display: block;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  #lw-right-bottom-bar #lw-to-top {
    opacity: 0;
  }
</style>
<div id="lw-right-bottom-bar">
  <a id="lw-to-top" href="javascript:void(0)"><i class="fa  fa-arrow-up"></i></a>
  <a target="_blank" th:href="${T(java.lang.String).format('tencent://message/?uin=%s&amp;Site=&amp;menu=yes',@webSite.qq)}"><i
                                                                                                                                class="fa  fa-qq"></i></a>
</div>
</div>
<script>
  $(function () {
    $(window).scroll(function () {
      let toTop = $(window).scrollTop()
      let height = $(window).height()
      if (toTop > height / 2) {
        $('#lw-to-top').stop().animate({
          opacity: 1
        },500)
      } else {
        $('#lw-to-top').stop().animate({
          opacity: 0
        },500)
      }
    })

    $('#lw-to-top').on('click',function () {
      $('body,html').stop().animate({
        scrollTop:0
      })
    })
  })
</script>

文章目录处理

目录浮动

和上面思路差不多,只不过这里就稍微有一点逻辑了,我们此时判断的条件是滚动条滚动的高度大于标签云的底部时进行浮动

  • 先定义一个浮动的样式确定样式
#lw-toc-parent.lw-toc-fixed {
  position: fixed;
  z-index: 999;
  top: 10px;
  width: 300px;
}
  • 判断滚动条高度是否满足条件,如果满足直接给容器加上我们定义的浮动的样式
$(window).scroll(function () {
  let toTop = $(window).scrollTop()
  let tagCloud = $('.lw-right-item.lw-tag-cloud');
  let tagBottom = tagCloud.offset().top + tagCloud.height()
  if (toTop > tagBottom - 10) {
    $('#lw-toc-parent').addClass('lw-toc-fixed')
  }else{
    $('#lw-toc-parent').removeClass('lw-toc-fixed')
  }
})

滚动优化

我们点一下目录直接跳到对应位置难免有些生硬,所以我们可以为其加上过渡动画

  • 取消目录a标签的href,将对应目录的id保存到data-id的属性中
$('#lw-article-toc').append(`<li><a style="padding-left: ${left}px;" href="javascript:void(0)" data-id="${$(element).attr('id')}">${$(element).text()}</a></li>`)
  • 注册a标签的点击事件,当点击时滚动到目录距顶部的高度
$('#lw-article-toc').on('click', 'li a', function () {
  let id = $(this).data('id')
  $('body,html').stop().animate({
    scrollTop:$(`#${id}`).offset().top
  })
})

基于Cookie的文章浏览量统计

文章的浏览量无非就是当用户查看文章详情时我们给浏览量加1,但此时我们需要处理一下,即一个用户在一段时间内浏览多次文章我们都应该认为是1次,我们确定一个用户的标准可以是一个浏览器这一个用户,借助浏览器的Cookie来保存浏览记录

  • 我们先写更新浏览量的Mapper层代码
@Transactional
@Modifying
@Query(value = "update blog_article set views=views+1 where  id=13",nativeQuery = true)
void viewsArticle();
  • Service调用Mapper层代码
public void viewArticle(Integer id) {
  mapper.viewsArticle(id);
}
  • 在文章详情页去调用一下更新浏览量
  • 我们先看看效果,发现会有我们上面说的问题,一个用户重复的去访问一篇文章,它会不停的刷新浏览量
  • 我们这个时候来将文章的浏览记录放到Cookie中,当Cookie中有这篇文章的浏览记录时我们就不更新
@GetMapping("/{id}.html")
public String detail(@PathVariable Integer id, Model model, HttpServletRequest request, HttpServletResponse response) {
  Article article = articleService.detail(id);
  if (Objects.isNull(CookieUtil.getCookie(request, Article.VIEW_PREFIX + id))) {
    articleService.viewArticle(id);
    CookieUtil.setCookie(response, Article.VIEW_PREFIX + id, "true");
  }
  //todo 当文章不存在时的处理
  model.addAttribute("article", article);
  return "detail";
}

Cookie工具类

package cn.kevinlu98.utils;

import lombok.SneakyThrows;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.concurrent.TimeUnit;

public class CookieUtil {
    public static String getCookie(HttpServletRequest request, String cookieName) {

        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if (cookie.getName().equals(cookieName)) {
                    return cookie.getValue();
                }
            }
        }

        return null;
    }

    public static void setCookie(HttpServletResponse response, String cookieName, String value, int cookieMaxAge) {
        Cookie cookie = new Cookie(cookieName, value);
        cookie.setPath("/");
        cookie.setMaxAge(cookieMaxAge);
        response.addCookie(cookie);
    }

    public static void setCookie(HttpServletResponse response, String cookieName, String value) {
        setCookie(response, cookieName, value, 7 * 24 * 60 * 60);
    }

    public static void deleteCookie(HttpServletResponse response, String cookieName) {
        setCookie(response, cookieName, null, 0);
    }
}

独立页面的处理

独立页面我们就不显示浏览量、分类、标签还有文章目录的信息了

th:if="${article.type eq T(cn.kevinlu98.pojo.Article).TYPE_ARTICLE}" 

评论(0)

最新评论

  •  hh

  •  hh

  • 蝌蚪

    支持大佬

  • SURELY

    下载支持一下大佬

  • SURELY

    大佬支持啊,下载了试一下

日历

2022年12月

    123
45678910
11121314151617
18192021222324
25262728293031

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭