SpringBoot--使用Thymeleaf模板开发web项目

来源：互联网发布：巩义共赢网络是什么编辑：程序博客网时间：2024/04/25 03:45

1.什么是thymeleaf？
是一个用于web开发的模板引擎（使用户界面与业务数据(内容)分离而产生的，不属于特定技术领域，是跨领域跨平台的概念），可以完全的替代JSP。
是一个java库.是一个XML/XHTML/HTML4模板引擎,能够在模板文件上应用一组转换,将程序产生的数据或文本显示到模板文件上.
2.我们为什么要使用thymeleaf？
1）配置步骤简单
Spring Boot默认就是使用thymeleaf模板引擎的，如果使用SpringBoot框架开发，使用thymeleaf无疑省去了很多繁琐的配置步骤。
2）灵活性
在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
3）开发期间省时省力
Thymeleaf 开箱即用的特性，它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。
4）开发迅速
Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
在IDEA 简单的应用
1）使用IDEA创建一个Spring Boot项目
参考链接：http://blog.csdn.net/lg_49/article/details/78128186
2）在pom.xml中引入thymeleaf,在dependencies中插入

<dependency>           <groupId>org.springframework.boot</groupId>           <artifactId>spring-boot-starter-thymeleaf</artifactId>  </dependency>

3）如何关闭thymeleaf缓存
在开发的时候把缓存关闭，只需要在application.properties进行配置即可：

###THYMELEAF(ThymeleafAutoConfiguration)spring.resources.static-locations=classpath:/templates/spring.thymeleaf.prefix=classpath:/templates/spring.thymeleaf.suffix=.htmlspirng.thymeleaf.mode=HTML5spring.thymeleaf.content-type=text/html#set to false for hot refreshspring.thymeleaf.cache=false

4）编写模板文件
src/main/resouces/templates/helloHtml.html
鼠标右键单击templates,出现
这里写图片描述

html代码编写<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"><head>    <meta charset="UTF-8"/>    <title>Hello World!</title></head><body>    <h1>Hello.v.2</h1>    <p th:text="${hello}"></p></body></html>

补充：在代码这里写图片描述
必须添加结束，也就是如图所示：

否则会报：

5）编写访问路径(com.thymeleaf.thymeleafdemo)中创建TemplateController类

import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import java.util.Map;@Controller@RequestMapping（“/helloHtml”）public class TemplateController {    @RequestMapping("/helloHtml")    public String helloHtml(Map<String,String> map){        map.put("hello","from TemplateController.helloHtml");        return "/helloHtml";    }}

运行主函数，如果你没有修改端口号，那么输入地址：http://localhost:8080/helloHtml/helloHtml 会输出：
这里写图片描述
thymeleaf基本表达式
1）变量表达式用于访问容器上下问环境中的变量,功能同jstl中的{}
后台代码：

@Controller@RequestMapping("/hello")public class TemplateController {    @RequestMapping("/helloHtml")    public String helloHtml(Map<String,Object> map){        map.put("hello","from TemplateController.helloHtml");        return "/helloHtml";    }}

模板页面访问变量

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

如果后台没有传过来数据,那么将什么都不显示
2）*{}选择表达式.
选择表达式与变量表达式有一个重要的区别:选择表达式计算的是指定的对象,而不是整个环境变量映射.也就是：只要是没有选择的对象，选择表达式与变量表达式的语法是完全一样的。那什么是选择的对象呢？是一个：th:object对象属性绑定的对象
后台代码：

    @RequestMapping("/helloHtml2")    public String helloHtml2(Map<String,SysUser> map){        SysUser user = new SysUser("花花",5L);        map.put("user",user);        return "/HelloWorld2";    }

前台代码：

    <div th:object = "${user}">        <p>:<span th:text="*{name}">李明</span></p>        <p>age:<span th:text="*{age}">15</span></p>    </div>

页面显示：
这里写图片描述
3)@{}超链接url表达式
后台代码：

 @RequestMapping("/helloHtml")    public String helloHtml(Map<String,String> map){        map.put("hello","from TemplateController.h");        return "/HelloWorld";    } @RequestMapping("/helloHtml3")    public String helloHtml3(){        return "/HelloWorld3";    }

前台代码：

 <a href="HelloWorld.html" th:href="@{/hello/helloHtml}">跳转</a>

结果显示可以跳转到一个新的界面。

Thymeleaf常用属性
1）th:action
定义后台控制其路径,类似标签的action属性

<form id=”login-form” th:action = “@{/login}”>...</form>

2）th:each迭代器
对象遍历,功能类似jstl中的标签

<tr th:each="prod:${userList}">    <td th:text="${prod.getId()}"></td>    <td th:text="${prod.getName()}"></td></tr>

3）th:field
常用于表单字段的绑定.通常与th:object一起使用.属性绑定

<form th:action="@{/hello/doLogin}" th:object="${user}" method="post" th:method="post">    <input type="text" th:field="*{id}"/>    <input type="text" th:field="*{name}"/>    <input type="submit" value="提交"/></form>

4）th:href
定义超链接,类似标签的href属性,value值的形式为@{/logout}

<a th:href="@{/logout}" class="signOut"></a>

5）th:id
div id声明,类似html标签中的id属性

<div class="student" th:id = "stu+(${rowStat.index}+1)"></div>

6）th:Object
用于表单数据对象的绑定,将表单绑定到后台Conroller的一个javaBean参数.常与th:field一起使用进行表单数据的绑定

    <form th:action="@{/hello/helloHtml5}" th:object="${user}" method="post" th:method="post">        姓名:<input type="text" th:field="*{name}"/>        年龄:<input type="text" th:field="*{age}"/>        <input type="submit" value="提交"/>    </form>

7）th:text文本显示

<td class="text" th:text="${username}" ></td>

8）th:src外部资源的引入
类似于script标签的src属性，常与@{}一起使用

<script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"

参考链接：
http://blog.csdn.net/u014695188/article/details/52347318
http://blog.csdn.net/huihuilovei/article/details/64466548
http://www.cnblogs.com/hjwublog/p/5051732.html

阅读全文

0 0