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

929 0 0

作者:crazy戴夫

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

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

index.html

 <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.yml

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

   #开始thymeleaf设置
   thymeleaf:
   #禁用模板缓存
      cache: false
 #设置文字消息
   messages:
      encoding: UTF-8
      basename: message_zh_CN

controller:

   @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/css

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;
}