CN111061533A - 页面多语言展示方法、其装置、电子设备及计算机存储介质 - Google Patents

Abstract

本发明涉及计算机技术领域，尤其涉及一种页面多语言展示方法、其装置、电子设备及计算机存储介质。该方法包括：设置包含多种语言数据的语言包；在所述Vue项目引入的Vuex插件中的状态管理属性中定义一个用于控制所述页面展示的语言的展示语言变量；获取用户的语言选择指令；根据所述语言选择指令，确定所述页面当前需要展示的目标语言；将所述展示语言变量设置为与所述目标语言相对应的值，以使所述页面展示所述目标语言。其利用插件Vuex中的状态管理属性实现了页面的国际化，可以支持多种语言的切换展示。而且不需要增加重复的前端页面，有利于提升页面响应速度和减少代码体积。

Description

页面多语言展示方法、其装置、电子设备及计算机存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种页面多语言展示方法、其装置、电子设备及计算机存储介质。

背景技术

随着经济全球化的不断推进，现有许多网站或者移动应用都需要实现国际化，支持以多种不同的语言进行展示(例如英语、中文、法语等)。传统的国际化实现方式是直接新增一个内容完全相同，仅展示语言不同的页面，根据用户的需要而切换至相应语言的页面。

这样的解决方式比较直接粗暴，在网站规模简单，需要支持的语言较少时可以很好的解决问题。但是随着支持语言的种类的增加，需要设置的页面数量也随之增加，导致代码冗余而且对日常维护工作造成极大的困难，极大的增加了开发成本。

现有还有通过引入第三方框架来实现前端多语言支持的方法。例如，i18n框架来克服需要新增多套页面的缺陷。但是第三方框架的引入会导致代码体积增加，项目加载变慢等的问题，对用户的体验有一定的影响。而且，现有的前端多语言展示方法在进行页面刷新后，会自行重置到默认语言。后端反馈至前端的数据也无法支持多语言展示。如何有效的提升页面多语言展示在用户使用过程中的体验，是目前亟待解决的问题。

发明内容

本发明的实施例提供了一种页面多语言展示方法、其装置、电子设备及计算机存储介质，用于解决现有页面多语言展示方法中的一种或者多种问题。

本发明实施例的第一方面提供了一种Vue项目的页面多语言展示方法。其中，所述方法包括：

设置包含多种语言数据的语言包；

在所述Vue项目引入的Vuex插件中的状态管理属性中定义用于控制所述页面展示的语言的展示语言变量；

获取用户的语言选择指令；

根据所述语言选择指令，确定所述页面当前需要展示的目标语言；

将所述展示语言变量设置为与所述目标语言相对应的值，以使所述页面展示所述目标语言。

可选地，所述展示语言变量的取值为会话存储保存的值。

可选地，所述语言包为json格式的数据；所述语言包中包含多个语言文件，每一个语言文件记录有一种语言数据，与一个属性值相对应。

可选地，将所述展示语言变量设置为与所述目标语言相对应的值，以使所述页面展示所述目标语言，具体包括：

确定所述目标语言对应的属性值；

通过所述属性值，访问对应的语言文件以读取目标语言数据；

将所述页面中所有与语言展示相关的字段替换为所述目标语言数据。

可选地，将所述页面中所有与语言展示相关的字段替换为所述目标语言数据，具体包括：

变量化所述页面中所有与语言展示相关的字段，形成对应的字段变量；

向所述字段变量返回对应的目标语言数据，以使所述页面中所有与语言展示相关的字段被替换为对应的语言。

可选地，所述方法还包括：获取后端反馈的报错信息；通过统一的传输接口，将所述报错信息传递至前端；根据所述状态管理属性的取值，确定所述报错信息的取值，以使所述报错信息以所述目标语言展示。

可选地，所述方法还包括：获取后端返回的字典枚举；在所述字典枚举中增设回显字段；根据所述状态管理属性取值，确定所述字典枚举的取值，以使所述报错信息以所述目标语言展示。

本发明实施例的第二方面提供了一种Vue项目的页面多语言展示装置。其中，所述装置包括：

语言包，包含多种语言数据；

变量设置模块，用于在所述Vue项目引入的Vuex插件中的状态管理属性中定义用于控制所述页面展示的语言的展示语言变量；

指令获取模块，用于获取用户的语言选择指令；

指令解析模块，用于根据所述语言选择指令，确定所述页面当前需要展示的目标语言；

语言切换模块，用于将所述展示语言变量设置为与所述目标语言相对应的值，以使所述页面展示所述目标语言。

