19 Web开发实战--语言转换

版权声明:看什么?6,你和我,走一波! https://blog.csdn.net/qq_31323797/article/details/84650259

1 通过浏览器切换语言

将页面上需要语言转换的信息进行抽取

配置文件默认格式properties

1.1 目录结构

目录结构

操作说明

1.2 配置文件

1.2.1 login.properties
login.btn=登陆(默认)
login.password=密码(默认)
login.remember=记住我(默认)
login.tip=请登陆(默认)
login.username=用户名(默认)
1.2.2 login_zh_CN.properties
login.btn=登陆
login.password=密码
login.remember=记住我
login.tip=请登陆
login.username=用户名
1.2.3 login_en_US.properties
login.btn=Sign In
login.password=Password
login.remember=Remember Me
login.tip=Please sign in
login.username=UserName
1.2.4 application.properties
spring.messages.basename=internationalization.login
1.2.5 配置文件原理
详见MessageSourceAutoConfiguration

1.3 改造页面

使用语言转换

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Signin Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
	</head>
	<body class="text-center">
		<form class="form-signin" action="dashboard.html" th:action="@{/user/login}" method="post">
			<img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>
			<!--判断-->
			<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
			<label class="sr-only" th:text="#{login.username}">Username</label>
			<input type="text"  name="username" class="form-control" placeholder="Username" th:placeholder="#{login.username}" required="" autofocus="">
			<label class="sr-only" th:text="#{login.password}">Password</label>
			<input type="password" name="password" class="form-control" placeholder="Password" th:placeholder="#{login.password}" required="">
			<div class="checkbox mb-3">
				<label>
          			<input type="checkbox" value="remember-me"/> [[#{login.remember}]]
        		</label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
			<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a>
			<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>
		</form>
	</body>

</html>

1.4 测试中文显示

1.4.1 切换浏览器语言为中文

语言切换

1.4.2 打开页面,显示中文

中文页面

1.5 测试英文显示

1.4.1 切换浏览器语言为英文

切换语言

1.4.2 打开页面,显示英文

英文页面

  • 效果:根据浏览器语言设置的信息切换页面语言

1.5 切换原理

​ 国际化Locale(区域信息对象);LocaleResolver(获取区域信息对象);

@Bean
@ConditionalOnMissingBean
@ConditionalOnProperty(
	prefix = "spring.mvc",
	name = {"locale"}
)
public LocaleResolver localeResolver() {
	// 如果自定义区域信息,就是用自定义
	if (this.mvcProperties.getLocaleResolver() == org.springframework.boot.autoconfigure.web.servlet.WebMvcProperties.LocaleResolver.FIXED) {
		return new FixedLocaleResolver(this.mvcProperties.getLocale());
	} else {
		// 否则使用AcceptHeader(请求头)中的区域信息
		AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
		localeResolver.setDefaultLocale(this.mvcProperties.getLocale());
		return localeResolver;
	}
}
  • 默认的就是根据请求头带来的区域信息获取Locale进行国际化

请求头

2 通过页面点击切换语言

2.1 自定义区域信息解析器

package com.gp6.springboot18.config;

import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;

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

/**
 * 将区域信息放到请求中
 */
public class MyLocaleResolver implements LocaleResolver {
    
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        String l = request.getParameter("l");
        Locale locale = Locale.getDefault();
        if(!StringUtils.isEmpty(l)){
            String[] split = l.split("_");
            locale = new Locale(split[0],split[1]);
        }
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {

    }
}

2.2 将自定义的解析器注入到容器中

2.2.1 MyConfig
@Bean
public LocaleResolver localeResolver(){
	return new MyLocaleResolver();
}

猜你喜欢

转载自blog.csdn.net/qq_31323797/article/details/84650259
19