博客项目学习笔记十七：用户中心（我发布的帖子）

博客项目目录： 请戳这里

准备

需求：用户登录后，进入用户中心页面，显示如下信息，当点击“加载更多”，会把当前页的下一页加载出来。

1.引入index.ftl与mess.ftl

• 从fly-3.0\html\user目录下，将index.html和message.ftl拷贝到项目user目录下
• 重命名为index.ftl和mess.ftl

2.将layout模板填充到index.ftl和mess.ftl

3.提取左边侧边栏到common.ftl

设置一个level标签，当level为0时，“我的主页”为高亮状态；当level为1时，“用户中心”为高亮状态；当level为2时，“基本设置”为高亮状态；当level为3时，“我的消息”为高亮状态。

<#--用户中心左侧-->
<#macro centerLeft level>
    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
        <li class="layui-nav-item <#if level == 0> layui-this</#if>">
            <a href="/user/home">
                <i class="layui-icon">&#xe609;</i>
                我的主页
            </a>
        </li>
        <li class="layui-nav-item <#if level == 1> layui-this</#if>">
            <a href="/user/index">
                <i class="layui-icon">&#xe612;</i>
                用户中心
            </a>
        </li>
        <li class="layui-nav-item <#if level == 2> layui-this</#if>">
            <a href="/user/set">
                <i class="layui-icon">&#xe620;</i>
                基本设置
            </a>
        </li>
        <li class="layui-nav-item <#if level == 3> layui-this</#if>">
            <a href="/user/mess">
                <i class="layui-icon">&#xe611;</i>
                我的消息
            </a>
        </li>
    </ul>
</#macro>

将标签应用到具体的页面，比如用户中心：

4.在controller层添加对应方法

    //用户中心
    @GetMapping("/user/index")
    public String index() {
        return "/user/index";
    }

    //我的消息
    @GetMapping("/user/mess")
    public String mess() {
        return "/user/mess";
    }

测试用户中心：

测试我的消息：

5.controller层获取我发表的帖子

	//我发表的帖子
    @ResponseBody
    @GetMapping("/user/public")
    public Result userP() {
        IPage page = postService.page(getPage(), new QueryWrapper<Post>()
                .eq("user_id", getProfileId())
                .orderByDesc("created"));

        return Result.success(page);
    }

6.完成“加载更多”功能

主要用到了layui的laytpl 和flow，首先通过laytpl获取我发表的帖子的数据，渲染到前端，然后通过flow实现动态加载，当前页小于总页数时，会将数据一页一页地加载，点击加载更多，会触发下一页的加载。

1. 填入标签

   <div class="layui-tab-item layui-show" id="fabu">
      <script id="tpl-fabu" type="text/html">
        <ul class="mine-view jie-row">
          <li>
            <a class="jie-title" href="/post/{{d.id}}" target="_blank">{{ d.title }}</a>
            <i>{{layui.util.toDateString(d.created, 'yyyy-MM-dd HH:mm:ss')}}</i>
            <a class="mine-edit" href="/post/edit?id={{d.id}}">编辑</a>
            <em>{{d.viewCount}}阅/{{d.commentCount}}答</em>
          </li>
        </ul>
      </script>
      <div id="LAY_page"></div>
   </div>
   

2. 重写flow函数

   <script>
   
         layui.use(['laytpl', 'flow', 'util'], function() {
             var $ = layui.jquery;
             var laytpl = layui.laytpl;
             var flow = layui.flow;
             var util = layui.util;
   
             flow.load({
                 elem: '#fabu' //指定列表容器
                 ,isAuto: false
                 ,done: function(page, next){
                     var lis = [];
   
                     $.get('/user/public?pn='+page, function(res){
                         layui.each(res.data.records, function(index, item){
   
                             var tpl = $("#tpl-fabu").html();
                             laytpl(tpl).render(item, function (html) {
                                 $("#fabu .layui-flow-more").before(html);
                             });
                         });
   
                         next(lis.join(''), page < res.data.pages);
                     });
                 }
             });
   
         });
       layui.cache.page = 'user';
     </script>
   
   

7.测试

进入用户中心：

点击加载更多：

再次点击加载更多：

参考资料：

https://github.com/MarkerHub/eblog