Spring Boot2.0系列教程之模板引擎 Thymeleaf(四)

Spring Boot 推荐使用 Thymeleaf 来代替 JSP,Thymeleaf 模板到底是什么来头呢,下面我们来聊聊。

Thymeleaf 介绍

Thymeleaf 是一款用于渲染 XML/XHTML/HTML 5 内容的模板引擎。类似 JSP、Velocity、FreeMaker 等,它也可以轻易的与 Spring MVC 等 Web 框架进行集成作为 Web 应用的模板引擎。与其他模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

Thymeleaf 特点

简单说,Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。相较与其他的模板引擎,它有如下三个极吸引人的特点:

  • Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 Thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
  • Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言,可以直接套用模板实现 JSTL、 OGNL 表达式效果,避免每天套模板、改 jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
  • Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

对比

好了,你们说了我们已经习惯使用了什么 Velocity、FreMaker、Beetle 之类的模版,那么到底好在哪里呢?比一比吧!Thymeleaf 是与众不同的,因为它使用了自然的模板技术。这意味着 Thymeleaf 的模板语法并不会破坏文档的结构,模板依旧是有效的 XML 文档。模板还可以用作工作原型,Thymeleaf 会在运行期替换掉静态值。Velocity 与 FreeMarker 则是连续的文本处理器。

完整代码可在github下载。

https://github.com/zjh746140129/Spring-Boot2.0

项目结构截图:

Spring Boot2.0系列教程之模板引擎 Thymeleaf(四)_第1张图片

一、代码片段

1、编写用户类

package com.boot.model;

/**
 * Created by zhoujh on 2018/6/25.
 */
public class User {
    private String name;
    private int age;
    private String pass;

    public User(String name, int age, String pass) {
        this.name = name;
        this.age = age;
        this.pass = pass;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getPass() {
        return pass;
    }

    public void setPass(String pass) {
        this.pass = pass;
    }

    @Override
    public String toString() {
        return ("name=" + this.name + ",age=" + this.age + ",pass=" + this.pass);
    }
}

2、编写controller

package com.boot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Created by zhoujh on 2018/6/25.
 */
@Controller
public class HelloController {

    @RequestMapping("/")
    public String index(ModelMap map) {
        map.addAttribute("message", "hello thymeleaf");
        return "hello";
    }
}
package com.boot.controller;

import com.boot.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
 * Created by zhoujh on 2018/6/25.
 */
@Controller
public class DemoController {

    @RequestMapping("/example")
    public String index(ModelMap map) {
        map.addAttribute("userName", "neo");
        map.addAttribute("flag", "yes");
        map.addAttribute("users", getUserList());
        map.addAttribute("type", "link");
        map.addAttribute("pageId", "springcloud/2017/09/11");
        map.addAttribute("img", "aaa.jpg");
        map.addAttribute("count", 12);
        map.addAttribute("date", new Date());
        return "example";
    }


    private List getUserList(){
        List list=new ArrayList();
        User user1=new User("zhangsan",12,"123456");
        User user2=new User("lisi",6,"123563");
        User user3=new User("wangwu",66,"666666");
        list.add(user1);
        list.add(user2);
        list.add(user3);
        return  list;
    }
}
package com.boot.controller;

import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Created by zhoujh on 2018/6/25.
 */
public class IndexController {


    @RequestMapping("/index")
    public String index() {
        return "index";
    }

    @RequestMapping("/layout")
    public String layout() {
        return "layout";
    }


    @RequestMapping("/home")
    public String home() {
        return "home";
    }
}

3、启动类

package com.boot;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class BootThymeleafApplication {

	public static void main(String[] args) {
		SpringApplication.run(BootThymeleafApplication.class, args);
	}
}

4、页面HTML

一、copyright.html




    
    Title



    © 2018


二、footer.html




    
    Title


我是 尾部

三、header.html




    
    Title


我是 头部

四、left.html




    
    left



    

我是 左侧

五、example.html




    
    Example


    

text

neo


If/Unless

home
baidu

for 循环

neo 6 213 index

URL

link1
view



内联[ [ ] ]

Hello, [[${userName}]]


内嵌变量

neo

neo

neo

userName

userName

userName

userName


六、hello.html




    
    Hello


Hello World

七、home.html




    

个性化的内容

八、index.html




    
    Index


    

九、layout.html




    
    Layout


    
content

5、配置文件

server.port=8099

6、完整pom 



	4.0.0

	com.boot
	boot-thymeleaf
	0.0.1-SNAPSHOT
	jar

