个人博客项目 （后端搭建）异常，日志,页面处理

目录

• 异常处理
  • yml 配置文件
  • 定制错误跳转页面
• 日志处理
  • 优化默认日志配置
  • 切面相关
  • AOP 回顾（重要）
• 页面处理
  • 关于错误页面处理
• 重要问题
  • 静态资源加载（非常重要）
  • 处理后效果：

异常处理

yml 配置文件

一般开发环境和部署环境会不一样，为了加以区分，可以在yml配置文件中体现出来，所以分为application-dev.yml(开发环境)、application-pro.yml(部署环境)，而为了能够让SpringBoot知道用的是哪个配置文件，需要在application.yml配置文件中加以说明，并且开发和部署中相同的配置也可以在application.yml中进行配置，详细配置如下：

application.yml：公共配置和表明当前配置文件
application-dev.yml：开发环境配置文件
application-pro.yml：部署环境配置文件

定制错误跳转页面

模拟错误

错误页面跳转控制器

package com.lzh.handler;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.core.annotation.AnnotationUtils;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;


@ControllerAdvice
public class ControllerExceptionHandler {

    private final Logger logger = LoggerFactory.getLogger(this.getClass());


    @ExceptionHandler(Exception.class)
    public ModelAndView exceptionHander(HttpServletRequest request, Exception e) throws Exception {
        logger.error("Requst URL : {}，Exception : {}", request.getRequestURL(),e);

        if (AnnotationUtils.findAnnotation(e.getClass(), ResponseStatus.class) != null) {
            throw e;
        }

        ModelAndView mv = new ModelAndView();
        mv.addObject("url",request.getRequestURL());
        mv.addObject("exception", e);
        mv.setViewName("error/error");
        return mv;
    }
}

日志处理

优化默认日志配置

SpringBoot中有日志默认的生成以及切分，在这里我们可以重写SpringBoot默认日志配置，自定义日志大小和名称等等，在资源文件夹下添加logback-spring.xml进行配置，配置如下：

<?xml version="1.0" encoding="UTF-8" ?>
<configuration>
    <!--包含Spring boot对logback日志的默认配置-->
    <include resource="org/springframework/boot/logging/logback/defaults.xml" />
    <property name="LOG_FILE" value="${LOG_FILE:-${LOG_PATH:-${LOG_TEMP:-${java.io.tmpdir:-/tmp}}}/spring.log}"/>
    <include resource="org/springframework/boot/logging/logback/console-appender.xml" />

    <!--重写了Spring Boot框架 org/springframework/boot/logging/logback/file-appender.xml 配置-->
    <appender name="TIME_FILE"
              class="ch.qos.logback.core.rolling.RollingFileAppender">
        <encoder>
            <pattern>${FILE_LOG_PATTERN}</pattern>
        </encoder>
        <file>${LOG_FILE}</file>
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <fileNamePattern>${LOG_FILE}.%d{yyyy-MM-dd}.%i</fileNamePattern>
            <!--保留历史日志一个月的时间-->
            <maxHistory>30</maxHistory>
            <!--
            Spring Boot默认情况下，日志文件10M时，会切分日志文件,这样设置日志文件会在100M时切分日志
            -->
            <timeBasedFileNamingAndTriggeringPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>10MB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>

        </rollingPolicy>
    </appender>

    <root level="INFO">
        <appender-ref ref="CONSOLE" />
        <appender-ref ref="TIME_FILE" />
    </root>

</configuration>
        <!--
            1、继承Spring boot logback设置（可以在appliaction.yml或者application.properties设置logging.*属性）
            2、重写了默认配置，设置日志文件大小在10MB时，按日期切分日志
        -->

切面相关

aspect ---> LogAspect.java

package com.lzh.aspect;

import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.annotation.*;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import javax.servlet.http.HttpServletRequest;
import java.util.Arrays;


// 导入切面
@Aspect
@Component
public class LogAspect {

    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    @Pointcut("execution(* com.lzh.web.*.*(..))")
    public void log() {}


