봄 부팅 2.0 참조 정적 파일 JS, CSS, HTML

1, 첫 번째 디렉터리

파일이 사용 파일이있을 것 인 것을 원
원 중 빨간색 상자에있는 파일은 다음 파일에 사용됩니다

2 받는다는 패킷의 pom.xml

<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.0.1</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3 프로파일 application.properties

spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.mode=HTML5

4, 봄 부팅 시작 클래스 Application.java

@SpringBootApplication
@MapperScan("com.chat.mapper")
public class Application extends WebMvcConfigurationSupport {

    public static void main(String[] args){

        SpringApplication.run(Application.class,args);

    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry){
        registry.addResourceHandler("/static/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+"/static/");
        super.addResourceHandlers(registry);
    }
}

5.Controller

 @Controller
public class HtmlController {


    @RequestMapping(value = "/html/empower")
    public ModelAndView empower(ModelAndView modelAndView){
        modelAndView.setViewName("empower");
        modelAndView.addObject("name","name");
        modelAndView.addObject("value","value");
        return modelAndView;
    }
}

(누가 알과) @RestController를 사용하지 마십시오 여기 @Controller

6, HTML 페이지, 참조의 JS, CSS

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{~/static/css/empower.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{~/static/js/empower.js}"></script>
</head>
<body>

    <div class="a">

        <h1 th:text="${name}"></h1>
        <h1 th:text="${value}"></h1>
    </div>

</body>
</html>

주 : 페이지 참조 CSS 차이가 JS는 경로가 절대 경로를 사용하는 것이다.

7.css 게시하지, 우리는 효과를 볼

그림 삽입 설명 여기
종료!

게시 24 개 원래 기사 · 원의 찬양 (11) · 전망 5426

추천

출처blog.csdn.net/weixin_44037376/article/details/96430843