步骤 2 : 先运行,看到效果,再学习 步骤 3 : 模仿和排错 步骤 4 : css 文件 步骤 5 : js 文件 步骤 6 : 修改 hello.html 步骤 7 : 重启测试
本知识点是基于上一个知识点进行改进
老规矩,先下载右上角的可运行项目,配置运行起来,确认可用之后,再学习做了哪些步骤以达到这样的效果。
访问地址 http://127.0.0.1:8080/thymeleaf/hello 如图所示,可以看到 一个 js 的对话框,以及灰色的边框效果。 这两个效果是通过@URL 外部引用css 文件和 js 文件得到的。
在确保可运行项目能够正确无误地运行之后,再严格照着教程的步骤,对代码模仿一遍。
模仿过程难免代码有出入,导致无法得到期望的运行结果,此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码,来定位问题所在。 采用这种方式,学习有效果,排错有效率,可以较为明显地提升学习速度,跨过学习路上的各个槛。 推荐使用diffmerge软件,进行文件夹比较。把你自己做的项目文件夹,和我的可运行项目文件夹进行比较。 这个软件很牛逼的,可以知道文件夹里哪两个文件不对,并且很明显地标记出来 这里提供了绿色安装和使用教程:diffmerge 下载和使用教程
在 webapp 目录下新建 css 目录,然后新建 style.css 文件
div.showing{
width:80%;
margin:20px auto;
border:1px solid grey;
padding:30px;
}
.even{
background-color: red;
}
.odd{
background-color: green;
}
div.showing{ width:80%; margin:20px auto; border:1px solid grey; padding:30px; } .even{ background-color: red; } .odd{ background-color: green; }
在 webapp 目录下新建 js 目录,然后新建 thymeleaf.js 文件
function testFunction(){
alert("test Thymeleaf.js!");
}
function testFunction(){ alert("test Thymeleaf.js!"); }
通过 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函数 <!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>
重新运行 Application, 然后访问如下地址进行测试:
http://127.0.0.1:8080/thymeleaf/hello
HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。
问答区域
2020-03-31
如下代码怎么表现出来
回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
2020-02-08
关于各种路径问题
回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
2020-02-06
Thymeleaf中href与 th:href的区别
2019-12-12
IDEA+springboot2.2无法加载静态资源的解决方法
2019-11-19
springboot2的application配置
提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 6 条以前的提问,请 点击查看
提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
|