基于 Spring Boot 博客系统开发（八）

基于 Spring Boot 博客系统开发（八）

本系统是简易的个人博客系统开发，为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发（七）👈👈

仪表盘实现效果

显示文章总数、评论总数、最新文章和最新留言。实现步骤，首先后端获取文章评论相关数据，然后前端使用thymeleaf获取后端model中的数据进行渲染。

后台首页 AdminController

获取最新文章列表、最新评论列表和page对象

@Controller
@RequestMapping("/admin")
public class AdminController {

    @Autowired
    private IArticleService articleService;

    @Autowired
    private ICommentService commentService;

    /**
     * 后台首页
     */
    @RequestMapping("/")
    public String home(Model model){
        //int articleTotal = articleService.count();
        //int commentTotal = commentService.count();
        PageHelper.startPage(1,5);
        List<LatestArticleVO> latestArticleVOList = articleService.selectLatestArticle();
        PageInfo<LatestArticleVO> articlePage = new PageInfo<LatestArticleVO>(latestArticleVOList);
        
        PageHelper.startPage(1,5,"created desc");
        List<Comment> commentList = commentService.list();
        PageInfo<Comment> commentPage = new PageInfo<>(commentList);

        model.addAttribute("articlePage",articlePage);
        model.addAttribute("commentPage",commentPage);
        return "admin/index";
    }

    @RequestMapping("/list")
    public String list(){
        return "admin/list";
    }

    @RequestMapping("/edit")
    public String edit(){
        return "admin/edit";
    }

}

创建VO对象，LatestArticleVO。实体对象不满足所需渲染属性的情况下，创建自定义属性视图对象，

@Data
public class LatestArticleVO {

    private Long id;
    private String title;
    private Integer hits;

}

编写最新文章列表的SQL、Mapper、service。首先，在Mapper中自定义查询SQL
ArticleMapper.xml

    <resultMap id="LatestArticleVOResult" type="LatestArticleVO">
        <id property="id" column="id"></id>
        <result property="title" column="title"></result>
        <result property="hits" column="hits"></result>
    </resultMap>
	<select id="selectLatestArticle" resultMap="LatestArticleVOResult">
		SELECT a.id, a.title,s.hits FROM t_article a LEFT JOIN t_statistic s ON s.article_id = a.id order by a.created desc
	</select>

ArticleMapper，方法名selectLatestArticle与上面select标签id属性的名一致

@Mapper
public interface ArticleMapper extends BaseMapper<Article> {

    List<HotArticleVO> selectHotArticle();

    List<LatestArticleVO> selectLatestArticle();

}

IArticleService，创建service接口类

public interface IArticleService extends IService<Article> {

    public List<HotArticleVO> selectHotArticle();

    List<LatestArticleVO> selectLatestArticle();

}

ArticleServiceImpl，调用mapper层方法

@Service
public class ArticleServiceImpl extends ServiceImpl<ArticleMapper, Article> implements IArticleService {

    @Autowired
    private ArticleMapper articleMapper;

    @Override
    public List<HotArticleVO> selectHotArticle() {
        return articleMapper.selectHotArticle();
    }

    @Override
    public List<LatestArticleVO> selectLatestArticle() {
        return articleMapper.selectLatestArticle();
    }

}

后台首页内容前端代码实现

使用thymeleaf模板引擎渲染

  <div class="content-page">
            <div class="content">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <h4 class="page-title">仪表盘</h4>
                        </div>

                        <div class="row">
                            <div class="col-sm-6 col-lg-3">
                                <div class="mini-stat clearfix bx-shadow bg-info">
                                    <span class="mini-stat-icon"><i class="fa fa-quote-right" aria-hidden="true"></i></span>
                                    <div class="mini-stat-info text-right">
                                        发表了<span class="counter" th:text="${articlePage.total}">12</span>篇文章
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div class="mini-stat clearfix bg-purple bx-shadow">
                                    <span class="mini-stat-icon"><i class="fa fa-comments-o" aria-hidden="true"></i></span>
                                    <div class="mini-stat-info text-right">
                                        收到了<span class="counter" th:text="${commentPage.total}">10</span>条留言
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">最新文章</h4>
                                    </div>
                                    <div class="panel-body">
                                        <ul class="list-group">
                                            <li th:each="article:${articlePage.list}" class="list-group-item">
                                                <span class="badge badge-primary" th:text="${article.hits}">1</span>
                                                <a target="_blank" th:href="${'/article/'+article.id}" th:text="${article.title}">Spring Boot 2 权威发布</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">最新留言</h4>
                                    </div>
                                    <div class="panel-body">
                                        <ul class="list-group">
                                            <li th:each="comment:${commentPage.list}" class="list-group-item">
                                                [[${comment.author}]]于 [[${#dates.format(comment.created,'YYYY-MM-dd')}]]：
                                                <a th:href="${'/article/'+comment.articleId+'#comments'}" target="_blank" ><p th:text="${comment.content}">151235</p></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>