（十二）前台页面的导入及公共数据的配置

文章	分类	评论
125	10	8392

说明

管理后台我们几乎已经完成了，只差评论管理还有控制台的信息展示了，那里等我们把前台做完再做，因为那两个功能中有些功能依赖了前台的交互

文章编辑页的处理

上节课忘了说，这节课补充一下

当页面为新增时返回新增文章

model.addAttribute("title", Objects.isNull(article.getId()) ? "创建新文章" : "编辑 " + article.getTitle());

当页面为编辑页面时返回编辑+文章标题

<title th:text="${title}">新增文章</title>
<h3 style="margin-bottom: 30px;text-align: center" th:text="${title}"></h3>

页面素材

素材介绍

error.html：错误页面
category.html：分类大全页面
detail.html：文章详情页面
index.html：首页
list.html：列表页
tags.html：标签页
/static/：静态资源

素材导入

将静态资源/static/目录复制到项目的static/目录中
将页面直接复制到templates文件夹下

站点配置

我们创建一个站点配置类，因为我们这是一个个人博客，我们就没有必要去把用户信息保存到数据库里了，因为只有我们一个用户，所以我这里采用配置文件的方式配置

站点配置类的类名为WebSite，属性列表如下(只写这节课我们用到的，后面用到的我们慢慢来补充)：

属性	备注	类型
title	站点名称	String
keywords	SEO的关键字	List
description	SEO的站点描述	String
nickname	站长昵称	String
address	站长坐标	String
tags	站长标签	List
navdesc	标题栏的一句话	String
qq	qq	String
github	github	String
sina	新浪微博	String
mail	邮箱	String
footer	footer部分	String
logo	主页的大logo	String

在yml文件做补充相应的配置并使用@ConfigurationProperties注解初始化配置类

package cn.kevinlu98.common;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import java.util.List;

/**
 * Author: Mr丶冷文
 * Date: 2022/10/10 15:40
 * Email: kevinlu98@qq.com
 * Description: 站点配置类
 */
@Data
@Component
@ConfigurationProperties(prefix = "website")
public class WebSite {
    private String title;
    private List<String> keywords;
    private String description;
    private String nickname;
    private String address;
    private List<String> tags;
    private String navdesc;
    private String qq;
    private String github;
    private String sina;
    private String mail;
    private String footer;
    private String logo;
}

website:
  title: 冷文学习者
  keywords:
    - typecho
    - freewind
    - java
    - 程序员
    - springboot
    - 学习
    - 自学
    - 冷文学习者
    - 冷文图床
  description: 冷文学习者(KEVINLU98.COM)，记录一个北漂小码农的日常业余生活
  avatar: https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2042/ad0278954bd84793b809913c3ded4592.jpg
  nickname: Mr丶冷文
  address: 北京 昌平
  tags:
    - java
    - springboot
    - 大数据
    - 网页设计
    - php爱好者
  navdesc: 让崇拜从这里开始，用代码做点好玩的事件，让每一天都变的充实起来
  qq: 1628048198
  github: https://github.com/kevinlu98?tab=repositories
  sina: https://weibo.com/lengwenboke
  mail: kevinlu98@qq.com
  logo: /static/image/logo.png
  footer: '© 2019-2020 <a href="/">冷文学习者</a> <a target="_blank" href="https://beian.miit.gov.cn">陕ICP备19024566-1号</a>
<a style="margin-left: 10px" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402012109"><img style="vertical-align: top;" src="https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2046/d4ab98835b8842c88eededac6e7c9e35.png">京公网安备
    11011402012109号</a>'

定义页面路由

package cn.kevinlu98.controller;

import cn.kevinlu98.common.WebSite;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

/**
 * Author: Mr丶冷文
 * Date: 2022/10/10 15:56
 * Email: kevinlu98@qq.com
 * Description:
 */
@Controller
public class IndexController {

  @GetMapping("/")
  public String index() {
    return "index";
  }

  @GetMapping("/list")
  public String list() {
    return "list";
  }

