IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 低代码平台国际化多语言(i18n)技术方案 -> 正文阅读

[JavaScript知识库]低代码平台国际化多语言(i18n)技术方案

????????国际化(Internationalization,简称i18n):指软件开发应当具备支持多种语言和地区的功能。也就是说能够具备切换页面显示语言的功能。i18n,其中“I”和“n”分别为首末字符,18 则为中间的字符数。

????????低代码平台/零代码平台中使用国际化多语言(i18n),涉及静态文本国际化、动态文本国际化、菜单国际化等多个方面。其中,基于模型驱动、可视化零代码配置生成的业务模块,如何国际化多语言,是零代码平台解决国际化的关键和难点。

1、静态文本国际化多语言

静态文本指代码中写死的名称,包括后端Java代码和前端Vue代码,比如:后台Java代码判断登录密码错误,返回“用户名或密码错误”这样的信息;前端vue代码的“新增”“删除”等按钮名称、“用户名”、“状态”等标签名称。这些都属于静态文本,进行国际化多语言改造技术比较简单,但工作量比较大,以下分别介绍后端和前端的静态国际化思路。

1.1、后端国际化(Java)

(1)定义多语言资源文件

在工程resources/static/i18n目录下,中文简体 messages.properties

user.login.success=登录成功

user.logout.success=退出成功

user.register.success=注册成功

美式英语?messages_en_US.properties

user.login.success=Login Success

user.logout.success=logout Success

user.register.success=register Success

(2)java代码使用I18nUtil获取国际化

I18nUtil.message(“user.login.success”)

(3)基于IDEA开发多语言文件

1.2、前端国际化(Vue)

(1)定义多语言资源文件

在工程src/assets/lang目录下,中文简体?zh_CN.json

{

? "m": {

??? "common": {

????? "button": {

??????? "add": "新增",

??????? "update": "编辑",

??????? "delete": "删除"

?????? }

???? }

? }

}

美式英语?en_US.json

{

? "m": {

??? "common": {

????? "button": {

??????? "add": "New",

??????? "update": "Modify",

??????? "delete": "Delete"

?????? }

???? }

? }

}

(2)vue代码使用$t获取国际化

普通文本使用方式: {{ $t('m.fm.components.fields.input') }}

标签内使用方式:?? :placeholder="$t('m.fm.components.fields.input')"

js内使用方式:????? this.$t('m.fm.components.fields.input')

(3)基于Webstore开发多语言文件

多语言标识要避免全局冲突,推荐的命名规范:系统名称.表名称.提示名称,比如:app1.table1.hello

2、动态文本国际化多语言

基于模型可视化配置的生成的模块,多语言维护跟静态资源文件不同,也需要基于模型动态维护,而非开发人员提前写死代码。

2.1、基于业务模型维护多语言

在零代码平台中,常见的可视化开发方式,就说基于业务模型进行表单设计和页面设计,那么动态多语言技术实现的关键点就是如何基于业务模型进行多语言配置。在云程低代码平台中,基于应用实体模型进行多语言扩展,实体模型的字段会自动同步到多语言配置下,这里只需要维护字段的中文、英文名称即可。“其他”分类下允许用户新增语言信息,注意编码必须唯一,建议不同应用使用不同前缀来区分编码。

2.2、可视化设计器使用多语言

在设计表单和页面的时候,使用多语言控件来输入需要国际化的动态文本,例如表单控件的标签、列表的列名称、按钮名称等,如下图。

中文环境表单设计:

英文环境表单设计:

3、菜单名称国际化多语言

菜单多语言开发实际是数据多语言,非文本标签多语言,所以需要在维护菜单的时候,把多种语言名称录入。进入菜单管理模块,点击新增或编辑按钮,在弹出页面中维护菜单多语言:

菜单名称为系统默认的菜单名称,中文和英文分别为菜单的多语言配置,前端显示菜单规则是:根据当前语言环境优先找对应的语言名称,如果没有找到,就取系统默认的菜单名称。

英文环境菜单多语言展示:

中文环境菜单多语言展示:

4、系统切换多语言

多语言切换指同一套系统,不同的用户登录,可以切换使用不同的语种。

一般切换多语言的入口是在用户登录时,手动选择切换多语言。

需要注意的是,多语言切换是跟用户当前登录会话是相关的,而非系统级别的多语言,在技术实现上,需要把当前用户选择的语言类型通过线程安全机制传递到系统中,实现按用户会话切换多语言。

参考:

开始 | Vue I18n

SpringBoot实现i18n国际化配置(超详细之跟着走就会系列)_唯有代码不会骗人的博客-CSDN博客_springboot国际化配置

云程 | 云BPM,云程BPM,低代码平台,低代码开发平台,开源流程引擎,Camunda,flowable,业务流程管理,activiti,智能表单,电子表单,可视化开发,零代码开发,基础平台,流程PaaS,流程SaaS

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-16 21:35:35  更:2022-06-16 21:37:50 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 17:19:37-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码