JeecgBoot-antd Vue2前端国际化语言切换
jeecg官方文档:参考
jeecg前端的国际化解决方案:参考
一.需求场景
后台管理系统,放置一个中英文切换选择按钮。页面切换所选语言后,系统会重新加载,获取对应的语言数据,并且下次打开默认之前选择语言。
二.页面组件
vue-i18n,可参考官方文档
如弹出确认框,可选择高级后,再点击接受即可
不知为啥会弹出危险确认框,如害怕不安全,也可自行查询相关查找相关资料
1.安装 vue-i18n:
$ npm install vue-i18n
2. 修改 App.vue 文件,原基础上添加
<template>
<a-config-provider :locale="locale">
<div id="app">
<router-view/>
</div>
</a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enUS from 'ant-design-vue/lib/locale-provider/en_US'
import enquireScreen from '@/utils/device'
export default {
data () {
return {
locale: zhCN,
}
},
created () {
//获取本地缓存中的语言配置,并切换
let language = this.$ls.get("language");
if( language == 'zh-CN'){
this.locale = zhCN
} else if(language == 'en-US'){
this.locale = enUS
}
}
}
</script>
<style>
#app {
height: 100%;
}
</style>
3.创建js语言文件,存放相应的语言字段
(1).在 src/components/lang/ 中 创建语言js 例如 en-US.js 和 zh-CN.js
(2).en-US.js 和 zh-CN.js 中配置如下,其他字段自己对应添加:
zh-CN.js
export default {
lang: '中文',
field:{
companyName:'公司名称',
},
common:{
placeholder:{
input:"请输入{content}"
}
},
}
en-US.js
export default {
lang: 'English',
field:{
companyName:'companyName',
},
common: {
placeholder:{
input:"please input {content}"
}
}
(3).修改main.js中实例化配置
/*中英文切换*/
import VueI18n from 'vue-i18n'
import enLocale from '@/components/lang/en-US'
import zhLocale from '@/components/lang/zh-CN'
Vue.use(VueI18n)
/*中英文切换*/
Vue.use(VueI18n)
const messages = {
'en-US': {
...enLocale,
},
'zh-CN': {
...zhLocale,
}
}
const i18n = new VueI18n({
locale: Vue.ls.get("language", "zh-CN"),
messages
})
SSO.init(() => {
main()
})
function main() {
new Vue({
router,
store,
i18n,
mounted () {},
render: h => h(App)
}).$mount('#app')
}
4.页面样式,添加语言切换按钮
修改 components/setting/SettingDrawer.vue
<a-list-item>
<a-list-item-meta>
<div slot="title">语言设置</div>
</a-list-item-meta>
<a-select size="small" style="width: 80px;" :defaultValue="$t('lang')" @change="handleLanguageChange">
<a-select-option value="zh-CN">中文</a-select-option>
<a-select-option value="en-US">英文</a-select-option>
</a-select>
</a-list-item>
<h3 class="setting-drawer-index-title">整体风格设置 {{ $t('lang') }}</h3>
5.列表及使用
(1).搜索条件
<a-form-item :label="$t('field.companyName')">
<a-input :placeholder="$t('common.placeholder.input',{'content':$t('field.companyName')})" v-model="queryParam.name"></a-input>
</a-form-item>
(2).查询与重置按钮
<a-button type="primary" @click="searchQuery" icon="search">{{$t('button.searchQuery')}}</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{$t('button.searchReset')}}
</a-button>
(3).列表字段
{
title:this.$t('field.companyName'),
align:"center",
dataIndex: 'name'
},
三.后台数据
1.思路
(1).前端通过form添加数据时,对应的切换语言数据都要添加,并保存至数据库。
(2).前端切换语言后,查询数据时,接口携带对应的语言类型传至后台。
(3).后台要新增对应数据的共用实体类。
(4).后台通过前端传的语言类型,获取数据后再赋值给新增的返回实体类。这样前端也方便展示,只用接收返回的共用实体类数据。
2.controller类
prouctWrapper.select("*," + languageEnum.type() + " as type," + languageEnum.desc() + " as desc");
3.创建语言枚举类,避免代码同样的代码重复
@Getter
public enum LanguageEnum {
china("zh","zh_desc"),
english("en", "en_name"),
;
private String type;
private String desc;
LanguageEnum(String type, String desc) {
this.type = type;
this.desc = desc;
}
public static LanguageEnum getLanguageEnum(String type){
for (LanguageEnum value : LanguageEnum.values()) {
if (value.type.equals(type)) {
return value;
}
}
return null;
}
}
4.工具类
@Component
public static String getLanguage(){
HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
String language = request.getHeader("language");
if(StringUtils.isBlank(language)){
return LanguageEnum.china.getType();
}
return language;
}
PS:上述用法通过学习和实践,都已实现效果,在此作为记录。
PS:更多用法,可参考学习其他大佬的相关资料。
PS:如感觉对其有帮助,希望能获得您的关注和点赞,谢谢。