一、请求处理层实现
在web包下创建admin包，再创建用于后台管理控制的控制类AdminController
@Controller
@RequestMapping("/admin")
public class AdminController {
private static final Logger logger = LoggerFactory.getLogger(AdminController.class);
@Autowired
private ISiteService siteServiceImpl;
// 管理中心起始页
@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";
}
}二、实现后台前端页面功能
在back文件夹下创建博客后台首页index.html，进行后台数据展示，并创建页头和页脚
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>header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment(title,active)">
<meta charset="utf-8"/>
<title><th:block th:text="${title!=null?title:'博客后台'}"></th:block></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta content="Coderthemes" name="author"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="shortcut icon" th:href="@{/user/img/bloglogo.jpg}"/>
<link th:href="@{/back/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/back/css/font-awesome.min.css}" rel="stylesheet"/>
<link th:href="@{/back/css/style.min.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/back/css/sweetalert2.min.css}" rel="stylesheet"/>
<script th:src="@{/back/js/html5shiv.js}"></script>
<script th:src="@{/back/js/respond.min.js}"></script>
</head>
<div th:fragment="header-body">
<div class="topbar">
<div class="topbar-left">
<div class="text-center p-t-10" style="margin: 0 auto;">
<div class="pull-left" style="padding-left: 10px;">
<a th:href="@{/admin/index}">
<img th:src="@{/user/img/bloglogo.jpg}" width="50" height="50"/>
</a>
</div>
<div class="pull-left" style="padding-left: 10px;">
<span style="font-size: 28px; color: #2f353f; line-height: 50px;">MyBlog</span>
</div>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="">
<div class="pull-left">
<button type="button" class="button-menu-mobile open-left">
<i class="fa fa-bars"></i>
</button>
<span class="clearfix"></span>
</div>
<ul class="nav navbar-nav navbar-right pull-right">
<li class="dropdown">
<a th:href="@{index.html}" class="dropdown-toggle profile" data-toggle="dropdown"
aria-expanded="true"><img th:src="@{/assets/img/me.jpg}" alt="user-img"
class="img-circle"/> </a>
<ul class="dropdown-menu">
<form name="logoutform" th:action="@{/logout}" method="post"></form>
<li><a th:href="@{${commons.site_url()}}" target="_blank">
<i class="fa fa-eye" aria-hidden="true"></i>查看网站</a></li>
<li><a href="javascript:document.logoutform.submit();">
<i class="fa fa-sign-out"></i> 用户注销</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="left side-menu">
<div class="sidebar-inner slimscrollleft">
<div id="sidebar-menu">
<ul>
<li th:class="${active}=='home'?'active':''">
<a th:href="@{/admin/index}"
th:class="${active}=='home'?'waves-effect active':'waves-effect'"><i
class="fa fa-dashboard" aria-hidden="true"></i><span> 仪表盘 </span></a>
</li>
<li th:class="${active}=='publish'?'active':''">
<a th:href="@{/admin/article/toEditPage}"
th:class="${active}=='publish'?'waves-effect active':'waves-effect'"><i
class="fa fa-pencil-square-o" aria-hidden="true"></i><span> 发布文章 </span></a>
</li>
<li th:class="${active}=='article'?'active':''">
<a th:href="@{/admin/article}"
th:class="${active}=='article'?'waves-effect active':'waves-effect'"><i
class="fa fa-list" aria-hidden="true"></i><span> 文章管理 </span></a>
</li>
<!-- 以下功能尚未实现 -->
<li th:class="${active}=='comments'?'active':''">
<a th:class="${active}=='comments'?'waves-effect active':'waves-effect'">
<i class="fa fa-comments" aria-hidden="true"></i><span> 评论管理 </span></a>
</li>
<li th:class="${active}=='category'?'active':''">
<a th:class="${active}=='category'?'waves-effect active':'waves-effect'">
<i class="fa fa-tags" aria-hidden="true"></i><span> 分类/标签 </span></a>
</li>
<li th:class="${active}=='setting'?'active':''">
<a th:class="${active}=='setting'?'waves-effect active':'waves-effect'">
<i class="fa fa-gear" aria-hidden="true"></i><span> 系统设置 </span></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</html>
foot.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="footer-content">
<footer class="footer text-right">
<time class="comment-time" th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}"></time> © <a target="_blank">CrazyStone</a><div class=""></div>
</footer>
</div>
<body th:fragment="footer">
<script th:src="@{/assets/js/jquery.min.js}"></script>
<script th:src="@{/back/js/bootstrap.js}"></script>
<script th:src="@{/back/js/sweetalert2.min.js}"></script>
<script th:src="@{/back/js/jquery.app.js}"></script>
<script th:src="@{/back/js/base.js}"></script>
</body>
</html>注：
核心内容是使用th:*相关属性获取后台封装在Request域中的最新文章信息、最新评论信息和相关统计数据，并展示。
三、效果展示
启动项目后登录，在项目前端首页单击左上角的“后台管理”链接进入博客系统后台首页
4169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
