文章	分类	评论
125	10	8391

管理页面的导入及Thymeleaf配置

Thymeleaf的配置

在application.yml中加入thymeleaf的相关配置

  thymeleaf:
    # 关闭缓存 
    cache: false
    # 模版的前缀
    prefix: classpath:/templates/
    # 开启模版的本地check
    check-template-location: true
    # 模版的后缀
    suffix: .html
    # 模版的编码
    encoding: utf-8
    # 响应头的content-Type
    servlet:
      content-type: text/html
    # 模式H5
    mode: HTML5

创建模板目录templates
在templates下创建admin目录用于保存后台管理页面
创建静态资源目录static

更改static路由的路由为/static/

创建一个config的包
在该包下创建一个WebConfig.java的文件

在这个配置类的addResourceHandlers方法中加上路由配置

package cn.kevinlu98.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * Author: Mr丶冷文
 * Date: 2022/10/6 16:17
 * Email: kevinlu98@qq.com
 * Description:
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 创建static目录到/static/的路由
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }
}

拷贝素材blog-admin内容到项目中
- 素材的static目录拷贝到项目static 目录中
- 素材中的其它文件拷贝到项目的templates目录下
启动项目访问一下静态资源

定义后台路由

定义一个AdminController用于定义管理页面的Controller
创建index路由跳转到后台控制台
替换静态页面中的一些静态资源的路径

公共页面提取

创建一个common.html来存放页面公共部分的代码
在html标签上加上thymeleaf

<html xmlns:th="http://www.thymeleaf.org" lang="en">

抽取head部分的公共代码定义为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">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.min.css">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/static/plugin/bootstrap-table/bootstrap-table.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/admin/css/style.css">

    <th:block th:replace="${style}"></th:block>
</head>

抽取导航部分的公共代码定义为nav

<th:block th:fragment="nav(active)">
    <nav class="navbar navbar-default">
        <div class="container container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">博客后台</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li th:class="${active eq 'index'}?'active':''"><a href="#">控制台 <span
                            class="sr-only">(current)</span></a></li>
                    <li th:class="${active eq 'article'}?'active':''"><a href="#">文章管理</a></li>
                    <li><a href="#">分类管理</a></li>
                    <li><a href="#">轮播图管理</a></li>
                    <li><a href="#">页面管理</a></li>
                    <li><a href="#">友链管理</a></li>
                    <li><a href="#">评论管理</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">退出登录</a></li>
                    <li><a href="#">网站前台</a></li>
                </ul>
            </div>
        </div>
    </nav>
</th:block>

抽取底部代码与script的公共代码定义footer

<th:block th:fragment="footer">
    <footer>
        <div class="container lw-footer">

            <p>
                © 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">京公网安备
                    11011402012109号</a>
            </p>
            <p>如果您有什么好的意见或建议请发邮件至 <a href="#">kevinlu98@qq.com</a></p>
        </div>
    </footer>
    <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/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/static/plugin/bootstrap-table/bootstrap-table-zh-CN.js"></script>
</th:block>