【Thymeleaf】整合web项目的简单使用

最新推荐文章于 2024-07-24 11:38:53 发布

宋芽芽发芽

最新推荐文章于 2024-07-24 11:38:53 发布

阅读量866

点赞数 1

文章标签： java idea tomcat

本文链接：https://blog.csdn.net/m0_46480891/article/details/123829195

版权

Thymeleaf - 视图模板技术

1.web项目使用Thymeleaf步骤

（1）添加thymeleaf的jar包

（2）新建一个Servlet类ViewBaseServlet

package com.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;

/**
 * @author serein
 * @create 2022-03-28-13:16
 */
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>
        <!-- / 表示web根目录-->
        <param-value>/</param-value>
    </context-param>
    <context-param>
        <param-name>view-suffix</param-name>
        <param-value>.html</param-value>
    </context-param>

（4）我们的Servlet继承ViewBaseServlet

（5）根据逻辑视图名称得到物理视图名称

package com.fruit.servlets;


import com.fruit.dao.FruitDAO;
import com.fruit.dao.impl.FruitDAOImpl;
import com.fruit.pojo.Fruit;
import com.myssm.myspringmvc.ViewBaseServlet;

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;

/**
 * @author serein
 * @create 2022-03-28-12:52
 */
//Servlet从3.0开始支持注解方式的注册
@WebServlet("/index")
public class IndexServlet extends ViewBaseServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        FruitDAO fruitDAO = new FruitDAOImpl();
        List<Fruit> fruitList = fruitDAO.getFruitList();
       
        //保存到session作用域
        HttpSession session = req.getSession();
        session.setAttribute("fruitList",fruitList);

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

    }
}

（6）使用Thymeleaf标签

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="div_container">
    <div id="div_fruit_list">

        <p class="center">欢迎使用水果库存后台管理系统</p>
        <table id="tbl_fruit">
            <tr>
                <th class="w20">名称</th>
                <th class="w20">单价</th>
                <th class="w20">库存</th>
                <th>操作</th>
            </tr>
          <!--#lists.isEmpty:判断集合整体是否为空 -->
          <!--session.fruitList:操作会话域的数据 -->
            <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}"></td>
                <td th:text="${fruit.fcount}"></td>
                <td><img src="./imgs/del.jpg" class="delImg"></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

2.Thymeleaf常用属性

常用th属性解读
html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越小优先级越高。

th属性	解释
th:text	设置当前元素的文本内容，相同功能的还有th:utext，两者的区别在于前者不会转义html标签，后者会。优先级不高order=7
th:value	设置当前元素的value值，类似修改指定属性的还有th:src，th:href。优先级不高order=6
th:each	遍历循环元素，和th:text或th:value一起使用。注意该属性修饰的标签位置，详细往后看。优先级很高：order=
th:if	条件判断，类似的还有th:unless，th:switch，th:case。优先级较高：order=3
th:insert	代码块引入，类似的还有th:replace，th:include，三者的区别较大，若使用不恰当会破坏html结构，常用于公共代码块提取的场景。优先级最高：order=1
th:fragment	定义代码块，方便被th:insert引用。优先级最低：order=8
th:object	声明变量，一般和*{}一起配合使用，达到偷懒的效果。优先级一般：order=4
th:attr	修改任意属性，实际开发中用的较少，因为有丰富的其他th属性帮忙，类似的还有th:attrappend，th:attrprepend。优先级一般：order=5。

宋芽芽发芽

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
【Thymeleaf】整合web项目的简单使用

Thymeleaf - 视图模板技术1.web项目使用Thymeleaf步骤（1）添加thymeleaf的jar包（2）新建一个Servlet类ViewBaseServletpackage com.myssm.myspringmvc;import org.thymeleaf.TemplateEngine;import org.thymeleaf.context.WebContext;import org.thymeleaf.templatemode.TemplateMode;import
复制链接

扫一扫