Multi-language display method and device with mixed arrangement of front end and rear end, medium and product

Abstract

The invention discloses a front-end and back-end mixed multi-language display method and device, a medium and a product, and relates to the field of software development, the method comprises the following steps: a front end sends a preset language display instruction to a back end, the back end analyzes a corresponding html file according to the preset language display instruction, compiles the html file into an embedded js file of a corresponding language type, and sends the embedded js file to the back end; then, the embedded js file is embedded into the html file; the embedded js file comprises a packaged tdict global variable; and the back end feeds back the html file embedded with the embedded js file to the front end, so that the front end calls the packaged tdict global variable to obtain corresponding language information. According to the method and the device, accurate and efficient multi-language display in the mixed arrangement mode can be realized.

Description

Technical Field

[0001] The present application relates to the field of software development, and in particular to a multi-language display method, device, medium, and product with mixed front-end and back-end layout. Background Art

[0002] In the existing technology, the multi-language solution generated by the server itself does not support parsing into an externally linked js file. The usual multi-language implementation method is maintained locally, with one language file maintained for each language. The fields in each language also need to be maintained independently. The maintenance process of this solution is much more complicated and its processing efficiency is low. Summary of the Invention

[0003] The purpose of this application is to provide a multi-language display method, device, medium and product with mixed front-end and back-end arrangement, which can realize accurate and efficient multi-language display in mixed arrangement mode.

[0004] To achieve the above objectives, this application provides the following solutions:

[0005] In a first aspect, the present application provides a multi-language display method with mixed front-end and back-end layout, comprising:

[0006] The front end sends a preset language display instruction to the back end. The back end parses the corresponding HTML file according to the preset language display instruction and compiles it into an embedded JS file of the corresponding language type. The embedded JS file is then embedded in the HTML file; the embedded JS file includes the encapsulated $t_dict global variable.

[0007] The backend feeds back the HTML file embedded with the embedded JS file to the frontend, so that the frontend calls the encapsulated $t_dict global variable to obtain the corresponding language information.

[0008] In a second aspect, the present application provides a computer device comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement a multi-language display method with mixed front-end and back-end layout.

[0009] In a third aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements a multi-language display method with mixed front-end and back-end arrangement.

[0010] In a fourth aspect, the present application provides a computer program product, including a computer program, which, when executed by a processor, implements a multi-language display method with mixed front-end and back-end layout.

[0011] According to the specific embodiments provided by this application, this application has the following technical effects: This application solves the need for multilingual text display in js files. Through the interaction between the front-end and back-end, and combined with embedded js files, it not only maintains the uniformity of the translation method, but also makes it convenient for developers to implement multilingual functions with simple calls, thereby improving efficiency. In other words, this application is maintained by the back-end, that is, the server. As long as the server data is changed, users can see the latest language without publishing, and its maintenance process will be much simpler and more efficient. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0013] Figure 1 1 is a flow chart of a multi-language display method with mixed front-end and back-end arrangement in one embodiment of the present application.

[0014] Figure 2 A schematic diagram of the structure of a computer device provided in one embodiment of the present application. DETAILED DESCRIPTION

[0015] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0016] In order to make the purpose, features and advantages of this application more obvious and easy to understand, this application is further described in detail below with reference to the accompanying drawings and specific implementation methods.

[0017] In an exemplary embodiment, Figure 1 As shown, a multi-language display method with mixed front-end and back-end is provided. The method is executed by a computer device, and can be executed separately by a computer device such as a terminal or a server, or can be executed jointly by a terminal and a server. In an embodiment of the present application, the method includes the following steps 101 to 102.

[0018] Step 101: The front end sends a preset language display instruction to the back end. The back end parses the corresponding HTML file according to the preset language display instruction, compiles it into an embedded JS file of the corresponding language type, and then embeds the embedded JS file into the HTML file; the embedded JS file includes the encapsulated $t_dict global variable.

[0019] The preset language display instruction corresponds to the language that needs to be translated and the language character string to be translated in the development configuration.

[0020] In a specific application, a JST method is called to process the language string to be translated and output the result as a JSON-formatted string. This step is performed by the backend, or server, which places the output JSON-formatted string into a script tag in an HTML file. This is then returned to the user (or frontend) as executable JavaScript code.