	boot-thymeleaf
	Demo project for Spring Boot

	
		org.springframework.boot
		spring-boot-starter-parent
		2.0.3.RELEASE
		 
	

	
		UTF-8
		UTF-8
		1.8
	

	
		
			org.springframework.boot
			spring-boot-starter-thymeleaf
		

		
			org.springframework.boot
			spring-boot-starter-web
		
		
			org.springframework.boot
			spring-boot-starter-test
			test
		
        
            org.springframework.boot
            spring-boot-starter-web
            RELEASE
        
    

	
		
			
				org.springframework.boot
				spring-boot-maven-plugin
			
		
	



二、常用标签语法介绍

1、常用语法

 

①、赋值、字符串拼接

neo

②、条件判断 If/Unless

Thymeleaf 中使用 th:if 和 th:unless 属性进行条件判断,下面的例子中,标签只有在 th:if 中条件成立时才显示

 home 
ityouknow

th:unless 与 th:if 恰好相反,只有表达式中的条件不成立,才会显示其内容。

也可以使用 (if) ? (then) : (else) 这种语法来判断显示的内容 

 

 

③、for 循环

neo 6 213 index

iterStat 称作状态变量,属性有

  • index:当前迭代对象的 index(从 0 开始计算)
  • count:当前迭代对象的 index(从 1 开始计算)
  • size:被迭代对象的大小
  • current:当前迭代变量
  • even/odd:布尔值,当前循环是否是偶数/奇数(从 0 开始计算)
  • first:布尔值,当前循环是否是第一个
  • last:布尔值,当前循环是否是最后一个

 

④、URL

URL 在 Web 应用模板中占据着十分重要的地位,需要特别注意的是 Thymeleaf 对于 URL 的处理是通过语法 @{...} 来处理的。 如果需要 Thymeleaf 对 URL 进行渲染,那么务必使用 th:href、th:src 等属性,下面举一个例子:

link1

view

 

 

设置背景:

根据属性值改变背景:

 

几点说明:

  • 上例中 URL 最后的 (pageId=${pageId}) 表示将括号内的内容作为 URL 参数处理,该语法避免使用字符串拼接,大大提高了可读性。
  • @{...} 表达式中可以通过 {pageId} 访问 Context 中的 pageId 变量。
  • @{/order} 是 Context 相关的相对路径,在渲染时会自动添加上当前 Web 应用的 Context 名字,假设 context 名字为 app,那么结果应该是 /app/order。

⑤、内联 [ [ ] ]

内联文本:[[...]] 内联文本的表示方式,使用时,必须先用在 th:inline="text/javascript/none" 激活,th:inline 可以在父级标签内使用,甚至作为 body 的标签。内联文本尽管比 th:text 的代码少,不利于原型显示。

文本内联:

内联js

Hello, [[${userName}]]


脚本内联,脚本内联可以在 js 中取到后台传过来的参数:

 

 

 

⑥、内嵌变量

为了模板更加易用,Thymeleaf 还提供了一系列 Utility 对象(内置于 Context 中),可以通过 # 直接访问:

  • dates:java.util.Date 的功能方法类
  • calendars: 类似 #dates,面向 java.util.Calendar
  • numbers:格式化数字的功能方法类
  • strings:字符串对象的功能类,contains、startWiths、prepending/appending 等
  • objects:对 objects 的功能类操作
  • bools: 对布尔值求值的功能方法
  • arrays:对数组的功能类方法
  • lists:对 lists 的功能类方法
  • sets
  • maps

下面用一段代码来举例一些常用的方法:

dates

neo

neo

neo

strings

userName

userName

userName

userName

 

 

 

 

 

2、常用th标签

关键字

功能介绍

案例

th:id

替换id

th:text 文本替换

description

th:utext

支html的文本替换

conten

th:object 替换对象

th:value 属性赋值

th:with 变量赋值运算

th:style 设置样式

th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"

th:onclick 点击事件

th:οnclick="'getCollect()'"

th:each 属性赋值

tr th:each="user,userStat:${users}">

th:if 判断条件

th:unless 和th:if判断相反

Login

th:href 链接地址

Login />

th:switch 多路选择 配合th:case 使用

th:case th:switch的一个分支

User is an administrator

th:fragment 布局标签,定义一个代码片段,方便其它地方引用

th:include 布局标签,替换内容到引入的文件

/>

th:replace 布局标签,替换整个标签到引入的文件

th:selected selected选择框 选中

th:selected="(${xxx.id} == ${configObj.dd})"

th:src 图片类地址引入

App Logo

th:inline 定义js脚本可以使用变量

你可能感兴趣的:(Spring,Boot,Spring,Boot2.0系列教程)