thymeleaf模板引擎、抽取公共片段以及实现国际化

最新推荐文章于 2022-08-24 10:29:36 发布

Silver gradient

最新推荐文章于 2022-08-24 10:29:36 发布

阅读量347

点赞数

文章标签： java web html javascript

本文链接：https://blog.csdn.net/z19950712/article/details/104410861

版权

什么是thymeleaf？

Thymeleaf是面向web和独立环境的现代服务端java模板引擎，能够处理Html、xml、javascript、CSS甚至纯文本；旨在提供一个优雅、高度可维护的创建模板的方式；

为何使用Thymeleaf模板引擎？

springBoot官方不推荐使用jsp，因为内嵌的Tomcat、jetty容器不支持以jar形式运行jsp；springBoot中提供了大量的模板引擎，其中包括FreeMarker、Mastache、Thymeleaf等；而SpringBoot官方推荐使用Thymeleaf作为模板引擎，因为thymeleaf提供了完美的springMVC的支持；

如何使用Thymeleaf模板引擎？

1、首先，添加Thymeleaf启动器

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

2、HTML文件应该放在classpath:/templates/目录下，Thymeleaf就能够自动渲染;

3、在html页面上加入名称空间，使用thymeleaf时就有语法提示；

<html xmlns:th="http://www.thymeleaf.org">

使用Thymeleaf模板引擎声明与引入公共片段

比如：在我们的真正开发中，我们很多页面都有重复代码，我们可以将其都写入到公共区域，对其进行声明，在需要的页面上再对其进行引入；

<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" id="head">
    <meta charset="UTF-8">
    <title>梦学谷账单管理系统</title>
    <link rel="stylesheet" href="../css/public.css"/>
</head>
<body>
<!--头部-->
    <header class="publicHeader" id="header">
        <h1>梦学谷账单管理系统</h1>
        <div class="publicHeaderR">
            <p><span>下午好！</span><span style="color: #fff21b"> Admin</span> , 欢迎你！</p>
            <a href="login.html">退出</a>
        </div>
    </header>
<!--时间-->
    <section class="publicTime" id="public_time">
        <span id="time">2028年01月01日 11:11  星期一</span>
        <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>

如上我们可以看到我们对head、header、publicTime使用id进行了声明，待使用时我们就可以直接对其进行引用；

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:replace="main/public :: #head">

</head>
<body>
<!--头部-->
<header class="publicHeader" th:replace="main/public :: #header">

</header>
<!--时间-->
<section class="publicTime" th:replace="main/public :: #public_time">

</section>

注意：我们对其进行声明和引用时语法应该匹配：
1、当使用片段进行声明时，我们引入时无需再片段名前加#；
声明： header.html

<div th:fragment="header_common">
这是th:fragment声明的公共片段
</div>

引用：

<div th:replace="header :: header_common">
</div>

2、当我们使用id选择器进行声明公共片段时，需要在片段名前加#；
声明：header.html

<div  id="header_common">
这是id声明的公共片段
</div>

引用：

<div th:replace="header :: #header_common">

</div>

登录页面实现国际化

1、首先编写国际化配置文件，需要要显示的国际化内容添加到配置中；
（1）创建一个包名为i18n的文件夹，“i18n"为国际化单词的缩写，一共包括20个字母，i为首字母、n为尾字母；
（2）其次，我们需要修改文件的字符编码，不然后期会出现乱码；
在这里插入图片描述

（3）然后在i18n包下新建一个resourceBundle文件；在这里插入图片描述

（4）当前我们的国际化资源文件的基础名不为原始的message，故我们需要在全局配置文件：application.properties中进行修改；

//这里我们要关闭thymeleaf缓存
spring.thymeleaf.cache=false
//然后指定包名的方式指定基础名
spring.messages.basename=i18n.login

（5）最后我们需要在login.html模板页面通过#{}属性获取国际化的值；（注意：我们这里对login表单进行处理，提交一个login请求，把控制权交给控制器处理，并給）

 <section class="loginCont">
        <!--在这个form表单之上我们添加一个if表达式，当其登录失误的时候对其进行处理-->
        <div th:if="${not #strings.isEmpty(msg)}"
        th:text="${msg}"
        style="color:red; margin-left: 130px"> <!--这里的话对控制层打印出的错误信息进行显示-->
        </div>
        <!--我们这里的话对login表单进行处理，提交一个login请求，把控制权交给控制器进行处理-->
        <form class="loginForm" th:action="@{/login}" th:method="post">

            <div class="inputbox">
                <label for="user" th:text="#{login.username}">Username</label>
                <input id="user" type="text" name="username" required/>
            </div>
            <div class="inputbox">
                <label for="mima" th:text="#{login.password}">Password</label>
                <input id="mima" type="password" name="password" required/>
            </div>
            <div class="subBtn">
                <input type="checkbox"/> [[#{login.remember}]]
            </div>
            <br/>
            <div class="subBtn">
                <input type="submit" th:value="#{login.submit}"/>
                <input type="reset" th:value="#{login.reset}"/>
            </div>
            <br/>
            <!--这里我们添加一个连接点击切换国际化-->
            <div style="margin-left: 100px;">
                <a th:href="@{/index.html(l='zh_CH')}">中文</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a th:href="@{/index.html(l='en_US')}">English</a>
            </div>
        </form>
    </section>

自定义解析器来切换国际化

/**
 * 自定义解析器来切换国际化
 * 然后再注入到容器中
 */
public class MyLocalResolver implements LocaleResolver {
    /**
     * 解析区域信息
     */
    @Override
    public Locale resolveLocale(HttpServletRequest httpServletRequest) {
        System.out.println("区域信息~");
        //请求头中的l参数值
        String l = httpServletRequest.getParameter("l");
        //获取浏览器上的区域信息
        Locale locale = httpServletRequest.getLocale();
        //获取当前操作系统默认的区域信息
//        Locale locale=Locale.getDefault();
        //参数有区域信息，则用参数里的区域信息
        if (!StringUtils.isEmpty(l)) {
            String[] split = l.split("_");
            //接收第一个参数为：获取语言代码zh/en，获取国家代码CN/US
            locale = new Locale(split[0], split[1]);
        }
        return locale;
//        return null;
    }

    @Override
    public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {

    }
}

然后我们替换MVC自动配置类中的区域解析器；

@Bean
public LocaleResolver localeResolver() {
    return new MyLocalResolver();
}

Silver gradient

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