配置國際化頁面

配置國際化頁面 css

1.編寫多語言國際化配置文件html

在項目的類路徑resources下建立名稱爲i18n的文件夾,並在該文件夾中根據須要編寫對應的多語言國際化文件login.properties、login_zh_CN.properties和login_en_US.properties文件 前端

login.propertiesjava

login.tip=請登陸

login.username=用戶名

login.password=密碼

login.rememberme=記住我

login.button=登陸

login_zh_CN.propertiesweb

login.tip=請登陸

login.username=用戶名

login.password=密碼

login.rememberme=記住我

login.button=登陸

login_en_US.propertiesspring

login.tip=Please sign in

login.username=Username

login.password=Password

login.rememberme=Remember me

login.button=Login


login.properties爲自定義默認語言配置文件,login_zh_CN.properties爲自定義中文國際化文件,login_en_US.properties爲自定義英文國際化文件 bootstrap


須要說明的是,Spring Boot默認識別的語言配置文件爲類路徑resources下的messages.properties;其餘語言國際化文件的名稱必須嚴格按照「文件前綴名_語言代碼_國家代碼.properties」的形式命名 瀏覽器


本示例中,在項目類路徑resources下自定義了一個i18n包用於統一配置管理多語言配置文件,並將項目默認語言配置文件名自定義爲login.properties,所以,後續還必須在項目全局配置文件中進行國際化文件基礎名配置,才能引用自定義國際化文件app

2. 編寫配置文件ide


打開項目的application.properties全局配置文件,在該文件中添加國際化文件基礎名設置,內容如文件

# 配置國際化文件基礎名

       spring.messages.basename=i18n.login


spring.messages.basename=i18n.login」設置了自定義國際化文件的基礎名。其中,i18n表示國際化文件相對項目類路徑resources的位置,login表示多語言文件的前綴名。若是開發者徹底按照Spring Boot默認識別機制,在項目類路徑resources下編寫messages.properties等國際化文件,能夠省略國際化文件基礎名的配置

3.制區域信息解析器

​ 在完成上一步中多語言國際化文件的編寫和配置後,就能夠正式在前端頁面中結合Thymeleaf模板相關屬性進行國際化語言設置和展現了,不過這種實現方式默認是使用請求頭中的語言信息(瀏覽器語言信息)自動進行語言切換的,有些項目還會提供手動語言切換的功能,這就須要定製區域解析器了


在項目中建立名爲com.lagou.config的包,並在該包下建立一個用於定製國際化功能區域信息解析器的自定義配置類MyLocalResovel

package com.lagou.config;

 

import
org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.lang.Nullable;

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;

 

 

@Configuration

public class MyLocaleResovel implements
LocaleResolver {

   
// 自定義區域解析方式

   
@Override

   
public Locale resolveLocale(HttpServletRequest httpServletRequest) {

       
// 獲取頁面手動切換傳遞的語言參數l

       
String l = httpServletRequest.getParameter("l");

       
// 獲取請求頭自動傳遞的語言參數Accept-Language

       
String header =
httpServletRequest.getHeader("Accept-Language");

       
Locale locale=null;

       
// 若是手動切換參數不爲空,就根據手動參數進行語言切換,不然默認根據請求頭信息切換

       
if(!StringUtils.isEmpty(l)){

           
String[] split = l.split("_");

           
locale=new Locale(split[0],split[1]);

       
}else {

           
// Accept-Language: en-US,en;q=0.9

         
,zh-CN;q=0.8,zh;q=0.7

           
String[] splits = header.split(",");

           
String[] split = splits[0].split("-");

           
locale=new Locale(split[0],split[1]);

       
}

       
return locale;

    }

   
@Override

   
public void setLocale(HttpServletRequest httpServletRequest, @Nullable

       
    HttpServletResponse
httpServletResponse, @Nullable Locale locale) {

    }

   
// 將自定義的MyLocalResovel類從新註冊爲一個類型LocaleResolver的Bean組件

   
@Bean

   
public LocaleResolver localeResolver(){

       
return new MyLocalResovel();

    }

}

MyLocalResolver自定義區域解析器配置類實現了LocaleResolver接口,並重寫了其中的resolveLocale()方法進行自定義語言解析,最後使用@Bean註解將當前配置類註冊成Spring容器中的一個類型爲LocaleResolver的Bean組件,這樣就能夠覆蓋默認的LocaleResolver組件。其中,在resolveLocale()方法中,根據不一樣需求(手動切換語言信息、瀏覽器請求頭自動切換語言信息)分別獲取了請求參數l和請求頭參數Accept-Language,而後在請求參數l不爲空的狀況下就以l參數攜帶的語言爲標準進行語言切換,不然就定製經過請求頭信息進行自動切換。


須要注意的是,在請求參數l的語言手動切換組裝時,使用的是下劃線「_」進行的切割,這是由多語言配置文件的格式決定的(例如login_zh_CN.properties);而在請求頭參數Accept-Language的語言自動切換組裝時,使用的是短橫線「-」進行的切割,這是由瀏覽器發送的請求頭信息樣式決定的(例如Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7)

4.頁面國際化使用


打開項目templates模板文件夾中的用戶登陸頁面login.html,結合Thymeleaf模板引擎實現國際化功能

<!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">

   
<title>用戶登陸界面</title>

   
<link th:href="@{/login/css/bootstrap.min.css}"
rel="stylesheet">

   
<link th:href="@{/login/css/signin.css}"
rel="stylesheet">

</head>

<body class="text-center">

<!-- 
用戶登陸form表單 -->

<form class="form-signin">

   
<img class="mb-4"
th:src="@{/login/img/login.jpg}" width="72"
height="72">

   
<h1 class="h3 mb-3 font-weight-normal"
th:text="#{login.tip}">請登陸</h1>

   
<input type="text" class="form-control"

          
th:placeholder="#{login.username}" required=""
autofocus="">

   
<input type="password" class="form-control"

          
th:placeholder="#{login.password}" required="">

   
<div class="checkbox mb-3">

       
<label>

           
<input type="checkbox" value="remember-me">
[[#{login.rememberme}]]

       
</label>

   
</div>

   
<button class="btn btn-lg btn-primary btn-block"
type="submit" th:text="#{login.button}">登陸</button>

   
<p class="mt-5 mb-3 text-muted">© <span
th:text="${currentYear}">2018</span>-<span
th:text="${currentYear}+1">2019</span></p>

   
<a class="btn btn-sm"
th:href="@{/toLoginPage(l='zh_CN')}">中文</a>

   
<a class="btn btn-sm" th:href="@{/toLoginPage(l='en_US')}">English</a>

</form>

</body>

</html>


使用Thymeleaf模板的#{}消息表達式設置了國際化展現的部分信息。在對記住我rememberme國際化設置時,須要國際化設置的rememberme在<input>標籤外部,因此這裏使用了行內表達式[[#{login.rememberme}]]動態獲取國際化文件中的login.rememberme信息。另外,在<form>表單尾部還提供了中文、English手動切換語言的功能連接,在單擊連接時會分別攜帶國家語言參數向「/」路徑請求跳轉,經過後臺定製的區域解析器進行手動語言切換

5.整合效果測試

ish」連接進行語言國際化切換時攜帶了指定的「l=zh_CN」參數,後臺定製的區域解析器配置類MyLocalResovel中的解析方法會根據定製規則進行語言切換,從而達到了手動切換國際化語言的效果 這些內容,是從拉勾教育的《Java工程師高薪訓練營》裏學到的,課程內容很是全面,還有拉勾的內推大廠服務,推薦你也看看。

相關文章
相關標籤/搜索