经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » 编程经验 » 查看文章
助力项目快捷实现国际化,造个多语言轮子
来源:cnblogs  作者:饭勺oO  时间:2024/1/5 9:11:48  对本文有异议

前段时间跟同事吹水聊天时,吐槽一个话题,就是公司项目都需要做多语言,前端后端都需要做。

而且是需要支持8国语言翻译,每次弄起来都特麻烦,每加一个Key就需要去翻译其他7个语言出来添加,每新增一个项目就需要弄一遍多语言资源,重复且枯燥费时的体力活。

项目想法

本项目主打一个一处配置多语言,多处使用的想法。助力项目方便快捷实现国际化(多语言)。
主要解决的问题:

  • 自动翻译多语言资源。
  • 通用资源无需重复添加(关联项目即可)
  • 新增地区时自动同步且翻译已存在的资源。
  • 友好的界面配置。
  • 修改资源时可实时同步到资源客户端(使用SignalR接入)
  • 多语言资源批量打包导出。

目前主要功能如下(目前还只是雏形,不算完善):

  • 可配关联项目,主项目关联其他项目即可获取其他项目的多语言资源,相同Key则优先取主项目中的资源(即覆盖)

  • 批量导入已存在项目多语言资源(目前只支持JSON格式)

  • 多语言配置导出(目前支持json,toml,messages.properties, xml, ts格式)

  • 可配置自动翻译其他语言的资源(目前接入百度翻译和有道翻译API,冷门地区语言翻译暂不支持,翻译不准确时可手动修改)

  • API/SignalR接入

  • 界面管理

  • .NET SDK 接入 (其他语言待开发)

测试环境欢迎体验并给点意见或提提ISSUE,当然欢迎PR一起完善项目。

http://47.119.20.111/Projects

http://47.119.20.111/swagger/index.html

项目地址:
https://github.com/fanslead/LinguaNex

应用场景

通过API/SDK拉取多语言资源加载,可选WebSocket对接实现即时更新多语言资源。

  • API后端项目响应内容,如错误码对应的Message国际化多语言处理。
  • Web项目国际化多语言集成,可导出多语言文件编译,或对接API/SDK即时获取加载数据。
  • APP项目与Web基本一致。
  • 骚操作:实现一个短Key完成长文章多语言显示。

效果图

image

imageimage
image

image

image

image

image

项目设计

项目整体的功能很简单。就是多语言资源的管理以及项目接入这几个点。

业务流程:
添加resource:

添加culture:

运行环境

  • .NET 8
  • Redis
  • RabbitMQ(可选)
  • EF Core SQLLite(可自行替换数据库)

OpenApi接入

请求地址:/api/OpenApi/Resources/{ProjectId}?cultureName=&all=

  • ProjectId表示项目ID
  • cultureName 可选参数,不传则默认当前请求环境语言资源。
  • all 可选参数,默认false,cultureName为空时,true则返回所有语言资源

响应结构如下:

  1. [
  2. {
  3. "cultureName": "zh-Hans",
  4. "resources": {
  5. "Hello": "你好"
  6. }
  7. },
  8. {
  9. "cultureName": "en",
  10. "resources": {
  11. "Hello": "Hello"
  12. }
  13. }
  14. ]

SignalR接入(c#例子)

  1. var connection = new HubConnectionBuilder()
  2. .WithUrl($"{linguaNexApiUrl}/hubs/LinguaNex?project={project}", Microsoft.AspNetCore.Http.Connections.HttpTransportType.WebSockets)
  3. .AddJsonProtocol()
  4. .WithAutomaticReconnect()
  5. .Build();
  6. connection.On<LinguaNexResources>("CreateOrUpdateResource", obj =>
  7. {
  8. if (_resourcesCache.TryGetValue(obj.CultureName, out var value))
  9. {
  10. foreach (var resource in obj.Resources)
  11. {
  12. value[resource.Key] = resource.Value;
  13. }
  14. _resourcesCache[obj.CultureName] = value;
  15. }else
  16. {
  17. _resourcesCache[obj.CultureName] = new ConcurrentDictionary<string, string>(obj.Resources);
  18. }
  19. });
  20. connection.StartAsync();
  21. //拉取资源 参数跟OpenApi接口一致
  22. connection.InvokeAsync<List<LinguaNexResources>>("GetResources", projectId, cultureName,all);

.NET SDK接入

需要引用LinguaNex.Localization.Net包。
在依赖注入中添加如下代码即可:

  1. builder.Services.AddLinguaNexLocalization(options =>
  2. {
  3. options.LinguaNexApiUrl = builder.Configuration["LinguaNex:ApiUrl"];
  4. options.Project = builder.Configuration["LinguaNex:Project"];
  5. options.UseWebSocket = true;
  6. });

.NET SDK是通过实现IStringLocalizer接口对接的。所以可以无缝衔接已有多语言的项目切换。
本项目自身已使用SDK对接自己。
测试效果

antd design pro使用API接入

由于目前还没时间完事前端界面的多语言配置。但是之前试过使用antd design pro接入过ABP的后端多语言的配置。
接入流程是一致的。这里提供下参考代码:

  1. import { addLocale, getLocale } from 'umi';
  2. import { Locale } from 'antd/es/locale';
  3. let locale = getLocale() as string;
  4. let antdLocale = {} as Locale
  5. const applicationLocalization = await getApplicationLocalization(); // 这里可以实现接入后端API获取资源
  6. const resources = applicationLocalization.resources
  7. const allText = {}
  8. for(let key in resources) {
  9. if(resources[key]){
  10. Object.assign(allText, resources[key].texts)
  11. }
  12. }
  13. locale = getLocale() as string;
  14. addLocale(
  15. locale,
  16. allText,
  17. {
  18. momentLocale: antdLocale.locale,
  19. antd: antdLocale,
  20. }

RoadMap

原文链接:https://www.cnblogs.com/fanshaoO/p/17944667

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号