本发明实施例的第三方面提供了一种电子设备，包括处理器、存储器、网络接口和系统总线，所述处理器、所述存储器和所述网络接口通过所述系统总线完成相互间的通信；所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行根据上述的Vue项目的页面多语言展示方法的步骤。

本发明实施例第四方面提供了一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行上述的Vue项目的页面多语言展示方法的步骤。

本发明实施例提供的多语言展示方法，利用Vue项目的官方插件Vuex中的状态管理属性实现了页面的国际化，可以支持多种语言的切换展示。其通过展示语言变量实现，不需要增加重复的前端页面，而且减少了第三方插件的使用，有利于提升页面响应速度和减少代码体积。

进一步地，利用会话存储(session storage)可以在页面刷新时避免语言重置为默认语言，并且实现了后端数据的多语言支持，具有良好的用户使用体验。

附图说明

为了更清楚地说明本发明实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的电子设备的结构框图；

图2是本发明实施例提供的页面多语言展示方法的流程图；

图3a是本发明实施例提供的中文登陆页面的示意图；

图3b是本发明实施例提供的英文登陆页面的示意图；

图4是本发明实施例提供的页面多语言展示装置的功能框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

“页面多语言展示”是指页面中的显示的文本或者其他与语言相关的部分可以切换为多种不同的语言进行展示而不限于默认设置的本地语言。例如，某个以中文显示的登陆页面，可以根据切换指令，相应的切换为以英文显示的登陆页面。在语言切换前后，页面的内容基本一致，区别在于显示的文本或者文字所使用语言。

以下首先对本发明页面多语言展示方法的硬件环境进行介绍。请参阅图1，图1是本发明实施例提供的一种电子设备100的结构示意图。该电子设备100可以是计算机、计算机集群、主流计算机或者专用于提供在线内容的计算装置。

如图1所示，所述电子设备100包括：通过系统总线101连接的处理器102、存储器和网络接口105；其中，存储器可以包括非易失性存储介质103和内存储器104。

在本发明实施例中，根据所使用的硬件的类型，处理器102可以是中央处理单元(Central Processing Unit，CPU)，该处理器102还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific IntegratedCircuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。其中，通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。处理器102的数量可以是一个或者多个，一个或者多个处理器102可执行计算机程序指令的序列，以执行将在下文更详细地说明的各实施例的页面多语言展示方法。

计算机程序指令由非易失性存储介质103存储、访问和从该非易失性存储介质103中读取，以便由处理器10执行，从而实现本发明下述实施例公开的页面多语言展示方法。例如，非易失性存储介质103存储执行下述页面多语言展示方法的软件应用。此外，非易失性存储介质103可存储整个软件应用或者只存储可由处理器102执行的软件应用的一部分。应注意，尽管图1中只示出一个框，但非易失性存储介质103可包括安装在中央处理装置或不同计算装置上的多个物理装置。

该网络接口105用于进行网络通信，如提供数据信息的传输等。本领域技术人员可以理解，图1中示出的结构，仅仅是与本发明方案相关的部分结构的框图，并不构成对本发明方案所应用于其上的电子设备100的限定，具体的电子设备100可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

本发明实施例还提供一种非易失性计算机存储介质。该非易失性计算机存储介质存储有计算机程序，其中计算机程序被处理器执行时实现本发明实施例公开的页面多语言展示方法。该计算机程序产品体现在含有计算机程序代码的一个或多个计算机可读存储介质上(包括但不限于，磁盘存储器、CD-ROM、光学存储器等)。

在用软件实施所述电子设备100的情况下，图2示出了一实施例的页面多语言展示方法的流程示意图，以下对图2中的方法详细描述。请参阅图2，该方法包括如下步骤：

步骤210、设置包含多种语言数据的语言包。

语言包以特定的数据结构格式，记录多种不同语言数据以备读取使用。具体设置的语言数据种类可以根据实际情况的需要而预先配置。

具体的，所述语言包的数据格式为json格式(JavaScript Object Notation对象简谱)。json格式是一种轻量级的数据交换格式，具有简洁和清晰的结构层次，可以便于计算机解析。

在语言包中每一种语言数据与一个属性值相对应，可以通过属性值来访问和读取所需要的语言数据，加载到页面进行展示。

步骤220、在所述Vue项目引入的Vuex插件中的状态管理属性中定义一个展示语言变量。

其中，Vuex插件是Vuex是一个专为Vue项目开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单来讲，Vuex插件是一个通过抽取出不同组件之间的共享数据来管理多个组件之间通信的插件。共享数据存放在Vue插件的状态管理(state)属性中。

