您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iProcess 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
     
   
 订阅
  捐助
thymeleaf的使用
 
102 次浏览     评价:  
 2019-10-8
 
编辑推荐:

本文来自于微信,本文主要介绍了thymeleaf究竟是什么,spring为什么推荐用它,希望对您能有所帮助。

一、thymeleaf简介:

thymeleaf是一种Java模板引擎,那何为模板引擎呢?模板引擎就是为了使用户页面和业务数据相互分离而出现的, 将从后台返回的数据生成特定的格式的文档,这里说的特定格式一般都指HTML文档。它能够处理html、xml、js、css甚至纯文本,类似于freemarker。它的优点是语法优雅易懂、原型即页面、遵从web标准。原型即页面是它的特色,所谓原型即页面,就是你写的html,静态的去访问是什么样,动态的去访问还是这样,只不过动态的时候会把数据填充进去。

二、thymeleaf标准方言:

1、变量表达式:${...}例如前端接收一个user,想取出user的name属性,就可以用变量表达式:

<span th:text="${user.name}">

2、消息表达式:#{...}也称为文本外部化、国际化或i18n.

<p th:text=" # {header.address.city}">...</p>

3、选择表达式:*{...}与变量表达式的区别:选择表达式是在当前选择的对象上执行而不是整个上下文。

<form action = "/users" th:action = "@{/users}" method = "POST" th:object = "${userModel.user}" >

<input type = "hidden" name = "id" th:value = "*{id}" >

</form>

这里id就用了选择表达式,在此处 *{id}与 ${userModel.user.id}效果一样。

4、链接表达式:@{...}url可以是相对的,也可以是绝对的。

<a th:href="@{.../users/list}">...</a>

<a th:href="@{http://www.baidu.com}">...</a>

5、分段表达式:th:insert 、th:replace 、th:include就相当插入。这三个的区别: 现有一个片段如下:

<footer th:fragment="copy">

<h1>Hello Thymeleaf </h1>

</footer>

#号分别代表insert、replace、include进行操作:

<div th:# ="footer :: copy"></div>

th:insert 的结果:

<div>

<footer th:fragment="copy">

<h1>Hello Thymeleaf </h1>

</footer>

</div>

把footer标签插入到了div标签中。

th:replace的结果:

<footer th:fragment="copy">

<h1>Hello Thymeleaf </h1>

</footer>

把div标签换成了footer标签。

th:include的结果:

<div>

<h1>Hello Thymeleaf </h1>

<div>

把div标签里面的内容换成了footer标签里面的内容。3.X版本后不再推荐使用。

6、字面量:字面量可以是文本、数字、布尔和null等类型。

7、算术操作:+、-、*、/、%例如:

<div th:with= "isEven=(${user.age} % 2 == 0)">

8、其他运算符:比较: >、>、\、、=、\<= (gt、lt、ge、le)等价: ==、!= (eq、ne)三目运算符:

<tr th:class = "${row.even} ? 'even' : 'odd' " ></tr>

9、迭代器:th:each相当于Java的foreach.

<tr th:each="user : ${userList}">

<td th:text="${user.id}"></td>

<td th:text="${user.email}"></td>

</tr>

这样就是遍历userList集合。

迭代器的状态变量有:index、count、size、current、even/odd、first、last

10、条件语句:th:if、th:unless、switch

<div th:switch="${user.role}">

<p th:case=" 'admin' ">User is admin</p>

<p th:case=" 'guest' ">User is guest</p>

</div>

11、模板布局:th:fragment比如定义一个公用的页头:

<div th:fragment="header">

<h1>Thymeleaf in action</h1>

<a href="/users">首页</a>

</div>

在其他页面直接这样引用就行:

<div th:replace="~{fragments/header :: header}"></div>

12、表达式基本对象:表达式基本对象有:param、session、application、request、servletContext。

三、thymeleaf与springboot集成案例:

本案例使用gradle构建,未涉及数据库,数据保存在ConcurrentMap中。未曾了解gradle的老铁可以参考一下gradle的使用。点我下载本案例源码。项目结构如下:

1、添加依赖:

dependencies {

compile('org.springframework. boot:spring-boot-starter-web')

testCompile('org.springframework.boot: spring-boot-starter-test' )

//thymeleaf的依赖

compile ('org.springframework.boot:spring-boot-starter-thymeleaf')

}

