how2j.cn

相关下载
文件名 文件大小
thymeleaf.rar 2k
步骤 1 : 什么是 thymeleaf   
步骤 2 : 先运行,看到效果,再学习   
步骤 3 : 模仿和排错   
步骤 4 : 基于前面的知识点   
步骤 5 : pom.xml   
步骤 6 : 增加个控制器   
步骤 7 : hello.html   
步骤 8 : 重启测试   

步骤 1 :

什么是 thymeleaf

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

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

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

http://127.0.0.1:8080/thymeleaf/hello

就可以看到如图所示的三行话
先运行,看到效果,再学习
步骤 3 :

模仿和排错

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

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

基于前面的知识点

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

pom.xml

修改 pom.xml, 增加了对 thymeleaf 的支持。

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</
</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 :

增加个控制器

很简单,访问地址 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";
    }
}
步骤 7 :

hello.html

在 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.java, 然后访问地址:

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


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


问答区域    
2018-07-10 好像少了一步
滑落的星辰
application.properties文件是不是没有配置 ?




1 个答案

duoduode5 答案时间:2018-07-17
确实少了一部,下载示例吧,但是我用示例会报404错误什么情况!




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-06-25 导入右上角项目后,运行Application,报错,请问是什么回事呢
glljy



导入右上角项目后,运行Application,报错,请问是什么回事呢

							

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到









提问之前请登陆
关于 JAVA 框架-SpringBoot-入门 的提问

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

上传截图