48. springboot の国際化により、ユーザーはプログラム インターフェイス上にドロップダウン ボックスを作成して言語を動的に選択できるようになります。

前回の記事では、ブラウザのサポート言語を直接変更しました。

ブラウザ上で国際言語を直接変更する

今回実装する機能は、プログラムインターフェース上で直接言語を動的に選択する機能です。

ロケールは言語と国を表します。

★ インターフェース上の言語を動的に変更します。

アプリケーションが異なる言語インターフェイスを動的に表示できる理由の鍵は、クライアントのロケール (言語と国の情報を表す) を決定する方法にあります。Spring Boot アプリケーションは LocaleResolver を使用して、クライアントが使用するロケールを決定します
。

LocaleResolver インターフェースはユーザーのブラウザーの Locale を解析する役割を果たし、このインターフェースには次の 3 つの実装クラスがあります。

▲ AcceptHeaderLocaleResolver:
ブラウザの Accept リクエスト ヘッダー (デフォルト値) に基づいて決定されます。
ブラウザの設定を変更すると、実際にはブラウザから送信される Accept リクエスト ヘッダーが変更されます。
前回の記事の例はこれです。

▲CookieLocaleResolver： Cookieを元に判定

▲SessionLocaleResolver： Sessionに基づいて決定

インターフェース上の言語を動的に変更したい場合は、CookieLocaleResolver または SessionLocaleResolver を使用する必要があります。

▲手順：

（1）在容器中配置LocaleResolver Bean
      （用CookieLocaleResolver或SessionLocaleResolver都行）

（2）添加LocaleChangeInterceptor拦截器，
     该拦截器需要指定根据哪个参数动态地更改Locale（还需要将该拦截器添加到系统中）

（3）页面上用户选择不同语言则发送相应的请求参数
      （此处的参数名对应于第二步所指定的参数）来改变Locale
          ——通常用一个下拉列表框来发送请求参数。

概要:
//LocaleResolver Beanの設定、
機能: ロケールの国際言語を変更するには、Cookieとセッションの2つの方法があります。例えば、Cookieを使用したい場合は、設定ファイルにCookieの属性値を追加し、その属性を直接取得します。 @Value を通じて値を取得し、
論理処理のために LocaleResolver Bean に進みます。

// インターセプタ Bean の設定 —> LocaleChangeInterceptor Bean
関数: インターセプタは、フロントエンドのクライアントによって送信されたリクエストに含まれるパラメータに従って、ロケール国際言語を動的に変更します。

つまり、ユーザーが [アメリカ英語] を選択するなどのリクエストを送信すると、フロントエンドが [choseLang=en_US] パラメーターを含むリクエストを送信し、このリクエストが LocaleChangeInterceptor インターセプターによってインターセプトされ、 en_US はこのパラメータによって運ばれます (このパラメータの解析はインターセプタ自体の機能です。私自身はこのパラメータについて何も判断していません。ソースコードを見る必要があると思います)、

コードデモ:

フロントエンドはドロップダウン ボックスを定義し、その後 2 つのハイパーリンクを持ち、これら 2 つのハイパーリンクに対するリクエストはバックエンド インターセプタによってインターセプトされ、処理されます。

構成ファイル内の対応する構成の一部

バックエンド構成クラスに移動し、2 つの Bean を追加します。1
つはロケールを変更する Bean で
、もう 1 つはインターセプターがフロントエンド要求を処理するために使用する Bean です。

package cn.ljh.i18n.config;


import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.i18n.AcceptHeaderLocaleResolver;
import org.springframework.web.servlet.i18n.CookieLocaleResolver;
import org.springframework.web.servlet.i18n.LocaleChangeInterceptor;
import org.springframework.web.servlet.i18n.SessionLocaleResolver;

import java.util.Locale;

@Configuration
public class MyConfig implements WebMvcConfigurer
{
    
    
    //通过这个配置参数可以指定使用哪种 LocaleResolver
    @Value("${cn.ljh.locale.resolver.type}")
    private String resolverType;

    //通过这个配置参数可指定使用哪个请求参数来更改 Locale
    @Value("${cn.ljh.locale.param.name}")
    private String localeParam;


    //配置  LocaleResolver  Bean
    //两种改变Locale国际化语言的方式，通过获取配置文件里面的配置，来选择修改的方式
    @Bean
    public LocaleResolver localeResolver()
    {
    
    
        //如果要让用户可以自动选择语言，必须使用 CookieLocaleResolver 或 SessionLocaleResolver

        //判断客户选择什么样的语言
        if (resolverType.equals("session"))
        {
    
    
            SessionLocaleResolver sessionlr = new SessionLocaleResolver();
            //设置默认的国际化语言为中国
            sessionlr.setDefaultLocale(Locale.CHINA);
            return sessionlr;
        } else if (resolverType.equals("cookie"))
        {
    
    
            CookieLocaleResolver cookielr = new CookieLocaleResolver();
            cookielr.setDefaultLocale(Locale.CHINA);
            //设置cookie的名字
            cookielr.setCookieName("lang");
            //设置cookie的存活时间
            cookielr.setCookieMaxAge(3600 * 24);
            return cookielr;
        } else
        {
    
    
            //使用默认的 LocaleResolver
            return new AcceptHeaderLocaleResolver();
        }
    }


    //配置一个拦截器的Bean，拦截器根据客户在前端发送的请求中携带的参数来动态地更改 Locale 国际话语言
    @Bean
    public LocaleChangeInterceptor localeChangeInterceptor()
    {
    
    
        LocaleChangeInterceptor interceptor = new LocaleChangeInterceptor();
        //设置请求参数，应用根据哪个请求参数来更改 Locale ，参数名随便写
        interceptor.setParamName(localeParam);
        return interceptor;
    }

    //需要把这个 localeChangeInterceptor 拦截器 加到项目系统中，通过重写WebMvcConfigurer里面支持的一个方法addInterceptors
    @Override
    public void addInterceptors(InterceptorRegistry registry)
    {
    
    
        //添加确定Locale的拦截器，直接把上面的方法作为参数传进来。
        registry.addInterceptor(localeChangeInterceptor());
    }
}

appMess_en_US.properties

login_title=Login Page
name_label=User Name
name_hint=Please input User Name
password_label=Password
password_hint=Please input Password
login_btn=Login
reset_btn=Reset
#{
    
    0} 占位符
welcome={
    
    0}, Welcome to study
failure=sorry,password and username not matched
choose=Choose Language
en=USA English
zh=Simple Chinese

appMess_zh_CN.properties

login_title=登录页面
name_label=用户名
name_hint=请输入用户名
password_label=密码
password_hint=请输入密码
login_btn=登录
reset_btn=重设
#{
    
    0} 占位符
welcome={
    
    0}, 欢迎登录学习
failure=用户名和密码不匹配
choose=请选择语言
en=美式英语
zh=简体中文

デモ：

フロントエンドのインデックスコード:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>国际化</title>
    <!--  引入css样式，用 link 元素  ,  stylesheet 样式单 , .gz表示是打包的，但是springboot会自动解包 -->
    <!--  引入 Bootstrap 的 Web Jar 中的 CSS 样式  -->
    <link rel="stylesheet" th:href="@{'/webjars/bootstrap/css/bootstrap.min.css'}">

    <!--  jquery 放在 bootstrap 前面，因为 bootstrap 需要依赖到 jquery  -->
    <!--  引入 jQuery 的 Web Jar 中的 js 脚本  -->
    <script type="text/javascript" th:src="@{'/webjars/jquery/jquery.min.js'}"></script>

    <!--  引入 Bootstrap 的 Web Jar 中的 js 脚本  -->
    <script type="text/javascript" th:src="@{'/webjars/bootstrap/js/bootstrap.bundle.min.js'}"></script>

    <!--  引入 popper 的 Web Jar 中的 Js 脚本  -->
    <script type="text/javascript" th:src="@{'/webjars/popper.js/umd/popper.min.js'}"></script>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm">
            <h4 th:text="#{login_title}">首页</h4></div>
        <div class="col-sm text-right">

            <!-- 定义选择语言的下拉列表 -->
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button"
                        id="dropdownMenuButton" data-toggle="dropdown" th:text="#{choose}">
                    选择语言
                </button>
                <div class="dropdown-menu">
                    <!-- 这是个超链接，路径是根路径，直接访问就会回到index页面 ，路径无所谓，可以向任何地方发送请求，
                        因为最终都会被 localeChangeInterceptor 这个自定义的拦截器拦截到并进行处理 -->
                    <!--  此处发送请求时额外指定一个choseLang参数，该参数由LocaleChangeInterceptor负责处理 -->
                    <a class="dropdown-item" th:href="@{/?choseLang=en_US}" th:text="#{en}">
                        英文</a>
                    <a class="dropdown-item" th:href="@{/?choseLang=zh_CN}" th:text="#{zh}">
                        中文</a>
                </div>
            </div>
        </div>
    </div>

    <div class="text-danger" th:if="${tip != null}" th:text="${tip}"></div>

    <form method="post" th:action="@{/login}">
        <div class="form-group row">
            <label for="username" class="col-sm-3 col-form-label"
                   th:text="#{name_label}">用户名</label>
            <div class="col-sm-9">
                <input type="text" id="username" name="username"
                       class="form-control" th:placeholder="#{'name_hint'}">
            </div>
        </div>
        <div class="form-group row">
            <label for="password" class="col-sm-3 col-form-label"
                   th:text="#{password_label}">密码</label>
            <div class="col-sm-9">
                <input type="password" id="password" name="password"
                       class="form-control" th:placeholder="#{'password_hint'}">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-6 text-right">
                <button type="submit" class="btn btn-primary"
                        th:text="#{login_btn}">登录
                </button>
            </div>
            <div class="col-sm-6">
                <button type="reset" class="btn btn-danger"
                        th:text="#{reset_btn}">重设
                </button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

このドロップダウン ボックスは、もう 1 つの MyConfig 構成クラス、これらの構成ファイル、およびフロントエンド ドロップダウン ボックス コードを追加します。
他は触れていないので、前の記事を読んでください。
ブラウザ上で国際言語を直接変更する