SpringBoot开源项目个人博客——(9)博客首页显示
引用oneStar的博客内容：
根据前端页面功能来看，两个最基本的查询，一个是查询最新文章列表，一个是查询最新推荐文章；还有就是搜搜索功能，根据关键字搜索博客；另外，就是网页底部的统计博客信息，有博客总数、访问总数、评论总数、留言总数。
一、查询最新/推荐文章列表
最新文章列表
（根据前端需要的查询的内信息字段）定义一个VO，LatestBlog实体类，代码如下：（省去get、set、toString、构造）。
public class LatestBlog {
//博客信息
private Long id;
private String title;
private String description;
private Date updateTime;
private String firstPicture;
private Integer views; //浏览次数
private Integer commentCount; //评论次数
private String typeName; //分类名
//用户信息
private String nickname; //昵称
private String avatar; //头像
}
- 在BlogDao下添加接口
//获得所有最新(更新)列表文章
List<LatestBlog> getLatestBlog();
- mapper文件
在mapper文件夹下创建BlogDao.xml文件中添加如下SQL：
<!--查出所有最新博客列表, 已经配置驼峰转换-->
<select id="getLatestBlog" resultMap="LatestBlog">
select b.id,b.title,b.description,b.update_time,b.first_picture,b.views,b.comment_count,
t.name,
u.avatar,u.username
from t_blog b,t_type t,t_user u
where b.type_id=t.id and u.id=b.user_id;
</select>
<!--只需要配typeName和nickname的映射,它实体类 数据库中都不一样（不是驼峰）-->
<resultMap id="LatestBlog" type="LatestBlog">
<result column="name" property="typeName"/>
<result column="username" property="nickname"/>
</resultMap>
- 在BlogService接口下添加
//获得所有最新(更新)列表文章
List<LatestBlog> getLatestBlog();
- 在BlogServiceImpl接口实现类添加
@Override
public List<LatestBlog> getLatestBlog() {
return blogDao.getLatestBlog();
}
推荐文章列表
前端只需要4篇最新的推荐文章，只要显示博客标题、首图信息。(还需要判断是否为推荐文章)
（根据前端需要的查询的内信息字段）定义一个VO，RecommendBlog实体类，代码如下：（省去get、set、toString、构造）。
public class RecommendBlog {
//最新推荐只要显示博客标题、首图信息，但要注意这里要体现出是否推荐到推荐栏来，
// 所以还要有个boolean类型的变量recommend
private Long id;
private String firstPicture;
private String title;
private boolean recommend;
}
- 在BlogDao下添加接口
//获取所有推荐文章
List<RecommendBlog> getAllRecommendBlog();
- mapper文件
在mapper文件夹下的BlogDao.xml文件中添加如下SQL：
<!--只查出最新4篇放在 前端-->
<select id="getAllRecommendBlog" resultType="RecommendBlog">
select b.id,b.title,b.first_picture,b.recommend
from t_blog b where recommend = true
order by create_time desc
limit 4;
</select>
- 在BlogService接口下添加
//获取所有推荐文章
List<RecommendBlog> getAllRecommendBlog();
- 在BlogServiceImpl接口实现类添加
@Override
public List<RecommendBlog> getAllRecommendBlog() {
return blogDao.getAllRecommendBlog();
}
controller控制器编写
在controller包下的创建IndexController类，编写如下代码：
为实现分页的局部刷新，前端进行改动：
分页部分：
<div class="two wide column" align="center">
<a class="item" style="cursor: pointer" onclick="page(this)" th:attr="data-page=1"
th:unless="${pageInfo.isFirstPage}">首页</a>
</div>
<div class="two wide column" align="center">
<a class="item" style="cursor: pointer" onclick="page(this)"
th:attr="data-page=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1"
th:unless="${pageInfo.isFirstPage}">上一页</a>
</div>
<div class="eight wide column" align="center">
<p><span th:text="${pageInfo.pageNum}"></span> / <span
th:text="${pageInfo.pages}"></span></p>
</div>
<div class="two wide column " align="center">
<a class="item" style="cursor: pointer" onclick="page(this)"
th:attr="data-page=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages}"
th:unless="${pageInfo.isLastPage}">下一页</a>
</div>
<div class="two wide column " align="center">
<a class="item" style="cursor: pointer" onclick="page(this)"
th:attr="data-page=${pageInfo.pages}" th:unless="${pageInfo.isLastPage}">尾页</a>
</div>
JS部分：
function page(obj) {
$("[name='page']").val($(obj).data("page"));
console.log($("[name='page']").val());
$(window).scrollTo($('#blog-List'),500);
loaddata();
}
function loaddata() {
$("#blog-container").load(/*[[@{/indexRefresh}]]*/
"/indexRefresh", {
pageNum: $("[name='page']").val()
},function (responseTxt, statusTxt, xhr) {
$(window).scrollTo($('#blog-List'),500);
});
}
@Controller
public class IndexController {
@Autowired
private BlogService blogService;
//获取 推荐,最新(分页)
@GetMapping("/")
public String index(Model model,@RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum){
String orderBy= "b.create_time desc";
PageHelper.startPage(pageNum, 5,orderBy); //先短一点
List<LatestBlog> latestBlog = blogService.getLatestBlog();//最新博客列表
List<RecommendBlog> recommendBlog = blogService.getAllRecommendBlog();//推荐博客
PageInfo<LatestBlog> pageInfo = new PageInfo<>(latestBlog);
System.out.println(pageInfo);
model.addAttribute("pageInfo", pageInfo);
model.addAttribute("recommendedBlogs", recommendBlog);
System.out.println("-----------index--------");
return "index";
}
@PostMapping("/indexRefresh")
public String refreshIndex(Model model, @RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum){
//System.out.println(pageNum.toString());
String orderBy= "b.create_time desc";
PageHelper.startPage(pageNum, 5,orderBy); //先短一点
List<LatestBlog> latestBlog = blogService.getLatestBlog();//最新博客列表
PageInfo<LatestBlog> pageInfo = new PageInfo<>(latestBlog);
System.out.println(pageInfo);
model.addAttribute("pageInfo", pageInfo);
return "index :: blogList";
}
}
二、网页统计博客信息
统计网站信息：
定义了四个接口来关联SQL实现博客总数、访问总数、评论总数、留言总数的统计。
- 在BlogDao下添加接口
/*获得底部信息, 博客数,总访问数,总评论数, 留言数*/
//博客总数
Integer getBlogTotal();
//总访问数
Integer getBlogViewTotal();
//总评论数
Integer getBlogCommentTotal();
//留言数
Integer getBlogMessageTotal();
- mapper文件
在mapper文件夹下创建BlogDao.xml文件中添加如下SQL：
<!--获得底部信息, 博客数,总访问数,总评论数, 留言数-->
<select id="getBlogTotal" resultType="Integer">
select count(*)
from t_blog;
</select>
<select id="getBlogViewTotal" resultType="Integer">
select coalesce (sum(views),0)
from t_blog ;
</select>
<select id="getBlogCommentTotal" resultType="Integer">
select coalesce (sum(comment_count),0)
from t_blog ;
</select>
<select id="getBlogMessageTotal" resultType="Integer">
select count(*)
from t_message ;
</select>
用coalesce (sum(views),0)，打当sum求和为null时赋值为0（防止空指针异常）。
- 在BlogService接口下添加
/*获得底部信息, 博客数,总访问数,总评论数, 留言数*/
//博客总数
Integer getBlogTotal();
//总访问数
Integer getBlogViewTotal();
//总评论数
Integer getBlogCommentTotal();
//留言数
Integer getBlogMessageTotal();
- 在BlogServiceImpl接口实现类添加
/*获得底部信息, 博客数,总访问数,总评论数, 留言数*/
@Override
public Integer getBlogTotal() {
return blogDao.getBlogTotal();
}
@Override
public Integer getBlogViewTotal() {
return blogDao.getBlogViewTotal();
}
@Override
public Integer getBlogCommentTotal() {
return blogDao.getBlogCommentTotal();
}
@Override
public Integer getBlogMessageTotal() {
return blogDao.getBlogMessageTotal();
}
- 在IndexController类中添加接口
//网站底部信息
@GetMapping("/footer/blogmessage")
public String blogmessage(Model model){
Integer blogTotal = blogService.getBlogTotal();
Integer blogViewTotal = blogService.getBlogViewTotal();
Integer blogCommentTotal = blogService.getBlogCommentTotal();
Integer blogMessageTotal = blogService.getBlogMessageTotal();
model.addAttribute("blogTotal", blogTotal);
model.addAttribute("blogViewTotal", blogViewTotal);
model.addAttribute("blogCommentTotal", blogCommentTotal);
model.addAttribute("blogMessageTotal", blogMessageTotal);
return "index :: blogMessage"; //返回数据到片段
}
三、博客搜索
搜索博客显示的还是博客列表信息，所以还是通过
VO，LatestBlog实体类来显示查询后的博客列表信息。
- 在BlogDao下添加接口
/*搜索 文章*/
List<LatestBlog> getSearchBlog(String query);
- mapper文件
在mapper文件夹下创建BlogDao.xml文件中添加如下SQL：
<!--搜索文章-->
<select id="getSearchBlog" resultMap="LatestBlog">
select b.id,b.title,b.description,b.update_time,b.first_picture,b.views,b.comment_count,
t.name,
u.avatar,u.username
from t_blog b,t_type t,t_user u
where b.type_id=t.id and u.id=b.user_id and
( b.title like concat('%',#{query},'%') or b.content like concat('%',#{query},'%') );
</select>
- 在BlogService接口下添加
/*搜索 文章*/
List<LatestBlog> getSearchBlog(String query);
- 在BlogServiceImpl接口实现类添加
/*搜索文章*/
@Override
public List<LatestBlog> getSearchBlog(String query) {
return blogDao.getSearchBlog(query);
}
- 在IndexController类中添加接口
为实现局部刷新的分页
前端部分改动
分页部分
<div class="two wide column" align="center">
<a class="item" style="cursor: pointer" onclick="page(this)" th:attr="data-page=1" th:unless="${pageInfo.isFirstPage}">首页</a>
</div>
<div class="two wide column" align="center">
<!--<a class="item" th:href="@{/admin/blogs(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" th:unless="${pageInfo.isFirstPage}">上一页</a>-->
<a class="item" style="cursor: pointer" onclick="page(this)" th:attr="data-page=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1" th:unless="${pageInfo.isFirstPage}">上一页</a>
</div>
<div class="eight wide column" align="center">
<p><span th:text="${pageInfo.pageNum}"></span> / <span
th:text="${pageInfo.pages}"></span></p>
</div>
<div class="two wide column " align="center">
<!--<a class="item" th:href="@{/admin/blogs(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" th:unless="${pageInfo.isLastPage}">下一页</a>-->
<a class="item" style="cursor: pointer" onclick="page(this)" th:attr="data-page=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages}" th:unless="${pageInfo.isLastPage}">下一页</a>
</div>
<div class="two wide column " align="center">
<a class="item" style="cursor: pointer" onclick="page(this)" th:attr="data-page=${pageInfo.pages}" th:unless="${pageInfo.isLastPage}">尾页</a>
</div>
JS部分：
function page(obj) {
$("[name='page']").val($(obj).data("page"));
loaddata();
$(window).scrollTo($('#blog-List'),500);
}
$("#search-btn").click(function () {
$("[name='page']").val(0);
loaddata();
});
function loaddata() {
$("#search-container").load(/*[[@{/searchRefresh}]]*/
"/searchRefresh",{
query : $("[name='query']").val(),
pageNum : $("[name='page']").val()
},function (responseTxt, statusTxt, xhr) {
$(window).scrollTo($('#blog-List'),500);
});
}
IndexController类中添加接口,代码如下：（还是冗余了点）
@PostMapping("/search")
public String Search(Model model, @RequestParam String query, @RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum){
String orderBy= "b.update_time desc";
PageHelper.startPage(pageNum, 5,orderBy); //先短一点
List<LatestBlog> searchBlog = blogService.getSearchBlog(query);
PageInfo<LatestBlog> pageInfo = new PageInfo<>(searchBlog);
System.out.println(pageInfo);
model.addAttribute("pageInfo", pageInfo);
model.addAttribute("query", query);
return "search";
//return pageInfo.toString();
}
//上下页
@PostMapping("/searchRefresh")
public String refreshSearch(Model model, @RequestParam String query, @RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum){
System.out.println(query.toString());
System.out.println(pageNum.toString());
String orderBy= "b.update_time desc";
PageHelper.startPage(pageNum, 5,orderBy); //先短一点
List<LatestBlog> searchBlog = blogService.getSearchBlog(query);
PageInfo<LatestBlog> pageInfo = new PageInfo<>(searchBlog);
System.out.println(pageInfo);
model.addAttribute("pageInfo", pageInfo);
model.addAttribute("query", query);
return "search :: bloglist";
}
至此博客首页的编写完成，多创建了2个VO，LatestBlog和RecommendBlog，访问浏览首页可以查出我们后台存储的文章。
效果示例图如下：
搜索博客：
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
