【Thymeleaf 框架使用及步骤学习总结】简单入门

最新推荐文章于 2024-05-01 19:17:00 发布

积善之家、必有余庆

最新推荐文章于 2024-05-01 19:17:00 发布

阅读量1.9k

点赞数 3

分类专栏： # 框架文章标签： java html 数据库

本文链接：https://blog.csdn.net/qq_44682003/article/details/112464543

版权

框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在学习：Servlet 过程中，从数据库获取表 hero，然后把hero表中的信息以列表的形式返回给客户端，需要用到 Thymeleaf 框架，下面来讲解下！

一、Thymeleaf 框架介绍

1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
3.Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

二、导入Thymeleaf框架

依赖：会引入我们使用Thymeleaf框架的一些 jar 包

 <!-- Thymeleaf -->
    <dependency>
      <groupId>org.thymeleaf</groupId>
      <artifactId>thymeleaf</artifactId>
      <version>3.0.11.RELEASE</version>
    </dependency>

三、提供数据

获取数据库连接对象，执行sql语句获取表：hero 中的数据
说明：对于JDBC的知识，我近期会更新JDBC和Servlet的相关博客，这里就不多阐述了！

public class HeroDao {
    //返回所有用户
    public List<Hero> findAll() {
        ArrayList<Hero> list = new ArrayList<>();
        //获取连接
        try(Connection conn = DBUtils.getConn()){
            String sql = "select * from hero";
            //执行sql语句
            Statement s = conn.createStatement();
            //得到结果集并遍历
            ResultSet re = s.executeQuery(sql);
            while (re.next()){
                //得到hero信息
                int age = re.getInt(1);
                String name = re.getString(2);
                String type = re.getString(3);
                int money = re.getInt(4);
                //new Hero(*,*,*,*);加入到list集合 并返回
                list.add(new Hero(age,name,type,money));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }

我们在终端来看看我们：hero 表中的数据
在这里插入图片描述

下面我们用两种方式来实现：hero表中的信息以列表的形式返回给客户端

第一种： 也就是最初的版本，把我们 java 代码和 html 代码拼在一起

@WebServlet(name = "FindAllServlet",urlPatterns = "/findall")
public class FindAllServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        HeroDao dao = new HeroDao();
        //查询多个英雄信息 封装到Hero对象中
        //把多个英雄对象装进List集合
        List<Hero> list = dao.finAll();
        response.setContentType("text/html;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.print("<table border='1'>");
        pw.print("<caption>英雄列表</caption>");
        pw.print("<tr><th>id</th><th>name</th><th>type</th><th>money</th><th>操作</th></tr>");
        for (Hero hero:list){
            System.out.println(list+"....................");
            pw.print("<tr>");
            pw.print("<td>"+hero.getId()+"</td>");
            pw.print("<td>"+hero.getName()+"</td>");
            pw.print("<td>"+hero.getType()+"</td>");
            pw.print("<td>"+hero.getMoney()+"</td>");
            pw.print("<td><a href='delete?id="+hero.getId()+"'>删除</a></td>");
            pw.print("</tr>");
        }
        pw.print("</table>");
        pw.close();
    }
}

没有学过Servlet 的看不懂没有关系，我们只需要看懂这部分：
在这里插入图片描述

分析上述结果：我们把 java 代码和 html 写在一起，这对我我们修改java代码或者html来说都是很不便利的；其次面对大量的html时，这种方式是很麻烦耗时的！

第二种：使用Thymeleaf 框架

将服务器端的数据和html页面进行整合,得到一个装着数据和标签的新的html.

1、导入依赖，上面已经导入了
2、在项目resources目录下创建list.html(动态页面/模板页面),把页面相关标签添加进去

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>英雄列表</caption>
    <tr>
        <th>id</th><th>名字</th><th>类型</th><th>价格</th><th>操作</th>
    </tr>
    <!--th:each 是遍历的语法，${list}取出context中的数据，h代表遍历每一个英雄对象-->
    <tr th:each="h:${list}">
        <td th:text="${h.id}"></td>
        <td>th:text="${h.name}"></td>
        <td th:text="${h.type}"></td>
        <td th:text="${h.money}"></td>
    </tr>
</table>
</body>
</html>

说明：th:each 是遍历的语法，${list}取出context中的数据，h代表遍历每一个英雄对象，Context相当于一个容器，里面存储的就是我们的数据

准备工作已经做好了，下面就是 怎么把我们的数据和html结合，生成新的html啦，看下面

创建Context用于保存所有需要在页面上展示的动态数据

 Context context = new Context();
 context.setVariable("list",list);

创建解析器该解析器会自动查找src/main/resources目录下的模板页面

ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
resolver.setTemplateMode("html");//模板类型,指定为html格式
resolver.setCharacterEncoding("UTF-8");//模板使用的字符集(我们的页面都是UTF-8编码的)

实例化模板引擎,让解析器和模板引擎关联

TemplateEngine te = new TemplateEngine();
te.setTemplateResolver(resolver);//设置模板解释器,使其了解模板相关信息

将页面和数据整合到一起的到一个新的html字符串

 String html = te.process("list.html",context);

把得到的新的html返回给浏览器异常抛出

response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.print(html);

上面的这些步骤我们可以封装到一个工具类：ThUtils 里面，因为这些内容都是定死的，我们没有必要每次使用都把这些内容都写一遍

ThUtils 工具类

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class ThUtils {
	private static TemplateEngine te;
	static {
		//创建模板引擎对象
		te = new TemplateEngine();
		//创建解析器  该解析器会自动查找src/main/resources目录下的模板页面
		ClassLoaderTemplateResolver r = 
				new ClassLoaderTemplateResolver();
		//设置字符集
		r.setCharacterEncoding("UTF-8");
		//让解析器和模板引擎关联
		te.setTemplateResolver(r);
	}
	//Context导包 org.thymeleaf.Context
	public static void print(String fileName,Context context,
			HttpServletResponse response) throws IOException {
		//将页面和数据整合到一起的到一个新的html字符串
		String html = te.process(fileName, context);
		//把得到的新的html返回给浏览器   异常抛出
		response.setContentType("text/html;charset=utf-8");
		PrintWriter pw = response.getWriter();
		pw.print(html);
		pw.close();
	}
}

实现代码：

@WebServlet(name = "FindAllServlet",urlPatterns = "/findall")
public class FindAllServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //查看所有用户
        HeroDao dao = new HeroDao();
        List<Hero> list = dao.findAll();
       //通过 Thy模板引擎将页面和数据整合 并返回给客户端
        ///1、创建Context上下文（容器）
        Context context = new Context();
        //2、把数据装进容器 以键值对形式保存数据
        context.setVariable("list",list);
        //3、通过工具类将页面和数据整合 返回给客户端
        ThUtils.print("list.html",context,response);
    }
}

没有学过Servlet 的看不懂上面没有关系，我们只需要看懂这部分：
在这里插入图片描述
运行结果：

积善之家、必有余庆

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【Thymeleaf 框架使用及步骤学习总结】简单入门

在学习：Servlet 过程中，从数据库获取表 hero，然后把hero表中的信息以列表的形式返回给客户端，需要用到 Thymeleaf 框架，下面来讲解下！一、Thymeleaf 框架介绍1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymel.
复制链接

扫一扫