【JavaWeb】Thymeleaf

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

Thymeleaf

视图模板技术：可以在你的页面上加载保存作用域中的数据。以JavaWeb_03为例。

• 在服务器端引入Thymeleaf技术的步骤

  1. 在项目中加入Thymeleaf jar包
  2. 在web.xml中添加配置（配置前缀prefix和后缀suffix）
  3. 新建Servlet类ViewBaseServlet——>代码直接复制即可。
  4. 使得我们的Servlet继承ViewBaseServlet。
  5. 在do方法中加入下面这句话：

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

  6. 在html页面中使用thymeleaf的标签：

     th:if、th:unless、th:each、th:text，标签作用已注释在代码中。

保存作用域

• request：一次请求响应范围有效。
• session：一次会话范围有效。 使用request.getSession()方法获取session。
• application：一次应用程序范围有效。 使用request.getServletContext()方法获取application。 ServletContext：Servlet上下文。Tomcat启动，上下文开始，Tomcat关闭，上下文停止。

路径问题

相对路径下，使用../可以返回上一级。以下面的图片为例：红色即为相对路径。蓝色为绝对路径。 一般情况下最好写绝对路径，所以用th : ... = @{ }。

水果库存系统实现CRUD、分页功能

1. 编辑和修改功能的实现逻辑： index.html(点击水果名称的超链接进行跳转，th:href=edit.do)——> EditServlet(获取要编辑的水果的fid，将该水果的信息放入保存作用域中，使用thymeleaf，执行super.processTemplate("edit",request,response) )——>edit.html(编辑完成后，提交表单，action=update.do)——>UpdateServlet(获取表单数据，使用FruitDAO与数据库进行交互，客户端重定向)——>index.html。
2. 删除功能的实现逻辑： index.html(点击删除图片，绑定th:onclick=delFruit方法，在js中实现该方法，执行del.do)——>DelServlet(获取fid，使用FruitDAO与数据库进行交互，客户端重定向)——>index.html。

th:onclick="|delFruit(${fruit.fid})|" 的解释：

1. 使用th:onclick而不是简单的onclick。

   因为fruit.fid要随着不同水果fid的变化而变化，所以要用th:onclick。

2. 在thymeleaf使用方法时，添加竖线可以自动实现字符串拼接。

3. 添加功能的实现逻辑： index.html(点击添加按钮，绑定action=add.html，直接访问静态网页。)——>add.html(表单绑定action=add.do，直接访问AddServlet) ——>AddServlet(获取表单数据，使用FruitDAO与数据库进行交互，客户端重定向)——>index.html(最终回到index.html)

4. 分页功能的实现逻辑： JavaWeb_04.1

   index.html(点击下一页按钮，绑定th:onclick=pageNo方法，在js中实现该方法，执行index)——>IndexServlet(按页数显示)——>index.html

5. 查询功能： JavaWeb_04.2，暂时最终的IndexServlet版本。

   index.html(点击查询，form表单传入index)——>IndexServlet(具体见注释)——>index.html

注意事项/技巧：

• 这里默认从index.html开始，其实是使用index，访问IndexServlet，使用thymeleaf将index——>index.html。

• 如果修改后页面没有更新，可以检查out文件夹中的文件是否都齐全。或者清除浏览器缓存。

• 查看div边距，可以使用border：1px solid red来实现。

• 使用ctrl+F5可以快捷刷新页面。