一、请求处理层实现

在web包下创建admin包，再创建用于后台管理控制的控制类AdminController

/**

* @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";

}

// 向文章发表页面跳转

@GetMapping(value = "/article/toEditPage")

public String newArticle( ) {

return "back/article_edit";

}

// 发表文章

@PostMapping(value = "/article/publish")

@ResponseBody

public ArticleResponseData publishArticle(Article article) {

if (StringUtils.isBlank(article.getCategories())) {

article.setCategories("默认分类");

}

try {

articleServiceImpl.publish(article);

logger.info("文章发布成功");

return ArticleResponseData.ok();

} catch (Exception e) {

logger.error("文章发布失败，错误信息: "+e.getMessage());

return ArticleResponseData.fail();

}

// 跳转到后台文章列表页面

@GetMapping(value = "/article")

public String index(@RequestParam(value = "page", defaultValue = "1") int page,

@RequestParam(value = "count", defaultValue = "10") int count,

HttpServletRequest request) {

PageInfo<Article> pageInfo = articleServiceImpl.selectArticleWithPage(page, count);

request.setAttribute("articles", pageInfo);

return "back/article_list";

}

// 向文章修改页面跳转

@GetMapping(value = "/article/{id}")

public String editArticle(@PathVariable("id") String id, HttpServletRequest request) {

Article article = articleServiceImpl.selectArticleWithId(Integer.parseInt(id));

request.setAttribute("contents", article);

request.setAttribute("categories", article.getCategories());

return "back/article_edit";

}

// 文章修改处理

@PostMapping(value = "/article/modify")

@ResponseBody

public ArticleResponseData modifyArticle(Article article) {

try {

articleServiceImpl.updateArticleWithId(article);

logger.info("文章更新成功");

return ArticleResponseData.ok();

} catch (Exception e) {

logger.error("文章更新失败，错误信息: "+e.getMessage());

return ArticleResponseData.fail();

}

// 文章删除

@PostMapping(value = "/article/delete")

@ResponseBody

public ArticleResponseData delete(@RequestParam int id) {

try {

articleServiceImpl.deleteArticleWithId(id);

logger.info("文章删除成功");

return ArticleResponseData.ok();

} catch (Exception e) {

logger.error("文章删除失败，错误信息: "+e.getMessage());

return ArticleResponseData.fail();

}

二、实现后台前端页面功能

back文件夹下的博客后台首页index.html文件进行后台数据展示，并创建页头和页脚

Index.html

<!DOCTYPE html>

</div>

发表了<span class="counter" th:text="${statistics.articles}"></span>篇文章

</div>

收到了<span class="counter" th:text="${statistics.comments}"></span>条留言

</div>

</div>

</span>

<a target="_blank" th:href="${commons.site_url('/article/')}+${article.id}"

th:text="${article.title}"></a>

</li>

</ul>

</div>

</div>

还没有收到留言.

</div>

<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>

</body>

</html>

header.html

<!DOCTYPE html>

</head>

</a>

</div>

<span style="font-size: 28px; color: #2f353f; line-height: 50px;">MyBlog</span>

</div>

</button>

</div>

<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>

</li>

</ul>

</div>

<ul>

<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>

<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>

<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>

</li>

</li>

</ul>

</div>

</div>

</html>

foot.html

<!DOCTYPE html>

<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>

</html>

注：

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

三、效果展示

启动项目后登录，在项目前端首页单击左上角的“后台管理”链接进入博客系统后台首页

10-5-展示后台数据相关推荐

c 后台输出easyui html,EasyUI——实现展示后台数据代码
下面是View显示代码: @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml" ...
EasyUI——实现展示后台数据代码
下面是View显示代码: @{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml"; ...
盟友说 | 在微信中最爆火的应用后台数据究竟什么样？
人们常用"一夜爆红"形容明星出名, 而在社交网络中却常常出现这样的明星产品.2015 上半年,刚进入社交网络的"足记"就引爆了微信朋友圈的分享狂潮,成为了一项爆 ...
使用ajax获取后台数据怎么打印,我用ajax获取后台数据并展示在前端页面的方法【源码】...
<我用ajax获取后台数据并展示在前端页面的方法[源码]>由会员分享,可在线阅读,更多相关<我用ajax获取后台数据并展示在前端页面的方法[源码](2页珍藏版)>请在人人文库网 ...
bootstrap table通过ajax获取后台数据展示在table
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...
设计灵感|如何做好网页后台数据展示的设计？
一个完整的后台界面通常由导航.数据展示.表格.组件以及弹窗等部分组成,在视觉上确定了整体布局以后,还要考虑好各个部分的交互逻辑,才能获得更好的易用性. 由集设网 www.ijishe.com 设计师交 ...
vue之前台请求特定商品数据展示+后台PHP处理后台数据（实战）
这个页面是租车网站的展示页面(可拓展到网上商城产品展示) 最终结果 : 数据流向解析引用element的现成时间输入组件,输入时间地点数据,确认按钮触发请求事件:①前台检查输入数据是否合法②将原来的 ...
echarts如何获取后端的值_Echarts 获取后台数据使用后台数据展示柱形图
后台数据要以json格式返回页面:引用echarts.js , 然后data以ajax的数据请求并返回 String path = request.getContextPath(); String ...
easyui select ajax,easyui的combobox根据后台数据实现自动输入提示功能
easyui的combobox根据后台数据实现自动输入提示功能发布时间:2020-06-11 10:09:41 来源:51CTO 阅读:1981 作者:crackernet adauhuehkek最 ...
人群频率 | gnomAD数据库 (二) 后台数据的获取及质量评估
在gnomAD数据库简介(一)中,我们简单介绍了基因组学遗传分析中人群变异频率的重要性,以及gnomAD数据库的一些背景. 本篇主要侧重gnomAD的后台数据下载和简单评估. gnomAD后台数据下载 ...

10-5-展示后台数据

一、请求处理层实现

二、实现后台前端页面功能

三、效果展示

10-5-展示后台数据相关推荐

最新文章

热门文章