转载

【SpringBoot搭建个人博客】- 博客首页显示（十）

博客地址 ：ONESTARの客栈

源码领取方式一：

  • 扫一扫文末二维码，关注公众号【编程日刊】，后台回复【博客】，即可领取源码

源码领取方式二：

  • 前端页面源码地址： github.com/oneStarLR/m…

  • 以jpa为持久层源码地址： github.com/oneStarLR/m…

  • 以mybatis为持久层源码地址： github.com/oneStarLR/m…

欢迎给star以鼓励(^_−)☆

本文将根据首页显示来进行讲述，首页有搜索、最新博客推荐显示、文章列表显示、博客信息统计等功能，将从这几个方面进行讲述，主要是后端的开发，前端只会给出部分代码，不会进行讲解。

一、首页显示

分析

问：首页显示需要考虑到哪些问题？

答：根据前端页面功能来看，两个最基本的查询，一个是查询最新文章列表，一个是查询最新推荐文章；还有就是搜搜索功能，根据关键字搜索博客；另外，就是统计博客信息，有博客总数、访问总数、评论总数、留言总数。

问：那各个功能需要怎样设计呢？

答: 这里根据每个功能来进行分析

  • 查询最新文章列表：定义一个FirstPageBlog首页实体类来查询首页文章列表信息，并定义getAllFirstPageBlog接口来关联SQL实现查询功能
  • 查询最新推荐文章：定义一个RecommendBlog实体类来查询推荐文章列表信息，并定义getRecommendedBlog接口来关联SQL实现查询
  • 搜索博客：由于搜索博客显示的还是博客列表信息，所以还是通过FirstPageBlog实体类来显示查询信息，并定义getSearchBlog接口来关联SQL实现查询功能
  • 统计博客信息：统计博客信息分别定义了getBlogTotal、getBlogViewTotal、getBlogCommentTotal、getBlogMessageTotal接口来关联SQL实现博客总数、访问总数、评论总数、留言总数的统计

1. 定义实体类

根据上面的分析，这里需要定义两个查询实体类，分别是：最新博客列表实体类（FirstPageBlog）、最新推荐实体类（RecommendBlog）

最新博客列表实体类

由于首页最新博客列表除了需要显示博客信息外，还需要显示分类、作者等信息，所以还需要定义分类名称和用户名、用户头像属性。在queryvo包下创建FirstPageBlog实体类，代码如下（省去get、set、toString方法）：

package com.star.queryvo;

import java.util.Date;

