Spring Boot实战系列《七》:实现登录国际化
1.前言
上一篇文章说的是人事管理系统的登录设计,在设计好了登录页面login.html的时候,不知道大家有没有看到下方有一个中文,英文按钮。一般逼格高点的项目,都是需要国际化的。
那么我们本篇文章就说一下关于spring boot项目的国际化操作。
2.登录国际化由什么控制?
运行我们上次的项目,默认访问login.html页面,是这样的。
那么做国际化之前, 需要先说说国际化的意思?
一般来说,是通过浏览器的信息或按钮选择来呈现国际化。
比如浏览器设置为英文,那么页面就应该是英文的,设置为中文,那么就是中文的。但是这种情况一般来说,不是客户主动的操作,不是很友好,于是,在项目中,我们一般使用按钮选择来呈现国际化。也就是比如图中所示,选择中文或者英文按钮,然后页面再呈现对应的效果,而不再通过修改浏览器来控制。
在spring boot源码中已经自动配置得有,但是默认的是根据浏览器的请求头带来的区域信息获取Locale进行国际化:
浏览器来控制图示:
3.实现点击链接来国际化:
以前使用spring mvc的时候,是这样来实现国际化的:
1)、编写国际化配置文件;
2)、使用ResourceBundleMessageSource管理国际化资源文件。
3)、在页面使用fmt:message取出国际化内容。
而在spring boot 中,
我们需要首先心里选好要的国际化页面—login.html页面,然后新建一个i18N文件夹,新建一个login页面的默认国际化配置文件:
分解步骤:
点击链接来国际化:
点击中文出中文,点击英文出英文的效果。(自己写国际化解析器)
1.首先在页面上设置链接,发起请求:
MyLocaleResolver区域信息对象控制器:LocaleResolver来获取区域对象。
在spring boot源码中已经自动配置得有,但是默认的是根据浏览器的请求头带来的区域信息获取Locale进行国际化:
国际化Locale(区域信息对象);LocaleResolver(获取区域信息对象);
而我们要的是点击链接来实现国际化,是人为控制的。
在login.html页面对应的地方,添加a链接 》》
修改成如下:
<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>
2.新建配置区域信息解析器:
新建配置区域信息解析器:
MyLocaleResolver区域信息对象控制器:LocaleResolver来获取区域对象。
因为spring boot也自动配置得有这个解析器,我们要做到的就是实现这个这个方法。
implements LocaleResolver
在java文件下创建:com.zout.component文件夹,和MyLocaleResolver.java文件。
图示:
写下:
MyLocaleResolver.java源码:
package com.zout.component;
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;
/**
* 2.区域信息解析器:1是html的请求。
* @Description:请求中携带区域信息,根据信息实现国际化
* 在链接上携带区域信息==比如在href上带上一个信息l,
* @Author: Zoutao
* @Date: 2018/12/4
*/
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;
}
/**
* 必须带有,将请求的区域信息放入区域信息对象locale中
* @param request
* @param response
* @param locale
*/
@Override
public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
}
}
注意,写好了区域信息解析器还不行哟,我们需要让spring boot知道这个东西的存在。
3.注册该区域解析器,让其生效
让其生效:
在spring mvc的解析器里面配置。
在MyMvcConfig.java中注册该解析器:
图示:
源码:
/**
*
* 3.注册区域信息解析器
* @return locale国际化对象
*/
@Bean
public LocaleResolver localeResolver(){
return new MyLocaleResolver();
}
最后,
4.配置显示的文字消息
在项目的resources文件夹下,新建i18n文件夹,新建三个文件:分别是默认login.properties,中文login_zh_CN.properties,英文login_en_US.properties这三个国际化配置文件。
注意,必须是.properties后缀哟
新建默认,中文的和英文的配置文件:
图示:
login.properties:
最后如图:
然后编写对应的显示信息,随便进去一个,
点击+号,添加属性,
比如登录提示:
密码:
需要哪些就添加哪些按钮的属性,是自定义的。
等等。
5.指定国际化文件的位置:
配置好了区域信息解析器,中英文配置文件,表单连接a标签等等,我们还需要去告诉项目,国际化文件在哪里?
在application.properties配置文件中,采用:
文件夹+基础名 来指定位置
spring.messages.basename=i18n.login
指定配置文件的位置。这个login是基础名,必须对应。
6.html引用国际化配置:
使用模板引擎来起名即可:使用th:text标签来引用。
在login.html页面下:
改写
行内表达式:[[#{login.remember}]]
等等地方,都要写。…
最后的th:href="@{/index.html(l=‘zh_CN’)}">中文是表示
发请求的时候,带上了国际化的区域信息值L–,然后区域信息解析器通过这个L的值就来实现国际化。
login.html修改后的源码:
<!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>人事系统登录页面</title>
<!-- webjars是引入的jar路径 -->
<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
<!-- asserts是本地路径 -->
<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" 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>
<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">© 2018-www.zoutao.info/zt</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>
上面的所有操作完成以后,你再去修改浏览器的默认语言,也没有作用了。
必须点击我的链接来切换国际化。
7.运行项目,查看国际化效果:
运行以后,如果你点击中、英文的按钮,发现出现错误?
那是需要在视图解析器MyMvcConfig的addViewControllers方法中,加这个一句:
registry.addViewController("/index.html").setViewName("login");
因为我们在表单的a标签加了index.html,于是添加一条视图解析器,这样才能正确跳转页面。
最后的效果:
默认是中文的。
点击英文:
点击中文:
上面就是整个实现登录国际化的操作,如果你出现乱码问题?
请看下面。
8.国际化中文乱码问题解决
如果你运行以后,发现你的是这么个界面。
虽然我们之前设置过编码问题:
但是这是设置的是针对于当前项目生效。
所以要对IDEA进行全局默认设置:
勾选:
这样才会所有项目都默认生效。然后把乱码的地方重新使用中文写一遍即可。
由于是先做项目,再写博客,导致一些图片素材补的时候不一样,所以有一些黑一些白,看客多包涵。
下面附上本项目的目前的源码下载链接:
Spring Boot实战实现登录国际化
(没有积分的留下邮箱)
后续会继续完成其他功能,关注本专栏即可。