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ấytrang 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ệucho mọi người cách sử dụng đa ngôn ngữ i18n trong Spring.

Bạn đang xem: I18n trong spring mvc là gì? hướng dẫn tạo ứng dụng web đa ngôn ngữ

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

12345dependency> groupId>org.springframework.bootgroupId> artifactId>spring-boot-starter-thymeleafartifactId> version>1.5.2.RELEASEversion>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ì ? .

123456
Beanpublic 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 localedự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ữ .

Xem thêm: Tổng Thư Ký Liên Hợp Quốc Mới Là Ai, António Guterres

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.

123456
Beanpublic 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:

1234
Overridepublic 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 languagelang.eng=Englishlang.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 websitelang.change= Thay đổi ngôn ngữlang.eng=Tiếng Anhlang.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 .

12345678
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 th:text="#{greeting}">
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=viNế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=enNế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ữ .

123456 th:text="#{lang.change}">: id="locales"> value=""> value="en" th:text="#{lang.eng}"> value="vi " th:text="#{lang.fr}">

Bước 6 Running the Application

2. Video Demo


*
Play

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

*

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


Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *