20.thymeleaf 入门 基于 SPRINGBOOT 方式

什么是 thymeleaf

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

pom.xml

修改 pom.xml, 增加了对 thymeleaf 的支持。
 
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</
</dependency>
 
 
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<?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"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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

application.properties 撸成这样
1
2
3
4
5
6
7
8
#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
 步骤 9 : 

重启测试

运行 Application.java, 然后访问地址：
 
http://127.0.0.1:8080/thymeleaf/hello
 
重启测试

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

导航