  @GetMapping("/category")
  public String category() {
    return "category";
  }
  @GetMapping("/tags")
  public String tags() {
    return "tags";
  }
  @GetMapping("/error")
  public String error() {
    return "error";
  }
  @GetMapping("/{id}.html")
  public String detail(@PathVariable Integer id) {
    return "detail";
  }
}

完成公共页面的抽取

header

<head th:fragment="header(title,link,style)">
  <meta charset="UTF-8">
  <title th:replace="${title}">Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" th:content="${@webSite.description}">
  <meta name="keywords" th:content="${T(java.lang.String).join(',',@webSite.keywords)}">
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/plugin/font-awesome/css/font-awesome.min.css">
  <th:block th:replace="${link}"></th:block>
  <!-- 自定义css文件 -->
  <link rel="stylesheet" href="/static/css/style.css">
  <th:block th:replace="${style}"></th:block>
</head>

nav

qq打开聊天窗口

tencent://message/?uin=1628048198&amp;Site=&amp;menu=yes

打开邮我

http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=kevinlu98@qq.com

<th:block th:fragment="nav">
  <nav class="lw-md-show">
    <div class="lw-container lw-header lw-posr ">
      <div class="lw-logo lw-fl">
        <a href="/">
          <img th:src="${@webSite.logo eq null or @webSite.logo.length() <= 0}?'/static/image/logo.png':${@webSite.logo}" alt="冷文的个人博客">
        </a>
      </div>
      <span th:text="${@webSite.navdesc}"></span>
      <div class="lw-fr lw-linkme">
        <a target="_blank" th:href="${T(java.lang.String).format('tencent://message/?uin=%s&amp;Site=&amp;menu=yes',@webSite.qq)}"><i class="fa fa-qq" aria-hidden="true"></i></a>
        <a target="_blank" th:href="${@webSite.github}"><i class="fa fa-github" aria-hidden="true"></i></a>
        <a target="_blank" th:href="${@webSite.sina}"><i class="fa fa-weibo" aria-hidden="true"></i></a>
        <a target="_blank" th:href="${'http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email='+@webSite.mail}"><i class="fa fa-envelope" aria-hidden="true"></i></a>
      </div>
      <div class="lw-nav lw-posa">
        <a href="/"><i class="fa fa-home" aria-hidden="true"></i>首页</a>
        <a href="#">技术分享</a>
        <a href="#">闲言碎语</a>
        <a href="#">个人随笔</a>
        <a href="#"><i class="fa fa-users" aria-hidden="true"></i>友情链接</a>
        <a href="#"><i class="fa fa-user" aria-hidden="true"></i>关于我</a>
        <a href="#"><i class="fa fa-edit" aria-hidden="true"></i>留言板</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>
    </div>


  </nav>
  <div class="lw-md-hidden lw-phone-header">
    <a href="javascript:void(0)" class="lw-posa lw-phone-topbtn lw-search-show lw-search-btn"><i
                                                                                                 class="fa fa-search"></i></a>
    <a class="lw-index" href="/"><h1>冷文学习者</h1></a>
  </div>
  <div class="lw-md-hidden" style="height: 100px;"></div>
</th:block>

footer