2、application.properties:

#thymeleaf相关配置

spring.thymeleaf.encoding=UTF-8

spring.thymeleaf.cache=false

spring.thymeleaf.mode=HTML5

3、entity层:

public class User {

private Long id;

private Stringname;

private String email;

}

4、dao层:

import java . util . ArrayList ;

import java . util . List ;

import java . util . concurrent . ConcurrentHashMap ;

import java . util . concurrent . ConcurrentMap ;

import java . util . concurrent . atomic . AtomicLong ;

import org . springframework . stereotype . Repository ;

import com . zhu . test . dao . UserDao ;

import com . zhu . test . entity . User ;

/**

* user dao层实现

* @author zhu

*

*/

@Repository

public class UserDaoImpl implements UserDao {

//用来计数的

private static AtomicLong counter = new AtomicLong ();

// 用来保存user的map

private final ConcurrentMap < Long , User > userMap = new ConcurrentHashMap <>();

@Override

public User saveOrUpdateUser ( User user ) {

Long id = user . getId ();

if ( id == null ) { //save

id = counter . incrementAndGet ();

user . setId ( id );

}

this . userMap . put ( id , user );

return user ;

}

@Override

public void deleteUser ( Long id ) {

this . userMap . remove ( id );

}

@Override

public User getUserById ( Long id ) {

return this . userMap . get ( id );

}

@Override

public List < User > listUsers () {

return new ArrayList < User >( this . userMap . values ());

}

}

将user保存在ConcurrentMap中,crud操作其实都是对这个map进行操作。

5、controller层:

@RestController

@RequestMapping ( "/users" )

public class UserController {

@Autowired

private UserDao userDao ;

/**

* 查询所有用户

*

* @param model

* @return

*/

@GetMapping

public ModelAndView list ( Model model ) {

model . addAttribute ( "userList" , userDao . listUsers ());

model . addAttribute ( "title" , "用户管理" );

return new ModelAndView ( "user/list" , "userModel" , model );

}

/**

* 根据id查询用户

*

* @param id

* @param model

* @return

*/

@GetMapping ( "{id}" )

public ModelAndView view ( @PathVariable ( "id" ) Long id , Model model ) {

User user = userDao . getUserById ( id );

model . addAttribute ( "user" , user );

model . addAttribute ( "title" , "查看用户" );

return new ModelAndView ( "user/view" , "userModel" , model );

}

/**

* 获取创建表单页面

*

* @param model

* @return

*/

@GetMapping ( "/form" )

public ModelAndView createForm ( Model model ) {

model . addAttribute ( "user" , new User ());

model . addAttribute ( "title" , "创建用户" );

return new ModelAndView ( "user/form" , "userModel" , model );

}

/**

* 保存或更新用户

*

* @param user

* @return

*/

@PostMapping

public ModelAndView saveOrUpdateUser ( User user ) {

user = userDao . saveOrUpdateUser ( user );

return new ModelAndView ( "redirect:/users" );

}

/**

* 删除用户

*

* @param id

* @return

*/

@GetMapping ( "/delete/{id}" )

public ModelAndView delete ( @PathVariable ( "id" ) Long id ) {

userDao . deleteUser ( id );

return new ModelAndView ( "redirect:/users" ); // 重定向到list页面

}

/**

* 获取修改用户的界面

*

* @param id

* @param model

* @return

*/

@GetMapping ( "/modify/{id}" )

public ModelAndView modify ( @PathVariable ( "id" ) Long id , Model model ) {

User user = userDao . getUserById ( id );

model . addAttribute ( "user" , user );

model . addAttribute ( "title" , "修改用户" );

return new ModelAndView ( "user/form" , "userModel" , model );

}

}

6、前端页面:注意:要使用thymeleaf,需要在html标签中加上

xmlns : th = "http://www.thymeleaf.org"

xmlns : layout = "http://www.ultraq.net.nz/thymeleaf/layout"

如下页面:页头:header.html

<!DOCTYPE html>

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

xmlns:layout = "http://www.ultraq.net.nz/thymeleaf/layout" >

<head>

<meta charset = "UTF-8" >

<title> thymeleaf in action </title>

</head>

<body>

<div th:fragment = "header" >