State属性存放的数据是响应式。若state中的数据发生改变，依赖这个数据的Vue组件也会发生更新。由此，可以通过在state属性中定义为全局变量的展示语言变量，随着该展示语言变量的取值变动而实现对所有相关Vue组件的更新，从而控制所述页面具体展示的语言。

较佳的是，所述展示语言变量的取值为会话存储机制保存的值。会话存储(session storage)是一种缓存机制。其将用户的信息放置保存在服务器端，并可以随时调用以使得用户的数据可以在不同页面中使用。

利用会话存储缓存机制的数据存储特点，该展示语言变量的取值在页面刷新后不会发生变化。因此，不会出现刷新页面后恢复为默认语言的问题，更便于用户的使用，可以提升用户的使用体验。

步骤230、获取用户的语言选择指令。

该语言选择指令是由用户发出的，表明其期望页面具体进行展示的语言。具体可以通过多种方式获取该语言选择指令。例如，可以在页面上设置相应的语言选择按钮，通过按钮的方式获取语言选择指令。

步骤240、根据所述语言选择指令，确定所述页面当前需要展示的目标语言。

“目标语言”是指用户选定的，期望页面展示的语言。目标语言具体可以通过任何合适的方式确定。具体的，每种语言可以有对应的属性值。不同的语言可以通过相应的属性值来表示。

步骤250、将所述展示语言变量设置为与所述目标语言相对应的值，以使所述页面展示所述目标语言。

在确定了需要展示的目标语言后，可以相应的通过调整所述展示语言变量的取值，使其与目标语言相对应。由于展示语言变量是在state属性中定义的，在Vue项目中相应的组件都会随之进行更新，实现页面展示语言的切换。

在一些实施例中，语言包中包含的多种语言数据可以通过不同的属性值来读取和访问。首先确定所述目标语言对应的属性值。然后，根据所述属性值读取到对应的目标语言数据。最后，使用这些目标语言数据将当前页面与语言展示相关的字段进行替换，从而实现页面的多语言支持。

以下结合图3a和图3b所示的登陆页面的中文展示和英文展示示意图，详细描述本发明实施例的多语言展示方法。

假设需要支持图3a和图3b所示的登陆页面的中英文切换，预先定义的语言包中包含有中文和英文两种语言数据，两种语言数据分别对应不同的属性值。每种语言数据都包括登陆页面中，需要显示的文字内容在不同语言中的表示。

其中，中文语言数据包括：“用户名”，“密码”，“帮助信息”以及“忘记密码”。相应地，英文语言数据包括：“account”，“password”，“help”以及“forget password”。

登陆页面的默认语言为中文，当接收到用户的指令，需要切换为英文时，可以确定与其对应的属性值。然后，读取语言包中的英文语言数据，并将页面上对应的文字替换为英文语言数据的内容，实现从图3a至图3b的切换。

在一些实施例中，可以通过如下步骤完成上述语言数据的替换过程：

首先，变量化所述页面中与语言展示相关的字段，形成对应的字段变量。然后，通过一个统一变量的不同属性，向各个字段变量返回对应的值(即英文语言数据的具体内容)，以使中所有与语言展示相关的字段被替换为对应的语言。

除了前端的多语言展示外，本发明实施例还进一步提供了对后端数据的多语言展示的实现方法。

在一些实施例中，当后端生成了报错信息时，首先可以通过统一的传输接口，将所述按照后端自定义的语言描述的报错信息传递至前端。然后，根据所述状态管理属性的取值，确定所述报错信息的取值，以使所述报错信息以所述目标语言展示。

该报错信息是后端在执行前端输入的请求过程中，对执行过程出现的错误或者无法执行的原因或节点的相关描述。在传统的页面多语言展示方式中，这些报错信息由于是由后端形成的，无法支持多语言展示而只会使用后端自定义的默认语言进行展示。

在本实施例中，通过state属性的取值，可以相应控制这些报错信息的取值从而实现对报错信息这一类型的后端数据的多语言展示。

在另一些实施例中，后端信息还可以是由后端返回的字典枚举。此时，可以在所述字典枚举中增设回显字段。然后，根据所述状态管理属性取值，确定所述字典枚举的取值，以使所述报错信息以所述目标语言展示。

“字典枚举”是后端中设置的字典或者表格中，对某一项目的枚举。例如，字典中可以记录有“用户角色”这一项目下包括“管理员”、“VIP客户”以及“普通用户”。“管理员”、“VIP客户”以及“普通用户”即为查询用户角色时，返回的字典枚举。

