JeecgBoot Vue2前端国际化语言切换

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:如感觉对其有帮助，希望能获得您的关注和点赞，谢谢。