1.编辑archives.html
<! DOCTYPE html >
< html lang = " en" xmlns: th= " http://www.w3.org/1999/xhtml" >
< head th: replace= " _fragments :: head(~{::title})" >
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 归档</ title>
< link rel = " stylesheet" href = " https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
< link rel = " stylesheet" href = " ../static/css/me.css" >
</ head>
< body>
< nav th: replace= " _fragments :: menu(4)" class = " ui inverted attached segment m-padded-tb-mini m-shadow-small" >
< div class = " ui container" >
< div class = " ui inverted secondary stackable menu" >
< h2 class = " ui teal header item" > Blog</ h2>
< a href = " #" class = " m-item item m-mobile-hide" > < i class = " home icon" > </ i> 首页</ a>
< a href = " #" class = " m-item item m-mobile-hide" > < i class = " idea icon" > </ i> 分类</ a>
< a href = " #" class = " m-item item m-mobile-hide" > < i class = " tags icon" > </ i> 标签</ a>
< a href = " #" class = " active m-item item m-mobile-hide" > < i class = " clone icon" > </ i> 归档</ a>
< a href = " #" class = " m-item item m-mobile-hide" > < i class = " info icon" > </ i> 关于我</ a>
< div class = " right m-item item m-mobile-hide" >
< div class = " ui icon inverted transparent input m-margin-tb-tiny" >
< input type = " text" placeholder = " Search...." >
< i class = " search link icon" > </ i>
</ div>
</ div>
</ div>
</ div>
< a href = " #" class = " ui menu toggle black icon button m-right-top m-mobile-show" >
< i class = " sidebar icon" > </ i>
</ a>
</ nav>
< div class = " m-container-small m-padded-tb-big" >
< div class = " ui container" >
< div class = " ui top attached padded segment" >
< div class = " ui middle aligned two column grid" >
< div class = " column" >
< h3 class = " ui teal header" > 归档</ h3>
</ div>
< div class = " right aligned column" >
共 < h2 class = " ui orange header m-inline-block m-text-thin" th: text= " ${blogCount}" > 114 </ h2> 篇博客
</ div>
</ div>
</ div>
< th: block th: each= " item : ${archiveMap}" >
< h3 class = " ui center aligned header" th: text= " ${item.key}" > 2017</ h3>
< div class = " ui fluid vertical menu" >
< a href = " #" th: href= " @{/blog/{id}(id=${blog.id})}" target = " _blank" class = " item" th: each= " blog : ${item.value}" >
< span>
< i class = " mini teal circle icon" > </ i> < span th: text= " ${blog.title}" > 关于刻意练习的清单</ span>
< div class = " ui teal basic left pointing label m-padded-mini " th: text= " ${#dates.format(blog.updateTime,' MMMdd' )}" > 9月03</ div>
</ span>
< div class = " ui orange basic left pointing label m-padded-mini " th: text= " ${blog.flag}" > 原创</ div>
</ a>
< a href = " #" target = " _blank" class = " item" >
< span>
< i class = " mini teal circle icon" > </ i> 关于刻意练习的清单
< div class = " ui teal basic left pointing label m-padded-mini " > 9月03</ div>
</ span>
< div class = " ui orange basic left pointing label m-padded-mini " > 原创</ div>
</ a>
< a href = " #" target = " _blank" class = " item" >
< span>
< i class = " mini teal circle icon" > </ i> 关于刻意练习的清单
< div class = " ui teal basic left pointing label m-padded-mini " > 9月03</ div>
</ span>
< div class = " ui orange basic left pointing label m-padded-mini " > 原创</ div>
</ a>
< a href = " #" target = " _blank" class = " item" >
< span>
< i class = " mini teal circle icon" > </ i> 关于刻意练习的清单
< div class = " ui teal basic left pointing label m-padded-mini " > 9月03</ div>
</ span>
< div class = " ui orange basic left pointing label m-padded-mini " > 原创</ div>
</ a>
</ div>
</ th: block>
</ div>
</ div>
< br>
< br>
< footer th: replace= " _fragments :: footer" class = " ui inverted vertical segment m-padded-tb-massive" >
< div class = " ui center aligned container" >
< div class = " ui inverted divided stackable grid" >
< div class = " three wide column" >
< div class = " ui inverted link list" >
< div class = " item" >
< img src = " ../static/images/wechat.jpg" class = " ui rounded image" alt = " " style = " width : 110px" >
</ div>
</ div>
</ div>
< div class = " three wide column" >
< h4 class = " ui inverted header m-text-thin m-text-spaced " > 最新博客</ h4>
< div class = " ui inverted link list" >
< a href = " #" class = " item m-text-thin" > 用户故事1(User Story)</ a>
< a href = " #" class = " item m-text-thin" > 用户故事2(User Story)</ a>
< a href = " #" class = " item m-text-thin" > 用户故事3(User Story)</ a>
</ div>
</ div>
< div class = " three wide column" >
< h4 class = " ui inverted header m-text-thin m-text-spaced " > 联系我</ h4>
< div class = " ui inverted link list" >
< a href = " #" class = " item m-text-thin" > Email:hst1406959716@163.com</ a>
< a href = " #" class = " item m-text-thin" > QQ:383568194</ a>
</ div>
</ div>
< div class = " seven wide column" >
< h4 class = " ui inverted header m-text-thin m-text-spaced " > Blog</ h4>
< p class = " m-text-thin m-text-spaced m-opacity-mini" > 这是我的个人博客、会分享关于编程、写作、思考相关的任何内容,希望可以给来到这儿的人有所帮助...</ p>
</ div>
</ div>
< div class = " ui inverted section divider" > </ div>
< p class = " m-text-thin m-text-spaced m-opacity-tiny" > Copyright © 2016 - 2017 java小生不才 Designed by java小生不才</ p>
</ div>
</ footer>
< script src = " https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js" > </ script>
< script src = " https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js" > </ script>
< script>
$ ( '.menu.toggle' ) . click ( function ( ) {
$ ( '.m-item' ) . toggleClass ( 'm-mobile-hide' ) ;
} ) ;
</ script>
</ body>
</ html>
2.BlogRepository中添加findGroupYear和findByYear
@Query ( "select function('date_format',b.updateTime,'%Y') as year from Blog b group by function('date_format',b.updateTime,'%Y') order by year desc " )
List < String > findGroupYear ( ) ;
@Query ( "select b from Blog b where function('date_format',b.updateTime,'%Y') = ?1" )
List < Blog > findByYear ( String year) ;
3.BlogService中添加archiveBlog和countBlog
Map < String , List < Blog > > archiveBlog ( ) ;
Long countBlog ( ) ;
4.BlogServiceImpl添加方法实现
@Override
public Map < String , List < Blog > > archiveBlog ( ) {
List < String > years = blogRepository. findGroupYear ( ) ;
Map < String , List < Blog > > blogMap = new HashMap < > ( ) ;
for ( String year : years) {
blogMap. put ( year, blogRepository. findByYear ( year) ) ;
}
return blogMap;
}
@Override
public Long countBlog ( ) {
return blogRepository. count ( ) ;
}
5.编辑WebArchiveController
package com. tedu. blog. web ;
import com. tedu. blog. service. BlogService ;
import org. springframework. beans. factory. annotation. Autowired ;
import org. springframework. stereotype. Controller ;
import org. springframework. ui. Model ;
import org. springframework. web. bind. annotation. GetMapping ;
@Controller
public class WebArchiveController {
@Autowired
private BlogService blogService;
@GetMapping ( "/archives" )
public String archives ( Model model) {
model. addAttribute ( "archiveMap" , blogService. archiveBlog ( ) ) ;
model. addAttribute ( "blogCount" , blogService. countBlog ( ) ) ;
return "archives" ;
}
}
6.页面访问