thymeleaf的使用

1、Thymeleaf - 视图模板技术

  • 1、添加thymeleaf的jar包
  • 2、新建一个Servlet类ViewBaseServlet
  • 3、在web.xml文件中添加配置
    • 配置前缀 view-prefix
    • 配置后缀 view-suffix
  • 4、使得我们的Servlet继承ViewBaseServlet
  • 5、根据逻辑视图名称 得到 物理视图名称
    • 此处的视图名称是 index
    • 那么thymeleaf会将这个 逻辑视图名称 对应到 物理视图 名称上去
    • 逻辑视图名称 : index
    • 物理视图名称 : view-prefix + 逻辑视图名称 + view-suffix
    • 所以真实的视图名称是: / index .html
   super.processTemplate("index",request,response);
  • 6、 使用thymeleaf的标签
 th:if   ,  th:unless   , th:each   ,   th:text

二、具体操作

2.1、添加jar包

步骤一:创建lib_thymeleaf文件夹,存放jar包
thymeleaf的使用_第1张图片
步骤二:把lib_thymeleaf设置为依赖
thymeleaf的使用_第2张图片
步骤三:为项目添加lib_thymeleaf添加依赖
thymeleaf的使用_第3张图片

2.2、创建一个Servlet类ViewBaseServlet

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

2.3、在web.xml文件中添加配置

	<context-param>
        <param-name>view-prefixparam-name>
        <param-value>/param-value>
    context-param>
    <context-param>
        <param-name>view-suffixparam-name>
        <param-value>.htmlparam-value>
	context-param>

2.4、创建IndexServlet类继承ViewBaseServlet

  • 在代码头部添加了@WebServlet("/index"),可以使访问localhost:8080/index时调用此方法,在该方法中调用FruitDAO读取数据库中数据,存放在session中。
  • 通过调用父类的processTemplate方法,使得数据传递到前端,并可以在前端通过thymeleaf调用其中的数据。
  • 注意:
    • @WebServlet("/index")表示访问时的链接,即localhost:8080/index
    • super.processTemplate("index",request,response)中的逻辑视图index通过读取xml中相应配置,得到真实的视图名称/index.html,从而自动调用index.html文件
@WebServlet("/index")
public class IndexServlet extends ViewBaseServlet {
    @Override
    public void doGet(HttpServletRequest request , HttpServletResponse response)throws IOException, ServletException {
        FruitDAO fruitDAO = new FruitDAOImpl();
        List<Fruit> fruitList = fruitDAO.getFruitList();
        //保存到session作用域
        HttpSession session = request.getSession() ;
        session.setAttribute("fruitList",fruitList);
        super.processTemplate("index",request,response);
    }
}

2.5、创建index.html文件

<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}">5td>
                <td th:text="${fruit.fcount}">20td>
                <td><img src="imgs/del.jpg" class="delImg"/>td>
            tr>
        table>
    div>
div>
body>
html>

三、thymeleaf的使用文档

代码重工

你可能感兴趣的:(javaWeb,java,jar,开发语言)