SpringBoot整合thymeleaf，完成页面的显示

1、创建SpringBoot项目
image.png

image.png

引入SpringWeb模板
image.png
引入thymeleaf模板
image.png

image.png

  1. 编写配置文件

    1. # thymeleaf页面缓存设置（默认为true），开发中方便调试应设置为false，上线稳定后应保持默认true
    2. spring.thymeleaf.cache=false

  2. 创建web控制类
    在com.slin.controller包下，创建一个控制类

    1. @Controller
    2. public class LoginController {
    4.  // 获取并封装当前年份跳转到登录页login.html
    5.  @RequestMapping("/toLoginPage")
    6.  public String toLoginPage(Model model){
    7.      model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
    8.      return "login"; //去到resources/templates下面找到login这个页面，后缀是html,并携带信息过去
    9.  }
    10. }

    image.png

4．创建模板页面并引入静态资源文件

在“classpath:/templates/”目录下引入一个用户登录的模板页面login.html 

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1,shrinkto-fit=no">
  6.     <title>用户登录界面</title>
  7.     <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
  8.     <link th:href="@{/login/css/signin.css}" rel="stylesheet">
  9. </head>
  10. <body class="text-center">
  11. <!-- 用户登录form表单 -->
  12. <form class="form-signin">
  13.     <img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72">
  14.     <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
  15.     <input type="text" class="form-control"
  16.            th:placeholder="用户名" required="" autofocus="">
  17.     <input type="password" class="form-control"
  18.            th:placeholder="密码" required="">
  19.     <div class="checkbox mb-3">
  20.         <label>
  21.             <input type="checkbox" value="remember-me"> 记住我
  22.         </label>
  23.     </div>
  24.     <button class="btn btn-lg btn-primary btn-block" type="submit" >登录</button>
  25.     <p class="mt-5 mb-3 text-muted">© <span
  26.             th:text="${currentYear}">2019</span>-<span
  27.             th:text="${currentYear}+1">2020</span></p>
  28. </form>
  29. </body>
  30. </html>

image.png

5．效果测试

启动主程序，然后从页面访问
image.png

到此，SpringBoot对thymeleaf的引用已经OK。后续的也是这种类型。

配置国际化页面(基础版)

1、创建文件夹，创建配置文件
在项目的类路径resources下创建i18n的文件夹，并在该文件夹中根据需要编写对应的多语言国际化配置文件login.properties（默认配置文件）、login_zh_CN.properties(中文配置)和login_en_US.properties英文配置文件

image.png

  1. login.tip=请登录
  2. login.username=用户名
  3. login.password=密码
  4. login.rememberme=记住我
  5. login.button=登录

创建配置文件要遵循的命名规则
Spring Boot默认识别的语言配置文件为类路径resources下的 messages.properties；其他语言国际化文件的名称必须严格按照“文件前缀名语言代码国家代 码.properties”的形式命名
（那么自定义的login…配置文件它是不会自动加载的，因为不是 messages.properties，要让这些配置文件生效，就需要一个基础名配置。）

在项目类路径resources下自定义了一个i18n包用于统一配置管理多语言配置文件，并 将项目默认语言配置文件名自定义为login.properties，因此，后续还必须在项目全局配置文件中进行 国际化文件基础名配置，才能引用自定义国际化文件。

2． 编写配置文件
打开项目的application.properties全局配置文件，在该文件中添加国际化文件基础名设置，内容 如文件

  1. # 配置国际化文件基础名
  2. spring.messages.basename=i18n.login

image.png

spring.messages.basename=i18n.login 设置了自定义国际化文件的基础名。
i18n表示国际化文件相在项目类路径resources的位置
login表示多语言配置文件的前缀名
如果开发者完全按照 Spring Boot默认识别机制，在项目类路径resources下编写messages.properties等国际化文件，可以 省略国际化文件基础名的配置

整到这里就可以结合thymeleaf以及表达式，来实现语言切换。

通过thymeleaf表达式，用#{}，因为它可以获取国际化配置，根据login.tip这个key来显示其值。
image.png

image.png

image.png

重启看效果
重启之后能正常显示，说明国际化切换成功。它是根据请求头。更具体点就是根据区域信息解析器LocalResovel 返回封装的信息判断的。
image.png
image.png
image.png

配置国际化页面(升级版)

下面实现自定义区域信息解析器来实现手动切换语言环境。

1、现在login页面中添加两个链接标签
image.png

image.png

自定义一个区域信息解析器，覆盖原来的，从而通过接收前端传过来的参数来判断所要显示的语言环境。
创建一个文件夹，再在文件夹下面创建一个自定义解析器类。
config.MyLocaleResovel。让他实现LocaleResolver，重写里面的方法

还需要将MyLocaleResovel生成实例，存到容器中，这样才能覆盖原来的配置文件：添加@Configration

  1. //通过@Configuration把MyLocaleResovel生成实例，存到容器中，这样才能覆盖原来的配置文件
  2. // 标明它是一个配置类，并且扫描
  3. @Configuration
  4. public class MyLocaleResovel implements LocaleResolver {
  5.     // 自定义区域解析方式
  6.     @Override
  7.     public Locale resolveLocale(HttpServletRequest httpServletRequest) {
  8.         // 获取页面手动切换传递的语言参数l    zh_CN   en_US
  9.         String l = httpServletRequest.getParameter("l");
  10.         // 获取请求头自动传递的语言参数Accept-Language(因为可能存在传递过来用空串，这时要根据语言参数判断)
  11.         String header = httpServletRequest.getHeader("Accept-Language");
  12.         Locale locale=null;
  13.         // 如果手动切换参数不为空，就根据手动参数进行语言切换，否则默认根据请求头信息切换
  14.         if(!StringUtils.isEmpty(l)){
  15.             // 根据下划线进行分割
  16.             String[] split = l.split("_");
  17.             // 根据切割后的两个值，来构建一个locale对象，来构建它是一个中文环境还是英文环境。
  18.             locale=new Locale(split[0],split[1]);
  19.         }else {
  20.             // 如果参数为空，那么就直接用请求头来切割判断，封装locale
  21.             // Accept-Language: en-US,en;q=0.9    zh-CN;q=0.8,zh;q=0.7
  22.             String[] splits = header.split(",");
  23.             String[] split = splits[0].split("-");
  24.             locale=new Locale(split[0],split[1]);
  25.         }
  26.         return locale;
  27.     }
  29.     @Override
  30.     public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
  32.     }
  34.     // 将自定义的MyLocalResovel类重新注册为一个类型LocaleResolver的Bean组件,存到容器中
  35.     // 这时候自定义的MyLocaleResovel就覆盖原来的LocaleResovel，也就是说自定义的这个生效了
  36.     @Bean
  37.     public LocaleResolver localeResolver(){
  38.         return new MyLocaleResovel();
  39.     }
  41. }

重新启动服务器
查看效果

image.png

image.png