Mr丶冷文

文章 分类 评论
117 10 6310

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

(十三)首页展示及公共部分展示

MR丶冷文 2022-10-11 194 0条评论 个人博客项目视频教程 javaspringboot个人博客

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

说明

上节课我们把页面还有公共部分做了抽取,这节课就把首页展示的东西以及公共区域展示的东西处理一下

公共部分

  • 定义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>

评论(0)

最新评论

  • 阿伟

    拿下

  • 阿伟

    我looklook

  • 阿伟

    拿下

  • 阿伟

    来了

  • 阿伟

    下载

日历

2023年02月

   1234
567891011
12131415161718
19202122232425
262728    

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