21.THYMELEAF URL 用法

css 文件

在 webapp 目录下新建 css 目录，然后新建 style.css 文件
css 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
div.showing{
    width:80%;
    margin:20px auto;
    border:1px solid grey;
    padding:30px;
}
 
.even{
     
}
.odd{
    
}
 步骤 5 : 

js 文件

在 webapp 目录下新建 js 目录，然后新建 thymeleaf.js 文件
js 文件
1
2
3
function testFunction(){
    alert("test Thymeleaf.js!");
}
 步骤 6 : 

修改 hello.html

通过 th:href="@{/static/css/style.css}" 和 th:src="@{/static/js/thymeleaf.js}" 引入 css 和 js 文件
 
<link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css" th:href="@{/static/css/style.css}"/>
<script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
 

注意几点： 
1. 使用 @这种方式引入，在渲染后的html 里会自动生成 上下文路径，既如图所示的 /thymeleaf 这个路径
2. 如果使用浏览器直接打开当前的 hello.html, 依然可以看到css 和 js 效果，因为如下代码起作用：
 
href="../../webapp/static/css/style.css"
src="../../webapp/static/js/thymeleaf.js"
 

所以这样就非常方便前端开发和测试
3. 在header标签里有这么一段：
 
<script>
testFunction();
</script>
 

用以表示访问thymeleaf.js里的 testFunction函数
修改 hello.html
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css"th:href="@{/static/css/style.css}"/>
    <script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
     
    <script>
    testFunction();
    </script>
         
</head>
<body>
<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>
 
</html>
 步骤 7 : 

重启测试

重新运行 Application, 然后访问如下地址进行测试：
 
http://127.0.0.1:8080/thymeleaf/hello

posted on 2019-01-04 16:56  我是司  阅读(469)  评论(0)    收藏  举报

导航