Spring Boot学习10——Thymeleaf国际化配置

关注

原创最新推荐文章于 2026-09-10 09:07:27 发布 593 阅读 AI 写同款· GEO 优化 ›

使用Thymeleaf配置国际化页面---学习11 文章目录一、标准表达式语法二、Thymeleaf配置国际化页面1、创建项目2、添加依赖3、初始化4、把ThymeleafDemo项目的登录控制器、拷贝到新项目里5、在resources下创建i18n目录6、在i18n目录里创建login.properties7、在i18n目录里创建login_zh_CN.properties8、在i18n目录里创建login_en_US.properties9、编写全局配置文件10、在main/java下创建net.tp.lesson11.resolver子包11、创建自定阅读详情

文章目录

- Thymeleaf国际化配置

国际化即多语言环境

Thymeleaf国际化配置

一、创建项目Thymeleaf18

在这里插入图片描述

二、实现登录功能(包含控制器、登录页面、全局配置文件)

在这里插入图片描述

1.控制器LoginController

package net.lj.lesson10.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.Calendar;

/**
 * 登录控制器
 */
@Controller
public class LoginController {
    /**
     * 通过请求“toLoginPage”跳转到templates目录下的
     * login页面，并把当前年份数据保存到模型对象中
     */
    @GetMapping("/toLoginPage")
    public String toLoginPage(Model model) {
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login"; // 返回逻辑页面视图名称
    }
}

2.全局配置文件

#缓存配置，默认即是true，开发阶段设置为false
spring.thymeleaf.cache = false
#设置模板使用的编码为utf-8
spring.thymeleaf.encoding = UTF-8
#指定为模板使用的模式为html5，默认html
spring.thymeleaf.mode = HTML5
#指定前缀，默认位置为/templates/，可以修改成其它位置
spring.thymeleaf.prefix = classpath:/templates/
#指定模板文件后缀，默认值为.html，可以修改成其它值
spring.thymeleaf.suffix = .html

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

3.登录页面login

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitterbootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
    <div class="text-center">
        <span th:text="${currentYear}">今年</span> -
        <span th:text="${currentYear} + 1">明年</span>
    </div>
    <div class="border border-info bg-light p-2" style="border-radius: 5px">
        <form action="/login" method="post">
            <h3 class="text-center">用户登录</h3>
            <div class="mt-1">
                <input type="text" id="username" name="username" class="form-control" placeholder="输入用户名" autofocus>
            </div>
            <div class="mt-1">
                <input type="password" id="password" name="password" class="form-control" placeholder="输入密码">
            </div>
            <div class="checkbox text-center">
                <label>
                    <input class="form-check-input text-center" type="checkbox">记住我
                </label>
            </div>
            <div>
                <button class="btn btn-lg btn-primary btn-block" id="login" type="submit">登录</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>

运行效果

在这里插入图片描述

三、国际化配置

1.在i18n目录里创建login.properties

login.title = 用户登录
login.username = 输入用户名
login.password = 输入密码
login.rememberme = 记住我
login.button = 登录

2.在i18n目录里创建login_zh_CN.properties

login.title = 用户登录
login.username = 输入用户名
login.password = 输入密码
login.rememberme = 记住我
login.button = 登录

3.在i18n目录里创建login_en_US.properties

在这里插入图片描述

login.title = User Login
login.username = Enter Username
login.password = Enter Password
login.rememberme = Remember Me
login.button = Login

4.定制区域信息解析器

在net.lj.lesson10下创建resolver子包，并在子包下创建MyLocaleResolver .java

package net.lj.lesson10.resolver;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

/**
 * 自定义区域
 */
@Configuration
public class MyLocaleResolver implements LocaleResolver {
    @Override
    public Locale resolveLocale(HttpServletRequest httpServletRequest) {
        // 获取区域标识
        String flag = httpServletRequest.getParameter("flag");
        // 获取默认区域对象
        Locale locale = Locale.getDefault();
        // 判断区域标识是否为空
        if (!StringUtils.isEmpty(flag)) {
            // 对区域标识进行拆分处理
            String[] splits = flag.split("_"); // 使用下划线切分字符串，返回一个字符串数组，如zh_CN --> ["zh", "CN"]
            // 利用区域标识创建区域对象
            locale = new Locale(splits[0], splits[1]);
        }
        // 返回区域对象
        return locale;
    }

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

    @Bean // 定义Bean组件，交给Spring容器管理
    public LocaleResolver localeResolver() {
        return new MyLocaleResolver();
    }
}

5.在HTML页面实现实现国际化功能

增加语言切换功能和使用模板语法

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
    <div class="text-center">
        <span th:text="${currentYear}">今年</span> -
        <span th:text="${currentYear} + 1">明年</span>
    </div>
    <div class="border border-info bg-light p-2" style="border-radius: 5px">
        <form action="/login" method="post">
            <h3 class="text-center" th:text="#{login.title}">用户登录</h3>
            <div class="mt-1">
                <input type="text" id="username" name="username" class="form-control" th:placeholder="#{login.username}" required autofocus>
            </div>
            <div class="mt-1">
                <input type="password" id="password" name="password" class="form-control" th:placeholder="#{login.password}" required>
            </div>
            <div class="checkbox text-center">
                <label>
                    <input class="form-check-input text-center" type="checkbox" id="remember-me">[[#{login.rememberme}]]
                </label>
            </div>
            <div>
                <button class="btn btn-lg btn-primary btn-block" id="login" type="submit" th:text="#{login.button}">登录</button>
            </div>
            <div class="text-center">
                <a class="btn btn-sm" th:href="@{/toLoginPage(flag='zh_CN')}">中文</a>
                <a class="btn btn-sm" th:href="@{/toLoginPage(flag='en_US')}">English</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>