春ブーツ2.0+参照静的ファイルのJS、CSS、HTML

1、最初のディレクトリ

ファイルには、ファイルを使用されることが出て丸で囲みました
円のうち赤いボックス上のファイルは次のファイルに使用されます

2、Mavenのパケットの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