<th:block th:fragment="footer">
  <div class="lw-friend-link">
    <div class="lw-container">
      <h2>友情链接</h2>
      <a href="">冷文学习者</a>
      <a href="">冷文博客</a>
      <a href="">冷文聊编程</a>
      <a href="">GetHub</a>
      <a href="">CSDN</a>
      <a href="">百度一下</a>
      <a href="">新浪微博</a>
      <a href="">谷歌搜索</a>
      <a href="">知乎</a>
      <a href="">掘金</a>
    </div>
  </div>
  <footer th:utext="${@webSite.footer}"></footer>
  <div class="lw-mask" id="lw-search-box">
    <div class="lw-search-conetnt">
      <a href="javascript:void(0)" class="lw-search-close lw-posa"><i class="fa fa-close"></i></a>
      <div class="lw-search-input lw-posr">
        <form action="" method="post">
          <input type="text" placeholder="请输入搜索关键字...">
          <button class="lw-posa"><i class="fa fa-search lw-mr5"></i>搜索</button>
        </form>
      </div>
      <p>推荐关键字：
        <a href="javascript:void (0)">独立下载</a>
        <a href="javascript:void (0)">评论通知</a>
        <a href="javascript:void (0)">点赞</a>
        <a href="javascript:void (0)">非插件</a>
        <a href="javascript:void (0)">tp5</a>
        <a href="javascript:void (0)">ajax</a>
        <a href="javascript:void (0)">json</a>
        <a href="javascript:void (0)">IO模型</a>
        <a href="javascript:void (0)">跨域</a>
        <a href="javascript:void (0)">javascript</a>
        <a href="javascript:void (0)">springboot</a>
        <a href="javascript:void (0)">视频剪辑</a>
        <a href="javascript:void (0)">后期</a>
        <a href="javascript:void (0)">个人随笔</a>
      </p>
    </div>
  </div>
  <script src="/static/plugin/jquery/jquery-3.5.1.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
  <script src="/static/plugin/swiper-bundle/swiper-bundle.min.js"></script>
  <script src="/static/js/main.js"></script>
</th:block>

Right

