Spring中多语言页面适配方案总结

JoyousHorse

已于 2022-02-12 11:49:54 修改

阅读量2.4k

点赞数 1

文章标签： spring 前端 java

于 2022-01-28 15:19:37 首次发布

本文链接：https://blog.csdn.net/ONEMOOC/article/details/122731759

版权

本文总结了在Spring Web项目中实现多语言页面适配的两种主要方法：替换法（包括jQuery i18n插件法、ResourceBundle法、MessageSource法）和多套页面法。替换法适用于读写顺序相同的语言，而多套页面法则为每种语言创建单独的页面。文中详细介绍了每种方法的优缺点和操作步骤。

摘要由CSDN通过智能技术生成

一、概述

在做web开发中，考虑到地区语言习惯，需要针对不同国家/地区显示不同的语言。在网上的各类博客中，多是介绍读取配置文件的方法进行多语言适配。

但笔者在实际预研和项目开发过程中，逐渐了解到不同语言的阅读、书写方式差异大。例如英语和现代汉语读写顺序相同，都是从左往右读；少数民族语言维语等阿拉伯语言是从右往左读写；蒙文、古汉语等语言是从上往下读写。不同的语言的读写习惯、字体大小会导致页面有不同的排版样式，难以做到一视同仁。一句话在不同语言中字符长度不同，这也是前端显示时需要考虑的问题。

如下表所示，归纳了几种语言类型的读写习惯和样例。如蒙古语、维语等少数民族语言，它们的读写习惯与汉语差异大，无法通过简单的文本替换来进行多语言适配。若需要有较好的观感体验，还需要对前端样式进行单独处理。

语言类型	示例	读写习惯
中文（zh_CN）	这是中文	从左往右读写
英文（en）	this is English	从左往右读写
蒙古语（mn_MN）	见图一	竖排从上到下，列序从左到右
维吾尔语（ug_CN）	بۇ ئۇيغۇر	从右往左读写

在这里插入图片描述

由此可知，多语言替换法并不是万能的适配方法。笔者总结网上文章和自身项目经验，将多语言适配方法分为两类方法：替换法和多套页面法。

替换法的要点是将多语言文本通过“替换”方式，针对不同语言显示对应文本。替换法包括前端页面文本替换、读取properties配置文件替换、读取json配置文件替换（部分客户端游戏使用该方法做多语言适配，因笔者接触较少，故不讨论）等。多套页面法是每种语言一套页面，是一种傻瓜式，针对性强的多语言处理方法。

二、替换法

替换法是指通过代码动态获取不同语言文本，当前页面显示什么语言类型就显示哪种语言。该方法比较适用读写顺序相同，切换不同语言后不影响整体页面布局的多语言类型。该方法常见中英文适配。例如，当我们在中国浏览网页，代码检测到该地区为中国后，就会读取中文文本，再到前端页面中生成中文文本。

下文将重点介绍Spring Web项目开发中，比较简单的几种替换法。

2.1 jQuery i18n插件法

2.1.1 简介

jQuery.i18n.properties是jQuery的插件，该方法需和jQuery配套使用。它的原理是在html中，对需要翻译的文本进行标记，然后调用相关js代码，传入当前页面的语言类型，读取对应propertis中的翻译文本再替换，类似的还有vue中的i18n插件等。

jQuery.18n.properties的github下载地址：https://github.com/jquery-i18n-properties/jquery-i18n-properties

2.1.2 使用方法

1）演示代码插件版本

jquery-3.0.0.min.js
jquery.i18n.properties-1.0.9.js

2）在对应properties文件中配置多语言值

properties文件名称需要和name传入的值保持一致，文件名命名规则为name_语言类型.properties，例如，strings_en.properties。

strings_zh_CN.properties:

key=这是中文

strings_en.properties：

key=this is english

3）演示代码

<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
</head>

<body>
    <div>
        <div>
            <select id="language">
                <option value="zh_CN"