[0021] The execution logic of the JsT method can include the following key steps:

[0022] (1) Initialize the dictionary structure. Use the incoming language string array (i.e., the original string) as the original key set to initialize an empty dictionary. At this time, the dictionary key is the original string (e.g., "Hello"), and the value is not yet filled with the translation content.

[0023] (2) Call the pre-packaged translation method "T" to complete the translation. The dictionary value needs to be dynamically obtained through the pre-packaged translation method T. The core responsibility of the T method is to query the translation text of the corresponding string from the database according to the language selected by the current user, and return it to the JsT method to fill the dictionary.

[0024] (3) The key dependency of the "T" method: obtaining the user's current language. The T method must first determine the user's target language before translating. Usually, the user's language preference is saved in the website's cookies (such as language_id = zh-CN). The T method will first read the identifier from the cookie (if not set, the merchant's default language is used, such as en-US when the merchant is created) to obtain the language identifier.

[0025] (4) Get the translated text from the database. The T method completes the specific translation query by calling the underlying translation service Translator.Translate(txt, LanguageId, args):

[0026] txt: The original string to be translated (key of the dictionary).

[0027] · LanguageId: The unique identifier corresponding to the current user's language (parsed from the Cookie).

[0028] · args (optional): Translation placeholder parameters (such as the specific values corresponding to {0}, {1}, used to dynamically replace variables in the translation text).

[0029] The Translator.Translate method queries the translation table in the database for a matching translation record based on txt and LanguageId (e.g., the translation of "您好" in en-US is "Hello") and returns the translated text.

[0030] (5) Fill the dictionary and output. After the T method returns the translation result to the JsT method, the JsT method stores the original string (key) and the translation result (value) in the dictionary one by one. Finally, the JsT method serializes the dictionary into a string (such as JSON format) to complete the output of the translation dictionary.

[0031] In another specific application, when the html file is @Html.Raw(Model.JsT("订单标签","审核"), the corresponding embedded js file is: var $t_dict = {"订单标签":"订单标签","审核":"审核"}.

[0032] Among them, the meaning of @Html.Raw(Model.JsT("订单标签","审核") is: call the JsT method in the view model Model, pass in "订单标签" and "审核" as parameters, and obtain the string returned by this method; then use the @Html.Raw method to output this string as the original HTML content to the page, ensuring that the HTML tags in it can be correctly parsed and rendered by the browser.

[0033] Step 102, the backend feeds back the html file embedded with the embedded js file to the frontend for the frontend to call the encapsulated $t_dict global variable to obtain the corresponding language information.

[0034] Specifically, obtain the corresponding translated multilingual content by obtaining the $t_dict variable generated by server-side compilation.

[0035] In actual development, when the frontend page encounters copywriting that needs to involve multilingual display, it can call the pre-encapsulated $t method to convert it into the copywriting in the corresponding language; the main processing logic of the $t method encapsulated by the frontend is:

[0036] (1) Determine whether the $t_dict field generated in the code exists. If it does not exist, an error message will pop up, "Please call base.OnGet() in public override void OnGet()", prompting the developer to configure multiple language methods. The configured method is the Model.Jst method in @Html.raw mentioned above.

[0037] (2) Get the parameters passed in when calling $t, and get the corresponding translated language text in $t_dict. The $t_dict object generated above is an object with the text as the key and the translated language as the value, so the corresponding translated text can be obtained according to the parameters passed in when calling $t.

[0038] (3) If the result is not obtained, the system will return "Please rewrite JsTs and specify {characters}". {characters} are the parameters passed in by $t to prompt developers to maintain multilingual fields.

[0039] (4) When the number of parameters passed in by $t is greater than one, it will be considered as data that needs to replace the placeholder, and the contents of the {} placeholder will be replaced in sequence through the replace method of js.

[0040] (5) Finally, the obtained multilingual copy is returned.

[0041] In a specific application, the corresponding language information obtained through the encapsulated $t_dict global variable is displayed. Specifically, it is displayed when it is necessary to interact with the user and provide feedback information, such as a prompt indicating that the save is successful after clicking a button.

[0042] In a specific application example, $t_dict is generated by the server (backend) and covers all text that requires multilingual translation on the current page. The server-side generation logic can be referenced in the JsT method implementation logic. When a user accesses the page (frontend) and initiates a request, the server parses and generates the corresponding multilingual text based on the pre-set multilingual strings, adds it to the HTML, and returns it to the user. For example, when the user clicks the Add Express button, if the order data is not checked, a prompt "Please check the receipt" should be displayed. This "Please check the receipt" prompt needs to be processed in multiple languages. To do this, you can pre-add @Html.Raw(Model.JsT("Please check the receipt") to the page, and then use $t("Please check the receipt") in the js code to obtain the pre-translated multilingual text.

[0043] In an exemplary embodiment, a computer device is provided. The computer device may be a server or a terminal. The internal structure diagram thereof may be as follows: Figure 2As shown. The computer device includes a processor, a memory, an input / output interface (Input / Output, abbreviated as I / O) and a communication interface. The processor, memory and input / output interface are connected through a system bus, and the communication interface is connected to the system bus through the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal through a network connection.

[0044] Those skilled in the art will understand that Figure 2 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than shown in the figure, or combine certain components, or have a different component arrangement.

[0045] In an exemplary embodiment, a computer device is provided, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement a multi-language display method with mixed front-end and back-end layout.

[0046] In an exemplary embodiment, a computer-readable storage medium is provided, storing a computer program. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

[0047] In an exemplary embodiment, a computer program product is provided, including a computer program. When the computer program is executed by a processor, the steps in the above method embodiments are implemented.

[0048] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant regulations.

[0049] Those skilled in the art will understand that all or part of the processes in the above-mentioned embodiment methods can be implemented by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, database or other media used in the embodiments provided in this application may include at least one of non-volatile and volatile memory. Non-volatile memory may include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory may include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM may be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM).

[0050] The databases involved in the various embodiments provided herein may include at least one of a relational database and a non-relational database. Non-relational databases may include, but are not limited to, distributed databases based on blockchains. The processors involved in the various embodiments provided herein may include, but are not limited to, general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic units, data processing logic units based on quantum computing, and the like.

[0051] The technical features of the above embodiments can be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0052] This document uses specific examples to illustrate the principles and implementation methods of this application. The description of the above examples is only intended to help understand the method and core concept of this application. At the same time, for those skilled in the art, based on the concept of this application, there may be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as limiting this application.

Claims

1. A multi-language display method with mixed front-end and back-end layout, characterized in that: The method comprises: The front end sends a preset language display instruction to the back end. The back end parses the corresponding HTML file according to the preset language display instruction and compiles it into an embedded JS file of the corresponding language type. The embedded JS file is then embedded in the HTML file; the embedded JS file includes the encapsulated $t_dict global variable. The backend feeds back the HTML file embedded with the embedded JS file to the frontend, so that the frontend calls the encapsulated $t_dict global variable to obtain the corresponding language information.

2. The multi-language display method with mixed front-end and back-end layout according to claim 1, characterized in that: The preset language display instruction corresponds to the language that needs to be translated and the language string to be translated in the development configuration.

3. The multi-language display method with mixed front-end and back-end layout according to claim 2, characterized in that: The method further comprises: The backend calls the JsT method to process the language string to be translated, and outputs the processing result in the form of a JSON format string, places the output JSON format string in the script tag in the HTML file, and finally returns it to the frontend as executable js code.

4. The multi-language display method with mixed front-end and back-end layout according to claim 1, characterized in that: The method further includes: displaying corresponding language information obtained through the encapsulated $t_dict global variable.

5. The multi-language display method with mixed front-end and back-end layout according to claim 1, characterized in that: When the HTML file is @Html.Raw(Model.JsT("Order Label","Audit"), the corresponding embedded JS file is: var$t_dict = {"Order Label":"Order Label","Audit":"Audit"}.

6. A computer device comprising: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the front-end and back-end mixed multi-language display method according to any one of claims 1 to 5.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the front-end and back-end mixed multi-language display method according to any one of claims 1 to 5 is implemented.

8. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the front-end and back-end mixed multi-language display method according to any one of claims 1 to 5 is implemented.

Images