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| 12345 | dependency> groupId>org.springframework.bootgroupId> artifactId>spring-boot-starter-thymeleafartifactId> version>1.5.2.RELEASEversion>dependency> |
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;} |
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.
| 123456 | Beanpublic LocaleChangeInterceptor localeChangeInterceptor() { LocaleChangeInterceptor lci = new LocaleChangeInterceptor(); lci.setParamName("lang"); return lci;} |
Configuration class chúng ta implement the WebMvcConfigurer interface và override the addInterceptors() method:
| 1234 | Overridepublic void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(localeChangeInterceptor());} |
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 HTMLChú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"; }} |
| 1 | th:text="#{greeting}"> |
Đâ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}"> |
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
