根据文章删除的需求,实现博客文章的删除功能。
1.业务处理层的实现
(1)编写Service层接口方法
在文章业务接口IArticleService添加文章删除方法deleteArticleWithId(),具体代码如下:
//根据主键删除文章
public void deleteArticleWithId(int id);
(2)编写Service层接口实现类方法
在文章业务层接口实现类ArticleServiceImpl中实现deleteArticleWithId()方法,具体代码如下;
// 删除文章
@Override
public void deleteArticleWithId(int id) {
// 删除文章的同时,删除对应的缓存
articleMapper.deleteArticleWithId(id);
redisTemplate.delete("article_" + id);
// 同时删除对应文章的统计数据
statisticMapper.deleteStatisticWithId(id);
// 同时删除对应文章的评论数据
commentMapper.deleteCommentWithId(id);
上述代码中,文章的删除操作包括删除Redis缓存中的数据、删除文章的统计数据以及删除文章的评论数据。
2.请求处理层实现
在后台管理控制类AdminController中添加处理文章删除的方法,具体代码如下:
// 文章删除
@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();
}
}
3.实现前端页面功能
在article_list.html文件中处理展示文章列表和删除文章请求的前端页面功能,具体如文件10-26所示。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='文章管理',active='article'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
<head>
<meta th:name="_csrf" th:content="${_csrf.token}"/>
<!-- 默认的header name是X-CSRF-TOKEN -->
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
<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="col-md-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th width="35%">文章标题</th>
<th width="15%">发布时间</th>
<th>浏览量</th>
<th>所属分类</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<th:block th:each="article : ${articles.list}">
<tr th:id="${article.id}">
<td>
<a th:href="@{'/article/'+${article.id}}" th:text="${article.title}" target="_blank"></a>
</td>
<td><th:block th:text="${commons.dateFormat(article.created)}"/></td>
<td><th:block th:text="${article.hits}"/></td>
<td><th:block th:text="${article.categories}"/></td>
<td>
<a th:href="@{'/admin/article/'+${article.id}}"
class="btn btn-primary btn-sm waves-effect waves-light m-b-5">
<i class="fa fa-edit"></i> <span>编辑</span></a>
<a href="javascript:void(0)" th:onclick="'delArticle('+${article.id}+');'"
class="btn btn-danger btn-sm waves-effect waves-light m-b-5">
<i class="fa fa-trash-o"></i> <span>删除</span></a>
<a class="btn btn-warning btn-sm waves-effect waves-light m-b-5" href="javascript:void(0)">
<i class="fa fa-rocket"></i> <span>预览</span></a>
</td>
</tr>
</th:block>
</tbody>
</table>
<div th:replace="comm/paging :: pageAdminNav(${articles})"></div>
</div>
</div>
<div th:replace="back/footer :: footer-content"></div>
</div>
</div>
</div>
</div>
<div th:replace="back/footer :: footer"></div>
<script type="text/javascript">
function delArticle(id) {
// 获取<meta>标签中封装的_csrf信息
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
if(confirm('确定删除该文章吗?')){
$.ajax({
type:'post',
url : '/admin/article/delete',
data: {id:id},
dataType: 'json',
beforeSend : function(xhr) {
xhr.setRequestHeader(header, token);
},
success: function (result) {
if (result && result.success) {
window.alert("文章删除成功");
window.location.reload();
} else {
window.alert(result.msg || '文章删除失败')
}
}
});
}
}
</script>
</body>
</html>
文件10-26中,前端页面显示的数据主要通过Ajax请求获取的,并且在Ajax请求中通过携带CSRF Token信息验证请求。
注意
需要说明的是,文章成功删除后,之前储存在Redis中的文章数据也会被删除。