模板引擎 Thymeleaf

 ⭐相关阅读推荐⭐

☀ Java项目-表白墙（前后端分离+数据库）已开源 ☀

🌙 前端项目—待办事项（HTML+CSS+JavaScript实现）🌙         

Servlet ：Servlet API（HttpServlet Request Response）

                Servlet部署教程（基于Tomcat） 

Tomcat ：Tomcat使用教程

                 Smart Tomcat插件使用教程（IDEA）

前端网络：Fiddler使用教程（HTTP抓包 前端debug）

                  HTTP、HTTPS协议详解

                  HTML常用语法总结【精华】

                  CSS常用语法总结【精华篇】

                  Java Script 语法总结

                  WebAPI—DOM （HTTL、CSS、Java Script应用及案例）

---

服务器渲染

优点：前后端交互的次数比较少（一次HTTP请求/响应，就能拿到一个完整的页面），比较高效

缺点：前端代码和后端代码不能充分解耦，不能各自独立进行测试

客户端渲染（前后端分离）

优点：能够让前后端进行充分的解耦。前端开发人员和后端开发人员各自开发各自的，相互之间不干扰，也能各自进行测试。（后端测试 Postman； 前端测试 mock server）

缺点：前后端交互的次数比较多，页面中可能需要通过多组ajax来获取到完整的数据

网页版猜数字（Thymeleaf 实现模板引擎）

1. 引入依赖  Thymeleaf（3.0.15） 

   <!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
   <dependency>
       <groupId>org.thymeleaf</groupId>
       <artifactId>thymeleaf</artifactId>
       <version>3.0.15.RELEASE</version>
   </dependency>
   

2. 编写模板文件 （html中将关键信息通过符号进行占位）<span th:text="${result}"></span>
3. 创建目录，在 WEB-INF 目录下新建 template 文件夹，将 html 文件移入目录
4. 编写 Servlet 代码
   ① 先针对 Thymeleaf 进行初始化（固定套路）
    

       // [1] 创建一个 TemplateEngine 对象， Template: 模板，Engine: 引擎
       private TemplateEngine engine = new TemplateEngine();
   
       @Override
       public void init() throws ServletException {
           // 在这个 Servlet 被加载的时候，会被调用一次，Thyleaf 的初始化就非常适合放到这个里面
           // [2] 创建一个 ServletContextTemplateResolver 对象，resolver: 解析器，这个对象的功能是从键盘上加载 html 模板文件
           ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
           // [3] 针对 resolver 对象来设置一些属性
           resolver.setPrefix("WEB-INF/template/");
           resolver.setSuffix(".html");
           resolver.setCharacterEncoding("utf-8");
           // [4] 把 resolver 和 engine 关联起来
           engine.setTemplateResolver(resolver);
       }

   ② TemplateEngine：表示一个模板引擎，功能就是进行页面渲染（把动态的数据替换到占位符那里）
   核心方法：pocess （“模板文件名”, webContext, resp.getWriter()）
   
   ServletContextTemplateResovler 表示一个解析器对象，用来加载 模板 文件，指定当前模板文件所在的位置（setPreffix, setSuffix, setCharacterEncoding）
   
   WebContext 就是一个键值对结构，功能就是把 html 中的占位符和具体的 Java 变量关联起来
   
   ServletContext（不是模板引擎的对象，这个是 Servlet 自带的机制）每个 webapp 都有个上下文对象，这一个 webapp 里面会有多个 servlet，多个 servlet 可以共享这个 ServletContext 对象，可以基于这个上下文对象在多个 Servlet 之间传递数据

5. 第三方使用