文章目录
一、什么是国际化?
例如我们的dubbo.apache.org ,进入是一个默认英文的网站,右上角有个中字,点一下就会帮我们切换成中文网站,这就是国际化。
二、如何实现国际化?
- 确保我们的File Encodings都是UTF-8
- 在resource目录下新建一个 i18n目录(i18n是internationalize国际化的简写)
新建几个properties文件,然后就会自己建立Resource Bundle…目录
XXX.properties:默认
XXX_en_US.properties:英语
XXX_zh_CN.properties:中文
-
随便点进三个中任意一个文件,点击左下角的可视化工具同时对三个文件编写
-
例子:登录界面:
我需要实现在最下方点中文的时候,显示中文页面,点English的时候显示英文界面。
页面有5处信息要修改:
Please sign in《 ===== 》请登入
Email address 《=====》邮箱地址
password 《 =====》密码
Remember me 《=====》记住我
Sign in 《=====》登入
编写i18n文件:
login.properties:默认
login_en_US.properties:英语
login_zh_CN.properties:中文
把他们放入application.yaml配置中:
spring:
messages:
basename: i18n.login
接下来,我们的页面需要用到thymeleaf引擎
Message需要用到#{}
URL需要用到@{}
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta 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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Signin Template · Bootstrap</title>
<link rel="canonical" th:href="@{https://getbootstrap.com/docs/4.5/examples/sign-in/}">
<!-- Bootstrap core CSS -->
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link th:href="@{/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin">
<img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}"></h1>
<label for="inputEmail" class="sr-only" th:text="#{login.email}"></label>
<input type="email" id="inputEmail" class="form-control" th:placeholder="#{login.email}" required autofocus>
<label for="inputPassword" class="sr-only" th:text="#{login.password}"></label>
<input type="password" id="inputPassword" class="form-control" 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" >[[ #{login.sign} ]]</button>
<p class="mt-5 mb-3 text-muted">© 2017-2020</p>
<a class="btn btn-sm" th:href="@{/index.html(language='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/index.html(language='en_US')}">English</a>
</form>
</body>
</html>
现在我们显示的是默认的中文,我们需要在a标签上加上处理事件,传递一个language到后端
修改国际化message,需要建一个config类实现LocaleResolver 接口的两个方法,最后在MvcConfig.java中把这个类放入bean中
MyLocalResolver .java
public class MyLocalResolver implements LocaleResolver {
//解析请求
@Override
public Locale resolveLocale(HttpServletRequest httpServletRequest) {
//获取请求中的语言参数
String language = httpServletRequest.getParameter("language");
//language为空 使用默认的
Locale locale = Locale.getDefault();
//如果language不为空
if (!StringUtils.isEmpty(language)){
//zh_CN 分割
String[] s = language.split("_");
//国家,地区
locale = new Locale(s[0], s[1]);
}
return locale;
//写完 需要放入Bean中 ======》MvcConfig.java
}
@Override
public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
}
}
MvcConfig.java
@Configuration
public class MvcConfig implements WebMvcConfigurer {
//视图跳转
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
registry.addViewController("/index.html").setViewName("index");
}
//国际化放入bean中
@Bean
public LocaleResolver localeResolver(){
return new MyLocalResolver();
}
}
效果:
中文:
英文: