how2j.cn

下载区
文件名 文件大小
thymeleaf.rar 2k

解压rar如果失败,请用5.21版本或者更高版本的winrar

点击下载 winrar5.21
步骤 1 : 什么是 thymeleaf   
步骤 2 : 先运行,看到效果,再学习   
步骤 3 : 模仿和排错   
步骤 4 : 基于前面的知识点   
步骤 5 : pom.xml   
步骤 6 : 增加个控制器   
步骤 7 : hello.html   
步骤 8 : application.properties   
步骤 9 : 重启测试   

步骤 1 :

什么是 thymeleaf

edit
thymeleaf 跟 JSP 一样,就是运行之后,就得到纯 HTML了。 区别在与,不运行之前, thymeleaf 也是 纯 html ...
所以 thymeleaf 不需要 服务端的支持,就能够被以 html 的方式打开,这样就方便前端人员独立设计与调试, jsp 就不行了, 不启动服务器 jsp 都没法运行出结果来。
步骤 2 :

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

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

http://127.0.0.1:8080/thymeleaf/hello

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

推荐使用diffmerge软件,进行文件夹比较。把你自己做的项目文件夹,和我的可运行项目文件夹进行比较。
这个软件很牛逼的,可以知道文件夹里哪两个文件不对,并且很明显地标记出来
这里提供了绿色安装和使用教程:diffmerge 下载和使用教程
步骤 4 :

基于前面的知识点

edit
thymeleaf 可以配合 Servlet 运行,但是比较常见的是配合 springboot 来运行。 当然本质上也是配合springboot 里的 springmvc 来运行的,毕竟 springboot 本身就是个老鸨,干活的还是 springmvc。
本知识点基于前面的 springboot 配置切换 的基础上展开。 所以如果没有学过 springboot, 还是把 springboot 过一遍的好,至少要过到 springboot 配置切换 这里。
修改 pom.xml, 增加了对 thymeleaf 的支持。

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.how2java</groupId> <artifactId>thymeleaf</artifactId> <version>0.0.1-SNAPSHOT</version> <name>thymeleaf</name> <description>thymeleaf</description> <packaging>war</packaging> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.9.RELEASE</version> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!-- servlet依赖. --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> </dependency> <!-- tomcat的支持.--> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> <!-- 这个需要为 true 热部署才有效 --> </dependency> </dependencies> <properties> <java.version>1.8</java.version> </properties> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
步骤 6 :

增加个控制器

edit
很简单,访问地址 hello, 跳转到 hello.html ,并带上数据 "name", 其值是 "thymeleaf"
package com.how2java.springboot.web; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class HelloController { @RequestMapping("/hello") public String hello(Model m) { m.addAttribute("name", "thymeleaf"); return "hello"; } }
package com.how2java.springboot.web;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
public class HelloController {
 
    @RequestMapping("/hello")
    public String hello(Model m) {
    	m.addAttribute("name", "thymeleaf");
        return "hello";
    }
}
在 resources 下新建目录 templates, 然后新建文件 hello.html
注: 并不是在 webapp下,这点和 jsp 不一样
hello.html 做了如下事情:
1. 声明当前文件是 thymeleaf, 里面可以用th开头的属性

<html xmlns:th="http://www.thymeleaf.org">


2. <head> 内容和普通 html 并无二致,略过

3. 把 name 的值显示在当前 p里,用的是th开头的属性: th:text, 而取值用的是 "${name}" 这种写法叫做 ognl,额。。。什么意思呢。。。就是跟EL表达式一样吧。 这样取出来放进p 里,从而替换到 原来p 标签里的 4个字符 "name" .

<p th:text="${name}" >name</p>

用这种方式,就可以把服务端的数据,显示在当前html里了。 重要的是: 这种写法是完全合法的 html 语法,所以可以直接通过浏览器打开 hello.html,也是可以看到效果的, 只不过看到的是 "name", 而不是 服务端传过来的值 "thymeleaf"。

4. 字符串拼写。 两种方式,一种是用加号,一种是在前后放上 ||, 显然第二种方式可读性更好。
<p th:text="'Hello! ' + ${name} + '!'" >hello world</p>
<p th:text="|Hello! ${name}!|" >hello world</p>
这两种方式都会得到: hello thymeleaf。
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" /> </head> <body> <p th:text="${name}" >name</p> <p th:text="'Hello! ' + ${name} + '!'" >hello world</p> <p th:text="|Hello! ${name}!|" >hello world</p> </body> </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" />
</head>
<body>
<p th:text="${name}" >name</p>
<p th:text="'Hello! ' + ${name} + '!'" >hello world</p>
<p th:text="|Hello! ${name}!|" >hello world</p>
</body>

</html>
步骤 8 :

application.properties

edit
application.properties 撸成这样
#thymeleaf 配置 spring.thymeleaf.mode=HTML5 spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html #缓存设置为false, 这样修改之后马上生效,便于调试 spring.thymeleaf.cache=false #上下文 server.context-path=/thymeleaf
#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#缓存设置为false, 这样修改之后马上生效,便于调试
spring.thymeleaf.cache=false
#上下文
server.context-path=/thymeleaf
运行 Application.java, 然后访问地址:

http://127.0.0.1:8080/thymeleaf/hello
重启测试


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2022-01-29 hello.html里${name}有红色下划线
LST666




hello.html中的${name}有红下划线原因“无法解析”
<body>
<p th:text="${name}"  >name</p>
<p th:text="'Hello' + ${name} + '!'">hello world</p>
<p th:text="|Hello ${name}!|">hello world</p>
</body>

							


1 个答案

pxq123456
答案时间:2022-07-15
idea 解决:setting——Inspection——thymelef ——将第一个打勾的给去掉



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





2022-01-22 2.5.9版本,必须返回ModelAndView 对象才能跳转页面
lys852




如题,使用String返回的就是个hello
    @RequestMapping("/hellothymeleafNew")
    public ModelAndView hellothymeleafNew(Model m) {
        m.addAttribute("name", "lllyysss");
        ModelAndView mav = new ModelAndView();
        mav.setViewName("hello");
        return mav;
    }

							


1 个答案

lys852
答案时间:2022-01-22
找到问题了,是用了restcontroller的缘故,用了controller就ok了



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





2021-10-17 控制器跳转疑问?
2020-09-26 关于404的问题可以看下这里来解决
2020-05-05 thymeleaf配置没必要加


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

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

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

上传截图