Thymeleaf(一)---引入js/css文件

時間 2020-02-04

原文原文鏈接

th:href="@{/static/css/style.css}"

th:src="@{/static/js/thymeleaf.js}"

index.htmljavascript

 <head>
        <meta charset="UTF-8">
        <title>首頁</title>
        <link rel="stylesheet" type="text/css" media="all" href="/static/css/style.css" th:href="@{/static/css/style.css}"/>
        <script type="text/javascript" src="/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
        <script>
            testFunction();
        </script>

    </head>
    <body>
        <h1 th:text="#{title}"></h1>
        <h1 th:text="${message}"></h1>

        <div class="showing">
            <p th:text="${name}" >name</p>
            <p th:text="'Hello！ ' + ${name} + '!'" >hello world</p>
            <p th:text="'Hello！'+ ${name}+'!'" >hello world</p>
        </div>

    </body>

application.ymlcss

spring:
   mvc:
      static-path-pattern: /static/**
   resources:
      static-locations: classpath:/static/

   #開始thymeleaf設置
   thymeleaf:
   #禁用模板緩存
      cache: false
 #設置文字消息
   messages:
      encoding: UTF-8
      basename: message_zh_CN

controller:html

   @GetMapping("/h")
    public String t(Model model){
        String title="標題";
        String message="first thymeleaf !!";
        String name="牡蠣";
        model.addAttribute("message",message);
        model.addAttribute("title",title);
        model.addAttribute("name",name);
        return "index";
    }

js/cssjava

function testFunction(){
    alert("test Thymeleaf.js!");
}


div.showing{
    width:80%;
    margin:20px auto;
    border:1px solid grey;
    padding:30px;
}

.even{
    background-color: red;
}
.odd{
    background-color: green;
}