【Spring Boot】页面国际化实现

    科技2022-07-16  126

    文章目录

    一、什么是国际化?二、如何实现国际化?


    一、什么是国际化?

    例如我们的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(); } }

    效果: 中文:

    英文:

    Processed: 0.010, SQL: 8