El artículo anterior cambió directamente el idioma admitido del navegador.
Cambie el idioma internacional directamente en el navegador
La función que se implementará esta vez es seleccionar dinámicamente el idioma directamente en la interfaz del programa.
La configuración regional representa el idioma y el país.
★ Cambiar dinámicamente el idioma en la interfaz
La clave de por qué una aplicación puede presentar dinámicamente interfaces de diferentes idiomas radica en cómo determinar la configuración regional del cliente (que representa información de idioma y país)
: las aplicaciones Spring Boot usan LocaleResolver para determinar la configuración regional utilizada por el cliente.
La interfaz LocaleResolver es responsable de analizar la configuración regional del navegador del usuario. Esta interfaz tiene las siguientes tres clases de implementación.
▲ AcceptHeaderLocaleResolver:
determinado según el encabezado de solicitud de aceptación del navegador, valor predeterminado.
Al cambiar la configuración del navegador, en realidad cambia el encabezado de solicitud de aceptación enviado por el navegador.
El ejemplo del artículo anterior es este.
▲CookieLocaleResolver: determinar según la cookie
▲SessionLocaleResolver: Determinar según la sesión
Si desea cambiar dinámicamente el idioma en la interfaz, debe utilizar CookieLocaleResolver o SessionLocaleResolver.
▲ Pasos:
（1）在容器中配置LocaleResolver Bean
（用CookieLocaleResolver或SessionLocaleResolver都行）
（2）添加LocaleChangeInterceptor拦截器，
该拦截器需要指定根据哪个参数动态地更改Locale（还需要将该拦截器添加到系统中）
（3）页面上用户选择不同语言则发送相应的请求参数
（此处的参数名对应于第二步所指定的参数）来改变Locale
——通常用一个下拉列表框来发送请求参数。
Resumen:
// Configurar LocaleResolver Bean,
función: hay dos formas de cambiar el idioma internacional, la cookie y la sesión de la configuración regional. Por ejemplo, si desea utilizar una cookie, agregue un valor de atributo de cookie al archivo de configuración y luego obtenga directamente el atributo value a través de @Value y luego vaya
al LocaleResolver Bean para el procesamiento lógico.
// Configurar un Bean interceptor -> LocaleChangeInterceptor Función Bean
: el interceptor cambia dinámicamente el idioma internacional local de acuerdo con los parámetros incluidos en la solicitud enviada por el cliente en el front-end.
Es decir, el usuario envía una solicitud, como seleccionar [inglés americano], luego el front-end enviará una solicitud que lleva un parámetro [choseLang=en_US], y luego esta solicitud será interceptada por el interceptor LocaleChangeInterceptor y luego analizará el en_US transportado por este parámetro (el análisis de este parámetro es la función del interceptor en sí. No he emitido ningún juicio sobre este parámetro por mí mismo. Supongo que tengo que mirar el código fuente),
Demostración de código:
El front-end define un cuadro desplegable y luego tiene dos hipervínculos. Las solicitudes de estos dos hipervínculos serán interceptadas y procesadas por el interceptor de back-end.
Algunas configuraciones correspondientes en el archivo de configuración.
Vaya a la clase de configuración de backend y agregue dos beans:
uno es el bean que cambia la configuración regional
y el otro es el bean que usa el interceptor para procesar la solicitud de front-end.
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=简体中文
Manifestación:
El código del índice front-end:
<!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>
Este cuadro desplegable es para agregar una clase de configuración MyConfig más, así como estos archivos de configuración y el código del cuadro desplegable de front-end.
Los demás no se mueven, puedes leer el artículo anterior.
Cambiar el idioma de internacionalización directamente en el navegador
