效果:
點擊相應的語言改變頁面顯示的語言
步驟:
1.創建springboot項目,引入thymeleaf
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.創建頁面login,使用thymeleaf:
具體語法查看,thymeleaf語法教程。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
</body>
</html>
3.創建3個國際化文件,如下圖:
在resource文件夾下創建i18n文件夾(i18n文件夾放在resource文件夾之下),專門用於存放國際化文件。
login.properties:未設置語言時默認顯示的內容
login_zh_CN.properties:選擇爲中文時顯示的內容
login_en_US.properties:選擇爲英文是顯示的內容。
如果使用IntelliJ IDEA 開發,工具會自動識別當前文件爲國際化文件,自動關聯3個文件,進行國際化設置。如下:
注意:國際化的文件中設置值的形式爲key-value;創建的key的作用是頁面中根據key來識別顯示內容。
如果使用的是eclipse開發,則需要自己手動一個個文件的編寫鍵值對。
4.在配置文件application.properties中配置國際化文件
# i18n.login:i18n爲文件夾,login爲標識
spring.messages.basename=i18n.login
5.改變語言顯示的原理就是springboot獲取瀏覽器請求數據中的區域信息該找到對應的國際化文件。
6.創建一個類MyLocal作爲一個組件,專門處理請求的區域信息:
package com.zhangxiaosan.top.Config;
import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;
/**
* 自定義區域信息,zh_CN en_US
* */
public class MyLocal implements LocaleResolver {
//解析區域信息
@Override
public Locale resolveLocale(HttpServletRequest httpServletRequest) {
String l = httpServletRequest.getParameter("l");
Locale locale = Locale.getDefault();
if(!StringUtils.isEmpty(l)){//檢查傳遞的l是否爲空
String[] split = l.split("_");
locale = new Locale(split[0],split[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
}
}
7.創建一個自定義的配置類 MyConfig,用@Bean註解將組件MyLocal加入容器中
package com.zhangxiaosan.top.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/**
* 使用自定義 WebMvcConfigurerAdapter 擴展SpringMVC的功能
*
* */
@Configuration
//@EnableWebMvc //全面接管springMVC
public class MyConfig extends WebMvcConfigurerAdapter {
//所有的WebMvcConfigurerAdapter組件全部都會一起起作用
/**
* 該功能主要用於每個控制器的訪問項目根目錄或者項目根目錄下的index.html頁面時顯示登錄頁面
*
* */
@Bean //將組建配置到容器中
public WebMvcConfigurerAdapter addViewController() {
WebMvcConfigurerAdapter Adapter = new WebMvcConfigurerAdapter() {
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("Admin/login"); //訪問項目根目錄顯示的頁面。
registry.addViewController("/index.html").setViewName("Admin/login");//訪問index.html顯示的頁面。
}
};
return Adapter;
}
/**
* 添加區域解析器,實現國際化切換
* */
@Bean
public LocaleResolver localeResolver(){
return new MyLocal();
}
}
8.html頁面實現:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title th:text="#{login.pageTitle}">Title</title>
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}"/>
</head>
<body>
<div class="container">
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>
<label th:text="#{login.username}">UserName</label>
<input type="text" id="inputUserName" class="form-control" placeholder="UserName" th:placeholder="#{login.username}" required autofocus />
<label th:text="#{login.password}">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" th:placeholder="#{login.password}" required />
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"/> <span th:text="#{login.remember}">Remember me</span>
</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">© 2019-7-13</p>
<center>
<a th:href="@{/index.html(l='zh_CN')}" th:text="#{login.useCN}"></a>
<a th:href="@{/index.html(l='en_US')}" th:text="#{login.useEN}"></a>
</center>
</form>
</div>
</body>
</html>