在传统的页面多语言展示方式中，这些字典枚举的值是由后端自定义的语言所决定的，可能与页面当前展示的语言并不一致。本实施例中，增设一个字段回显字典枚举，并根据state属性的具体取值而相应的控制返回的枚举的值，从而实现了返回的枚举与页面展示的语言的一致性。

本发明实施例提供的页面多语言展示方法，基于Vue项目的官方插件实现，避免了代码体积增加，加载速度变慢的技术问题。而且，展示语言在页面刷新时会被保存和维持，不会重置为默认语言，并且实现了后端数据的多语言展示，可以保持与前端页面展示语言一致，有效的提升了用户的使用体验。

本发明实施例还提供一种与上述实施例中的页面多语言展示方法对应的页面多语言展示装置，具体请参阅图4，图4示出了一种Vue项目的页面多语言展示装置的结构框图。

如图4所示，所述Vue项目的页面多语言展示装置400包括：语言包410、变量设置模块420、指令获取模块430、指令解析模块440和语言切换模块450。

其中，语言包410包含多种语言数据。变量设置模块420用于在所述Vue项目引入的Vuex插件中的状态管理属性中定义一个展示语言变量。所述展示语言变量用于控制所述页面展示的语言。指令获取模块430用于获取用户的语言选择指令。指令解析模块440用于根据所述语言选择指令，确定所述页面当前需要展示的目标语言。语言切换模块450用于将所述展示语言变量设置为与所述目标语言相对应的值，以使所述页面展示所述目标语言。

本发明实施例提供的页面多语言展示装置，不需要对每种语言都增设一套新的内容相似的页面，而且使用的是官方的插件和单个语言包，有效的减少了代码量并且可以保证Vue项目的加载速度，有利于提升用户的使用体验。

所属领域的技术人员可以清楚地了解到，本发明提供的算法或显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明实施例也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本发明并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种Vue项目的页面多语言展示方法，其特征在于，所述方法包括：

设置包含多种语言数据的语言包；

在所述Vue项目引入的Vuex插件中的状态管理属性中定义用于控制所述页面展示的语言的展示语言变量；

获取用户的语言选择指令；

根据所述语言选择指令，确定所述页面当前需要展示的目标语言；

将所述展示语言变量设置为与所述目标语言相对应的值，以使所述页面展示所述目标语言。

2.根据权利要求1所述的方法，其特征在于，所述展示语言变量的取值为会话存储机制保存的值。

3.根据权利要求1所述的方法，其特征在于，所述语言包为json格式的数据；每一种语言数据与一个属性值相对应。

4.根据权利要求3所述的方法，其特征在于，将所述展示语言变量设置为与所述目标语言相对应的值，以使所述页面展示所述目标语言，具体包括：

确定所述目标语言对应的属性值；

通过所述属性值，读取对应的目标语言数据；

将所述页面中所有与语言展示相关的字段替换为所述目标语言数据。

5.根据权利要求4所述的方法，其特征在于，将所述页面中所有与语言展示相关的字段替换为所述目标语言数据，具体包括：

变量化所述页面中与语言展示相关的字段，形成对应的字段变量；

向所述字段变量返回对应的目标语言数据，以使所述页面中所有与语言展示相关的字段被替换为对应的语言。

6.根据权利要求1所述的方法，其特征在于，所述方法还包括：

获取后端反馈的报错信息；

通过统一的传输接口，将所述报错信息传递至前端；

根据所述状态管理属性的取值，确定所述报错信息的取值，以使所述报错信息以所述目标语言展示。

7.根据权利要求1所述的方法，其特征在于，所述方法还包括：

获取后端返回的字典枚举；

在所述字典枚举中增设回显字段；

根据所述状态管理属性取值，确定所述字典枚举的取值，以使所述报错信息以所述目标语言展示。

8.一种Vue项目的页面多语言展示装置，其特征在于，所述装置包括：

语言包，包含多种语言数据；

变量设置模块，用于在所述Vue项目引入的Vuex插件中的状态管理属性中定义用于控制所述页面展示的语言的展示语言变量；

指令获取模块，用于获取用户的语言选择指令；

指令解析模块，用于根据所述语言选择指令，确定所述页面当前需要展示的目标语言；

语言切换模块，用于将所述展示语言变量设置为与所述目标语言相对应的值，以使所述页面展示所述目标语言。

9.一种电子设备，其特征在于，包括处理器、存储器、网络接口和系统总线，所述处理器、所述存储器和所述网络接口通过所述系统总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行根据权利要求1-7任一项所述的Vue项目的页面多语言展示方法的步骤。

10.一种计算机存储介质，其特征在于，所述计算机存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行根据权利要求1-7任一项所述的Vue项目的页面多语言展示方法的步骤。

Images