    @Before("log()")
    public void doBefore(JoinPoint joinPoint) {
        ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
        HttpServletRequest request = attributes.getRequest();
        String url = request.getRequestURL().toString();
        String ip = request.getRemoteAddr();
        String classMethod = joinPoint.getSignature().getDeclaringTypeName() + "." + joinPoint.getSignature().getName();
        Object[] args = joinPoint.getArgs();
        RequestLog requestLog = new RequestLog(url, ip, classMethod, args);
        logger.info("Request : {}", requestLog);
    }

    @After("log()")
    public void doAfter() {
//        logger.info("--------doAfter--------");
    }

    @AfterReturning(returning = "result",pointcut = "log()")
    public void doAfterRuturn(Object result) {
        logger.info("Result : {}", result);
    }

    private class RequestLog {
        private String url;
        private String ip;
        private String classMethod;
        private Object[] args;

        public RequestLog(String url, String ip, String classMethod, Object[] args) {
            this.url = url;
            this.ip = ip;
            this.classMethod = classMethod;
            this.args = args;
        }

        @Override
        public String toString() {
            return "{" +
                    "url='" + url + '\'' +
                    ", ip='" + ip + '\'' +
                    ", classMethod='" + classMethod + '\'' +
                    ", args=" + Arrays.toString(args) +
                    '}';
        }
    }

}

AOP 回顾（重要）

链接跳转

页面处理

关于thymeleaf 中 _fragments.html 的公共样式抽取

关于错误页面处理

404.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <link rel="stylesheet" href="../../static/css/me.css" >
</head>
<body>

<!--导航-->
<nav th:replace="_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
        <div class="ui inverted stackable menu">
            <h2 class="ui teal header item">QuantumYou</h2>
            <a href="#" class=" m-item item m-mobile-hide"><i class="icon home"></i>首页</a>
            <a href="#" class=" m-item item m-mobile-hide"> <i class="icon server"></i>分类</a>
            <a href="#" class=" m-item item m-mobile-hide"> <i class="icon tags"></i>标签</a>
            <a href="#" class=" m-item item m-mobile-hide"><i class="icon address card"></i>关于我</a>
            <a href="#" class=" m-item item m-mobile-hide"><i class="icon music"></i>音乐盒</a>
            <a href="#" class=" m-item item m-mobile-hide"><i class="icon clipboard"></i>留言板</a>
            <a href="#" class=" m-item item m-mobile-hide"><i class="icon image"></i>照片墙</a>
            <div class="right item m-mobile-hide">
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="搜索">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui black icon button m-right-top m-mobile-show menu toggle">
        <i class="sidebar icon "></i>
    </a>
</nav>

<br>
<br>
<br>

<div class="m-container-small m-padded-tb-massive">
    <div class="ui error message m-padded-tb-huge" >
        <div class="ui contianer">
            <h2>404</h2>
            <p>对不起，你访问的资源不存在</p>
        </div>
    </div>
</div>
<br>
<br>
<br>
<br>


<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="three wide column">
                <!--        <img src="../static/images/wechat.jpg" class="ui rounded image" style="width: 120px"/>-->
                <img src="/images/wechat.jpg" class="ui rounded image" style="width: 120px"/>
            </div>

            <div class="three wide column">
                <h4 class="ui inverted header lzh-center">学习指北</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item lzh-center">JAVA 从入门到放弃</a>
                    <a href="#" class="item lzh-center">JAVA 从入门到放弃</a>
                    <a href="#" class="item lzh-center">JAVA 从入门到放弃</a>
                </div>
            </div>
            <div class="three wide column ">
                <h4 class="ui inverted header lzh-center text-thin m-text-spaced">最新推荐</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item lzh-center">Mysql 从入门到跑路</a>
                    <a href="#" class="item lzh-center">Mysql 从入门到跑路</a>
                    <a href="#" class="item lzh-center">Mysql 从入门到跑路</a>
                </div>
            </div>
            <div class="six wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">引言</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">
                    编程路漫之远兮，运架构体之帷幄；<br>
                    劝君专注案前事，亦是杯酒敬苍生；
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini lzh-center">Copyright © LZH_Create</p>
    </div>

