Mr丶冷文

文章 分类 评论
117 10 6310

站点介绍

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

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

MR丶冷文 2022-10-10 197 6条评论 个人博客项目视频教程 javaspringboot个人博客博客系统

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

发布于2022-10-28

说明

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

文章编辑页的处理

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

  • 当页面为新增时返回新增文章
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
keywordsSEO的关键字List
descriptionSEO的站点描述String
nickname站长昵称String
address站长坐标String
tags站长标签List
navdesc标题栏的一句话String
qqqqString
githubgithubString
sina新浪微博String
mail邮箱String
footerfooter部分String
logo主页的大logoString

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>

对不起,作者设置了附件 回复可见

评论(6)

  1. 云上天 游客 2022-11-03 17:28 回复

    嘀嘀嘀

  2. 配角 游客 2022-10-21 22:02 回复

    来了

  3. jzl 游客 2022-10-20 09:14 回复

    来了

  4. 寻路。 游客 2022-10-19 20:48 回复

    来了

  5. abc 游客 2022-10-12 15:22 回复

    感谢老师分享

  6. 自律 游客 2022-10-11 09:28 回复

    不错

最新评论

  • 阿伟

    拿下

  • 阿伟

    我looklook

  • 阿伟

    拿下

  • 阿伟

    来了

  • 阿伟

    下载

日历

2023年02月

   1234
567891011
12131415161718
19202122232425
262728    

文章目录

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