Spring Boot 实践之七 Spring Boot视图技术(Thymeleaf 基本语法/基本使用/使用Thymeleaf完成数据的页面展示/使用Thymeleaf配置国际化页面)

在一个Web应用中，通常会采用MVC设计模式来分别实现对应的模型、视图和控制器，其中，视图是用户看到并与之交互的界面。对最初的Web应用来说，视图是由HTML元素组成的静态界面，而后期的Web应用更倾向于使用动态模板技术，从而实现前后端分离和页面的动态数据展示。Spring Boot框架为简化项目的整体开发，对一些常用的视图技术也实现了整合支持，并主要推荐整合模板引擎技术来实现前端页面的动态化内容。本章将对Spring Boot支持的视图技术进行介绍，并使用Spring Boot整合其中常用的Thymeleaf模板引擎进行视图页面的实现。

1 spring Boot支持的视图技术

2 Thymeleaf 基本语法

2.1 常用标签

​ 表4-1 Thymeleaf常用标签

板进行纯HTML5的页面开发，可以使用data-th-属性替换th:属性进行页面开发。

2.2 标准表达式

2.选择变量表达式

3 Thymeleaf基本使用

3.1 Thymeleaf模板基本配置

首先必须保证引入Thymeleaf依赖。

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

其次，在全局配文件中配置Thymeleaf模板的一些参数。如一般Web项目都会使用下列配置：

#模板缓存：开启，建议开发阶段为false,开发后改为true
spring.thymeleaf.cache = true
#模板编码：UTF-8
spring.thymeleaf.encoding = UTF-8
#模板样式：HTML5
spring.thymeleaf.mode = HTML5
#指定模板页面存放的路径：/templates/下
spring.thymeleaf.prefix = classpath:/templates/
#指定模板页面名称的后缀
spring.thymeleaf.suffix = .html

3.2 静态资源的访问

也可不用新建，将静态资源存放在static中。

4 使用Thymeleaf完成数据的页面展示

这里讲解Spring Boot与Thymeleaf模板引擎的整合使用。

• 步骤1：使用Sping Initializr方式创建Spring Boot项目，引入Thymeleaf依赖和Spring Web依赖，如图：

• 步骤2：编写全局配置文件application.properties,内容如下：

  #模板缓存：开启，建议开发阶段为false,开发后改为true
  spring.thymeleaf.cache = true
  #模板编码：UTF-8
  spring.thymeleaf.encoding = UTF-8
  #模板样式：HTML5
  spring.thymeleaf.mode = HTML5
  #指定模板页面存放的路径：/templates/下
  spring.thymeleaf.prefix = classpath:/templates/
  #指定模板页面名称的后缀
  spring.thymeleaf.suffix = .html
  

• 步骤3：在com.itheima下创建包controll，包下创建一个用于前端模板页面动态数据替换效果测试的访问实体类LoginController.java,代码如下：

  package com.itheima.controller;
  
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.web.bind.annotation.RequestMapping;
  
  import java.util.Calendar;
  
  //步骤１：添加controller注解，表明了这个类是一个控制器类
  @Controller
  public class LoginController {
       
      //步骤２：添加@RequestMapping注解为下面的方法设置访问路径，为控制器指定可以处理的URL请求，这里为方法处的标记，但类定义处未标注，URL相对于web目录下的根目录
      @RequestMapping("/toLoginPage")
      //步骤3：完成方法编写
      public String login(Model model){
       
          //借助日历对象Calendar的.getInstance()获取当前的时间，然后调用get()方法获得当前的年份，如今天是2020，则i是2020
          int i=Calendar.getInstance().get(Calendar.YEAR));
          model.addAttribute("currentYear",i); //i存入model对象
          return "login";//跳转到login.html,因为全局配置中已写明后缀，可不写后缀
      }
  }
  

• 步骤4：在templates中创建一个用户登录的模板页面login.html（前端页面的设计这里不作详细阐述，仅做引入方法介绍 ）