/**
 * @Description: 首页博客信息实体类
 * @Date: Created in 9:39 2020/6/19
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
public class FirstPageBlog {
    
    //博客信息
    private Long id;
    private String title;
    private String firstPicture;
    private Integer views;
    private Integer commentCount;
    private Date updateTime;
    private String description;

    //分类名称
    private String typeName;

    //用户名
    private String nickname;
    //用户头像
    private String avatar;

}
复制代码

最新推荐实体类

最新推荐只要显示博客标题、首图信息，但要注意这里要体现出是否推荐到推荐栏来，所以还要有个boolean类型的变量recommend，如下（省去get、set、toString方法）：

package com.star.queryvo;

/**
 * @Description: 推荐博客数据实体类
 * @Date: Created in 9:47 2020/6/19
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
public class RecommendBlog {

    private Long id;
    private String title;
    private String firstPicture;
    private boolean recommend;

}
复制代码

2. 持久层接口

由于都是和博客相关的接口，这里就都写在BlogDao类中，mapper和业务层也是一样。根据上面的分析，这里需要定义以下接口，在BlogDao接口中添加如下：

//查询首页最新博客列表信息
List<FirstPageBlog> getFirstPageBlog();

//查询首页最新推荐信息
List<RecommendBlog> getAllRecommendBlog();

//搜索博客列表
List<FirstPageBlog> getSearchBlog(String query);

//统计博客总数
Integer getBlogTotal();

//统计访问总数
Integer getBlogViewTotal();

//统计评论总数
Integer getBlogCommentTotal();

//统计留言总数
Integer getBlogMessageTotal();
复制代码

3. mapper

mapper是和持久层接口相对应的，在BlogDao.xml中添加如下SQL：

<!--查询首页最新博客列表信息-->
<resultMap id="firstPageBlog" type="com.star.queryvo.FirstPageBlog">
    <id property="id" column="id"/>
    <result property="title" column="title"/>
    <result property="firstPicture" column="first_picture"/>
    <result property="views" column="views"/>
    <result property="commentCount" column="comment_count"/>
    <result property="createTime" column="create_time"/>
    <result property="updateTime" column="update_time"/>
    <result property="description" column="description"/>
    <result property="typeName" column="name"/>
    <result property="nickname" column="nickname"/>
    <result property="avatar" column="avatar"/>
</resultMap>
<select id="getFirstPageBlog" resultMap="firstPageBlog">
    select b.id,b.title,b.first_picture, b.views, b.comment_count,b.create_time,b.update_time,b.description,
    t.name ,
    u.nickname, u.avatar
    from myblog.t_blog b, myblog.t_type t,myblog.t_user u
    where b.type_id = t.id and  u.id = b.user_id order by b.create_time desc
</select>

<!--查询推荐文章-->
<select id="getAllRecommendBlog" resultType="com.star.queryvo.RecommendBlog">
    select * from myblog.t_blog where t_blog.recommend = true order by t_blog.create_time desc limit 4;
</select>

<!--搜索文章-->
<select id="getSearchBlog" resultMap="firstPageBlog">
    <bind name="pattern" value="'%' + query + '%'" />
    select b.id,b.title,b.first_picture, b.views,b.comment_count,b.update_time,b.description,
    t.name ,
    u.nickname, u.avatar
    from myblog.t_blog b, myblog.t_type t,myblog.t_user u
    where b.type_id = t.id and  u.id = b.user_id and (b.title like #{pattern} or b.content like  #{pattern})
    order by b.update_time desc
</select>

<!--统计博客信息-->
<select id="getBlogTotal" resultType="Integer">
    select count(*) from myblog.t_blog
</select>
<select id="getBlogViewTotal" resultType="Integer">
    select coalesce (sum(views),0) from myblog.t_blog
</select>
<select id="getBlogCommentTotal" resultType="Integer">
    select count(*) from myblog.t_comment
</select>
<select id="getBlogMessageTotal" resultType="Integer">
    select count(*) from myblog.t_message
</select>
复制代码

讲解：

查询首页最新博客列表信息和查询推荐文章都是前面提到过的知识点，搜索文章也在博客管理里面有讲解过，用的是模糊查询，这里说一统计访问总数的SQL，在上一版的代码中，用的是：select sum(views) from myblog.t_blog，这里用的是：select coalesce (sum(views),0) from myblog.t_blog，在上一版中，当sum求和返回为null时，是会报空指针异常的，这里用coalesce (sum(views),0)，打当sum求和为null时赋值为0，就能解决这个问题

4. 业务层

业务层接口

在BlogService接口中定义以下接口

//查询首页最新博客列表信息
List<FirstPageBlog> getAllFirstPageBlog();

//查询首页最新推荐信息
List<RecommendBlog> getRecommendedBlog();

//搜索博客列表
List<FirstPageBlog> getSearchBlog(String query);

//统计博客总数
Integer getBlogTotal();

//统计访问总数
Integer getBlogViewTotal();

//统计评论总数
Integer getBlogCommentTotal();

//统计留言总数
Integer getBlogMessageTotal();
复制代码

接口实现类

在BlogServiceImpl接口实现类中添加：

//查询首页最新博客列表信息
@Override
public List<FirstPageBlog> getAllFirstPageBlog() {
    return blogDao.getFirstPageBlog();
}

//查询首页最新推荐信息
@Override
public List<RecommendBlog> getRecommendedBlog() {
    List<RecommendBlog> allRecommendBlog = blogDao.getAllRecommendBlog();
    return allRecommendBlog;
}

//搜索博客列表
@Override
public List<FirstPageBlog> getSearchBlog(String query) {
    return blogDao.getSearchBlog(query);
}

//统计博客总数
@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();
}
复制代码

5. 控制器

在controller包下创建IndexController类，根据前面的功能分析，编写如下代码：

package com.star.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.star.queryvo.FirstPageBlog;
import com.star.queryvo.RecommendBlog;
import com.star.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;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import java.util.List;

/**
 * @Description: 首页控制器
 * @Date: Created in 21:01 2020/5/20
 * @Author: ONESTAR
 * @QQ群: 530311074
 * @URL: https://onestar.newstar.net.cn/
 */
