# 前后端国际化多语言配置

前后端国际化多语言配置

前端（Vue ElementUI）

• 项目前端使用Vue+Elementui

编写 i18n.js

• 在这个js 中引入ElementUI的多语言资源，引入本地的多语言资源

// I18n
import VueI18n from 'vue-i18n'
import Vue from 'vue'
import locale from 'element-ui/lib/locale'

// 引入 elementui 的多语言
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

// 引入自己定义的 I18n 文件
import myI18nEn from './i18n-en-US.json'
import myI18nZh from './i18n-zh-CN.json'

// 注册 vue-i18n
Vue.use(VueI18n)

// 默认中文
const lang = 'zh'
const i18n = new VueI18n({
  locale: lang,
  messages: {
    zh: Object.assign(zhLocale, myI18nZh),
    en: Object.assign(enLocale, myI18nEn)
  }
})

locale.i18n((key, value) => i18n.t(key, value))
export default i18n

• 新建i18n-en-US.json i18n-zh-CN.json文件，就是两个JSON文件
• i18n-en-US.json

{
  "test": "切换语言"
}

• i18n-zh-CN.json

{
  "test": "ChangeLanguage"
}

在main.js 中挂载 i18n

• main.js

// 引入 Vue
import Vue from 'vue'

// I18n js
import i18n from './utils/i18n/I18n.js'

// 挂载 vue
new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount('#app')

使用方式

<el-button size="mini" @click="changeLanguage">{{$t("test")}}</el-button>
<el-input :placeholder="$t('test')"></el-input>

切换全局的 i18n 语言

 <el-button size="mini" @click="changeLanguage">{{$t("test")}}</el-button>

// 切换语言
changeLanguage () {
    // 直接使用这个方法就可以切换
    this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en'
    // 保存到 Cookies 中方便后面发请求的时候拿到拼接到请求头中
    Cookies.set('language', this.$i18n.locale)
}

往后端的请求头中增加 language 参数

• 如下封装的发送请求的js,从Cookie中拿到上面放进去的参数，当向后端请求的时候请求头部带上languange参数

// 1->common.js中引入axios
import axios from 'axios'
import QS from 'qs'
// 引入Cookie
import Cookies from 'js-cookie'

axios.defaults.timeout = 180000 // 超时时间

// 表单提交方式还是 JSON格式提交
var flag = true
// http request 拦截器
axios.interceptors.request.use(
  config => {
    // 注意使用的时候需要引入cookie方法，推荐js-cookie
    let token = Cookies.get('token')
    let language = Cookies.get('language') === undefined ? 'zh' : Cookies.get('language')
    // 登录接口不需要Token
    if (config.url.indexOf('/system/login') > 0 && config.url.indexOf('/system/loginlog') < 0) {
      return config
    }
    // 如果是post请求 请求体自动加上token
    if (config.method === 'post') {
      if (token) {
        console.log(config.headers)
        config.headers = {
          'Content-Type': flag ? 'application/json' : 'application/x-www-form-urlencoded',
          // 后端生成的Token,携带Token后请求变成非简单请求
          Authorization: token,
          'language': language
        }
      }
    } else if (config.method === 'get') {
      config.headers = {}
      if (token) {
        config.headers = {
          'Content-Type': flag ? 'application/json' : 'application/x-www-form-urlencoded',
          Authorization: token,
          'language': language
        }
      }
    }
    return config
  },
  error => {
    // return Promise.reject(err)
    console.log(error)
  }
)

// 2->对get请求传递过来的参数处理
function paramsToUrl (url, params) {
  if (!params) return url
  for (var key in params) {
    if (params[key] && params[key] !== 'undefined') {
      if (url.indexOf('?') !== -1) {
        url += '&' + '' + key + '=' + params[key] || '' + ''
      } else {
        url += '?' + '' + key + '=' + params[key] || '' + ''
      }
    }
  }
  return url
}

