- Thymeleaf是一个流行的模板引擎
该模板引擎采用Java语言开发，模板引擎是一个技术名词，是跨领域跨平台的概念。也可以叫做视图模板技术
在Java语言体系下有模板引擎，在C#、PHP语言体系下也有模板引擎。
① 新建一个继承HttpServlet类的Servlet类，该类中包含初始化init方法和模板处理processTemplate方法
② 再新建的Servlet组件需继承该Servlet类，这样可调用上述两个方法并配合xml配置文件对html文件组装
③ 组装进来的html文件内就可以使用thymeleaf语言进行实时渲染了（还需要保存作用域进行传参）
主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。使用thymeleaf创建的html模板可以在浏览器里面直接打开（展示静态数据），这有利于前后端分离。
需要注意的是Thymeleaf不是spring旗下的。这里我们使用Thymeleaf 3版本。
主要作用是把数据库中的数据（或者叫Java内存中的数据）加载到html页面上，这个过程叫做渲染，因此其语法主要是如何解析model中的数据，因此thymeleaf就是用来帮我们做视图渲染的一个技术。
补充说明：在之前用Html，Css，Javascript写的页面中的数据都是假的，不是数据库中真正的数据。
- 添加thymeleaf的jar包 在web.xml文件中添加上下文参数配置
view-prefix / view-suffix .html
注：在Servlet3.0后，和的配置可通过注解@WebServlet("/index")代替
参考：Servlet中@WebServlet属性详解
新建一个Servlet类（ViewbaseServlet），有初始init方法和模板处理方法
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());
}
}
根据请求创建对应的Servlet组件（继承ViewbaseServlet） // 在Servlet3.0后，注解@WebServlet("/index")代替和的配置
@WebServlet("/index")
public class IndexServlet extends ViewbaseServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) {
Connection conn = null;
try {
// 1.连接数据库，获取数据库中的数据，返回一个集合
conn = JdbcUtils.getConnection();
ListIpm ipm = new ListIpm();
List custList = ipm.getList(conn);
HttpSession s = req.getSession();
s.setAttribute("cl",custList);
super.processTemplate("index",req,resp);
} catch (Exception e) {
e.printStackTrace();
} finally {
JdbcUtils.closeResource(conn,null);
}
}
}
在指定的html文件（即模板）中使用thymeleaf标签进行渲染，将数据库的数据动态加载到html中
欢迎使用客户后台管理系统
cust_id
cust_name
cust_email
cust_birth
无客户名单！
1
太白金星
tbstart@163.com
1000-1-1
- 在index.html文件内的某单元格上设置超链接，在html内向服务器发送请求
欢迎使用客户后台管理系统
cust_id
cust_name
cust_email
cust_birth
无客户名单！
1
太白金星
tbstart@163.com
1000-1-1
创建“/edit.do”对应的servlet组件 @WebServlet("/edit.do")
public class EditServlet extends ViewbaseServlet {
private ListIpm listIpm = new ListIpm();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) {
Connection conn = null;
try {
conn = JdbcUtils.getConnection();
// 1.去数据库中查询某一个库存记录，根据thymeleaf在html中的超链接标签中提供的id
String idStr = req.getParameter("cid");
// 2.将判断idStr不是空字符串且不为null的语句写成一个工具类内的方法，方便后续频繁调用
if (StringUtil.isNotEmpty(idStr)) {
int id = Integer.parseInt(idStr);
// 3.通过DAO调取数据库中对应的数据
Customers customer = listIpm.getCustomerById(conn, id);
// 4.将获取到的数据（引用类型），以键值对的形式保存到作用域中，就可在html中调用了
req.setAttribute("cu" ,customer);
// 5.调用模板处理方法，连接到edit.html文件中(如果该页面不存在，就创建一个)
super.processTemplate("edit",req,resp);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
JdbcUtils.closeResource(conn,null);
}
}
}
补充：工具类
public class StringUtil {
public static boolean isEmpty(String str) {
return str==null || "".equals(str);
}
public static boolean isNotEmpty(String str) {
return !isEmpty(str);
}
}
根据模板处理方法，创建一个edit.html文件
修改/编辑库存信息
创建th:action="@{update.do}"对应的Servlet组件 请求类型：表单是post请求，其它的都是get请求
@WebServlet("/update.do")
public class UpdateServlet extends ViewbaseServlet {
private ListIpm listIpm = new ListIpm();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
Connection conn = null;
try {
// 1.设置post请求的编码格式
req.setCharacterEncoding("UTF-8");
// 2.读取html文件内post表单的各个数据
String idStr = req.getParameter("id");
int id = Integer.parseInt(idStr);
String name = req.getParameter("name");
String email = req.getParameter("email");
String birth = req.getParameter("birth");
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
Date date = format.parse(birth);
// 3.调用DAO内的方法，将表单内的数据写入到数据库中
conn = JdbcUtils.getConnection();
listIpm.updateById(conn,name,email,date,id);
resp.sendRedirect("index");
} catch (Exception e) {
e.printStackTrace();
} finally {
JdbcUtils.closeResource(conn,null);
}
}
}
- 在index.html文件内的某单元格上使用thymeleaf的事件方法，转接到js文件上
对应事件的js文件
function delCust(s) {
if (/confirm/i('是否确认删除')) {
// sid是传递在url框上的参数，同时也是被del.do所对应的组件所获取的参数来源
window.location.href = 'del.do?sid=' + s;
}
}
#####创建对应的Servlet组件
@WebServlet("/del.do")
public class DelCustServlet extends ViewbaseServlet {
private ListIpm listIpm = new ListIpm();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) {
String idStr = req.getParameter("sid");
if (StringUtil.isNotEmpty(idStr)) {
Connection conn = null;
try {
int id = Integer.parseInt(idStr);
conn = JdbcUtils.getConnection();
listIpm.delById(conn,id);
resp.sendRedirect("index");
} catch (Exception e) {
e.printStackTrace();
} finally {
JdbcUtils.closeResource(conn,null);
}
}
}
}
- 在index.html文件上添加div层，转接到新的html的表单上
创建新的html文件，用于发送表单
新增库存信息
创建新的html文件对应的Servlet组件 @WebServlet("/add.do")
public class AddServlet extends ViewbaseServlet {
private ListIpm listIpm = new ListIpm();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
Connection conn = null;
try {
String name = req.getParameter("name");
String email = req.getParameter("email");
String birth = req.getParameter("birth");
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
Date date = format.parse(birth);
conn = JdbcUtils.getConnection();
listIpm.addCustomer(conn,name,email,date);
resp.sendRedirect("index");
} catch (Exception e) {
e.printStackTrace();
} finally {
JdbcUtils.closeResource(conn,null);
}
}
}
- 接口
public interface ListDAO {
// 获取所有的客户信息
List getList(Connection conn);
// 根据id获取指定客户的信息
Customers getCustomerById(Connection conn,int id);
// 修改指定的客户信息
void updateById(Connection conn, String name, String email, Date date, int id);
// 删除指定的客户信息
void delById(Connection conn, int id);
// 增加客户信息
void addCustomer(Connection conn,String name, String email, Date date);
}
实现类 public class ListIpm extends baseDAOimplements ListDAO{ @Override public List getList(Connection conn) { String sql = "select cust_name name,cust_email email,cust_birth birth,cust_id id from customers"; return super.CommonRetrieve(conn, sql); } @Override public Customers getCustomerById(Connection conn,int id) { String sql = "select cust_name name,cust_email email,cust_birth birth,cust_id id from customers where cust_id" + " = ?"; return super.singleCommonRetrieve(conn,sql,id); } @Override public void updateById(Connection conn, String name, String email, Date date, int id) { String sql = "update customers set cust_name = ? , cust_email= ? , cust_birth = ? where cust_id = ?"; super.update(conn,sql,name,email,date,id); } @Override public void delById(Connection conn, int id) { String sql = "delete from customers where cust_id = ?"; super.update(conn,sql,id); } @Override public void addCustomer(Connection conn, String name, String email, Date date) { String sql = "insert into customers values(0,? , ? , ?)"; super.update(conn,sql,name,email,date); } }
- Thymeleaf入门到吃灰idea中artifacts、facets、modules是什么意思
