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;@Overridepublic 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 {@Overrideprotected 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.htmlsuper.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;
}

Thymeleaf配置及入门相关推荐

玩转springboot：thymeleaf模板引擎入门程序
一.前言常用的模板引擎有:JSP.Velocity.Freemarker.Thymeleaf 但是,Springboot默认是不支持JSP的,默认使用thymeleaf模板引擎.而且,语法更简单,功 ...
Thymeleaf【快速入门】
前言:突然发现自己给自己埋了一个大坑,毕设好难..每一个小点拎出来都能当一个小题目(手动摆手..),没办法自己选的含着泪也要把坑填完..先一点一点把需要补充的知识学完吧.. Thymeleaf介绍稍 ...
Vue-cli3配置教程入门
Vue-cli3配置教程入门 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcem ...
Spring - Bean注解配置光速入门
Bean注解配置光速入门步骤一: 创建 web 项目,引入 Spring 的开发包在 Spring 的注解的 AOP 中需要引入 spring-aop 的 jar 包步骤二: 引入相关配置文件 ...
Java环境下GDAL / OGR环境配置与入门
Java环境下GDAL / OGR环境配置与入门 0.概述 1.环境配置 1.1 开发环境下载 1.2 环境变量配置 1.3java工程配置 1.3.1新建Java工程 1.3.2添加GDAL的jar ...
C#环境下GDAL / OGR环境配置与入门
C#环境下GDAL.OGR环境配置与入门 0.概述 1.环境配置 2.类库介绍 3.代码实践 4. 总结 0.概述由于需要进行一些Shapefile文件的读取和管理,但是ArcGIS的二次开发工具又 ...
Web基础配置篇（十二）: Elasticsearch的安装配置及入门使用
Web基础配置篇(十二): Elasticsearch的安装配置及入门使用一.概述 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RE ...
ZblogPHP主题配置制作入门(一)
ZblogPHP主题配置制作入门(一) 2014-12-01 14:24 家居设计标签:主题 Z-BlogPHP 模板 4613 2 做了这么久的ZblogPHP主题,发现自己还 ...
Ubuntu 配置新手入门
Ubuntu 配置新手入门按住快捷键ctrl+alt+t打开命令行,输入: sudo apt-get update sudo apt-get upgrade 更新下载源,升级所有软件下载googl ...

Thymeleaf配置及入门

Thymeleaf - 视图模板技术

Thymeleaf配置及入门相关推荐

最新文章

热门文章