第一节 MVC

1、提出问题

Thymeleaf - 图1
我们对HTML的新的期待：既能够正常显示页面，又能在页面中包含动态数据部分。而动态数据单靠HTML本身是无法做到的，所以此时我们需要引入服务器端动态视图模板技术。

2、从三层结构到MVC

①MVC概念

M：Model模型
V：View视图
C：Controller控制器
MVC是在表述层开发中运用的一种设计理念。主张把封装数据的『模型』、显示用户界面的『视图』、协调调度的『控制器』分开。
好处：

  • 进一步实现各个组件之间的解耦
  • 让各个组件可以单独维护

  • 将视图分离出来以后，我们后端工程师和前端工程师的对接更方便

    ②MVC和三层架构之间关系

    Thymeleaf - 图2

    3、前后端工程师对接方式

  • 服务器端渲染：前端工程师把前端页面一整套做好交给后端工程师

  • 前后端分离：开会商量JSON格式，然后分头开发。在后端程序尚不可用时，前端工程师会使用Mock.js生成假数据使用，在后端程序可用后再连接实际后端程序获取真实数据。

查看详细内容(opens new window)
Thymeleaf - 图3

第二节 Thymeleaf简介

1、Thymeleaf的同行

JSP、Freemarker、Velocity等等，它们有一个共同的名字：服务器端模板技术。

2、Thymeleaf官方文档中的介绍

官网地址(opens new window)
官方文档
Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide an elegant and highly-maintainable way of creating templates. To achieve this, it builds on the concept of Natural Templates to inject its logic into template files in a way that doesn’t affect the template from being used as a design prototype. This improves communication of design and bridges the gap between design and development teams. Thymeleaf has also been designed from the beginning with Web Standards in mind – especially HTML5 – allowing you to create fully validating templates if that is a need for you.

3、Thymeleaf优势

  • SpringBoot官方推荐使用的视图模板技术，和SpringBoot完美整合。
  • 不经过服务器运算仍然可以直接查看原始值，对前端工程师更友好。
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9.     <p th:text="${hello}">Original Value</p>
  11. </body>
  12. </html>

4、物理视图和逻辑视图

①物理视图

在Servlet中，将请求转发到一个HTML页面文件时，使用的完整的转发路径就是物理视图。image.png
/pages/user/login_success.html
如果我们把所有的HTML页面都放在某个统一的目录下，那么转发地址就会呈现出明显的规律：
/pages/user/login.html /pages/user/login_success.html /pages/user/regist.html /pages/user/regist_success.html
……
路径的开头都是：/pages/user/
路径的结尾都是：.html
所以，路径开头的部分我们称之为视图前缀，路径结尾的部分我们称之为视图后缀。

②逻辑视图

物理视图=视图前缀+逻辑视图+视图后缀
上面的例子中：

视图前缀 逻辑视图 视图后缀 物理视图
/pages/user/ login .html /pages/user/login.html
/pages/user/ login_success .html /pages/user/login_success.html

第三节 在服务器端引入Thymeleaf环境

1、加入jar包

image.png

2、配置上下文参数

image.png
image.png
物理视图=视图前缀+逻辑视图+视图后缀

  1. <!-- 在上下文参数中配置视图前缀和视图后缀 -->
  2. <context-param>
  3.     <param-name>view-prefix</param-name>
  4.     <param-value>/WEB-INF/view/</param-value>
  5. </context-param>
  6. <context-param>
  7.     <param-name>view-suffix</param-name>
  8.     <param-value>.html</param-value>
  9. </context-param>

说明：param-value中设置的前缀、后缀的值不是必须叫这个名字，可以根据实际情况和需求进行修改。
为什么要放在WEB-INF目录下？
原因：WEB-INF目录不允许浏览器直接访问，所以我们的视图模板文件放在这个目录下，是一种保护。以免外界可以随意访问视图模板文件。
访问WEB-INF目录下的页面，都必须通过Servlet转发过来，简单说就是：不经过Servlet访问不了。
这样就方便我们在Servlet中检查当前用户是否有权限访问。
那放在WEB-INF目录下之后，重定向进不去怎么办？
重定向到Servlet，再通过Servlet转发到WEB-INF下。

3、创建Servlet基类

这个类大家直接复制粘贴即可，将来使用框架后，这些代码都将被取代。

  1. import org.thymeleaf.TemplateEngine;
  2. import org.thymeleaf.context.WebContext;
  3. import org.thymeleaf.templatemode.TemplateMode;
  4. import org.thymeleaf.templateresolver.ServletContextTemplateResolver;
  6. import javax.servlet.ServletContext;
  7. import javax.servlet.ServletException;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11. import java.io.IOException;
  13. public class ViewBaseServlet extends HttpServlet {
  15.     private TemplateEngine templateEngine;
  17.     @Override
  18.     public void init() throws ServletException {
  20.         // 1.获取ServletContext对象
  21.         ServletContext servletContext = this.getServletContext();
  23.         // 2.创建Thymeleaf解析器对象
  24.         ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(servletContext);
  26.         // 3.给解析器对象设置参数
  27.         // ①HTML是默认模式，明确设置是为了代码更容易理解
  28.         templateResolver.setTemplateMode(TemplateMode.HTML);
  30.         // ②设置前缀
  31.         String viewPrefix = servletContext.getInitParameter("view-prefix");
  33.         templateResolver.setPrefix(viewPrefix);
  35.         // ③设置后缀
  36.         String viewSuffix = servletContext.getInitParameter("view-suffix");
  38.         templateResolver.setSuffix(viewSuffix);
  40.         // ④设置缓存过期时间（毫秒）
  41.         templateResolver.setCacheTTLMs(60000L);
  43.         // ⑤设置是否缓存
  44.         templateResolver.setCacheable(true);
  46.         // ⑥设置服务器端编码方式
  47.         templateResolver.setCharacterEncoding("utf-8");
  49.         // 4.创建模板引擎对象
  50.         templateEngine = new TemplateEngine();
  52.         // 5.给模板引擎对象设置模板解析器
  53.         templateEngine.setTemplateResolver(templateResolver);
  55.     }
  57.     protected void processTemplate(String templateName, HttpServletRequest req, HttpServletResponse resp) throws IOException {
  58.         // 1.设置响应体内容类型和字符集
  59.         resp.setContentType("text/html;charset=UTF-8");
  61.         // 2.创建WebContext对象
  62.         WebContext webContext = new WebContext(req, resp, getServletContext());
  64.         // 3.处理模板数据
  65.         templateEngine.process(templateName, webContext, resp.getWriter());
  66.     }
  67. }

