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 负责展示和交互，两者通过标准化接口通信，就能实现平滑的国际化体验。
