Spring Boot基础学习笔记10

一、使用Thymeleaf配置国际化页面

使用场景:不同国家使用不同的语言,此例对登录页面login.html进行中英两个语言国际化处理

(一)创建Spring Boot项目 - ThymeleafI18N

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

.将上一讲Thymeleaf中的登录控制器、Bootstrap、模板页面、应用属性文件拷贝到新项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(二)编写多语言国际化配置文件

1、在resources下创建i18n目录

在这里插入图片描述

2、在i18n目录里创建login.properties

在这里插入图片描述

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

3、在i18n目录里创建login_zh_CN.properties

在这里插入图片描述

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

4、在i18n目录里创建login_en_US.properties

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

package net.hw.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();
    }
}

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</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>

(六)整合效果测试

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值