08.Thymeleaf的应用（国际化和抽取公共页面）

最新推荐文章于 2024-05-09 23:13:59 发布

原创最新推荐文章于 2024-05-09 23:13:59 发布 · 1.3k 阅读

14 ·

CC 4.0 BY-SA版权

Spring Boot 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在SpringBoot项目中利用Thymeleaf实现网站的国际化功能，包括多语言配置、自定义LocaleResolver及页面内容的动态显示。同时，探讨了如何抽取公共页面元素以提高代码复用率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Thymeleaf的应用（国际化和抽取公共页面）

国际化

Spring Boot 实现国际化步骤：

准备好国际化文件，至少三份（系统默认，中文，英文）
在Spring Boot全局配置文件中，指定国际化文件路径，
自定义Locale Resolver
在页面上使用消息表达式输出国际化内容

案例准备
5. 在resources/templates下新建login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="nav">
        <h2>Login Page</h2>
    </div>
    <div>
        <form action="" method="post">
            <span>username</span>：<input type="text" name="username"/><br/>
            <span>password</span>：<input type="password" name="password"/><br/>
            <input type="submit" value="login"/>
        </form>
    </div>
</body>
</html>

新建controller.IndexController

@Controller
public class IndexController {
    @RequestMapping({"/","login.html"})
    public String index(){
        return "login";
    }
}

下面完成国际化

1. 准备好国际化文件，至少三份（系统默认，中文，英文）

在resources下新建一个文件夹Directory命名为international
在其中新建三个配置文件
在这里插入图片描述

	login.pwd=pwd
	login.tip=登录Page
	login.username=账号

login_en_US.properties:英文

	login.pwd=password
	login.tip=Login Page
	login.username=username

login_zh_CN.properties:中文

	login.pwd=密码
	login.tip=登录界面
	login.username=用户

2. 在Spring Boot全局配置文件中，指定国际化文件路径

spring.messages.basename=international.login

3. 自定义Locale Resolver

原理：国际化locale（区域信息对象） localeResolver(获取区域信息对象)
源码：
在这里插入图片描述
默认的就是根据请求头带来的区域信息获取区域信息后去locale进行国际化
浏览器区域信息：

自定义Locale Resolver

/**
 * 可以在链接上获取区域信息
 */
public class MylocaleResolver implements LocaleResolver {


    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        String localeLa=request.getParameter("1");
        Locale locale=Locale.getDefault();
        if(!StringUtils.isEmpty(localeLa)){
            String[] s = localeLa.split("_");
            locale=new Locale(s[0],s[1]);
        }
        return locale;
    }

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

    }
}
**在MyMvcConfig中配置自定义Locale Resolver**
```java
    @Bean
    public LocaleResolver localeResolver(){
        return new MylocaleResolver();
    }

4. 在页面上使用消息表达式输出国际化内容

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="nav">
        <h2 th:text="#{login.tip}">Login Page</h2>
    </div>
    <div>
        <form action="" method="post">
            <span th:text="#{login.username}">username</span>：<input type="text" name="username"/><br/>
            <span th:text="#{login.pwd}">password</span>：<input type="password" name="password"/><br/>
            <input type="submit" value="login"/>
        </form>
    </div>
    <div>
        <a th:href="@{/login.html(1='zh_CN')}">中文</a>/
        <a th:href="@{/login.html(1='en_US')}">English</a>/

    </div>

</body>
</html>

测试:
默认(中文)：
在这里插入图片描述

点击English切换：

抽取公共页面

新建index.html
给导航栏提取出来在list.html中展示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div th:fragment="nav">
	    <h2>假设这是导航栏</h2>
	</div>

    <div>
        This is the index HTML
    </div>
</body>
</html>

list.html:

...
	<div th:insert="index::nav">
	</div>
...

如果index.html与list.html在同一目录下，则可直接使用 index::nav
如果不在同一目录下，则要主要路径问题。

测试即可