个人博客开发日记06

访问首页时，前端需展示：博客列表、博客较多分类、博客较多标签、最近推荐、最新博客等信息。
分页查询中每页数据数量可以放在配置文件中，或者后续添加配置功能，放在数据库中。

 @GetMapping("/")
 public String index(@PageableDefault(size = 8, sort = {"LastUpdateTime"}, direction = Sort.Direction.DESC) Pageable pageable, Model model) {
     model.addAttribute("page", blogService.listBlog(pageable));
     model.addAttribute("types", typeService.listTypeTop(6));
     model.addAttribute("tags", tagService.listTagTop(6));
     model.addAttribute("recommendBlogs", blogService.listRecommendBlogs(6));
     return "index";
 }

博客列表

简单的分页查询：

 @Override
 public Page<Blog> listBlog(Pageable pageable) {
     return blogRepository.findAll(pageable);
 }

前端展示时遇到问题：

  <div class="item">
      <i class="eye icon"></i>
      <!-- span标签方便替换资源，但是会影响布局，导致icon和文本在视觉上不处于同一水平线，使用th:remove="tag"移除标签，以下还有多种处理方式：-->
      <span th:text="${blog.views}" th:remove="tag">998</span>
      <!-- [(${blog.views})] 不转义-->
      <!-- [[${blog.views}]] 转义-->
      <!-- <th:block th:text="${blog.views}" /> -->
  </div>

分类列表

根据博客数量倒序分页，查询第一页的数据。

 @Override
 public List<Type> listTypeTop(Integer size) {
     Pageable pageable = PageRequest.of(0, size, Sort.by(Sort.Direction.DESC, "blogs.size"));
     return typeRepository.findTop(pageable);
 }

该查询没有对应的查询方法，手动添加。

 @Query("select t from Type t")
 List<Type> findTop(Pageable pageable);

标签列表

与分类列表类似。

推荐列表

需要添加条件，限定仅获取推荐的博客。

 @Query("select b from Blog b where b.recommend = true")
 List<Blog> findTop(Pageable pageable);

全局搜索

与博客列表基本一致，需要在查询条件中加上查询条件。
这里翻页想要使用ajax实现列表部分的刷新，以避免，修改了输入框但没有重新查询而是点击下一页后丢失修改后输入框中的内容.。

<!-- 这里的th:inline="javascript"很重要，不加后面会取不到model中的值 -->
<script th:inline="javascript">
    // 上一页
    $('#previous-btn').click(function(){
        loadData([[${page.number}]]-1);
    });
    // 下一页
    $('#next-btn').click(function(){
        loadData([[${page.number}]]+1);
    });
    // 发送查询请求
    function loadData(pageIndex) {
        $('#search-result').load("/search #search-result", {
            page: pageIndex,
            query: [[${query}]]
        });
    }
<script th:inline="javascript">

但是存在一个问题，局部刷新之后，页面js事件全部失效。
查询得知是因为ajax动态加载之前，js已完成家在，导致事件没有绑定到动态生成的dom元素上。
通过绑定事件可解决该问题。

$(document).on(e,selector,function(){
	// 事件代码
}) 

实际操作之后发现，[[${page.number}]]不会重新获取，前端获取的值一直是第一次页面加载给出的值，将js代码放入需要刷新的代码块中也没有效果。将需要的值放入要刷新的dom元素中，从dom元素属性中取值。

 // 上一页
 $(document).on('click','#previous-btn',function(){
     loadData(this.value);
 });
 // 下一页
 $(document).on('click','#next-btn',function(){
     loadData(this.value);
 });
 // 发送查询请求
 function loadData(pageNumber) {
     $('#search-result').load("/search #search-result", {
         page: pageNumber,
         query: [[${query}]]
     });
 }