系统后台数据展示

最新推荐文章于 2024-02-27 22:37:18 发布

@爱编程的阿泽

最新推荐文章于 2024-02-27 22:37:18 发布

阅读量551

点赞数

本文链接：https://blog.csdn.net/weixin_52689367/article/details/129635713

版权

Spring boot 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章描述了如何在后台管理系统中实现数据展示，包括最新的文章和评论信息，以及相关统计数据。通过创建AdminController并利用SiteServiceimpl处理业务逻辑，将数据存储到Request域中，再由Thymeleaf模板引擎在后台首页index.html中渲染显示。同时展示了HTML页面的核心结构和Thymeleaf的标签用法。

摘要由CSDN通过智能技术生成

数据展示

1.请求处理层实现

后台首页展示的内容包括最新的文章信息，评论信息以及统计的文章和评论的数据量，这些数据的业务处理已经在SiteServiceimpl中实现了，这里直接在Controller中处理前端页面的请求。

创建com.ithema.web.admin包，在该包下创建一个后台管理的控制类AdminController，用于处理前端页面的请求。如文件10-23所示。

AdminController.java

package com.itheima.web.admin;

import com.github.pagehelper.PageInfo;
import com.itheima.model.ResponseData.ArticleResponseData;
import com.itheima.model.ResponseData.StaticticsBo;
import com.itheima.model.domain.Article;
import com.itheima.model.domain.Comment;
import com.itheima.service.IArticleService;
import com.itheima.service.ISiteService;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
/**
 * @Classname AdminController
 * @Description 后台管理模块
 * @Date 2019-3-14 10:39
 * @Created by CrazyStone
 */
@Controller
@RequestMapping("/admin")
public class AdminController {
    private static final Logger logger = LoggerFactory.getLogger(AdminController.class);

    @Autowired
    private ISiteService siteServiceImpl;
    @Autowired
    private IArticleService articleServiceImpl;

    // 管理中心起始页
    @GetMapping(value = {"", "/index"})
    public String index(HttpServletRequest request) {
        // 获取最新的5篇博客、评论以及统计数据
        List<Article> articles = siteServiceImpl.recentArticles(5);
        List<Comment> comments = siteServiceImpl.recentComments(5);
        StaticticsBo staticticsBo = siteServiceImpl.getStatistics();
        // 向Request域中存储数据
        request.setAttribute("comments", comments);
        request.setAttribute("articles", articles);
        request.setAttribute("statistics", staticticsBo);
        return "back/index";
    }

文件10-23中，后台首页展示的方法index()针对“/admin”和“/admin/index”的GET请求进行首页数据展示。

2.实现后台前端页面功能

项目back文件夹中index.html是后台管理系统的首页，其核心代码如文件10-24所示

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='管理中心',active='home'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="back/header::header-body"></div>
    <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="${statistics.articles}"></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="${statistics.comments}"></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 class="list-group-item" th:each="article : ${articles}">
                                        <span class="badge badge-primary" th:text="${article.commentsNum}">
                                        </span>
                                        <a target="_blank" th:href="${commons.site_url('/article/')}+${article.id}"
                                             th:text="${article.title}"></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">
                                    <div th:if="${comments.size()}==0">
                                        <div class="alert alert-warning">
                                            还没有收到留言.
                                        </div>
                                    </div>
                                    <ul class="list-group" th:unless="${comments}==null and ${comments.size()}==0">
                                        <li class="list-group-item" th:each="comment : ${comments}">
                                            <th:block th:text="${comment.author}"/>于 <th:block th:text="${commons.dateFormat(comment.created)}"/>：
                                                <a th:href="${commons.site_url('/article/')}+${comment.articleId}+'#comments'"
                                                target="_blank" th:utext="${commons.article(comment.content)}"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div th:replace="back/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="back/footer :: footer"></div>
</body>
</html>

文件10-24中，核心内容是使用th:*相关属性获取后台封装在Request域中的最新文章信息、最新评论信息和相关统计数据，并展示在页面上。

3.效果展示

启动项目后，先登录进入前端首页。单击前端首页左上角的【后台管理】进入后台首页。