@Controller
public class IndexController {

    @Autowired
    private BlogService blogService;

    //分页查询博客列表
    @GetMapping("/")
    public String index(Model model, @RequestParam(defaultValue = "1",value = "pageNum") Integer pageNum, RedirectAttributes attributes){
        PageHelper.startPage(pageNum,10);
        List<FirstPageBlog> allFirstPageBlog = blogService.getAllFirstPageBlog();
        List<RecommendBlog> recommendedBlog = blogService.getRecommendedBlog();

        PageInfo<FirstPageBlog> pageInfo = new PageInfo<>(allFirstPageBlog);
        System.out.println("pageInfo:" +pageInfo);
        model.addAttribute("pageInfo",pageInfo);
        model.addAttribute("recommendedBlogs", recommendedBlog);
        return "index";
    }

    //搜索博客
    @PostMapping("/search")
    public String search(Model model,
                         @RequestParam(defaultValue = "1", value = "pageNum") Integer pageNum,
                         @RequestParam String query) {
        PageHelper.startPage(pageNum, 1000);
        List<FirstPageBlog> searchBlog = blogService.getSearchBlog(query);

        PageInfo<FirstPageBlog> pageInfo = new PageInfo<>(searchBlog);
        model.addAttribute("pageInfo", pageInfo);
        model.addAttribute("query", query);
        return "search";
    }

    //博客信息统计
    @GetMapping("/footer/blogmessage")
    public String blogMessage(Model model){
        int blogTotal = blogService.getBlogTotal();
        int blogViewTotal = blogService.getBlogViewTotal();
        int blogCommentTotal = blogService.getBlogCommentTotal();
        int blogMessageTotal = blogService.getBlogMessageTotal();

        model.addAttribute("blogTotal",blogTotal);
        model.addAttribute("blogViewTotal",blogViewTotal);
        model.addAttribute("blogCommentTotal",blogCommentTotal);
        model.addAttribute("blogMessageTotal",blogMessageTotal);
        return "index :: blogMessage";
    }
}
复制代码

6. 前后端交互

  • 最新推荐：
<div class="m-margin-tb-tiny four wide column" th:each="blog : ${recommendedBlogs}">
    <a href="#" class="class_outer" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
        <img src="../static/images/backimg1.jpg" th:src="@{${blog.firstPicture}}"  alt="" class="ui rounded image">
        <span class="class_cover" >
             <h4 class="m-font-size-blog-text m-margin-tb-tiny" th:text="${blog.title}">大圣，此去欲何?</h4>
         </span>
    </a>
</div>
复制代码
  • 文章列表
<div class="ui padded segment m-padded-tb-large m-opacity" th:each="blog : ${pageInfo.list}">
    <div class="ui large aligned mobile reversed stackable grid">
        <!--博文信息-->
        <div class="eleven wide column ">
            <h3 class="ui header" ><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black m-title-font" th:text="${blog.title}">大圣，此去欲何?</a></h3>
            <p class="m-text m-margin-top-max" th:text="|${blog.description}......|">戴上金箍，没法爱你；放下金箍，没法保护你。我知道上天不会给我第二次机会，曾经我们说好的永远，原来也仅仅只有，十二画，而已。“大圣，此去欲何?”“踏南天，碎凌霄。”“若一去不回……”“便一去不回” 其实很多时候，我们都是有机会的，最后真正放弃的，是我们自己。......</p>
            <div class="ui m-margin-top-max grid">
                <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                        <div class="item">
                            <img src="../static/images/me.jpg" th:src="@{${blog.avatar}}"  alt="" class="ui avatar image">
                            <div class="content"><a href="#" th:href="@{/about}" target="_blank" class="header" th:text="${blog.nickname}" >oneStar</a></div>
                        </div>
                        <div class="item">
                            <i class="calendar icon"></i><span th:text="${#dates.format(blog.createTime,'yyyy-MM-dd')}">2020-01-01</span>
                        </div>
                        <div class="item">
                            <i class="eye icon"></i> <span th:text="${blog.views}">2222</span>
                        </div>
                        <div class="item">
                            <i class="comment outline icon"></i> <span th:text="${blog.commentCount}">2222</span>
                        </div>
                    </div>
                </div>
                <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.typeName}">好文</a>
                </div>
            </div>
        </div>
        <!--博文图片-->
        <div class="five wide column">
            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                <img src="../static/images/backimg1.jpg" th:src="@{${blog.firstPicture}}"  alt="" class="ui rounded image">
            </a>
        </div>

    </div>