// 3->在common.js中封装公用方法-----封装请求的方法
export function requireData (url, params, type, item, paramsType) {
  // 请求参数是表单还是 json 格式
  flag = true
  if (paramsType) {
    flag = paramsType
  }
  if (!url) return false
  switch (item) {
    case 'back':
      url = axios.defaults.baseM1URL + url
      break
    case 'before':
      url = axios.defaults.baseM2URL + url
      break
    case 'taskcenter':
      url = axios.defaults.baseM3URL + url
      break
    case 'core':
      url = axios.defaults.baseM4URL + url
      break
  }
  if (type === 'get') {
    url = paramsToUrl(url, params)
    return new Promise((resolve, reject) => {
      axios
        .get(url, params)
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  } else if (type === 'post') {
    // json格式请求头
    const headerJSON = {
      'Content-Type': 'application/json'
    }
    // FormData格式请求头
    const headerFormData = {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
    return new Promise((resolve, reject) => {
      axios.post(url, flag ? JSON.stringify(params) : QS.stringify(params), {
        headers: flag ? headerJSON : headerFormData
      }).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err.data)
      })
    })
  }
}

发送请求查看头部已经有 language 的参数

查看 Elementui 原生的多语言也生效了

• 前端完整代码见：https://gitee.com/Marlon_Brando/onlineshop_before/commit/2476b93e0cf982846293bcd8d6688da9d4661cbb

后端（SpringBoot MessageSource）

使用 Spring 国际化 MessageSource

• Spring默认集成了多语言直接使用就行了，注意配置文件要放在resource 下面不然需要配置

配置 MessageSource 可以不用配置 当多语言文件名称不是 messages开头时候必须配置

/**
  * 配置 MessageSource 其实这个可以不配置如果不配置请注意 message 多语言文件的位置
  *
  * @return
  */
@Bean
public ResourceBundleMessageSource messageSource() {
    Locale.setDefault(Locale.CHINESE);
    ResourceBundleMessageSource source = new ResourceBundleMessageSource();
    source.setBasenames("messages");
    source.setUseCodeAsDefaultMessage(true);
    source.setDefaultEncoding("UTF-8");
    logger.info(LogConstant.LOG_SUCCESS_PREFIX + "I18n配置完成");
    return source;
}

自定义 LocaleResolver 从请求头中获取多语言参数配置到当前域中

@Configuration
public class I18nConfig implements WebMvcConfigurer {

    private static final Logger logger = LoggerFactory.getLogger(I18nConfig.class);


    /**
     * 配置 MessageSource 其实这个可以不配置如果不配置请注意 message 多语言文件的位置
     *
     * @return
     */
    @Bean
    public ResourceBundleMessageSource messageSource() {
        Locale.setDefault(Locale.CHINESE);
        ResourceBundleMessageSource source = new ResourceBundleMessageSource();
        source.setBasenames("messages");
        source.setUseCodeAsDefaultMessage(true);
        source.setDefaultEncoding("UTF-8");
        logger.info(LogConstant.LOG_SUCCESS_PREFIX + "I18n配置完成");
        return source;
    }


    /**
     * 自定义国际化组件生效注册 LocaleResolver Bean
     *
     * @return
     */
    @Bean
    public LocaleResolver localeResolver() {
        return new MyLocalResolver();
    }


}

class MyLocalResolver implements LocaleResolver {

    /**
     * 从请求中获取多语言参数，对当前域设置多语言环境
     *
     * @param request
     * @return
     */
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        final String key = "language";
        String language = request.getHeader(key);
        Map<String, String> map = new HashMap<>(16);
        map.put("en", Locale.ENGLISH.getLanguage());
        map.put("zh", Locale.CHINESE.getLanguage());
        return new Locale(map.getOrDefault(language, "en"));
    }

    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse httpServletResponse, Locale locale) {

    }
}

注意点

// Bean 的注册 localeResolver方法名必须是这个不然注册不上
@Bean
public LocaleResolver localeResolver() {}

使用

@Autowired
private MessageSource messageSource;

messageSource.getMessage("core.pageListError", null, LocaleContextHolder.getLocale()

完美完成

• 比较简单

• 后端完整代码见：https://gitee.com/Marlon_Brando/onlineshop_back/commit/8299811b5221856aebb87d6b6b41449a5e4b7cbc