<th:block th:fragment="right">
  <div class="lw-right-item lw-profile">
    <div class="lw-avatar-content lw-posr"
         style="background-image:url(/static/image/5-120601094K3-50.gif);">
      <div class="lw-avatar lw-posa">
        <img th:src="${@webSite.avatar}" src="/static/image/avatar.jpeg" alt="">
      </div>
    </div>
    <ul class="lw-info">
      <li><span>博主</span><th:block th:text="${@webSite.nickname}"></th:block> </li>
      <li><span>坐标</span><th:block th:text="${@webSite.address}"></th:block></li>
      <li><span>标签</span><th:block th:text="${T(java.lang.String).join('、',@webSite.tags)}"></th:block></li>
    </ul>
  </div>
  <div class="lw-right-item lw-right-hot">
    <h4><i class="fa fa-fire lw-mr5" aria-hidden="true"></i>热门文章</h4>
    <ul class="lw-hot-list">
      <li>
        <a href="#">
          <div class="lw-hot-img">
            <span class="label label-danger lw-posa">1</span>
            <img src="/static/image/1.jpg" alt="">
          </div>
          <p class="lw-hot-title">Freewind主题编辑器展示</p>
          <p class="lw-hot-info"><i class="fa-solid fa-fire-flame-curved"></i> 65580 </p>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="lw-hot-img">
            <span class="label label-warning lw-posa">2</span>
            <img src="/static/image/2.jpg" alt="">
          </div>
          <p class="lw-hot-title">Conda虚拟环境使用</p>
          <p class="lw-hot-info"><i class="fa-solid fa-fire-flame-curved"></i> 56283 </p>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="lw-hot-img">
            <span class="label label-info lw-posa">3</span>
            <img src="/static/image/3.jpg" alt="">
          </div>
          <p class="lw-hot-title">纯 CSS 图片碎裂动画教程</p>
          <p class="lw-hot-info"><i class="fa-solid fa-fire-flame-curved"></i> 52213 </p>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="lw-hot-img">
            <span class="label label-default lw-posa">4</span>
            <img src="/static/image/4.jpg" alt="">
          </div>
          <p class="lw-hot-title">Spring Boot 3.0 M1 发布</p>
          <p class="lw-hot-info"><i class="fa-solid fa-fire-flame-curved"></i> 23132 </p>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="lw-hot-img">
            <span class="label label-default lw-posa">5</span>
            <img src="/static/image/5.jpg" alt="">
          </div>
          <p class="lw-hot-title">异步上传文件显示进度条</p>
          <p class="lw-hot-info"><i class="fa-solid fa-fire-flame-curved"></i> 12322 </p>
        </a>
      </li>
    </ul>
  </div>
  <div class="lw-right-item lw-tag-cloud">
    <h4><i class="fa fa-tags lw-mr5" aria-hidden="true"></i>标签云</h4>

    <a href="https://www.kevinlu98.cn/tag/freewind/" title="freewind">
      freewind</a>
    <a href="https://www.kevinlu98.cn/tag/typecho/" title="typecho">
      typecho</a>
    <a href="https://www.kevinlu98.cn/tag/%E6%8F%92%E4%BB%B6/" title="插件">
      插件</a>
    <a href="https://www.kevinlu98.cn/tag/emlog/" title="emlog">
      emlog</a>
    <a href="https://www.kevinlu98.cn/tag/java/" title="java">
      java</a>
    <a href="https://www.kevinlu98.cn/tag/%E4%B8%BB%E9%A2%98/" title="主题">
      主题</a>
    <a href="https://www.kevinlu98.cn/tag/%E8%87%AA%E7%94%B1%E4%B9%8B%E9%A3%8E/" title="自由之风">
      自由之风</a>
    <a href="https://www.kevinlu98.cn/tag/%E5%9B%BE%E5%BA%8A/" title="图床">
      图床</a>
    <a href="https://www.kevinlu98.cn/tag/%E5%86%B7%E6%96%87%E5%9B%BE%E5%BA%8A/" title="冷文图床">
      冷文图床</a>
    <a href="https://www.kevinlu98.cn/tag/markdown/" title="markdown">
      markdown</a>
    <a href="https://www.kevinlu98.cn/tag/gitee/" title="gitee">
      gitee</a>
    <a href="https://www.kevinlu98.cn/tag/springboot/" title="springboot">
      springboot</a>
    <a href="https://www.kevinlu98.cn/tag/linux/" title="linux">
      linux</a>
    <a href="https://www.kevinlu98.cn/tag/mac/" title="mac">
      mac</a>
    <a href="https://www.kevinlu98.cn/tag/%E5%AD%A6%E4%B9%A0/" title="学习">
      学习</a>
    <a href="https://www.kevinlu98.cn/tag/python/" title="python">
      python</a>
    <a href="https://www.kevinlu98.cn/tag/conda/" title="conda">
      conda</a>
    <a href="https://www.kevinlu98.cn/tag/%E7%9B%B8%E5%86%8C/" title="相册">
      相册</a>
    <a href="https://www.kevinlu98.cn/tag/jsDelivr/" title="jsDelivr">
      jsDelivr</a>
    <a href="https://www.kevinlu98.cn/tag/cdn/" title="cdn">
      cdn</a>
    <a href="https://www.kevinlu98.cn/tag/codemirror/" title="codemirror">
      codemirror</a>
    <a href="https://www.kevinlu98.cn/tag/freedom/" title="freedom">
      freedom</a>
    <a href="https://www.kevinlu98.cn/tag/%E8%85%BE%E8%AE%AFcos/" title="腾讯cos">
      腾讯cos</a>
    <a href="https://www.kevinlu98.cn/tag/cos/" title="cos">
      cos</a>
    <a href="https://www.kevinlu98.cn/tag/%E7%A7%81%E4%BA%BA%E5%9B%BE%E5%BA%8A/" title="私人图床">
      私人图床</a>
    <a href="https://www.kevinlu98.cn/tag/%E6%AC%A2%E8%BF%8E%E9%A1%B5/" title="欢迎页">
      欢迎页</a>
    <a href="https://www.kevinlu98.cn/tag/%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C/" title="登录注册">
      登录注册</a>
    <a href="https://www.kevinlu98.cn/tag/%E6%95%99%E7%A8%8B%E4%B8%8B%E8%BD%BD/" title="教程下载">
      教程下载</a>
    <a href="https://www.kevinlu98.cn/tag/itjc8/" title="itjc8">
      itjc8</a>
    <a href="https://www.kevinlu98.cn/tag/%E8%99%9A%E6%8B%9F%E6%9C%BA/" title="虚拟机">
      虚拟机</a>

  </div>
</th:block>