</footer>
</body>
</html>

重要问题

关于无法加载templates下html页面--> 报404 错误
参考链接1
参考链接2
参考链接3

原因： 项目部署时环境搭建出现错误
解决： 重新搭建空项目 （init 只导入 springweb）

静态资源加载（非常重要）

已解决：
解决方法：添加静态资源过滤器，以及Thymeleaf 模板相关
注意其中的静态资源访问 没有static ,因为springBoot 默认从中访问

参考链接1
参考链接2

about.html

<!DOCTYPE html>
<!--<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>关于我</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css">
<!--    <link rel="stylesheet" href="../static/css/me.css">-->

<!--    <link rel="stylesheet" href="/css/me.css" th:href=@{/css/me.css}" />-->
    <link rel="stylesheet" type="text/css" href="css/me.css" th:href="@{/css/me.css}" />
</head>
<body>

<!--<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>-->
<!--<script src="../static/js/jquery.min.js"></script>-->
<script src="/js/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"
        integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw=="
        crossorigin="anonymous"></script>

<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted stackable menu">
            <h2 class="ui teal header item">QuantumYou</h2>
            <a href="#" class=" m-item item m-mobile-hide"><i class="icon home"></i>首页</a>
            <a href="#" class=" m-item item m-mobile-hide"> <i class="icon server"></i>分类</a>
            <a href="#" class=" m-item item m-mobile-hide"> <i class="icon tags"></i>标签</a>
            <a href="#" class=" m-item item m-mobile-hide active"><i class="icon address card"></i>关于我</a>
            <a href="#" class=" m-item item m-mobile-hide"><i class="icon music"></i>音乐盒</a>
            <a href="#" class=" m-item item m-mobile-hide"><i class="icon clipboard"></i>留言板</a>
            <a href="#" class=" m-item item m-mobile-hide"><i class="icon image"></i>照片墙</a>
            <div class="right item m-mobile-hide">
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="搜索">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui black icon button m-right-top m-mobile-show menu toggle">
        <i class="sidebar icon "></i>
    </a>
</nav>

<!--中间内容-->
<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="eleven wide column">
<!--                <img src="/images/me.jpg" alt="" class="ui rounded image">-->
<!--                <img src="../static/images/me.jpg" th:src="@{/static/images/me.jpg}" alt="" class="ui rounded image">-->
                <img src="/images/me.jpg" alt="" class="ui rounded image">
            </div>
            <div class="five wide column">
                <div class="ui top attached segment">
                    <div class="ui header">关于我</div>
                </div>
                <div class="ui attached segment">
                    <p class="m-text">目前为软件工程本科生，追求理论与实践相结合的学习者，兴趣爱好广泛，乐观开朗，积极向上，热爱生活，希望结识共同成长的小伙伴~</p>
                    <p class="m-text">主要学习领域：前后端开发，运维，数据结构与算法，大数据。</p>
                </div>
                <div class="ui attached segment">
                    <div class="ui orange basic left pointing label margin-tb-tiny">编程</div>
                    <div class="ui orange basic left pointing label margin-tb-tiny">阅读</div>
                    <div class="ui orange basic left pointing label margin-tb-tiny">写作</div>
                    <div class="ui orange basic left pointing label margin-tb-tiny">绘画</div>
                    <div class="ui orange basic left pointing label margin-tb-tiny">运动</div>
                    <div class="ui orange basic left pointing label margin-tb-tiny">听歌</div>
                    <div class="ui orange basic left pointing label margin-tb-tiny">下棋</div>
                    <div class="ui orange basic left pointing label margin-tb-tiny">旅游</div>
                </div>
                <div class="ui attached segment">
                    <div class="ui teal basic left pointing label margin-tb-tiny">Java</div>
                    <div class="ui teal basic left pointing label margin-tb-tiny">MySQL</div>
                    <div class="ui teal basic left pointing label margin-tb-tiny">Vue</div>
                    <div class="ui teal basic left pointing label margin-tb-tiny">Node</div>
                    <div class="ui teal basic left pointing label margin-tb-tiny">Linux</div>
                    <div class="ui teal basic left pointing label margin-tb-tiny">Jquery</div>
                    <div class="ui teal basic left pointing label margin-tb-tiny">C语言</div>
                    <div class="ui teal basic left pointing label margin-tb-tiny">运维</div>
                    <div class="ui teal basic left pointing label margin-tb-tiny">数据结构与算法</div>
                    <div class="ui teal basic left pointing label margin-tb-tiny">网页开发</div>
                </div>

                <div class="ui bottom attached segment">
                    <a href="#" class="ui circular icon button"><i class="github icon"></i></a>
                    <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
                    <a href="#" class="ui qq circular icon button" data-content="123456"
                       data-position="bottom center"><i class="qq icon"></i></a>
                    <a href="#" class="ui circular icon button "><i class="weibo icon"></i></a>
                </div>
                <div class="ui wechat-qr flowing popup transition hidden">
                    <img src="/images/wechat.jpg" alt="" class="ui rounded image" style="width: 110px">
