首页 > 文章 > 前端

JavaScript与Spring多语言实现方法

时间：2026-02-10 14:23:47 168浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JavaScript与Spring多语言实现技巧》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

Spring通过资源文件和Locale解析器实现后端i18n，JavaScript通过接口获取语言包或使用国际化库实现前端多语言展示，两者通过统一locale格式、接口通信及协同策略实现完整国际化方案。

JavaScript与Spring国际化支持的实现方法

实现国际化（i18n）需要前端与后端协同工作，JavaScript 与 Spring 分别负责客户端和服务器端的多语言支持。以下是两者结合使用的常见实现方式。

Spring 后端国际化配置

Spring 提供了完整的 i18n 支持，通过资源文件和 Locale 解析器实现语言切换。

1. 创建消息资源文件

在 src/main/resources 下创建不同语言的 properties 文件：

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

好了，本文到此结束，带大家了解了《JavaScript与Spring多语言实现方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

前往漫画官网入口并下载 ➜

js开发spring教程