spring通过资源文件和Locale解析器实现后端i18n，javaScript通过接口获取语言包或使用国际化库实现前端多语言展示，两者通过统一locale格式、接口通信及协同策略实现完整国际化方案。
实现国际化（i18n）需要前端与后端协同工作，javascript 与 Spring 分别负责客户端和服务器端的多语言支持。以下是两者结合使用的常见实现方式。
Spring 后端国际化配置
Spring 提供了完整的 i18n 支持，通过资源文件和 Locale 解析器实现语言切换。
1. 创建消息资源文件
在 src/main/resources 下创建不同语言的 properties 文件：
立即学习“Java免费学习笔记（深入）”；
- messages.properties（默认）
- messages_zh_CN.properties（中文）
- messages_en_US.properties（英文）
例如：
messages_zh_CN.properties 内容：welcome=欢迎使用系统
messages_en_US.properties 内容：welcome=Welcome to the system
2. 配置 MessageSource 和 LocaleResolver
在 Spring 配置类或 xml 中注册相关 Bean：
@Bean public MessageSource messageSource() { ResourceBundleMessageSource source = new ResourceBundleMessageSource(); source.setBasename("messages"); source.setDefaultEncoding("UTF-8"); return source; } @Bean public LocaleResolver localeResolver() { cookieLocaleResolver resolver = new CookieLocaleResolver(); resolver.setDefaultLocale(Locale.SIMPLIFIED_CHINESE); resolver.setCookieName("lang"); resolver.setCookieMaxAge(3600); return resolver; }
3. 添加拦截器处理语言切换
通过 URL 参数（如 ?lang=en_US）切换语言：
@Override protected void addInterceptors(InterceptorRegistry registry) { LocaleChangeInterceptor localeChangeInterceptor = new LocaleChangeInterceptor(); localeChangeInterceptor.setParamName("lang"); registry.addInterceptor(localeChangeInterceptor); }
前端 JavaScript 国际化方案
JavaScript 可通过多种方式获取并显示对应语言内容，常见做法如下：
1. 从后端加载语言包
在页面初始化时，通过接口获取当前用户的语言文本：
fetch('/api/i18n/messages') .then(response => response.json()) .then(data => { window.i18n = data; // 存储翻译映射 document.getElementById('welcome').textContent = data['welcome']; });
Spring 控制器示例：
@GetMapping("/api/i18n/messages") public Map<String, String> getMessages( HttpServletRequest request) { Locale locale = localeResolver.resolveLocale(request); Properties props = loadPropertiesForLocale(locale); return props.entrySet().stream() .collect(Collectors.toMap( e -> e.getKey().toString(), e -> e.getValue().toString())); }
2. 使用 JS 国际化库（如 i18next 或 Globalize）
引入 i18next 并配合 ajax 加载语言 json 文件：
i18next.use(XHR).init({ lng: 'zh-CN', fallbackLng: 'en', backend: { loadPath: '/static/locales/{{lng}}/translation.json' } }, function(err, t) { document.getElementById('welcome').textContent = t('welcome'); });
此时需将 Spring 的 messages 转为 JSON 格式输出，或单独维护前端语言文件。
3. 动态切换语言
提供语言选择按钮，发送请求并刷新界面：
function changeLang(lang) { fetch(`/api/i18n/change?lang=${lang}`, { method: 'GET' }) .then(() => location.reload()); }
前后端协同最佳实践
为了提升体验和性能，建议采用以下策略：
- 统一语言标识：前后端使用相同的 locale 格式（如 en_US、zh_CN）
- 服务端渲染时直接注入语言文本，减少首屏请求
- 静态资源使用独立语言包，避免每次请求都从后端读取
- 对用户输入内容也做语言区分存储
基本上就这些。关键是让 Spring 管理语言资源和用户偏好，JavaScript 负责展示和交互，两者通过标准化接口通信，就能实现平滑的国际化体验。