基于 Spring Boot 博客系統開發（十）

本系統是簡易的個人博客系統開發，為了更加熟練地掌握 SprIng Boot 框架及相關技術的使用。🌿🌿🌿
基于 Spring Boot 博客系統開發（九）👈👈

文章管理實現

主要實現功能有文章發布、文章編輯、文章刪除

文章發布和編輯實現

AdminController 添加編輯頁面路由

    @RequestMapping("/edit")public String edit(Model model){model.addAttribute("article",new Article());return "admin/edit";}@RequestMapping("/edit/{id}")public String edit(@PathVariable("id") Long id,Model model){Article  article = articleService.getById(id);model.addAttribute("article",article);return "admin/edit";}

ArticleController 添加文章保存或修改方法

@Controller
@RequestMapping("/article")
public class ArticleController {@Autowiredprivate IArticleService articleService;@RequestMapping("/saveOrUpdate")@ResponseBodypublic AjaxResult saveOrUpdate(Article article){if(article.getId() == null){article.setCreated(LocalDate.now());}else{article.setModified(LocalDate.now());}articleService.saveOrUpdate(article);return AjaxResult.success();}

saveOrUpdate：根據id是否為空 判斷是否執行添加或者修改
當文章對象 id 不為null 說明本方法需要進行修改，否則執行添加操作

編輯頁面表單

<form id="articleForm"><input type="hidden" name="id" th:value="${article.id}" id="id"/><input type="hidden" name="allowComment" value="true" id="allow_comment"/><input type="hidden" name="content"  id="content-editor"/><div class="form-group col-md-6" style="padding: 0 10px 0 0;"><input type="text" class="form-control" placeholder="請輸入文章標題（必須）" th:value="${article.title}" name="title" required="required" aria-required="true"/></div><div class="form-group col-md-6" style="padding: 0 10px 0 0;"><input name="tags" id="tags" type="text" class="form-control" th:value="${article.tags}" placeholder="請輸入文章標簽" /></div><div class="clearfix"></div><div id="md-container" class="form-group"><textarea id="md-editor" th:text="${article.content}"></textarea></div><div class="clearfix"></div><div class="text-right"><a class="btn btn-default waves-effect waves-light" href="/admin/list">返回列表</a><button type="button" id="saveBtn" class="btn btn-primary waves-effect waves-light" >保存文章</button></div>
</form>

點擊保存文章按鈕事件

        $("#saveBtn").click(function(){$("#content-editor").val(mditor.value)$.ajax({type: 'post',url: '/article/saveOrUpdate',data: $("#articleForm").serialize(),async: true,dataType: 'json',success: function (result) {if(result.code == 0){alert("文章發布成功");window.location.href="/admin/list";}else{alert(result.msg)}console.log(result)}});});

點擊文章編輯按鈕代碼

 <a th:href="${'/admin/edit/'+article.id}" class="btn btn-primary btn-sm waves-effect waves-light m-b-5"><i class="fa fa-edit"></i> <span>編輯</span></a>

點擊發布文章菜單，編輯文章內容保存

保存成功在文章列表可查詢到

編輯文章的回顯效果

文章刪除實現

首先，在ArticleController.java 中 添加 delete 方法

    @RequestMapping("/delete")@ResponseBodypublic AjaxResult delete(Long id){articleService.removeById(id);return AjaxResult.success();}

然后添加文章列表刪除按鈕代碼，當點擊刪除按鈕執行 delArticle 方法腳本

<td><a th:href="${'/admin/edit/'+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" th:href="${'/article/'+article.id}" ><i class="fa fa-rocket"></i> <span>預覽</span></a>
</td>

delArticle 方法腳本

        function delArticle(id) {if(confirm('確定刪除該文章嗎?')){$.ajax({type:'post',url : '/article/delete',data: {id:id},dataType: 'json',success: function (result) {if (result.code==0) {window.alert("文章刪除成功");window.location.reload();} else {window.alert(result.msg || '文章刪除失敗')}}});}}

點擊刪除，提示確認刪除？，確定刪除成功后重新加載當前頁面