基于 Spring Boot 博客系统开发（十）

基于 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 {

    @Autowired
    private IArticleService articleService;

    @RequestMapping("/saveOrUpdate")
    @ResponseBody
    public 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")
    @ResponseBody
    public 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 || '文章删除失败')
                        }
                    }
                });
            }
        }

点击删除，提示确认删除？，确定删除成功后重新加载当前页面