例如我们的dubbo.apache.org ,进入是一个默认英文的网站,右上角有个中字,点一下就会帮我们切换成中文网站,这就是国际化。
随便点进三个中任意一个文件,点击左下角的可视化工具同时对三个文件编写
例子:登录界面:
我需要实现在最下方点中文的时候,显示中文页面,点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(); } }效果: 中文:
英文: