详解jquery.i18n.properties的js文件与html页面的动态用法
闲话不再多说，最近leader要求国际化页面，一个后端的苦逼程序员哪受过这委屈，调查了一天才开始写代码。
先说思路，前端html页面用thymleaf模板去进行国际化，具体就是th:text属性，然而前端js文件的格式化在最后会提到。
1.首先，首页引入判断
<div class="m-b">
<a href="?lang=zh_CN"> <img alt="[ 中文 ]" src="../static/img/China.png" th:src="@{/img/China.png}"> <strong>简体中文</strong></a>
<strong>|</strong>
<a href="?lang=en_US"> <img alt="[ En ]" src="../static/img/United-States.png" th:src="@{/img/United-States.png}"> <strong>English</strong> </a>
</div>
通过httpservlet来进行传值
2.通过yml文件来配置国际化资源路径
# Spring配置
spring:
# 模板引擎
thymeleaf:
mode: HTML
encoding: utf-8
# 禁用缓存
cache: false
# 资源信息
messages:
# 国际化资源文件路径
basename: static/i18n/messages,static/i18n/system/messages
3.登录github下载最新的jquery.i18n.properties文件放到静态资源文件夹下后，找到每个html文件需要引入的头文件include.html进行添加
<script th:src="@{/js/jquery.i18n.properties.js}"></script>
4.在include.html内初始化使得一次加载多次使用
<script th:inline="javascript">
//获取应用路径
var ROOT = [[${#servletContext.contextPath}]];
//获取默认语言
var LANG_COUNTRY = [[${#locale.language+'_'+#locale.country}]];
//初始化i18n插件
$.i18n.properties({
path: ROOT + '/i18n/',//这里表示访问路径
name: 'messages',//文件名开头
language: LANG_COUNTRY,//文件名语言 例如en_US
mode: 'map'//默认值
});
//初始化i18n函数
function i18n(msgKey) {
return $.i18n.prop(msgKey);
}
//获取国际化翻译值
console.log(i18n('user.logout.success'));
</script>
详细说明一下，如果include.html文件需要引用i18n函数去国际化JS文件内的数据，需要以以下格式去引入，原因是include.html中需要按顺序去调用各个js文件，其中jquery插件需要第一个调用，否则下来的函数无法读取
<!-- 通用JS -->
<div th:fragment="footer">
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!--jQuery国际化插件-->
<script src="../static/js/jquery.i18n.properties.js" th:src="@{/js/jquery.i18n.properties.js}"></script>
<script th:inline="javascript">
//获取应用路径
var ROOT = [[${#servletContext.contextPath}]];
//获取默认语言
var LANG_COUNTRY = [[${#locale.language+'_'+#locale.country}]];
//初始化i18n插件
$.i18n.properties({
path: ROOT + '/i18n/',//这里表示访问路径
name: 'messages',//文件名开头
language: LANG_COUNTRY,//文件名语言 例如en_US
mode: 'map'//默认值
});
//初始化i18n函数
function i18n(msgKey) {
try {
return $.i18n.prop(msgKey);
} catch (e) {
return msgKey;
}
}
var editText1 =i18n('111111','11');
</script>
<!-- 全局变量 -->
<div th:replace="/include1::footer"></div>
<!-- bootstrap-table 表格插件 -->
<script th:src="@{/ajax/libs/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js}"></script>
<!-- jquery-validate 表单验证插件 -->
<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>
<!-- jquery-validate 表单树插件 -->
<script th:src="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.js}"></script>
<!-- jquery-export 表格导出插件 -->
<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/tableExport.js}"></script>
<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.1.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.1.0}"></script>
<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
</div>
其中ROOT就是localhost:8080，如果引入失败，浏览器中F12的控制台打印不出来相对应的资源文件对应的语句的话，就查看报错，是否找到资源文件路径，举例来说
这里是因为我的资源文件只有
找不到_zh结尾的文件，所以说会报错，可以无视，如果提示这个会报错的话就复制一个zh_CN结尾的文件更改文件名就可以了
随后添加资源文件加载配置类I18nConfig
@Configuration
public class I18nConfig implements WebMvcConfigurer
{
@Bean
public LocaleResolver localeResolver()
{
SessionLocaleResolver slr = new SessionLocaleResolver();
// 默认语言
slr.setDefaultLocale(Locale.SIMPLIFIED_CHINESE);
//默认时区
//slr.setDefaultTimeZone(TimeZone.getTimeZone("Asia/Shanghai"));
return slr;
}
@Bean
public LocaleChangeInterceptor localeChangeInterceptor()
{
LocaleChangeInterceptor lci = new LocaleChangeInterceptor();
// 参数名
lci.setParamName("lang");
return lci;
}
// @Bean
// public TimeZoneChangeInterceptor timeZoneChangeInterceptor()
// {
// TimeZoneChangeInterceptor tci = new TimeZoneChangeInterceptor();
// // 参数名
// tci.setParamName("timezone");
// return tci;
// }
@Override
public void addInterceptors(InterceptorRegistry registry)
{
registry.addInterceptor(localeChangeInterceptor());
//registry.addInterceptor(timeZoneChangeInterceptor());
}
}
这些都完成了之后，笔者提供两种思路
第一种，全局变量设置，利用thymleaf模板来进行html text的国际化
在include.html页面里进行变量设置
例如
!--编辑-->
<script th:inline="javascript"> var editText=[[#{select.edit}]]; </script>
<!--添加-->
<script th:inline="javascript"> var addText=[[#{select.add}]]; </script>
<!--删除-->
<script th:inline="javascript"> var deleteText=[[#{select.delete}]]; </script>
随后在每个html的页面中直接调用变量即可，记得在html的头文件中加载
<head>
<th:block th:include="include :: header('产品信息')" />
<th:block th:include="include :: select2-css" />
</head>
这个不推荐，因为每次打开页面都需要变量加载，对于网络负载和数据传输或者前台页面处理负荷都比较大
第二种办法，就是引入i18n的js文件，上面已经提了，不再详解，前端页面定义一个id调用即可
直接调用i18n函数
i18n('select.edit')
就好
还有一种就是，例如bootstrap都会有一个译文版，这时可以通过cookie的方式去调用
具体不再详解
结果展示
前台页面
毕竟其他人的博客里有写，就到这里了，希望对大家有帮助