博客项目目录：请戳这里

准备

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

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"></i>我的主页</a></li><li class="layui-nav-item <#if level == 1> layui-this</#if>"><a href="/user/index"><i class="layui-icon"></i>用户中心</a></li><li class="layui-nav-item <#if level == 2> layui-this</#if>"><a href="/user/set"><i class="layui-icon"></i>基本设置</a></li><li class="layui-nav-item <#if level == 3> layui-this</#if>"><a href="/user/mess"><i class="layui-icon"></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实现动态加载，当前页小于总页数时，会将数据一页一页地加载，点击加载更多，会触发下一页的加载。

填入标签

<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>

重写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

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

博客项目学习笔记十二：登录注册功能（登录）
博客项目目录: 请戳这里准备需求:实现用户登录功能,登录之后,跳转到首页,并且页面信息由游客状态变为用户状态 1.引入shiro依赖包 <dependency><groupId& ...
springboot+jwt+shiro+vue+elementUI+axios+redis+mysql完成一个前后端分离的博客项目（笔记,帮填坑）
根据B站up主MarkerHub视频制作的一个笔记我的博客 B站博主链接: https://www.bilibili.com/video/BV1PQ4y1P7hZ?p=1 博主的开发文档: http ...
基于Springboot搭建个人博客（学习笔记）
个人博客搭建技术选型主要框架安装 RabbitMq,Elasticsearch 安装RabbitMq 安装环境下载安装包安装配置 erlang 安装配置 rabbitMQ 验证安装Elas ...
博客阅读学习笔记-目录
C语言__attribute__的使用 LoyenWang博客园 - 虚拟化技术 jasonactions博客园 -armv8学习
达达博客项目-学习笔记，B站达内项目实战
前后端分离优点: 1.各司其职前端:视觉层面,兼容性,前端性能优化后端:高并发,高可用,性能 2.解耦,前端后端均易于扩展 3.后端灵活搭配各类前端 4.提高用户体验 5.并行开发,提高开发效率htt ...
NET使用ABP框架搭建博客项目（二）用户模块
首先我们先来设计下用户模块,简单用户模块设计涵盖两个类,用户表以及角色表.如下图: 我们在Core项目中增加一个文件夹Domain,在Domain增加Customers文件夹,添加一个枚举Passwo ...
【UE4 C++】博客目录 / 学习笔记汇总
UE4 概念知识基础概念:文件结构.类型.反射.编译.接口.垃圾回收.序列化[导图] GamePlay架构[导图] 类的继承层级关系[导图] Actor 的生命周期[官方文档] 虚幻引擎运行流程渲 ...
CSS基础汇总——点击标题跳转详细博客【学习笔记】
CSS 网页的美容师理想中的结果: 结构(html)与样式(css)相分离 1.引入CSS样式表(书写位置) 行内式(内联样式) : <标签名 style="属性1:属性值1; 属性 ...
Python个人博客项目-3.用户应用开发
学习Python已经6年有余,从事的行业数据分析师,算法工程师.爬虫工程师.目前准备正式入行全栈,先做一个个人的博客系统,用来记录日常工作的每一天,也是为自己做一个展示自己的空间. 本身该项目与之前的 ...

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

准备