二. Thymeleaf - 视图模板技术一.Thymeleaf介绍 1.1 Thymeleaf的作用： Thymele

一.Thymeleaf介绍

1.1 Thymeleaf的作用：

Thymeleaf模板引擎在整个web项目中起到的作用为视图展示。在服务器将数据库数据响应给客户端并展示出时，用于渲染页面。

图示

二.使用步骤

添加thymeleaf的jar包

新建一个Servlet类ViewBaseServlet

package test.myssm.myspringmvc;

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

在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>

让Servlet继承ViewBaseServlet，再据逻辑视图名称得到物理视图名称

public class IndexServlet extends ViewBaseServlet {
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        FruitDAO fruitDAO = new FruitDAOImpl();
        List<Fruit> fruitList =  fruitDAO.getFruitList();
        HttpSession session = request.getSession();
        session.setAttribute("fruitList",fruitList);
        //此处的视图名称是 index
        //那么thymeleaf会将这个 逻辑视图名称 对应到 物理视图 名称上去
        //逻辑视图名称 ：   index
        //物理视图名称 ：   view-prefix + 逻辑视图名称 + view-suffix
        //所以真实的视图名称是：    /    index    .html
        super.processTemplate("index",request,response);//对index.html页面进行渲染
    }
}

再index.html中使用thymeleaf的标签
- th:if
- th:unless
- th:each
- th:text

<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="css/index.css">
   </head>
   <body>
      <div id="div_container">
         <div id="div_fruit_list">
            <p class="center f30">欢迎使用水果库存后台管理系统</p>
            <table id="tbl_fruit">
               <tr>
                  <th class="w20">名称</th>
                  <th class="w20">单价</th>
                  <th class="w20">库存</th>
                  <th>操作</th>
               </tr>
               <tr th:if="${#lists.isEmpty(session.fruitList)}">
                  <td colspan="4">对不起，库存为空！</td>
               </tr>
               <tr th:unless="${#lists.isEmpty(session.fruitList)}" th:each="fruit : ${session.fruitList}">
                  <td th:text="${fruit.fname}">苹果</td>
                  <td th:text="${fruit.price}">5</td>
                  <td th:text="${fruit.fcount}">20</td>
                  <td><img src="imgs/del.jpg" class="delImg"/></td>
               </tr>
            </table>
         </div>
      </div>
   </body>
</html>