<h1> Thymeleaf in action </h1>

<a href = "/users" > 首页 </a>

</div>

</body>

</html>

页脚:footer.html

<!DOCTYPE html>

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

xmlns:layout = "http://www.ultraq.net.nz/thymeleaf/layout" >

<head>

<meta charset = "UTF-8" >

<title> thymeleaf in action </title>

</head>

<body>

<div th:fragment = "footer" >

<a href = "#" > 邮箱 </a>

</div>

</body>

</html>

form.html:

<!DOCTYPE html>

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

xmlns:layout = "http://www.ultraq.net.nz/thymeleaf/layout" >

<head>

<meta charset = "UTF-8" >

<title> thymeleaf in action </title>

</head>

<body>

<div th:replace = "~{fragments/header :: header}" ></div>

<h3 th:text = "${userModel.title}" > test </h3>

<form action = "/users" th:action = "@{/users}" method = "POST" th:object = "${userModel.user}" >

<input type = "hidden" name = "id" th:value = "*{id}" >

名称: <br>

<input type = "text" name = "name" th:value = "*{name}" ><br>

邮箱: <br>

<input type = "text" name = "email" th:value = "*{email}" >

<input type = "submit" value = "提交" >

</form>

<div th:replace = "~{fragments/footer :: footer}" ></div>

</body>

</html>

list.html:

<!DOCTYPE html>

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

xmlns:layout = "http://www.ultraq.net.nz/thymeleaf/layout" >

<head>

<meta charset = "UTF-8" >

<title> thymeleaf in action </title>

</head>

<body>

<!-- 引用头部信息 -->

<!-- 在fragments下的header文件下有名为header的片段 -->

<div th:replace = "~{fragments/header :: header}" ></div>

<h3 th:text = "${userModel.title}" ></h3>

<div>

<a href = "/users/form.html" th:href = "@{/users/form}" > 创建用户 </a>

</div>

<table border = "1" >

<thead>

<tr>

<td> ID </td>

<td> Email </td>

<td> Name </td>

</tr>

</thead>

<tbody>

<tr th:if = "${userModel.userList.size()} eq 0" >

<td colspan = "3" > 没有用户信息 </td>

</tr>

<tr th:each = "user : ${userModel.userList}" >

<td th:text = "${user.id}" ></td>

<td th:text = "${user.email}" ></td>

<td ><a th:href = "@{'/users/'+${user.id}}" th:text = "${user.name}" ></a></td>

</tr>

</tbody>

</table>

<div th:replace = "~{fragments/footer :: footer}" ></div>

</body>

</html>

view.html:

<!DOCTYPE html>

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

xmlns:layout = "http://www.ultraq.net.nz/thymeleaf/layout" >

<head>

<meta charset = "UTF-8" >

<title> thymeleaf in action </title>

</head>

<body>

<div th:replace = "~{fragments/header :: header}" ></div>

<h3 th:text = "${userModel.title}" > test </h3>

<div>

<p><strong> ID: </strong><span th:text = "${userModel.user.id}" ></span></p>

<p><strong> Name: </strong><span th:text = "${userModel.user.name}" ></span></p>

<p><strong> Email: </strong><span th:text = "${userModel.user.email}" ></span></p>

</div>

<div>

<a th:href = "@{'/users/delete/'+${userModel.user.id}}" > 删除 </a>

<a th:href = "@{'/users/modify/'+${userModel.user.id}}" > 修改 </a>

</div>

<div th:replace = "~{fragments/footer :: footer}" ></div>

</body>

</html>

以上页面就涉及到了thymeleaf的常用标签,通过这几个页面,理解thymeleaf的用法。

7、测试效果:

点击“创建用户”:

点击“提交”后:

点击name栏可以进入view页面:

总结:

thymeleaf标签看起来很多,其实常用的也不多,且很好理解。 主要别忘了在html标签中需要加上 xmlns:th= "http://www.thymeleaf.org"xmlns:layout= "http://www.ultraq.net.nz/thymeleaf/layout"。

如果eclipse写thymeleaf标签时没有提示,安装一下thymeleaf插件重启eclipse即可, 点击 help-->installnewsoftware,地址为: http://www.thymeleaf.org/eclipse-plugin-update-site/.

 
   
102 次浏览  评价: 差  订阅 捐助
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号