初识ABP vNext(6):vue+ABP实现国际化

初识ABP vNext(6):vue+ABP实现国际化

Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章。

前言

上一篇介绍了ABP扩展实体,并且在前端部分新增了身份认证管理和租户管理的菜单,在实现这两个功能模块前,先来解决一下界面文字国际化的问题。

开始

国际化(简称 I18N),本地化(简称 L10N);这两者的目的都是用于让你的应用程序支持多个国家和区域的语言,它们看起来很相似,但是有一些细微的区别,本文不对此进行深入探讨,有兴趣的可以自行搜索。ABP后端支持的是本地化,而vue-element-admin支持的是国际化,使用vue-i18n实现;本文默认它两者是一回事。

前面的章节中,已经大概分析了vue+ABP国际化的实现思路。我们可以在后端实现国际化,然后vue从后端获取国际化文本,展示到界面中;另一种方式是直接在前端部分实现国际化。在前端实现就很简单,直接在vue-element-admin的src\lang\目录下配置相应的文本,然后界面使用i18n的$t()方法渲染就可以了,这个不多做介绍。本文只探讨第一种实现方式。

语言选项

首先,语言选项列表需要根据后端配置得到。

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

在后端修改支持的语言类型,这里就只支持中文和英文2种吧,其他的注释掉。

src\Xhznl.HelloAbp.HttpApi.Host\HelloAbpHttpApiHostModule.cs:

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

请求abp/application-configuration接口:

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

此时返回的localization.languages属性只有2个语言了,然后只需要把这个数据绑定到界面上就好了。语言切换用的是一个公共组件 src\components\LangSelect\index.vue:

<template>
  <el-dropdown
    trigger="click"
    class="international"
    @command="handleSetLanguage"
  >
    <div>
      <svg-icon class-name="international-icon" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item in languages"
        :key="item.cultureName"
        :disabled="language === item.cultureName"
        :command="item.cultureName"
      >
        {{ item.displayName }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  data() {
    return {
      languages: this.$store.getters.abpConfig.localization.languages
    };
  },
  computed: {
    language() {
      return this.$store.getters.language;
    }
  },
  methods: {
    handleSetLanguage(lang) {
      //this.$i18n.locale = lang
      this.$store.dispatch("app/setLanguage", lang);
      this.$store.dispatch("app/applicationConfiguration").then(() => {
        this.$message({
          message: "Switch Language Success",
          type: "success"
        });
      });
    }
  }
};
</script>

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

语言切换

语言切换时,需要再次调用app/applicationConfiguration接口,更新本地化文本。

src\utils\request.js:

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    config.headers['accept-language'] = store.getters.language

    if (store.getters.token) {
      config.headers['authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

src\store\modules\app.js:

const actions = {
  。。。。。。
    
  applicationConfiguration({ commit }) {
    return new Promise((resolve, reject) => {
      applicationConfiguration()
        .then(response => {
          const data = response;
          commit("SET_ABPCONFIG", data);

          const language = data.localization.currentCulture.cultureName;
          const values = data.localization.values;
          setLocale(language, values);

          resolve(data);
        })
        .catch(error => {
          reject(error);
        });
    });
  }
};

src\lang\index.js:

import Vue from "vue";
import VueI18n from "vue-i18n";
import Cookies from "js-cookie";
import elementEnLocale from "element-ui/lib/locale/lang/en"; // element-ui lang
import elementZhLocale from "element-ui/lib/locale/lang/zh-CN"; // element-ui lang

Vue.use(VueI18n);

const messages = {
  en: {
    ...elementEnLocale
  },
  "zh-Hans": {
    ...elementZhLocale
  }
};

export function getLanguage() {
  const chooseLanguage = Cookies.get("language");
  if (chooseLanguage) return chooseLanguage;

  // if has not choose language
  const language = (
    navigator.language || navigator.browserLanguage
  ).toLowerCase();
  const locales = Object.keys(messages);
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale;
    }
  }
  return "en";
}
export function setLocale(language, values) {
  i18n.mergeLocaleMessage(language, values);
  i18n.locale = language;
}
const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: getLanguage(),
  // set locale messages
  messages
});

