唐山网站制作系统,什么软件可以免费制作图片,湘潭做网站公司选择封象网做网站公司,安卓开发工程师月薪点击上方蓝字小黑在哪里关注我吧语言选项语言切换注意前言上一篇介绍了ABP扩展实体#xff0c;并且在前端部分新增了身份认证管理和租户管理的菜单#xff0c;在实现这两个功能模块前#xff0c;先来解决一下界面文字国际化的问题。开始国际化#xff08;简称 … 点击上方蓝字小黑在哪里关注我吧语言选项语言切换注意前言上一篇介绍了ABP扩展实体并且在前端部分新增了身份认证管理和租户管理的菜单在实现这两个功能模块前先来解决一下界面文字国际化的问题。开始国际化简称 I18N本地化简称 L10N这两者的目的都是用于让你的应用程序支持多个国家和区域的语言它们看起来很相似但是有一些细微的区别本文不对此进行深入探讨有兴趣的可以自行搜索。ABP后端支持的是本地化而vue-element-admin支持的是国际化使用vue-i18n实现本文默认它两者是一回事。前面的章节中已经大概分析了vueABP国际化的实现思路。我们可以在后端实现国际化然后vue从后端获取国际化文本展示到界面中另一种方式是直接在前端部分实现国际化。在前端实现就很简单直接在vue-element-admin的src\lang\目录下配置相应的文本然后界面使用i18n的$t()方法渲染就可以了这个不多做介绍。本文只探讨第一种实现方式。语言选项首先语言选项列表需要根据后端配置得到。在后端修改支持的语言类型这里就只支持中文和英文2种吧其他的注释掉。src\Xhznl.HelloAbp.HttpApi.Host\HelloAbpHttpApiHostModule.cs请求abp/application-configuration接口此时返回的localization.languages属性只有2个语言了然后只需要把这个数据绑定到界面上就好了。语言切换用的是一个公共组件 src\components\LangSelect\index.vuetemplateel-dropdowntriggerclickclassinternationalcommandhandleSetLanguagedivsvg-icon class-nameinternational-icon icon-classlanguage //divel-dropdown-menu slotdropdownel-dropdown-itemv-foritem in languages:keyitem.cultureName:disabledlanguage item.cultureName:commanditem.cultureName{{ item.displayName }}/el-dropdown-item/el-dropdown-menu/el-dropdown
/templatescript
export default {data() {return {languages: this.$store.getters.abpConfig.localization.languages};},computed: {language() {return this.$store.getters.language;}},methods: {handleSetLanguage(lang) {//this.$i18n.locale langthis.$store.dispatch(app/setLanguage, lang);this.$store.dispatch(app/applicationConfiguration).then(() {this.$message({message: Switch Language Success,type: success});});}}
};
/script
语言切换语言切换时需要再次调用app/applicationConfiguration接口更新本地化文本。src\utils\request.js// request interceptor
service.interceptors.request.use(config {// do something before request is sentconfig.headers[accept-language] store.getters.languageif (store.getters.token) {config.headers[authorization] Bearer getToken()}return config},error {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)
src\store\modules\app.jsconst 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.jsimport 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 langVue.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 languageconst 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 | eslocale: getLanguage(),// set locale messagesmessages
});export default i18n;
将后端返回的文本设置到vue-i18n中就可以使用了。这跟直接在前端做国际化有一点区别就是后者的文本信息是写在前端vue-i18n可以直接使用。而这里只是把文本信息改到后端从后端获取后再设置到i18n中本质是一样的。修改后端的配置文本src\Xhznl.HelloAbp.Domain.Shared\Localization\HelloAbp\zh-Hans.jsonsrc\Xhznl.HelloAbp.Domain.Shared\Localization\HelloAbp\en.jsonlocalization.values返回接下来只需要把界面上对应的文本使用vue-i18n的$t()方法渲染就好了比如前端需要改动的地方比较多但都是类似的修改。。。直接看效果注意因为app/applicationConfiguration接口只有在刷新页面、登录、退出、切换语言等操作的时候才会去调用所以不用担心请求频繁。其实上面有一部分本地化文本还是放在了前端ElementUI自带的文本。因为ABP的本地化json格式只能有一级key/value文本只能写在texts属性中key/value形式不支持多层级。而vue-i18n是支持多层级的所以ElementUI的这部分文本还是放在前端了。最后本篇关于vueABP实现国际化就介绍完了。。。其实还是有点繁琐的要配置的比较多不知道有没有更好的方法欢迎评论交流。。。如果本文对您有用不妨点个“在看”或者转发朋友圈支持一下
