1. 程式人生 > 其它 >springboot-員工管理系統:國際化

springboot-員工管理系統:國際化

承接:springboot-員工管理系統:首頁實現

1 在resources目錄下新建一個資料夾 i18n

2 在 i18n 資料夾下建立國際化的配置檔案

login.properties

login_en_US.properties

login_zh_CN.properties

注意名稱不能寫錯,建立完成後三個檔案會自動合併

3 確定專案的編碼格式為UTF-8

4 國際化配置切換到視覺化編輯模式

安裝Resources Bundle 外掛

這個外掛安裝完成後,在國際化配置檔案的右下角會出現切換按鈕,點選按鈕切換成功後建立

這樣就能建立一條配置,點選這個配置可以同時編輯三個檔案的內容

5 編寫國際化的配置檔案

建立以下五個配置並對配置進行編輯

login.btn

login.password

login.remember

login.tip

login.username

這樣編寫完成後,會自動在三個配置檔案中生成對應的配置資訊

login.properties

login.btn=登入
login.password=密碼
login.remember=記住我
login.tip=請登入
login.username=使用者名稱

login_en_US.properties

login.btn=Sing in
login.password=Password
login.remember=remember me
login.tip=Please sign in
login.username=Username

login_zh_CN.properties

login.btn=登入
login.password=密碼
login.remember=記住我
login.tip=請登入
login.username=使用者名稱

6 修改index.html

使用thymeleaf語法替換index.html裡面的值

index.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>Signin Template for Bootstrap</title>
      <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
      <link th:href="@{/css/signin.css}" rel="stylesheet">
   </head>
   <body class="text-center">
      <form class="form-signin" action="dashboard.html">
         <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}">Please sign in</h1>
         <label class="sr-only">Username</label>
         <input type="text" class="form-control" th:placeholder="#{login.username}" required="" autofocus="">
         <label class="sr-only">Password</label>
         <input type="password" 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.btn}]]</button>
         <p class="mt-5 mb-3 text-muted">© 2017-2018</p>
         <a class="btn btn-sm">中文</a>
         <a class="btn btn-sm">English</a>
      </form>
   </body>
</html>

7 重啟程式,訪問主頁

資料成功顯示了,接下來實現中英文切換的效果

8 給index.html裡面中英文切換的按鈕繫結跳轉的連結

index.html

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

9 在config包下建立一個國際化元件

用自定義的MyLocaleResolver元件去替換springboot預設的LocaleResolver

MyLocaleResolver.java

package com.lv.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;


public class MyLocaleResolver implements LocaleResolver {
    //解析請求
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        //獲取請求中的語言引數
        String language = request.getParameter("language");
        Locale locale = Locale.getDefault();//獲取預設的,如果沒有就是用預設的
        //如果請求的連結攜帶了國際化的引數
        if (!StringUtils.isEmpty(language)){
            //zh_CN
            String[] split = language.split("_");
            //國家,地區
            locale = new Locale(split[0],split[1]);
        }
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {

    }
}

10 在mvc配置中註冊MyLocaleResolver

這步操作完成後,springboot預設的國際化元件就會失效,我們自定義的國際化元件就會生效

package com.lv.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.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
    //自定義的國際化元件就生效了
    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocaleResolver();
    }
}

11 重啟程式,訪問首頁

預設顯示,點English按鈕,切換英文

切換成功,注意位址列的變化,接下來再點選中文切換到中文

成功實現了切換中英文操作

12 總結

  • 我們需要配置i18n檔案
  • 我們如果需要在專案中進行按鈕切換語言,需要自定義一個LocaleResolver
  • 記得將自己寫的元件配置到spring容器中 Bean
  • 使用 #{}取值