vue 地图使用navigator_初识ABP vNext(6):vue+ABP实现国际化
点击上方蓝字"小黑在哪里"关注我吧
语言选项
语言切换
注意
前言
上一篇介绍了ABP扩展实体,并且在前端部分新增了身份认证管理和租户管理的菜单,在实现这两个功能模块前,先来解决一下界面文字国际化的问题。
开始
国际化(简称 I18N),本地化(简称 L10N);这两者的目的都是用于让你的应用程序支持多个国家和区域的语言,它们看起来很相似,但是有一些细微的区别,本文不对此进行深入探讨,有兴趣的可以自行搜索。ABP后端支持的是本地化,而vue-element-admin支持的是国际化,使用vue-i18n实现;本文默认它两者是一回事。
前面的章节中,已经大概分析了vue+ABP国际化的实现思路。我们可以在后端实现国际化,然后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.vue:
trigger="click" @command="handleSetLanguage" > v-for="item in languages" :key="item.cultureName" :disabled="language === item.cultureName" :command="item.cultureName" > {{ item.displayName }}
语言切换
语言切换时,需要再次调用app/applicationConfiguration
接口,更新本地化文本。
src\utils\request.js:
// request interceptorservice.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 langimport 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:
src\Xhznl.HelloAbp.Domain.Shared\Localization\HelloAbp\en.json:
localization.values返回:
接下来只需要把界面上对应的文本使用vue-i18n的$t()
方法渲染就好了,比如:
前端需要改动的地方比较多,但都是类似的修改。。。直接看效果:
注意
因为app/applicationConfiguration
接口只有在刷新页面、登录、退出、切换语言等操作的时候才会去调用,所以不用担心请求频繁。
其实上面有一部分本地化文本还是放在了前端:ElementUI自带的文本。因为ABP的本地化json格式只能有一级,key/value:
文本只能写在texts属性中,key/value形式,不支持多层级。
而vue-i18n是支持多层级的:
所以ElementUI的这部分文本还是放在前端了。
最后
本篇关于vue+ABP实现国际化就介绍完了。。。其实还是有点繁琐的,要配置的比较多,不知道有没有更好的方法,欢迎评论交流。。。
如果本文对您有用,
不妨点个“在看”或者转发朋友圈支持一下
vue 地图使用navigator_初识ABP vNext(6):vue+ABP实现国际化相关推荐
- (精华)2020年8月22日 ABP vNext Web应用ABP
现在我们开始创建基于RazorPage的web应用.在解决方案中添加新的Asp.Net Core Web应用项目,名称为ZL.AbpNext.Poem.Web,然后安装volo.Abp.AspNetC ...
- (精华)2020年8月22日 ABP vNext WebAPI应用ABP
上一节我们创建了基于Razor Page的简单应用,如果我们希望创建单页面应用或者移动应用,就需要通过Web Api调用应用层.Abp提供了从应用层到Web Api的自动映射,我们只需要增加少量的代码 ...
- 初识ABP vNext(1):开篇计划基础知识
点击上方蓝字"小黑在哪里"关注我吧 审计(Audit) 本地化(Localization) 事件总线(Event Bus) 多租户(multi-tenancy technology ...
- ABP vNext微服务架构详细教程——简介
简介 该系列文章主要展示ABP vNext框架在微服务架构下的用法,提供一套可落地的技术实现思路,并演示各服务在Kubernetes下的部署方案. 基础概念 ABP vNext 基于ASP.NET C ...
- 我和ABP vNext 的故事
Abp VNext是Abp的.NET Core 版本,但它不仅仅只是代码重写了.Abp团队在过去多年社区和商业版本的反馈上做了很多的改进.包括性能.底层的框架设计,它融合了更多优雅的设计实践.不管你是 ...
- ABP VNext系列(一)-第一个ABP VNext
ABP VNext系列(一)-第一个ABP VNext 下一篇 : ABP VNext系列(二)-详解ABP的依赖注入 目录 ABP VNext系列(一)-第一个ABP VNext 一. ABP VN ...
- 2.1.1 Abp vNext 地磅无人值守 接口服务创建
地磅无人值守项目 系列文章目录 文章目录 前言 一.Abp vNext手脚架 二.创建Abp vNext项目 1.创建项目 2.初始化数据库 3.试运行 3.1 查看数据库连接 3.2 浏览器查看 3 ...
- 初识ABP vNext(3):vue对接ABP基本思路
点击上方蓝字"小黑在哪里"关注我吧 登录 权限 本地化 创建项目 ABP vue-element-admin 前言 上一篇介绍了ABP的启动模板以及AbpHelper工具的基本使用 ...
- abp angular 和mvc_初识ABP vNext(3):vue对接ABP基本思路
登录 权限 本地化 创建项目 ABP vue-element-admin 前言 上一篇介绍了ABP的启动模板以及AbpHelper工具的基本使用,这一篇将进入项目实战部分.因为目前ABP的官方模板只支 ...
最新文章
- python是软件吗-python运行环境是什么
- 计算机硬件耗电,电脑中最耗电的三个硬件排行:这答案意料之外的情理之中!...
- 解决Error: undefined reference to `__android_log_print'
- 决策树算法绘图——graphviz安装
- IOS 调用系统照相机和相册
- oracle中右表有过滤条件的left outer join
- FIRST集和FOLLOW集的构造
- Linux下10 个最酷的 Linux 单行命令(转载)
- Oracle数据库学习笔记(一)
- Java拦截器限制IP访问次数
- Python 进阶之路
- iTunes出现提示“iTunes不能读取iPhone的内容,请前往iPhone偏好设置的摘要选项卡,然后点击“恢复”以将此iPhone恢复为出厂设置。”
- 前端请求路径为何不能写成http://localhost:8080/**/** ?
- 视觉三维重建:colmap从理论到实战
- AT89C51单片机共阳极数码管动态显示(汇编语言)
- kubernetes的DevOps业务(一):Jenkins,GitLab,Harbor,Tekton,GitOps
- 携程显示连接不到服务器,携程:网络故障由员工错误操作导致
- 007--python--英制单位英寸和公制单位厘米的互换
- 阿里巴巴菜鸟网络电话面试
- 张朝阳:我不是标准的60年代人
热门文章
- 为何主程序退出了,创建的多线程还在运行呢?
- 线性表--数组实现+模板+迭代器
- 解决CentOS中无法使用setup命令 -bash:setup: command
- 5 个用于在 Linux 终端中查找域名 IP 地址的命令
- shell脚本100例
- WinMerge只显示差异部分的设置方法
- 日语学习 (助词 「で」 和「に」 的区别)
- mysql 日志大小_查看mysql日志文件大小和数据库大小
- java异常处理:finally中不要return
- [C++]Linux之Ubuntu下编译C程序出现错误:“ stray ‘\302‘或者‘\240‘ in program”的解决方案