RUOYI分离版实现动态国际化

RUOYI分离版实现国际化

什么是国际化

	所谓的国际化就是指软件在开发时就应该具备支持多种语言和地区的功能，也就是说开发的软件能同时应对不同国家和地区的用户访问，并针对不同国家和地区的用户，提供相应的、符合来访者阅读习惯的页面和数据。由于国际化internationalization这个单词的首字母“i”和尾字母“n”之间有18个字符，因此国际化被简称为i18n。

前端VUE实现国际化

安装vue-i18n
前端执行npm install vue-i18n
修改main.js （ctrl + p 可以搜索文件进行打开）
引用i18n
创建i18n实例
将实例挂载在vue实例里面

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 创建实例
const i18n = new VueI18n({
  locale: 'zh', // 语言标识
  messages: {
    'zh': require('./language/language-zh.js'),
    'en': require('./language/language-en.js')
  },
  silentTranslationWarn: true
})
instance = new Vue({
    el: '#micro-app',
    router,
    store,
    i18n,
    render: h => h(App)
  }).$mount('#app');

VUE静态资源国际化

优点：不用和数据库进行交互
缺点：维护资源文件比较麻烦，且后台实现国际化的时候，也要再维护一份

VUE动态国际化

国际化升级版，通过与数据库交互获取资源文件
进入系统之后初始化国际化编码
i18n.setLocaleMessage(“zh”, i18nData);
右上角切换中英文按钮，加载对应的国际化编码
根据当前浏览器的语言环境，zh_CN 或者en到数据库中一次性查询当前语言所有的国际化编码

VUE国际化用法

js this.$i18n.t(‘common.type’)

标签 :label=“$t(‘login.username’)”

提示语 :placeholder=“this.$t(‘login.inputUserName’)”

表格标题 :label=“$t(‘login.username’)”

后端SpringBoot实现国际化

后端国际化逻辑
对国际化编码进行新增修改导入时，同时把对应的编码缓存到redis中
缓存数据时，会根据语言进行区分，当前为zh_CN和en两个文件目录
key为 mom_i18n：语言：所属模块_国际化编码
value对应的是该国际化编码的实体对象

使用国际化时，可以自己对应的模块和编码找到对应的数据

国际化编码数据处理

前端后端的国际化都离不开资源文件的支持，采用的是把资源文件的数据存储到数据库中，所以需要大家把自己需要的资源文件写入数据库。
系统管理——》国际化编码配置 可以自己进行新增导入资源文件
大家可以先导出一份资源文件，然后在Excel文件中写完再导入，更加便捷
如果只需要新增某一条记录的对应英文资源，也可以点击 新增指定编码