个人博客开发日记06
2020-04-27 07:25
441 查看
前台首页展示
访问首页时,前端需展示:博客列表、博客较多分类、博客较多标签、最近推荐、最新博客等信息。
分页查询中每页数据数量可以放在配置文件中,或者后续添加配置功能,放在数据库中。
@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}]] }); }
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 个人博客开发日记07
- 个人博客开发日记08
- 用flask开发个人博客(22)—— 使用Flask-Migrate实现数据库的更新
- 用flask开发个人博客(6)—— 为flask程序添加命令行解释器
- 基于AspNet Core2.0(测试版) 开发框架,包含简单的个人博客Demo
- 用flask开发个人博客(39)—— 在flask中定义Rest API
- PHP个人博客系统开发历程
- Django开发个人博客网站——13、实现标签下所有博客的展示
- iOS/mac开发的一些知名个人博客
- 个人博客开发手记(一)——初步设想
- ThinkPHP5.0第一季:开发个人博客
- 1/11学习总结(个人简易博客开发)
- 个人博客作业week5:敏捷开发方法文章读后感
- 用flask开发个人博客(25)—— 博客程序结构介绍
- Django开发个人博客项目-(11)博客分类与最后功能完善
- 第一阶段冲刺个人博客06
- 团队开发之个人博客六
- 个人博客系统开发总结之 lucene全文检索
- iOS/mac开发的一些知名个人博客
- Django开发个人博客网站——5、创建第一个app