Sử dụng đa ngôn ngữ trong Spring

Giới thiệu nội dung bài viết

Chào các bạn, các bạn đã từng thấy qua một trang web có thể hiển thị nhiều thứ tiếng khác nhau chưa ? Ví dụ trang lazada nếu ta chọn tiếng Việt ta sẽ nhìn thấy trang web là tiếng Việt, nếu ta chọn tiếng Anh thì trang web sẽ hiển thị tiếng Anh? Để làm được như vậy thì ta dùng cái gì trong Spring để làm. Hôm nay anh sẽ giới thiệu cho mọi người cách sử dụng đa ngôn ngữ i18n trong Spring.


Hiểu về khái niệm đa ngôn ngữ

Đa ngôn ngữ là gì ? Anh lấy ví dụ như mọi người làm trang web bán hàng. Đối với người Việt Nam thì mình người dùng sẽ chọn ngôn ngữ Việt Nam trên trang web . Khi đó tất cả nội dung của trang web sẽ hiển thị tiếng Việt . Cũng là trang web bán hàng đó , nếu là người Mỹ vào , họ sẽ chọn ngôn ngữ tiếng Anh . Khi đó tất cả nội dung của trang web sẽ hiển thị tiếng Anh.

  • Internationalization đa ngôn ngữ hoặc trong lập trình mình còn gọi là i18n. Bởi vì mình có 18 ký tự ở giữa ký tự I và ký tự N. Internationalization (quốc tế hoá) là một kỹ thuật cho phép chúng ta tạo ra các ứng dụng mà có thể thích ứng với nhiều ngôn ngữ và nhiều khu vực khác nhau.

  • Localization cũng có thể được viết tắt là l10n vì 10 ký tự ở giữa L và N. Localization (nội địa hoá) là kỹ thuật giúp tạo ra một ứng dụng có thể thích ứng với một ngôn ngữ và vùng miền cụ thể. Như vậy, một ứng dụng hỗ trợ đa ngôn ngữ thì gọi là Internationalization (quốc tế hoá) và khi người dùng chọn một ngôn ngữ cụ thể để hiển thị thì gọi là Localization (nội địa hoá).


1. Hướng dẫn cách làm đa ngôn ngữ

Bây giờ chúng ta sẽ đi từng bước để làm một ứng dụng đa ngôn ngữ trong Spring. Ở bài này mình sẽ làm cho tiếng Anh và tiếng Việt . Nào bắt đầu thôi .


Bước 1 : Thêm dependency spring boot vào file pom.xml

1
2
3
4
5
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>1.5.2.RELEASE</version>
</dependency>


Bước 2 Cấu hình LocaleResolver

Cấu hình file LocaleResolver để ứng dụng có thể biết được locale (tiếng Mỹ , tiếng Việt hay tiếng Pháp) mà ứng dụng đang sử dụng là gì ? .

1
2
3
4
5
6
@Bean
public LocaleResolver localeResolver() {
    SessionLocaleResolver slr = new SessionLocaleResolver();
    slr.setDefaultLocale(Locale.US);
    return slr;
}

LocaleResolver interface có khả năng xác định được ngôn ngữ nào đang sử dụng bởi vì nó có cài đặt chức năng xác định locale dựa trên session , cookie , Accept-Language , hoặc những giá trị mình thêm trên header của request.

Trong ví dụ của chúng ta mình sẽ sử dụng Session để chuyển đổi qua lại các ngôn ngữ .


Bước 3 cấu hình LocaleChangeInterceptor

Tiếp theo , chúng ta cần thêm một Interceptor có nhiệm vụ chuyển đổi qua lại giữa các locale mới khi giá trị thay đổi.

1
2
3
4
5
6
@Bean
public LocaleChangeInterceptor localeChangeInterceptor() {
    LocaleChangeInterceptor lci = new LocaleChangeInterceptor();
    lci.setParamName("lang");
    return lci;
}

Trong file configure @Configuration class chúng ta implement the WebMvcConfigurer interface và override the addInterceptors() method:

1
2
3
4
@Override
public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(localeChangeInterceptor());
}


Bước 4 Định nghĩa nội dung locale trong file Message Sources

Mặc định , Spring Boot sẽ tìm kiếm các file messageresource trong thư mục /src/main/resources. File locale mặc định là message.properties . Các nước khác nhau thì có định dạng file khác nhau message_XX.properties. XX là locale code của mỗi nước. Ví dụ tiếng Anh thì sẽ là message_en.properties , tiếng Việt sẽ là message_vi.properties.

Sau đây là ví dụ file locale tiếng Anh messages.properties:

greeting=Hello! Welcome to our website! lang.change=Change the language lang.eng=English lang.vi=VietNam

Tiếp chúng ta sẽ tạo file locale tiếng Việt message_vi.properties có key giống như file message ở trên .

greeting= Xin Chào ! Chào mừng bạn đến với website lang.change= Thay đổi ngôn ngữ lang.eng=Tiếng Anh lang.vi =Tiếng Việt


Bước 5 Tạo Controller và trang HTML

Chúng ta sẽ tạo controller sẽ mapping với request của người dung là /international .

1
2
3
4
5
6
7
8
@Controller
public class PageController {

    @GetMapping("/international")
    public String getInternationalPage() {
        return "international";
    }
}

Chúng ta sẽ sử dụng thymeleaf để hiển thị kết quả trên trang HTML .

1
<h1 th:text="#{greeting}"></h1>

Nếu ta muốn thực hiện đổi ngôn ngữ tiếng Anh sang tiếng Việt thì chỉ cần thêm tham số lang=vi trên URL trong form /international?lang=vi Nếu ta muốn thực hiện đổi ngôn ngữ tiếng Việt sang tiếng Anh thì chỉ cần thêm tham số lang=en trên URL trong form /international?lang=en
Nếu không có tham số lang trên URL thì ứng dụng sẽ lấy locale mặc định trong trường hợp này sẽ lấy giá trị trong file message.properties.

Đây là đoạn mã thymeleaf để cho người dùng chọn ngôn ngữ. Chúng ta sẽ truyền giá trị người dùng chọn là en hay vi lên cho controller từ đó ta thay đổi ngôn ngữ .

1
2
3
4
5
6
<span th:text="#{lang.change}"></span>:
<select id="locales">
    <option value=""></option>
    <option value="en" th:text="#{lang.eng}"></option>
    <option value="vi " th:text="#{lang.fr}"></option>
</select>


Bước 6 Running the Application


2. Video Demo


chúng ta cũng có thể làm locale cho webservice mọi người xem github này nhé

link

3. Source code

Sourcecode


Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây


Comments