<!--                    <img src="/images/wechat.jpg" alt="" class="ui rounded image" style="width: 110px">-->
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部栏-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="three wide column">
<!--                <img src="../static/images/wechat.jpg" class="ui rounded image" style="width: 120px"/>-->
                <img src="/images/wechat.jpg" class="ui rounded image" style="width: 120px"/>
            </div>

            <div class="three wide column">
                <h4 class="ui inverted header lzh-center">学习指北</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item lzh-center">JAVA 从入门到放弃</a>
                    <a href="#" class="item lzh-center">JAVA 从入门到放弃</a>
                    <a href="#" class="item lzh-center">JAVA 从入门到放弃</a>
                </div>
            </div>
            <div class="three wide column ">
                <h4 class="ui inverted header lzh-center text-thin m-text-spaced">最新推荐</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item lzh-center">Mysql 从入门到跑路</a>
                    <a href="#" class="item lzh-center">Mysql 从入门到跑路</a>
                    <a href="#" class="item lzh-center">Mysql 从入门到跑路</a>
                </div>
            </div>
            <div class="six wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">引言</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">
                    编程路漫之远兮，运架构体之帷幄；<br>
                    劝君专注案前事，亦是杯酒敬苍生；
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini lzh-center">Copyright © LZH_Create</p>
    </div>
</footer>
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.wechat').popup({
        popup: $('.wechat-qr'),
        position: 'bottom center'
    });

    $('.qq').popup();
</script>
</body>
</html>

在pom.xml 中进行配置资源过滤器解决，静态资源无法显示问题

   <resources>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                    <!--加载模板文件-->
                    <include>**/*.html</include>
                    <include>**/*.js</include>
                    <include>**/*.css</include>
                    <include>**/*.png</include>
                    <include>**/*.gif</include>
                    <include>**/*.jpg</include>
                    <!--加载静态文件-->
                    <include>/static/</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>

_fragments.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title th:replace="${title}">博客详情</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
  <link rel="stylesheet" href="../static/css/animate.css" th:href="@{css/animate.css}">
  <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
  <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>


