layui登录页面模板_（eblog）6、博客分类填充、登录注册逻辑

小Hub领读：

继续我们的eblog，今天来完成博客分类的展示，还有登录注册！

---

项目名称：eblog

项目 Git 仓库：https://github.com/MarkerHub/eblog(给个 star 支持哈)

项目演示地址：https://markerhub.com:8082

前几篇项目讲解文章：

1、(eblog)Github 上最值得学习的 Springboot 开源博客项目！

2、(eblog)小 Hub 手把手教你如何从 0 搭建一个开源项目架构

3、(eblog)整合Redis，以及项目优雅的异常处理与返回结果封装

4、(eblog)用Redis的zset有序集合实现一个本周热议功能

5、(eblog)自定义Freemaker标签实现博客首页数据填充

---

这一次作业我们来完善一下首页中的内容，比如我们的首页文章列表，首页导航分类，分类列表，文章详情。

同时，上一期的作业中我写了不少bug，然后我又偷偷改了很多，都是比较细的，我可能不会全部都写出来，大家如果不知道我改了哪里，有两个办法：

• 1、看git的提交记录，点击一下文件就有对比出来

• 2、运行我的项目和你的项目，链接统一数据库，判断页面的内容显示和功能是否一致，不一致说明我已经偷偷改了一些不为人知的bug了。

1、首页内容填充

列表分页

这里说的列表分页讲得是首页的内容列表，可以看到列表内容每一行的内容其实和置顶的列表是一致的，所以原来的sql我们是可以再应用。包括后面我们点击具体导航分类的列表也是一致的。内容一致，我们就可以想到，首先前端的列表我们可以单独提出来作为一个模板，这样所有的地方都只修改一次，可以控制所有的地方了。

然后后端的处理方式有两种：

• 1、延用我们freemarker标签的方式

• 2、使用controller中传送数据到前端

标签的方式我们之前已经学习过了，那么我们这次在controller中再提交数据到前端。

首先来看下首页的controller

@RequestMapping({ "", "/", "/index"})

public String index () {

IPage results = postService.paging(getPage(), null, null, null, null, "created");

req.setAttribute("pageData", results);

return "index";

}

上面的postService.paging就是我们之前写过的，只不过参数又多了几个，我偷偷改的。给你看看最新的版本吧

@Override

@Cacheable(cacheNames = "cache_post", key = "'page_' + #page.current + '_' + #page.size " +

"+ '_query_' +#userId + '_' + #categoryId + '_' + #level + '_' + #recommend + '_' + #order")

public IPage paging(Page page, Long userId, Long categoryId, Integer level, Boolean recommend, String order) {

if(level == null) level = -1;

QueryWrapper wrapper = new QueryWrapper<Post>()

.eq(userId != null, "user_id", userId)

.eq(categoryId != null && categoryId != 0, "category_id", categoryId)

.gt(level > 0, "level", 0)

.eq(level == 0, "level", 0)

.eq(recommend != null, "recommend", recommend)

.orderByDesc(order);

IPage<PostVo> pageData = postMapper.selectPosts(page, wrapper);

return pageData;

}

其实就是加多了几个参数，为了应付更多的场景。回到刚才说的index方法，有个getPage()我写在了BaseController，这是分页数据的获取封装，获取前端的分页信息，然后封装成poge对象。然后给一下参数默认值。

public Page getPage() {

int pn = ServletRequestUtils.getIntParameter(req, "pn", 1);

int size = ServletRequestUtils.getIntParameter(req, "size", 10);

Page page = new Page(pn, size);

return page;

}

然后可以看到index中，我传了个pageData对象到前端，我们再看看前端。

class="fly-list">

@listing>

#list>

找找中间的内容部分，然后写成了上面那样，因为我把记录列表封装成了宏(macro) 

具体的内容就是这样

href="${base}/user/${post.authorId}" class="fly-avatar">

src="${post.authorAvatar}" alt="${post.authorName}">

class="layui-badge">${post.categoryName}

href="${base}/post/${post.id}">${post.title}

class="fly-list-info">

href="${base}/user/${post.authorId}" link>

${post.authorName}

class="layui-badge fly-badge-vip">VIP${post.authorVip}

${post.created?string('yyyy-MM-dd')}

class="fly-list-nums">

class="iconfont icon-pinglun1" title="回答"> ${post.commentCount}

class="fly-list-badge">

class="layui-badge layui-bg-black">置顶#if>

class="layui-badge layui-bg-red">精帖#if>

#macro>

关于freemarker标签macro的用法，不懂的就去百度一下啦，貌似之前我们说过是不是？忘了~

...#macro>

代表定义了一个macro名词叫listing，参数是post，标签内容就是宏的内容。需要调用这个宏的地方直接使用标签就可以，所以你就看到了我刚才的写法。