springboot个人博客的构建（7）博客管理

博客管理页面也这样：

首先，登陆页面后。会进入

此时点击博客，会访问http://localhost:8080/admin/blogs。这个会触发模板中的

进入controller层：

 这里，我们先定义service层的东西，然后再分析blog页面。

Impl:

 

进入controller层：

渲染到前台分页的那个页面。

接下来我们看上一页，下一页的代码：

<input type="hidden" name="page" >

解释下上面的代码：这里自己定义一个 data-page，一种格式。但是这个thyemleaf不识别，所以得用th:attr="data-page

这种方式了。

function page(obj) {
    $("[name='page']").val($(obj).data("page"));
    loaddata();
}
这里面的上一页上一页都用了点击方法。后面的我们自定义data-page. 
val($(obj).data("page")这个是获取data下page的值也就是 data-page=${page.number}-1 

当你点击下一页的时候，会出发点击事件，function里面然后找到from表单下面的page然后传给后台controller层。

此时进行分页的查询，这个时候查询的时候就把搜索框里面那三个条件也带进去了。

但是我们在刷新页面得时候整个页面都要刷新，我们现在得目的是只刷新列表里面得，所以我们这样处理

我们去前台看看

 

再看看前台：blog list在一个DIV里面

看看按钮：

 

下面介绍这个整个流程

当点击按钮得时候，会跳到

$("#search-btn").click(function () {
    $("[name='page']").val(0);
    loaddata();
});

这个里面，然后再跳到

function loaddata() {//loaddata()加载数据，里面的动态获取表格数据
    $("#table-container").load(/*[[@{/admin/blogs/search}]]*/"/admin/blogs/search",{
        title : $("[name='title']").val(),
        typeId : $("[name='typeId']").val(),
        recommend : $("[name='recommend']").prop('checked'),
        page : $("[name='page']").val()
    });
}

然后跳到controller

然后跳到：

这个过程就是仅仅刷新了下面得列表，而没有经过form表单，所以上面得把from表单改成div就可以了。

现在我们要做的是：

 

 这里我们要service实现：

 

我们看前台的：

这样就可以渲染出来了