说明
上节课我们把页面还有公共部分做了抽取,这节课就把首页展示的东西以及公共区域展示的东西处理一下
公共部分
- 定义
IndexController
公共返回Model
@ModelAttribute
private void indexModel(Model model) {
// todo 可以在这里定义这个controller公用的model的属性
}
- 底部的友情链接
model.addAttribute("friendlies", friendlyService.list());
<div class="lw-container">
<h2>友情链接</h2>
<!--/*@thymesVar id="friendlies" type="java.util.List<cn.kevinlu98.pojo.Friendly>"*/-->
<a th:each="friendly:${friendlies}" target="_blank" th:href="${friendly.link}" th:text="${friendly.title}">冷文学习者</a>
</div>
- 顶部导航条部分
// Mapper层
List<Navigation> findAllByEnableOrderByOrderedAsc(Boolean enable);
//Service层
public List<Navigation> show() {
return mapper.findAllByEnableOrderByOrderedAsc(true);
}
//IndexModel
model.addAttribute("navigations", navigationService.show());
<div class="lw-nav lw-posa">
<a th:href="@{/}"><i class="fa fa-home" aria-hidden="true"></i>首页</a>
<!--/*@thymesVar id="navigations" type="java.util.List<cn.kevinlu98.pojo.Navigation>"*/-->
<a th:each="navigation:${navigations}" th:href="${navigation.link}"
th:target="${navigation.linkMode}?'_blank':''">
<i th:if="${navigation.icon.length()>0}" th:class="${'fa fa-'+navigation.icon}"></i>
<th:block th:text="${navigation.name}"></th:block>
</a>
<a href="javascript:void(0)" class="lw-fr lw-search-btn" style="padding: 0;">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</div>
- 右侧标签部分:我们希望这里可以随机展示30个标签,所以这里可以利用数据库的
order by rand()
来进行排序
//Mapper
@Query(value = "select * from blog_tag order by rand() limit ?1", nativeQuery = true)
List<Tag> findRandom(int length);
//Service
public List<Tag> list(int length) {
return mapper.findRandom(length);
}
//IndexModel
model.addAttribute("tags", tagService.list(30));
<div class="lw-right-item lw-tag-cloud">
<h4><i class="fa fa-tags lw-mr5" aria-hidden="true"></i>标签云</h4>
<!--/*@thymesVar id="tags" type="java.util.List<cn.kevinlu98.pojo.Tag>"*/-->
<a th:each="tag:${tags}" href="#" th:title="${tag.name}" th:text="${tag.name}"></a>
</div>
- 定义默认图片处理类:因为我们的文章有可能是没有封面的,所以我们来定义一个处理类处理一下封面为空的文章封面,给其一个默认图片,当然,默认图片我们也是要做成可配置的,我们可以自定义默认图片列表
package cn.kevinlu98.common;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
import org.thymeleaf.util.StringUtils;
import java.util.List;
/**
* Author: Mr丶冷文
* Date: 2022/10/11 11:54
* Email: kevinlu98@qq.com
* Description:
*/
@Component
@Data
@ConfigurationProperties(prefix = "default-image")
public class DefaultImage {
private List<String> images;
public String cover(String imgUrl) {
if (StringUtils.isEmptyOrWhitespace(imgUrl)) {
return images.get((int) (Math.random() * images.size()));
}
return imgUrl;
}
}
default-image:
images:
- /static/image/1.jpg
- /static/image/2.jpg
- /static/image/3.jpg
- /static/image/4.jpg
- /static/image/5.jpg
- 右侧的热门文章
// Mapper
@Query(value = "select * from blog_article where type = 1 and status = 1 order by views limit ?1", nativeQuery = true)
List<Article> hotList(int length);
//Service
public List<Article> hotList(int length) {
return mapper.hotList(length);
}
//IndexModel
model.addAttribute("hots", articleService.hotList(5));
<li th:each="hot,it:${hots}">
<a th:href="@{/{id}.html(id=${hot.id})}">
<div class="lw-hot-img">
<span class="label label-danger lw-posa" th:if="${it.index eq 0}">1</span>
<span class="label label-warning lw-posa" th:if="${it.index eq 1}">2</span>
<span class="label label-info lw-posa" th:if="${it.index eq 2}">3</span>
<span class="label label-default lw-posa" th:if="${it.index > 2}" th:text="${it.index+1}"></span>
<img th:src="${@defaultImage.cover(hot.cover)}" alt="">
</div>
<p class="lw-hot-title" th:text="${hot.title}"></p>
<p class="lw-hot-info"><i class="fa fa-eye lw-mr5"></i>
<th:block th:text="${hot.views}"></th:block>
</p>
</a>
</li>
- 轮播图的展示
@GetMapping("/")
public String index(Model model) {
model.addAttribute("banners",bannerService.list());
return "index";
}
<div th:each="banner:${banners}" class="swiper-slide lw-posr">
<img th:src="${banner.cover}" alt="" srcset="">
<div class="lw-banner-info lw-posa">
<a th:href="${banner.link}" target="_blank">
<h2 class="lw-text-hidden"><span class="label label-danger lw-mr5">站长推荐</span>
<th:block th:text="${banner.title}"></th:block>
</h2>
</a>
<p th:text="${banner.summary}"></p>
</div>
</div>
感谢分享
感谢分享
很简洁的博客~舒服~
搞这么多机器呢干啥。。。
感谢博主分享