SpringBoot文章管理

文章目录

一、仪表盘内容

二、文章发布

三、文章编辑和删除

---

一、仪表盘内容

并做如下要求 ：

1、仪表盘可以看到文章标题

2、仪表盘显示内容信息,如统计的文章总数、留言总数以及最新文章、最新留言，每发布一篇文章        或留言仪表盘文章或留言总数就增加一篇实时更新

3、列表显示最新文章和留言信息，点击可跳转查看文章及留言内容信息

4、文章标题内容限制25 字符，文章内容限制100字符

5、文章及留言按发布时间进行排序展示

6、最新文章显示限制5篇，最新留言显示限制10篇

7、在文章中留言会显示留言者的评论账号、头像、评论时间、评论内容

8、查看文章后观看浏览量会增加

二、文章发布

并做如下要求 ：

1、发布文章页面有文章标题及文章标签文章内容及文章预览区域

2、发布文章标题不得超过25字

3、发布文章内容不能少于100个字符否则会报错提示语：文章内容不能少于100个字

4、测试发布文章时标题留空

5、测试发布文章内容只有99字符时

6、点击文章发布有相关提示语，如:当文章标题超过25字符时会提示： 文章标题不能超过25字符！当文章内容少于100字符时会提示：文章内容不得少于100字符！

7、在文章中留言会显示留言者的评论账号、头像、评论时间、评论内容

三、文章编辑和删除

并做如下要求 ：

1、文章管理页面显示文章信息如：发布的文章、发布的时间、浏览量、分类、编辑和删除等

2、文章排序：按文章的发布时间进行排序展示

3、页面限制显示10篇文章

4、辑文章标题不能超过25字符！

5、编辑文章内容不得少于100字符！

6、文章有分页功能，每10篇一页

7、点击编辑跳转至发布文章页面进行文章编辑也需遵守上述规则：文章标题不能超过25字符！文章内容不得少于100字符！满足其条件可随意编辑已有文章、编辑完保存即可

8、编辑文章内容不会影响文章总数和排序

9、文章删除功能相对比较简单，既有一个点击删除会有一个二次确认删除该文章吗？

推荐文章列表
前端只需要4篇最新的推荐文章，只要显示博客标题、首图信息。(还需要判断是否为推荐文章)

（根据前端需要的查询的内信息字段）定义一个VO，RecommendBlog实体类，代码如下：（省去get、set、toString、构造）。

在BlogDao下添加接口
   

mapper文件
在mapper文件夹下的BlogDao.xml文件中添加如下SQL：

在BlogService接口下添加
    //获取所有推荐文章

在BlogServiceImpl接口实现类添加 @Override

controller控制器编写
在controller包下的创建IndexController类，编写如下代码：

JS部分：

  

var mditor;
var tale = new $.tale();
var attach_url = $('#attach_url').val();
// 每10分钟自动保存一次草稿
// var refreshIntervalId = setInterval("autoSave()", 10 * 60 * 1000);
Dropzone.autoDiscover = false;

$(document).ready(function () {

    mditor = window.mditor = Mditor.fromTextarea(document.getElementById('md-editor'));

    // Tags Input
    $('#tags').tagsInput({
        width: '100%',
        height: '35px',
        defaultText: '请输入文章标签'
    });

    $('.toggle').toggles({
        on: true,
        text: {
            on: '开启',
            off: '关闭'
        }
    });

    $("#multiple-sel").select2({
        width: '100%'
    });

    $('div.allow-false').toggles({
        off: true,
        text: {
            on: '开启',
            off: '关闭'
        }
    });

    if($('#thumb-toggle').attr('thumb_url') != ''){
        $('#thumb-toggle').toggles({
            off: true,
            text: {
                on: '开启',
                off: '关闭'
            }
        });
        $('#thumb-toggle').attr('on', 'true');
        $('#dropzone').css('background-image', 'url('+ $('#thumb-container').attr('thumb_url') +')');
        $('#dropzone').css('background-size', 'cover');
        $('#dropzone-container').show();
    } else {
        $('#thumb-toggle').toggles({
            off: true,
            text: {
                on: '开启',
                off: '关闭'
            }
        });
        $('#thumb-toggle').attr('on', 'false');
        $('#dropzone-container').hide();
    }

    var thumbdropzone = $('.dropzone');
});

/**
 * 保存文章
 * @param status
 */
function subArticle(status) {
    var title = $('#articleForm input[name=title]').val();
    var content =  mditor.value;
    if (title == '') {
        tale.alertWarn('请输入文章标题');
        return;
    }
    if (title .length>25) {
        tale.alertWarn('文章标题不能超过25个字符！');
        return;
    }
    if (content == '') {
        tale.alertWarn('请输入文章内容');
        return;
    }
    if (content .length < 100) {
        tale.alertWarn('文章内容不能少于100个字符！')
        return;
    }
    $('#content-editor').val(content);
    $("#articleForm #status").val(status);
    $("#articleForm #categories").val($('#multiple-sel').val());
    var params = $("#articleForm").serialize();
    var url = $('#articleForm #id').val() != '' ? '/admin/article/modify' : '/admin/article/publish';
    tale.post({
        url:url,
        data:params,
        success: function (result) {
            if (result && result.success) {
                tale.alertOk({
                    text:'文章保存成功',
                    then: function () {
                        setTimeout(function () {
                            window.location.href = '/admin/article';
                        }, 500);
                    }
                });
            } else {
                tale.alertError(result.msg || '保存文章失败！');
            }
        }
    });
}

function allow_comment(obj) {
    var this_ = $(obj);
    var on = this_.find('.toggle-on.active').length;
    var off = this_.find('.toggle-off.active').length;
    if (on == 1) {
        $('#allow_comment').val(false);
    }
    if (off == 1) {
        $('#allow_comment').val(true);
    }
}