4、HelloWorld

①创建index.html

image.png

②在index.html编写超链接

  1. <a href="/view/TestThymeleafServlet">初步测试Thymeleaf</a>

③创建Servlet

image.png

  1. <servlet>
  2.     <servlet-name>TestThymeleafServlet</servlet-name>
  3.     <servlet-class>com.atguigu.thymeleaf.servlet.TestThymeleafServlet</servlet-class>
  4. </servlet>
  5. <servlet-mapping>
  6.     <servlet-name>TestThymeleafServlet</servlet-name>
  7.     <url-pattern>/TestThymeleafServlet</url-pattern>
  8. </servlet-mapping>

④修改Servlet继承的父类

image.png

⑤在doGet()方法中跳转到Thymeleaf页面

  1. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  3.     // 1.声明当前请求要前往的视图名称
  4.     String viewName = "target";
  6.     // 2.调用ViewBaseServlet父类中的解析视图模板的方法
  7.     super.processTemplate(viewName, request, response);
  9. }

⑥Thymeleaf页面

  1. <!DOCTYPE html>
  3. <!-- 在html标签内加入Thymeleaf名称空间的声明 -->
  4. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Title</title>
  8. </head>
  9. <body>
  11.     <!-- 在p标签的基础上，使用Thymeleaf的表达式，解析了一个URL地址 -->
  12.     <p th:text="@{'/aaa/bbb/ccc'}">Thymeleaf将在这里显示一个解析出来的URL地址</p>
  14. </body>
  15. </html>

第五节 基本语法：表达式语法

1、修改标签文本值

代码示例：

  1. <p th:text="标签体新值">标签体原始值</p>

①th:text作用

  • 不经过服务器解析，直接用浏览器打开HTML文件，看到的是『标签体原始值』
  • 经过服务器解析，Thymeleaf引擎根据th:text属性指定的『标签体新值』去替换『标签体原始值』

    ②字面量

    『字面量』是一个经常会遇到的概念，我们可以对照『变量』来理解它的含义。 ```java // a是变量，100是字面量 int a = 100; System.out.println(“a = “ + a); 
  3. - 变量：变量名字符串本身不是它的值，它指向的才是它的值
  4. - 字面量：它就是字面上的含义，我们从『字面』上看到的直接就是它的值
  6. 现在我们在th:text属性中使用的就是『字面量』，它**不指代任何其他值**。
  7. <a name="lhGGF"></a>
  8. ## 2、修改指定属性值
  9. 代码示例：
  11. ```html
  12. <input type="text" name="username" th:value="文本框新值" value="文本框旧值" />

语法：任何HTML标签原有的属性，前面加上『th:』就都可以通过Thymeleaf来设定新值。

3、解析URL地址

①基本语法

代码示例：

  1. <p th:text="@{/aaa/bbb/ccc}">标签体原始值</p>

经过解析后得到：
/view/aaa/bbb/ccc
所以@{}的作用是在字符串前附加『上下文路径』
这个语法的好处是：实际开发过程中，项目在不同环境部署时，Web应用的名字有可能发生变化。所以上下文路径不能写死。而通过@{}动态获取上下文路径后，不管怎么变都不怕啦！

②首页使用URL地址解析

Thymeleaf - 图11
如果我们直接访问index.html本身，那么index.html是不需要通过Servlet，当然也不经过模板引擎，所以index.html上的Thymeleaf的任何表达式都不会被解析。
解决办法：通过Servlet访问index.html，这样就可以让模板引擎渲染页面了：
Thymeleaf - 图12
进一步的好处：
通过上面的例子我们看到，所有和业务功能相关的请求都能够确保它们通过Servlet来处理，这样就方便我们统一对这些请求进行特定规则的限定。

③给URL地址后面附加请求参数

参照官方文档说明：
Thymeleaf - 图13

4、直接执行表达式

Servlet代码：

  1. request.setAttribute("reqAttrName", "<span>hello-value</span>"); 
  2. 1

页面代码：

  1. <p>有转义效果：[[${reqAttrName}]]</p> 
  2. <p>无转义效果：[(${reqAttrName})]</p>

执行效果：

  1. <p>有转义效果：&lt;span&gt;hello-value&lt;/span&gt;</p>     
  2. <p>无转义效果：<span>hello-value</span></p>