1.什么是Thymeleaf
今天我们来学习Thymeleaf,如果你对Thymeleaf比较陌生也不要紧,它很容易学习与理解,并有着自己鲜明的特色。
Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎
模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的html文档。从字面上理解模板引擎,最重要的就是模板二字,这个意思就是做好一个模板后套入对应位置的数据,最终以html的格式展示出来,这就是模板引擎的作用。
2.Thymeleaf基本使用
- 导入jar包:
- 新增ViewBaseServlet基类:(这里已经写好了,直接复制粘贴即可)
import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import org.thymeleaf.TemplateEngine; import org.thymeleaf.context.WebContext; import org.thymeleaf.templatemode.TemplateMode; import org.thymeleaf.templateresolver.ServletContextTemplateResolver; import javax.servlet.ServletContext; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * 视图模板基类 */ public class ViewBaseServlet extends HttpServlet { private TemplateEngine templateEngine; @Override public void init() throws ServletException { // 1.获取ServletContext对象 ServletContext servletContext = this.getServletContext(); // 2.创建Thymeleaf解析器对象 ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(servletContext); // 3.给解析器对象设置参数 // ①HTML是默认模式,明确设置是为了代码更容易理解 templateResolver.setTemplateMode(TemplateMode.HTML); // ②设置前缀 String viewPrefix = servletContext.getInitParameter("view-prefix"); templateResolver.setPrefix(viewPrefix); // ③设置后缀 String viewSuffix = servletContext.getInitParameter("view-suffix"); templateResolver.setSuffix(viewSuffix); // ④设置缓存过期时间(毫秒) templateResolver.setCacheTTLMs(60000L); // ⑤设置是否缓存 templateResolver.setCacheable(true); // ⑥设置服务器端编码方式 templateResolver.setCharacterEncoding("utf-8"); // 4.创建模板引擎对象 templateEngine = new TemplateEngine(); // 5.给模板引擎对象设置模板解析器 templateEngine.setTemplateResolver(templateResolver); } /** * 完成资源的转发和数据的渲染 * * @param templateName 模板名称 * @param req req * @param resp resp * @throws IOException 抛出的IO读取异常信息 */ protected void processTemplate(String templateName, HttpServletRequest req, HttpServletResponse resp) throws IOException { // 1.设置响应体内容类型和字符集 resp.setContentType("text/html;charset=UTF-8"); // 2.创建WebContext对象 WebContext webContext = new WebContext(req, resp, getServletContext()); // 3.处理模板数据 templateEngine.process(templateName, webContext, resp.getWriter()); } }
- 在
web.xml
文件中添加配置(在上下文参数中配置视图前缀和视图后缀)
<!-- 在上下文参数中配置视图前缀和视图后缀 --> <context-param> <param-name>view-prefix</param-name> <param-value>/</param-value> </context-param> <context-param> <param-name>view-suffix</param-name> <param-value>.html</param-value> </context-param>
在ViewBaseServlet中,会读取xml文件中的视图前缀和视图后缀,对应的代码片段如下:
// ②设置前缀 String viewPrefix = servletContext.getInitParameter("view-prefix"); templateResolver.setPrefix(viewPrefix); // ③设置后缀 String viewSuffix = servletContext.getInitParameter("view-suffix"); templateResolver.setSuffix(viewSuffix);
- 在创建的Thymeleaf演示Servlet要继承我们的基类ViewBaseServlet
示例如下:
import jdbc.dao.UserDAO; import jdbc.domain.User; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; import java.util.List; /** * 使用Thymeleaf渲染页面展示user列表 */ @WebServlet("/showuser") public class ShowUserServlet extends ViewBaseServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { UserDAO userDAO = new UserDAO(); List<User> userList = userDAO.getUserList(); // 将userList放到session 作用域 HttpSession session = req.getSession(); session.setAttribute("userList", userList); System.out.println(userList); } }
5.完善演示类:
import jdbc.dao.UserDAO; import jdbc.domain.User; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; import java.util.List; /** * 使用Thymeleaf渲染页面展示user列表 */ @WebServlet("/showuser") public class ShowUserServlet extends ViewBaseServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { UserDAO userDAO = new UserDAO(); List<User> userList = userDAO.getUserList(); // 将userList放到session 作用域 HttpSession session = req.getSession(); session.setAttribute("userList", userList); // 注意:物理视图名称 = view-prefix + view-suffix // 这里结合xml文件拼接也就是/showuser.html super.processTemplate("showuser", req, resp); } }
6.编写视图文件
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>用户信息</title> </head> <style> table { width: 80%; border-color: white; } table tr { line-height: 30px; border-color: white; } table tr:FIRST-CHILD { background: #f2f2f2; } table tr:nth-child(even) { background: #d5eeeb; } </style> <body> <table> <tbody> <tr align="center"> <td>用户名</td> <td>学校</td> </tr> <tr align="center" th:if="${#lists.isEmpty(session.userList)}"> <td>没有啦</td> <td> 没有啦</td> </tr> <tr align="center" th:unless="${#lists.isEmpty(session.userList)}" th:each="user : ${session.userList}"> <td th:text="${user.username}"></td> <td th:text="${user.school}"> </td> </tr> </tbody> </table> </body> </html>
7.此时启动tomcat打开浏览器,访问/showuser
页面,数据库内容渲染页面成功