how2j.cn

下载区
文件名 文件大小
thymeleaf.rar 3k
步骤 1 : 基于上一个知识点改进   
步骤 2 : 先运行,看到效果,再学习   
步骤 3 : 模仿和排错   
步骤 4 : css 文件   
步骤 5 : js 文件   
步骤 6 : 修改 hello.html   
步骤 7 : 重启测试   

步骤 1 :

基于上一个知识点改进

edit
本知识点是基于上一个知识点进行改进
步骤 2 :

先运行,看到效果,再学习

edit
老规矩,先下载右上角的可运行项目,配置运行起来,确认可用之后,再学习做了哪些步骤以达到这样的效果。
访问地址

http://127.0.0.1:8080/thymeleaf/hello

如图所示,可以看到 一个 js 的对话框,以及灰色的边框效果。
这两个效果是通过@URL 外部引用css 文件和 js 文件得到的。
先运行,看到效果,再学习
在确保可运行项目能够正确无误地运行之后,再严格照着教程的步骤,对代码模仿一遍。
模仿过程难免代码有出入,导致无法得到期望的运行结果,此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码,来定位问题所在。
采用这种方式,学习有效果,排错有效率,可以较为明显地提升学习速度,跨过学习路上的各个槛。

推荐使用diffmerge软件,进行文件夹比较。把你自己做的项目文件夹,和我的可运行项目文件夹进行比较。
这个软件很牛逼的,可以知道文件夹里哪两个文件不对,并且很明显地标记出来
这里提供了绿色安装和使用教程:diffmerge 下载和使用教程
在 webapp 目录下新建 css 目录,然后新建 style.css 文件
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 文件
js 文件
function testFunction(){ alert("test Thymeleaf.js!"); }
function testFunction(){
	alert("test Thymeleaf.js!");
}
步骤 6 :

修改 hello.html

edit
通过 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
<!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 如下代码怎么表现出来
黑客被盗号

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




1 个答案

fds123
答案时间:2020-06-24
给标签加lclass = "even" 或class = "odd"



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-02-08 关于各种路径问题
道德真菌

https://www.cnblogs.com/zhangyinhua/p/7662334.html 这篇基本把常用的路径问题都总结了







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-02-06 Thymeleaf中href与 th:href的区别
2019-12-12 IDEA+springboot2.2无法加载静态资源的解决方法
2019-11-19 springboot2的application配置


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 6 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 JAVA 框架-SpringBoot-URL 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图