Thymeleaf - 视图模板技术

一.配置步骤：

1） 添加thymeleaf的jar包

1.新建一个lib文件夹，将jar包都复制粘贴到该文件夹中

2.点击右键，点击Add as Library

3.点击OK

4.打开Project Structure，找到Modules，点击加号，点击Library，找到lib，完成添加


5.在Problems中找到Fix，点击 Add “lib” to the artifact

2） 新建一个Servlet类ViewBaseServlet

在src中添加ViewBaseServlet类

该类代码如下：

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.ServletException;
import javax.servlet.http.HttpServlet;
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);

    }

    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());
    }
}

3） 在web.xml文件中添加配置
- 配置前缀 view-prefix
- 配置后缀 view-suffix
配置文件代码如下：

<!-- 配置上下文参数 -->
    <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>

根据逻辑视图名称 得到 物理视图名称
此处的视图名称是 index
那么thymeleaf会将这个 逻辑视图名称 对应到 物理视图 名称上去
逻辑视图名称 ： index
物理视图名称 ： view-prefix + 逻辑视图名称 + view-suffix
所以真实的视图名称是： / index .html

4） 使得我们的Servlet继承ViewBaseServlet

二.简单实例
通过自定义的List集合，将数据导入到表格中

使用thymeleaf的标签
th:if , th:unless , th:each , th:text

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
 * @author ZHR
 * @version 1.0
 **/
//Servlet从3.0版本开始支持注解方式的注册
@WebServlet("/index")
public class IndexServlet extends ViewBaseServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Fruit> list = new ArrayList<>(4);
        for(int i = 0; i<4 ;i++){
            Fruit fruit = new Fruit("苹果",10,10,100);
            list.add(fruit);
        }
        //保存到作用域
        HttpSession session = req.getSession();
        session.setAttribute("list",list);


        //此处视图是index
        //那么thymeleaf会将这个 逻辑视图名称 对应到物理视图名称上去
        //逻辑视图 index
        //物理视图 view-prefix + 逻辑视图名称 + view-suffix
        //所以真是视图是 /index.html
        super.processTemplate("index",req,resp);
    }
}

注意：

1.//Servlet从3.0版本开始支持注解方式的注册
@WebServlet("/index")

2.通过下列代码来处理模板

super.processTemplate("index",req,resp);

html代码：

<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="test.css">
</head>
<body>
<div id="container">
  <table id="table_fruit">
    <tr >
      <th >名称</th>
      <th >单价</th>
      <th>数量</th>
      <th>操作</th>
    </tr>
    <tr th:if="${#lists.isEmpty(session.list)}">
      <td colspan="4">库存为空</td>
    </tr>
<!--  if是判断是否为条件真 unless是判断是否为条件假 each是叠代，从session.list中依次取出一个对象赋给fruit  -->
    <tr th:unless="${#lists.isEmpty(session.list)}" th:each="fruit : ${session.list}">
      <td th:text="${fruit.getName()}">苹果</td>
      <td th:text="${fruit.getNum()}">5</td>
      <td th:text="${fruit.getPrice()}">20</td>
      <td><img src="1.jpg" height="24px" /></td>
    </tr>

  </table>
</div>
</body>
</html>

css代码：

body{
    margin: 0;
    padding: 0;
}
div{
    position: relative;
    float: left;
}
#container{
    width: 80%;
    height: 100%;
    border: 1px solid blue;
    margin-left: 10%;

}
#table_fruit , #table_fruit th , #table_fruit tr , #table_fruit td {
    border: 1px solid gray;
    /* 边框合并 */
    border-collapse: collapse;
    /*  居中  */
    text-align: center;
    line-height: 28px;
}
#table_fruit{
    width: 60%;
    margin-top: 120px;
    margin-left: 20%;
}
#table1{
    /* 边框合并 */
    border-collapse: collapse;
    /*  居中  */
    text-align: center;
    line-height: 28px;
    width: 40%;
    margin-left: 30%;
}
.btn{
    width: 90px;
    height: 24px;
}