</div>
复制代码
  • 分页显示文章列
<div class="ui bottom attached segment m-opacity stackable grid">
    <div class="three wide column" align="center">
        <a class="item" th:href="@{/(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}" th:unless="${pageInfo.isFirstPage}">上一页</a>
    </div>

    <div class="ten wide column" align="center">
        <p> <span th:text="${pageInfo.pageNum}"></span> / <span th:text="${pageInfo.pages}"></span> </p>
    </div>

    <div class="three wide column" align="center">
        <a class="item" th:href="@{/(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}" th:unless="${pageInfo.isLastPage}">下一页</a>
    </div>
</div>
复制代码
  • 搜索博客
<form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
    <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
        <input style="color: white" type="text" name="query" placeholder="Search...." th:value="${query}">
        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
    </div>
</form>
复制代码
  • 统计博客信息

HTML:

<div id="blog-message">
    <div class="ui inverted link list" style="align-content: center;margin-top: 10px" th:fragment="blogMessage">
        <div class="m-text-thin" style="text-align: left;margin-left: 75px;">
            文章总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogTotal}"> 14 </h2> 篇
        </div>
        <div class="m-text-thin" style="text-align: left;margin-left: 75px">
            访问总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogViewTotal}"> 14 </h2> 次
        </div>
        <div class="m-text-thin" style="text-align: left;margin-left: 75px">
            评论总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogCommentTotal}"> 14 </h2> 条
        </div>
        <div class="m-text-thin" style="text-align: left;margin-left: 75px">
            留言总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;" th:text="${blogMessageTotal}"> 14 </h2> 条
        </div>
    </div>
</div>
复制代码

JS:

$('#blog-message').load(/*[[@{/footer/blogmessage}]]*/"/footer/blogmessage");
复制代码

7. 运行访问

运行项目，访问 http://localhost:8080/ , 在后台添加测试文章后能在前端页面查看，并且在底部栏可以查看本站的信息

【SpringBoot搭建个人博客】- 博客首页显示（十）
【SpringBoot搭建个人博客】- 博客首页显示（十）

至此，SpringBoot搭建个人博客的博客首页显示开发完成，下一篇将讲述博客详情页面显示

【点关注，不迷路，欢迎持续关注本站】

【SpringBoot搭建个人博客】- 博客首页显示（十）
原文  https://juejin.im/post/5ef1acf9f265da02c8745dc8
正文到此结束
所属分类： 编程技术 Java

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 Ant教程 ANTLR教程 SpringCloud java实例教程 springcloud-demo XStream教程 Hazelcast教程 Elastic-Job-Lite 深入浅出MyBatis SVN教程 ibaties教程 rabittmq教程 solr教程 Hadoop教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 java-demo Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 Spring Cloud Consul实现选举机制
  2. 2 Spring Boot集成ShedLock实现分布式定时任务
  3. 3 利用oss进行数据库和网站图片备份
  4. 4 Spring Cloud Stream实现数据流处理
  5. 5 Python3访问MySQL数据库快速入门Demo
  6. 6 Github开源项目作者可以免费申请 JetBrains 全家桶
  7. 7 Spring Cloud Vault快速入门Demo
  8. 8 Spring Cloud Gateway快速入门Demo
  9. 9 Spring Cloud Contract快速入门Demo
  10. 10 Spring Cloud Consul快速入门Demo
网站信息
  • 文章总数：82,714 篇
  • 文件总数：284,287 个
  • 标签总数：2,393 个
  • 分类总数：85 个
  • 留言数量：2,560 条
  • 在线人数：618 人
  • 运行天数：4,408天
  • 最后更新：2024年11月21日23点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG