springboot 静态样式丢失&css、js访问不到&springboot2.0版本

本文链接：https://blog.csdn.net/lovePaul77/article/details/85677520

问题是这样的，我打算写一个单体架构的应用，用到的是springboot+freemarker+uikit（css样式框架）

大体的代码如下图所示（springboot2.0版本）

文件目录大概框架

pom文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

yml配置文件

spring:
  http:
    encoding:
      force: true
      charset: UTF-8
  mvc:
    static-path-pattern: classpath:/static/**
  freemarker:
    allow-request-override: false
    cache: false
    check-template-location: true
    charset: UTF-8
    content-type: text/html; charset=utf-8
    expose-request-attributes: false
    expose-session-attributes: false
    expose-spring-macro-helpers: false
    suffix: .ftl
    template-loader-path: classpath:/templates

TestController-Controller层的编写

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.List;

@Controller
public class TestController {

    @RequestMapping("/")
    public String test() {
        return "test";
    }

}

.ftl文件编写

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="../static/css/uikit.min.css"/>
    <link rel="stylesheet" href="../static/css/components/datepicker.css">
    <link rel="stylesheet" href="../static/css/components/form-select.css">
    <link rel="stylesheet" href="../static/css/my.css">
    <script src="../static/jquery/jquery-3.3.1.js"></script>
    <script src="../static/js/uikit.js"></script>
    <script src="../static/js/components/datepicker.js"></script>
    <script src="../static/js/components/form-select.js"></script>
</head>
<body>
<div class="background-cover"></div>
<div class="background-cover2"></div>
<div class="uk-grid uk-text-center">
    <div class="uk-width-1-1 uk-container uk-text-center">
        <div class="uk-width-1-1  uk-container uk-container-center uk-text-center">
            <form class="uk-form uk-container-center uk-margin-large-top uk-margin-large-left" action="/login">
                <fieldset>
                    <legend style="color:#f4fcff" class="uk-text-center">计算构件入参列表</legend>
                    <div class="uk-form-row uk-text-center">
                        <input type="text" class="uk-width-1-4 uk-text-center" placeholder="债券代码" name="bondCode">
                    </div>
                    <div class="uk-form-row uk-text-center">
                        <input type="text" class="uk-width-1-4 uk-text-center" data-uk-datepicker="{format:'YYYY-MM-DD',i18n:{ months:['1月',
                        '2月','3月','4月','5月','6月','7月','8月','10月','11月','12月','12月'], weekdays:['周日','周一','周二','周三','周四','周五','周六'] }}"
                               placeholder="交易日" name="tradingDay">
                    </div>
                    <div class="uk-form-row uk-text-center">
                        <select class="uk-width-1-4 uk-text-center" name="speedOfLiquidation">
                            <option value="0" selected="selected" class="uk-text-center">T+0</option>
                            <option value="1" class="uk-text-center">T+1</option>
                            <option value="2" class="uk-text-center">T+2</option>
                            <option value="3" class="uk-text-center">T+3</option>
                            <option value="4" class="uk-text-center">T+4</option>
                            <option value="5" class="uk-text-center">T+5</option>
                            <option value="5" class="uk-text-center">T+6</option>
                        </select>
                    </div>
                    <div class="uk-form-row uk-text-center">
                        <input type="text" class="uk-width-1-4 uk-text-center" placeholder="净价" name="netPrice">
                    </div>
                    <div class="uk-form-row uk-text-center">
                        <input type="text" class="uk-width-1-4 uk-text-center" placeholder="收益率" name="rateOfReturn">
                    </div>
                    <div class="uk-form-row uk-text-center">
                        <input type="submit" class="uk-button uk-button-primary uk-width-1-4 uk-text-center"
                               placeholder="计算">
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>
</body>
</html>

当我这么写完代码访问的时候，，http://localhost:8080/

会得到如下图所示，会发现所有的样式丢失了，这样就有问题了啊，

经过查看network发现，所有访问静态文件的路径都失败了，这个就是springboot2.0拦截了static目录下面所有的静态文件

解决办法：

编写两个class，一个拦截器

package com.example.demo;

import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
// 自定义的静态资源拦截器
public class ResourceInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
            throws Exception {
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o,
                           ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse,
                                Object o, Exception e) throws Exception {

    }
}

package com.example.demo;


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


@Configuration
public class ResourceConfig implements WebMvcConfigurer {


    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new ResourceInterceptor()).excludePathPatterns("/static/**");
    }

    @Override
    //需要告知系统，这是要被当成静态文件的！
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 设置文件上传的文件不拦截
//        registry.addResourceHandler("/upload/**").addResourceLocations("file:"+ TaleUtils.getUplodFilePath()+"upload/");
        //第一个方法设置访问路径前缀，第二个方法设置资源路径
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }

}

这样的话重启项目就会发现不拦截静态文件了