一、Thymeleaf 基本介绍
Thymeleaf是一款模板引擎产品,是一款优秀的面向JAVA的XML/XHTML/HTML5页面模板,具有丰富的标签语言和函数。因此,在使用SpringBoot开发前端网页,经常选择Thymeleaf。 在前后端分离框架流行的今天,我们需要根据业务需求来选择前端框架。对于内容管理类网站,前端框架需要将后端获取的内容直接生成到网页中,而不是通过jquery或其他页面脚本获取。这样适合搜索引擎进行关键词检索。而对于后端系统,不需要网页内容被网络爬虫抓取,可使用jquery,vue等框架。使用Thymeleaf模板引擎,非常适合开发新闻网站、知识库等需要搜索引擎收录的网站。用Thymeleaf开发的页面,打开html正文可看到后台查询到的正文。
另外,因为后面的框架整合中,需要使用Thymeleaf做一个通用的错误信息提示页面,在页面中需要使用Thymeleaf标签引用错误的编码、错误消息,所以我们在开发异常框架处理前,先把Thymeleaf框架整合进来。
Thymeleaf的官网是:www.thymeleaf.org
本文主要目的是整合Thymeleaf框架,详细使用可百度一下,这里仅对Thymleaf的使用做个简单的介绍:
(1)常用表达式:${...} 变量表达式 *{...} 选择表达式 #{...} 消息文字表达式 @{...} 链接表达式 #maps 工具对象表达式。
(2)常用标签:th:action 定义后台控制器路径;th:each 循环语句;th:field 表单字段绑定;
th:href 定义超链接 ; th:id DIV 标签中的id声明 ; th:if 条件判断 ; th:include 布局标签,替换
内容引入文件; th:fragment 布局标签,定义一个代码片段,方便其他地方引用 ;
th:object 替换对象 ;th:src 图片类地址引入 ;th:text 显示文本 ;th:value 属性赋值。
(3)常用函数:#dates 日期函数 #lists 列表函数 #arrays数组函数 #strings 字符串函数 #numbers数字函数 #calendars 日历函数 #objects对象函数 #bools逻辑函数。
下面是一些简单示例:
(1)文本: <p th:text=“ ‘hello world’”></p>
(2)${} 变量引用 文本: <p th:text=“ ${name}”></p>
(3)URL 及资源引用 <img th:src=”@{/image/a.jpg}”> th:ref=”@{/css/test.css}” th:src=”
@{/js/test.js}”
(4)session获取:${session.valueXXX}
(5) ServletContext:${#sevletContext.getAttribute(‘value11’)}
(6) 表单:<form action=“#” th:action=”@{/login}” th:object=”${loginUser}”>
(7)业务逻辑组件及实体属性:
<span th:text=”${@myService.getUser(‘zhangsa’).userName}”>
二、在SpringBoot中整合Thymeleaf
1、引入Thymeleaf依赖:
在openjweb-sys的pom.xml中增加thymeleaf依赖:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、在application-dev.yml的spring标签中增加thymeleaf相关的参数设置(注意换行参数低2格):
3、在resources创建template目录,在此目录下创建一个userlist.html文件:
这个userlist.html是本文的示例页面,在页面中引入了Thymleaf,并在页面中呈现后台控制层返回的变量。下面是userlist.html的内容:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>hello</title><meta htp-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head><body>
<table><tr><td>用户名</td><td>登录账号</td></tr><tr th:each="user:${users}"><td th:text="${user.realName}"></td><td th:text="${user.loginId}"></td></tr>
</body>
</table>
</html>
注意代码中${users}接收控制层理返回的users数组变量,并通过th:earch遍历users数组中的值,分别通过${user.realName}和${user.loginId}显示用户姓名和登录账号。
4、控制层代码:
注意因为Thymeleaf对应的控制层是需要返回视图的,所以对应的控制层的类的注解是@Controller而不是@RestController。这两者有很大的差别。下面是控制层代码(org.openjweb.sys.controller.TemplateController.java):
package org.openjweb.sys.controller;import org.openjweb.sys.entity.CommUser;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;import java.util.ArrayList;
import java.util.List;@Controller
@RequestMapping("/demo/tmpl/")
public class TemplateController {//http://localhost:8001/demo/tmpl/queryUser@RequestMapping(value = "queryUser")public String list(Model model) {List<CommUser> userList = new ArrayList<>();CommUser user = new CommUser();user.setLoginId("admin");user.setRealName("阿宝");userList.add(user);model.addAttribute("users", userList);return "userlist";}//http://localhost:8001/demo/tmpl/queryUser2@RequestMapping(value = "queryUser2")public ModelAndView list2() {List<CommUser> userList = new ArrayList<>();CommUser user = new CommUser();user.setLoginId("admin");user.setRealName("阿宝");userList.add(user);ModelAndView model = new ModelAndView();model.addObject("users",userList);model.setViewName("userlist");//指定视图return model;//这个前端没有解析出来}
}
注意上面实现了2个方法,第一个方法是返回String类型的userlist,这个自动对应templates/userlist.html ;第二个方法是返回ModelAndView,并为此类的示例设置users数组以及通过setViewName指定视图userlist。两者实际运行效果一样。
启动SpringBoot后,可分别运行http://localhost:8001/demo/tmpl/queryUser 和http://localhost:8001/demo/tmpl/queryUser2查看演示效果:
项目完整示例代码可从Github上下载整个工程:
https://github.com/openjweb/cloud/tree/masterhttps://github.com/openjweb/cloud/tree/master