IDEA-SpringBoot视图技术Thymeleaf

 在一个Web应用中,通常会采用MVC设计模式实现对应的模型、视图和控制器。
 其中,视图是用户看到并与之交互的界面。

Thymeleaf基本使用

  • Thymeleaf是一种现代的基于服务器端的Java模板引擎技术
  • Thymeleaf能够动态地替换掉静态内容,动态显示页面内容
  • 引入模板引擎
  • 常用标签及使用可参考官网文件
标准表达式
  • 变量表达式:${...} 用于获取上下文中的变量值
  • 选择变量表达式:*{...} 用于从被选定对象而不是上下文中获取属性值,如果没有选定对象,则和变量表达式一样
  • 消息表达式:#{...} 主要用于Thymeleaf模板页面国际化内容的动态替换和展示
  • 链接URL表达式:@{...}一般用于页面跳转或者资源的引入
  • 片段表达式:~{...} 用来标记片段移动到模板中
  • 配置
spring.thymeleaf.cache=true #启用模板缓存,开发中方便调试应该设置为false
spring.thymeleaf.encoding=UTF-8 #模板编码
spring.thymeleaf.mode = HTML5 #应用于模板的模板格式
spring.thymeleaf.prefix=classpath:/resources/templates/ #指定模板页面存放路径
spring.thymeleaf.suffix=.html #指定模板页面名称的后缀
使用
  • 添加Thymeleaf依赖
  • 编写配置文件 spring.thymeleaf.cache=false
  • 创建Web控制类
@Controller
public class LoginController {
     
    /*
        获取并封装当前年份,跳转到登录页面login.html
     */
    @GetMapping("/toLoginPage")
    public String toLoginPage(Model model){
     
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login";
    }
}
  • 创建模板页面并引入静态资源文件

IDEA-SpringBoot视图技术Thymeleaf_第1张图片
有需要CSS样式的朋友私聊我就可以啦,这里就给大家看一下效果


<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>用户登录界面title>
    
    <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/login/css/signin.css}" rel="stylesheet">
head>
<body class="text-center">

<form class="form-signin">
    
    <img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal">请登录h1>
    <input type="text" class="form-control" placeholder="用户名"
                                            required="" autofocus="">
    <input type="password" class="form-control" placeholder="密码"
           required="" >
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"> 记住我
        label>
    div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">登录button>
       
    <p class="mt-5 mb-3 text-muted">© <span th:text="${currentYear}">2018span>-<span th:text="${currentYear}+1">2019span>p>

form>
body>
html>
  • 效果测试
    访问toLoginPage可以看到登录页面并且,日期动态生成成功说明整合成功

使用Thymeleaf配置国际化页面

  • 编写多语言国际化文件及配置文件

IDEA-SpringBoot视图技术Thymeleaf_第2张图片

login.properties:自定义默认语言配置文件

login.tip=请登录
login.username=用户名
login.password=密码
login.remember=记住我
login.button=登录

login_en_US.properties:自定义英文国际化文件 (文件前缀名_语言代码_国家代码)

login.tip=Please sign in
login.username=Username
login.password=Password
login.remember=Remember me
login.button=Login

login_zh_CN.properties:自定义中文国际化文件

login.tip=请登录
login.username=用户名
login.password=密码
login.remember=记住我
login.button=登录
  • 配置文件中加入:spring.messages.basename=i18n.login
  • 定制区域信息解析器
    • 使用@Bean注解将当前配置类注册成Spring容器中一个Bean组件。这样可以覆盖默认的LocaleResolver组件。在中写的resolveLocale方法中,可以根据不同需求切换语言信息从而获取请求的参数,只有当请求参数不为空时,才可以进行语言的切换
    • 在请求参数l的语言手动切换组装时,使用的是下划线“_”进行切割,由配置文件的格式决定;在请求头参数的语言自动切换组装时,使用的是短横线“-”进行的切割,由浏览器的请求头信息样式决定(Accept-Language:en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7)
@Configuration
public class MyLocalResolve implements LocaleResolver {
     
    // 自定义区域解析方式
    @Override
    public Locale resolveLocale(HttpServletRequest httpServletRequest) {
     
        //获取页面手动切换传递的语言参数 l
        String l = httpServletRequest.getParameter("l");
        // 获取请求头自动传递的语言参数Accept-Language
        String header = httpServletRequest.getHeader("Accept-Language");
        Locale locale=null;
        //如果手动切换参数不为空,就根据手动参数进行语言切换,否则默认根据请求头信息切换
        if(!StringUtils.isEmpty(l)){
     
            String[] split = l.split("_");
            locale = new Locale(split[0],split[1]);
        }else {
     
            // Accept-Language:en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7
            String[] splits = header.split(",");
            String[] split = splits[0].split("-");
            locale = new Locale(split[0],split[1]);
        }
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest httpServletRequest, @Nullable HttpServletResponse httpServletResponse,@Nullable Locale locale) {
     
    }
    //将自定义的MyLocalResolve类重新注册为一个类型LocaleResolver的Bean组件
    @Bean
    public LocaleResolver localeResolver(){
     
        return new MyLocalResolve();
    }
}
  • 页面国际化使用

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>用户登录界面title>
    <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/login/css/signin.css}" rel="stylesheet">
head>
<body class="text-center">

<form class="form-signin">
    <img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">请登录h1>
    <input type="text" class="form-control"  th:placeholder="#{login.username}" placeholder="用户名"
                                            required="" autofocus="">
    <input type="password" class="form-control" th:placeholder="#{login.password}" placeholder="密码"
           required="" >
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"> [[#{login.remember}]]
        label>
    div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.button}">登录button>
    <p class="mt-5 mb-3 text-muted">© <span th:text="${currentYear}">2018span>-<span th:text="${currentYear}+1">2019span>p>
    <a class="btn btn-sm" th:href="@{/toLoginPage(l='zh_CN')}">中文a>
    <a class="btn btn-sm" th:href="@{/toLoginPage(l='en_US')}">Englisha>
form>
body>
html>

  • 效果测试
    • 发现访问页面出现乱码,这是由于IDEA开发工具编写的Properties文件默认编码为GBK,在显示时会转换为ASCII码的形式,会导致中文乱码。需做以下设置
      IDEA-SpringBoot视图技术Thymeleaf_第3张图片

你可能感兴趣的:(SpringBoot,java,spring,web)