<!--导航-->
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
<!--  <div class="ui container">-->
<!--    <div class="ui inverted secondary stackable menu">-->
<!--      <h2 class="ui teal header item">Blog</h2>-->
<!--      <a href="#" class="m-item item m-mobile-hide " th:classappend="${n==1} ? 'active'"><i class="mini home icon"></i>首页</a>-->
<!--      <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="mini idea icon"></i>分类</a>-->
<!--      <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="mini tags icon"></i>标签</a>-->
<!--      <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'"><i class="mini clone icon"></i>归档</a>-->
<!--      <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="mini info icon"></i>关于我</a>-->
<!--      <div class="right m-item item m-mobile-hide">-->
<!--        <div class="ui icon inverted transparent input m-margin-tb-tiny">-->
<!--          <input type="text" placeholder="Search....">-->
<!--          <i class="search link icon"></i>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">-->
<!--    <i class="sidebar icon"></i>-->
<!--  </a>-->

  <div class="ui container">
    <div class="ui inverted stackable menu">
      <h2 class="ui teal header item">QuantumYou</h2>
      <a href="#" class=" m-item item m-mobile-hide"><i class="icon home"></i>首页</a>
      <a href="#" class=" m-item item m-mobile-hide"> <i class="icon server"></i>分类</a>
      <a href="#" class=" m-item item m-mobile-hide"> <i class="icon tags"></i>标签</a>
      <a href="#" class=" m-item item m-mobile-hide"><i class="icon address card"></i>关于我</a>
      <a href="#" class=" m-item item m-mobile-hide"><i class="icon music"></i>音乐盒</a>
      <a href="#" class=" m-item item m-mobile-hide"><i class="icon clipboard"></i>留言板</a>
      <a href="#" class=" m-item item m-mobile-hide"><i class="icon image"></i>照片墙</a>
      <div class="right item m-mobile-hide">
        <div class="ui icon inverted transparent input">
          <input type="text" placeholder="搜索">
          <i class="search link icon"></i>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui black icon button m-right-top m-mobile-show menu toggle">
    <i class="sidebar icon "></i>
  </a>
</nav>



<!--底部footer-->
<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive">
<!--  <div class="ui center aligned container">-->
<!--    <div class="ui inverted divided stackable grid">-->
<!--      <div class="three wide column">-->
<!--        <div class="ui inverted link list">-->
<!--          <div class="item">-->
<!--            <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}"  class="ui rounded image" alt="" style="width: 110px">-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="three wide column">-->
<!--        <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>-->
<!--        <div class="ui inverted link list">-->
<!--          <a href="#" class="item m-text-thin">用户故事（User Story）</a>-->
<!--          <a href="#" class="item m-text-thin">用户故事（User Story）</a>-->
<!--          <a href="#" class="item m-text-thin">用户故事（User Story）</a>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="three wide column">-->
<!--        <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>-->
<!--        <div class="ui inverted link list">-->
<!--          <a href="#" class="item m-text-thin">Email：lirenmi@163.com</a>-->
<!--          <a href="#" class="item m-text-thin">QQ：865729312</a>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="seven wide column">-->
<!--        <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>-->
<!--        <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="ui inverted section divider"></div>-->
<!--    <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Lirenmi Designed by Lirenmi</p>-->
<!--  </div>-->
  <div class="ui container">
    <div class="ui stackable grid">
      <div class="three wide column">
<!--        <img src="../static/images/wechat.jpg" class="ui rounded image" style="width: 120px"/>-->
        <img src="/images/wechat.jpg" class="ui rounded image" style="width: 120px"/>
      </div>

      <div class="three wide column">
        <h4 class="ui inverted header lzh-center">学习指北</h4>
        <div class="ui inverted link list">
          <a href="#" class="item lzh-center">JAVA 从入门到放弃</a>
          <a href="#" class="item lzh-center">JAVA 从入门到放弃</a>
          <a href="#" class="item lzh-center">JAVA 从入门到放弃</a>
        </div>
      </div>
      <div class="three wide column ">
        <h4 class="ui inverted header lzh-center text-thin m-text-spaced">最新推荐</h4>
        <div class="ui inverted link list">
          <a href="#" class="item lzh-center">Mysql 从入门到跑路</a>
          <a href="#" class="item lzh-center">Mysql 从入门到跑路</a>
          <a href="#" class="item lzh-center">Mysql 从入门到跑路</a>
        </div>
      </div>
      <div class="six wide column">
        <h4 class="ui inverted header m-text-thin m-text-spaced">引言</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini">
          编程路漫之远兮，运架构体之帷幄；<br>
          劝君专注案前事，亦是杯酒敬苍生；
        </p>
      </div>
    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-mini lzh-center">Copyright © LZH_Create</p>
  </div>
</footer>

<th:block th:fragment="script">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
  <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
  <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
  <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
  <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
</th:block>

</body>
</html>

项目目录结构

处理后效果：

通过本地可以访问
后端控制器

前端显示效果