export default i18n;

将后端返回的文本设置到vue-i18n中,就可以使用了。这跟直接在前端做国际化有一点区别就是,后者的文本信息是写在前端,vue-i18n可以直接使用。而这里只是把文本信息改到后端,从后端获取后再设置到i18n中,本质是一样的。

修改后端的配置文本:

src\Xhznl.HelloAbp.Domain.Shared\Localization\HelloAbp\zh-Hans.json:

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

src\Xhznl.HelloAbp.Domain.Shared\Localization\HelloAbp\en.json:

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

localization.values返回:

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

接下来只需要把界面上对应的文本使用vue-i18n的$t()方法渲染就好了,比如:

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

前端需要改动的地方比较多,但都是类似的修改。。。直接看效果:

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

注意

因为app/applicationConfiguration接口只有在刷新页面、登录、退出、切换语言等操作的时候才会去调用,所以不用担心请求频繁。

其实上面有一部分本地化文本还是放在了前端:ElementUI自带的文本。因为ABP的本地化json格式只能有一级,key/value:

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

文本只能写在texts属性中,key/value形式,不支持多层级。

而vue-i18n是支持多层级的:

<span>初识ABP vNext(6):vue+ABP实现国际化</span>

所以ElementUI的这部分文本还是放在前端了。

最后

本篇关于vue+ABP实现国际化就介绍完了。。。其实还是有点繁琐的,要配置的比较多,不知道有没有更好的方法,欢迎评论交流。。。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/2641.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Linux修改文件内容【命令】

    Linux修改文件内容【命令】在/opt/hello/world.txt文件中增加一行 hellolinuxworld!方法一:命令是:vi,vimvi编辑器,相当于记事本,有编辑功能,但较弱vim复杂的编辑器,相当于windows的editplus,notepad++等————————步骤:1、执行viworld.txt 进入编辑器(默认

  • 异步FIFO_Verilog实现「建议收藏」

    异步FIFO_Verilog实现「建议收藏」异步FIFO_Verilog实现概述:FIFO本质上还是RAM,是一种先进先出的数据缓存器(先存入的数据先取出)。它与普通存储器的区别:没有外部读写地址线,只能顺序写入数据,顺序的读出数据,其数据地址由内部读写指针自动加1,不像其他存储器可以由地址线决定读取或写入某个指定的地址,异步FIFO读写时钟不同,读写是相互独立的。用途:(1)跨时钟域多bit传输:读写可以由不同的时钟控制,使用异步FIFO可以在两个不同时钟系统之间快速方便的传输数据。(2)数据匹配:对于不同宽度的数据接口可以使用FIFO,

  • web.config中customErrors节点的配置「建议收藏」

    web.config中customErrors节点的配置「建议收藏」一、customErrors节点在web.config中的位置configuration->system.web-> customerErrors 二、customErrors节点常见用法三、customErrors节点属性值介绍 1、de

  • win10鼎信诺为什么安装不了_阳光系统 win10显卡驱动安装失败怎么办

    win10鼎信诺为什么安装不了_阳光系统 win10显卡驱动安装失败怎么办win10显卡驱动安装失败怎么办呢?很多朋友反映在安装完win10系统后,更新了一下显卡驱动就出现蓝屏,黑屏现象,老是安装不成功。今天,我就将win10显卡驱动安装失败的处理方法分享给你们win10系统虽然发布了4年时间,但是还是有很多不完善的地方,比如win10系统更新显卡驱动的时候老是失败,这是win10的一大bug。下面,我就给大家介绍一下win10显卡驱动安装失败的解决方法驱动电脑图解1w…

  • Java学习之SpringMVC 拦截器

    Java学习之SpringMVC拦截器0x00前言继续SpringMVC最后一点小内容,后面就该学习如何整合SSM框架了。0x01拦截器拦截器和前面提到的一个过滤器类似,但是他们还是

    2021年12月12日
  • Java8替代传统反射动态获取成员变量值的一个示例[通俗易懂]

    Java8替代传统反射动态获取成员变量值的一个示例

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号