Internationalized data-based front and back end separation method, apparatus and device, and medium

Abstract

The invention relates to a front-end and back-end separation method and device based on internationalized data, equipment and a medium, and is applied to the technical field of software development. Searching front-end translation data in the front-end code file by utilizing an analysis tool; acquiring back-end translation data from a back end; comparing the front-end translation data with the rear-end translation data, determining the front-end translation data which does not exist in the rear-end translation data as incremental data, and marking the rear-end translation data which does not exist in the front-end translation data as a deletable state; submitting the marked back-end translation data and the incremental data to a back end; obtaining an internationalized JSON file from a back end; and rendering the page based on the internationalized JSON file and the language type of the user. The method and the device have the effect of improving code maintenance and updating efficiency.

Description

Technical Field

[0001] The present application relates to the technical field of software development, and in particular to a front-end and back-end separation method, apparatus, device, and medium based on internationalized data. Background Art

[0002] In the field of software development, with the acceleration of globalization, the demand for software internationalization is growing. Internationalization is extremely important for software. It enables software to be widely used by user groups in different countries and regions, greatly improving the software's market coverage and user experience. Software internationalization not only helps companies expand into international markets but also promotes exchange and integration between different cultures, driving the international development of the software industry.

[0003] To achieve software internationalization, a common approach is to embed all translation data directly into the front-end code during development. This allows the required translations to be directly retrieved when the page loads. However, this approach bloats the front-end code, making it difficult for developers to maintain and update the code. Summary of the Invention

[0004] In order to improve the efficiency of code maintenance and updating, the present application provides a front-end and back-end separation method, apparatus, device and medium based on internationalized data.

[0005] In the first aspect, the present application provides a front-end and back-end separation method based on internationalized data, which adopts the following technical solutions: A front-end and back-end separation method based on internationalized data, applied to the front-end, including: Get the front-end code file from local; Using a parsing tool to search for front-end translation data in the front-end code file; Get backend translation data from the backend; Comparing the front-end translation data with the back-end translation data, determining the front-end translation data that does not exist in the back-end translation data as incremental data, and marking the back-end translation data that does not exist in the front-end translation data as being in a deletable state; Submitting the marked backend translation data and the incremental data to the backend; Get the internationalization JSON file from the backend; The page is rendered based on the internationalized JSON file and the user's language.

[0006] By adopting the above technical solution, the front-end is only responsible for extracting front-end translation data from the front-end code file and rendering the page, without having to deal with the storage and management of the translation data. The back-end is responsible for storing the translation data and generating internationalization files, that is, the front-end developer can independently complete the page logic development, and the back-end personnel focus on translation data maintenance, so that the division of labor is clear and the efficiency of code maintenance and updating is improved; the front-end uses the parsing tool to automatically scan and extract the front-end translation data in the front-end code file, without the need for technical personnel to search and extract from multiple files and massive codes, thereby improving the search efficiency and accuracy of the translation data; if the front-end adds or subtracts the translation data, the new incremental data and the deleted data can be quickly determined by comparing the back-end translation data with the front-end translation data, and then only the marked back-end translation data and incremental data are submitted to the back-end, reducing the amount of data transmission. The back-end only needs to process the new incremental data and deleted data, reducing the amount of data processing, thereby improving development efficiency.

[0007] Optionally, the front-end code file includes a first file and a second file, the first file has a file extension of ts and tsx, and the second file has a file extension of vue, and the using of a parsing tool to search for the front-end translation data in the front-end code file includes: generating a first abstract syntax tree of the first file using a first parsing tool; Traversing the first abstract syntax tree to find the first parameter of the first preset translation method whose internal method name is a first parameter; Generate a second abstract syntax tree for the Script portion of the second file using a second parsing tool; Traversing the second abstract syntax tree to find the internal method name and the second parameter of the first preset translation method; Generate a third abstract syntax tree for the Template part in the second file using a third parsing tool; Traversing the third abstract syntax tree, searching for the third parameter of the second preset translation method on the attribute and the internal method name; The front-end translation data is determined based on the first parameter, the second parameter, and the third parameter.

[0008] By adopting the above technical solution, different parsing tools are used to parse different types of files, thereby improving the accuracy of front-end translation data extraction.

[0009] Optionally, determining the front-end translation data based on the first parameter, the second parameter, and the third parameter includes: Determine front-end candidate translation data based on the first parameter, the second parameter, and the third parameter; The front-end candidate translation data is screened using a regular expression to obtain the front-end translation data.

[0010] By adopting the above technical solution, the front-end candidate translation data is first determined based on the parameters found in the abstract syntax tree corresponding to different files, and then the front-end candidate translation data is screened using regular expressions. This can more accurately determine the front-end translation data and improve the accuracy of obtaining the front-end translation data.

[0011] Optionally, rendering the page based on the internationalized JSON file and the user's language type includes: Locate the unique identifier of the front-end translation data from the internationalized JSON file to obtain a location; Searching for translation content from the internationalized JSON file based on the location and the language; The page is rendered based on the translated content.

[0012] By adopting the above technical solution, when rendering a page, the unique identifier of the front-end translation data and the user's language type can be used to quickly locate the translated content from the internationalized JSON file sent by the back-end, so that the page can be rendered quickly, improving the user experience.

[0013] Secondly, this application provides a front-end and back-end separation method based on internationalized data, which adopts the following technical solutions: A front-end and back-end separation method based on internationalized data, applied to the back-end, including: Receive incremental data sent by the front end; Obtaining translation content based on the unique identifier of the incremental data, and storing the translation content and the incremental data in a database; In response to the publishing instruction, a plurality of internationalized JSON files are generated according to the language type and the translation content in the database.

[0014] By adopting the above technical solution, the back-end receives the incremental data from the front-end and stores the incremental data and the corresponding translation content in the database, which facilitates unified data management. Translators can view the translation data more conveniently through the back-end management platform without having to search for translation data from a large amount of code. They only need to process the incremental data, which reduces the workload of translators and improves data maintenance efficiency. The back-end generates multiple internationalized JSON files in different languages ​​based on the release instructions and database content, which can provide support for rendering the front-end page according to the user's language type.

[0015] Optionally, the method further includes: Receive the marked backend translation data sent by the frontend; The backend translation data marked as deletable is deleted from the database.

[0016] By adopting the above technical solution, the back-end receives the marked back-end translation data sent by the front-end, and can delete the back-end translation data marked as deletable in the database, which helps to clean up useless data and improve database storage efficiency and management convenience.

[0017] In a third aspect, the present application provides a front-end and back-end separation device based on internationalized data, which adopts the following technical solutions: A front-end and back-end separation device based on internationalized data, applied to the front-end, comprising: The first acquisition module is used to obtain the front-end code file from the local; A data search module, configured to use a parsing tool to search for front-end translation data in the front-end code file; The second acquisition module is used to obtain backend translation data from the backend; a data comparison module, configured to compare the front-end translation data with the back-end translation data, determine the front-end translation data that does not exist in the back-end translation data as incremental data, and mark the back-end translation data that does not exist in the front-end translation data as being in a deletable state; A data submission module, configured to submit the marked back-end translation data and the incremental data to the back-end; The third acquisition module is used to obtain the internationalized JSON file from the backend; The page rendering module is used to render the page based on the internationalized JSON file and the user's language type.

[0018] By adopting the above technical solution, the front-end is only responsible for extracting front-end translation data from the front-end code file and rendering the page, without having to deal with the storage and management of the translation data. The back-end is responsible for storing the translation data and generating internationalization files, that is, the front-end developer can independently complete the page logic development, and the back-end personnel focus on translation data maintenance, so that the division of labor is clear and the efficiency of code maintenance and updating is improved; the front-end uses the parsing tool to automatically scan and extract the front-end translation data in the front-end code file, without the need for technical personnel to search and extract from multiple files and massive codes, thereby improving the search efficiency and accuracy of the translation data; if the front-end adds or subtracts the translation data, the new incremental data and the deleted data can be quickly determined by comparing the back-end translation data with the front-end translation data, and then only the marked back-end translation data and incremental data are submitted to the back-end, reducing the amount of data transmission. The back-end only needs to process the new incremental data and deleted data, reducing the amount of data processing, thereby improving development efficiency.

[0019] In a fourth aspect, the present application provides a front-end and back-end separation device based on internationalized data, which adopts the following technical solutions: A front-end and back-end separation device based on internationalized data, applied to the back-end, comprising: Data receiving module, used to receive incremental data sent by the front end; A data translation module, configured to obtain translation content based on the unique identifier of the incremental data, and store the translation content and the incremental data in a database; The file generation module is used to generate multiple internationalized JSON files in response to the publishing instruction according to the language type and the translation content in the database.

[0020] By adopting the above technical solution, the back-end receives the incremental data from the front-end and stores the incremental data and the corresponding translation content in the database, which facilitates unified data management. Translators can view the translation data more conveniently through the back-end management platform without having to search for translation data from a large amount of code. They only need to process the incremental data, which reduces the workload of translators and improves data maintenance efficiency. The back-end generates multiple internationalized JSON files in different languages ​​based on the release instructions and database content, which can provide support for rendering the front-end page according to the user's language type.

[0021] In a fifth aspect, the present application provides an electronic device, which adopts the following technical solution: An electronic device comprising a processor coupled to a memory; The memory stores a computer program that can be loaded by the processor and executes the front-end and back-end separation method based on internationalized data according to either the first aspect or the second aspect.

[0022] In a sixth aspect, the present application provides a computer-readable storage medium, which adopts the following technical solution: A computer-readable storage medium stores a computer program that can be loaded by a processor and executes the front-end and back-end separation method based on internationalized data according to either the first aspect or the second aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 This is a flow chart of a front-end and back-end separation method based on internationalized data applied to the front end in an embodiment of the present application.

[0024] Figure 2 This is a flow chart of a front-end and back-end separation method based on internationalized data applied to the back-end in an embodiment of the present application.

[0025] Figure 3 This is a structural block diagram of a front-end and back-end separation device based on internationalized data applied to the front end in an embodiment of the present application.

[0026] Figure 4 This is a structural block diagram of a front-end and back-end separation device based on internationalized data applied to the back-end in an embodiment of the present application.

[0027] Figure 5 This is a structural block diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0028] The present application is further described in detail below with reference to the accompanying drawings.

[0029] Embodiments of the present application provide a method for separating front-end and back-end data based on internationalized data. This method can be performed by an electronic device, which can be a server or a terminal device. The server can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing cloud computing services. The terminal device can be, but is not limited to, a smartphone, a tablet computer, or a desktop computer.

[0030] To make the purpose, technical solutions, and advantages of the embodiments of this application more clear, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the drawings in the embodiments of this application. Obviously, the described embodiments are 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.

[0031] In this document, the term "and / or" simply describes a relationship between related objects, indicating that three possible relationships exist. For example, "A and / or B" can represent: A exists alone, A and B exist simultaneously, or B exists alone. Furthermore, the character " / " in this document, unless otherwise specified, generally indicates an "or" relationship between the related objects.

[0032] like Figure 1 As shown, a front-end and back-end separation method based on internationalized data is applied to the front-end. The main process of the method is described as follows (steps S101 to S107): Step S101: Obtain the front-end code file locally.

[0033] Get the front-end code files corresponding to the front-end from the local computer. The front-end code files include the first file and the second file. The first file is a file with the extension ts and tsx, that is, the first file is a TypeScript (.ts) file and a TypeScript for JSX (.tsx) file, and the second file is a file with the extension vue.

[0034] Step S102: Use a parsing tool to search for front-end translation data in the front-end code file.

[0035] Front-end translation data refers to the data that needs to be translated by the front-end. Each type of front-end translation data corresponds to a unique identifier (key), such as username, email, etc.

[0036] Specifically, a parsing tool is used to search for front-end translation data in a front-end code file, including: using a first parsing tool to generate a first abstract syntax tree for the first file; traversing the first abstract syntax tree to find the first parameter of the first preset translation method whose internal method name is a first parsing tool; using a second parsing tool to generate a second abstract syntax tree for the Script part in the second file; traversing the second abstract syntax tree to find the second parameter of the first preset translation method whose internal method name is a first parsing tool; using a third parsing tool to generate a third abstract syntax tree for the Template part in the second file; traversing the third abstract syntax tree to find the third parameter of the second preset translation method whose attribute and internal method name are a second parsing method; and determining the front-end translation data based on the first parameter, the second parameter, and the third parameter.

[0037] In this embodiment, different parsing tools are used for different types of front-end code files. The first parsing tool can be any one of TypeScript Compiler API, SWC, and Babel + @babel / preset-typescript. The second parsing tool can also be any one of TypeScript Compiler API, SWC, and Babel + @babel / preset-typescript, that is, the second parsing tool can be the same as the first parsing tool. The third parsing tool can be any one of @vue / compiler-dom and vue-template-compiler (Vue 2.x).

[0038] This application generates a first abstract syntax tree for a first file (TypeScript file and TypeScript for JSX file) through a first parsing tool; in the process of traversing the first abstract syntax tree, searches for a call with an internal method name of a first preset translation method (for example: t) and extracts the first parameter of the call; processes the Script and Template parts in the second file (.vue file) separately, and uses a second parsing tool to generate a second abstract syntax tree for the Script part code script in the second file; in the process of traversing the second abstract syntax tree, searches for a call with an internal method name of the first preset translation method and extracts the second parameter of the call; uses a third parsing tool to generate a third abstract syntax tree for the Template part in the second file; in the process of traversing the third abstract syntax tree, searches for a call with an attribute and an internal method name of the second preset translation method (for example: $t) and extracts the third parameter of the call; determines the front-end translation data based on the first parameter, the second parameter, and the third parameter.

[0039] Specifically, determining the front-end translation data based on the first parameter, the second parameter, and the third parameter includes: determining the front-end candidate translation data based on the first parameter, the second parameter, and the third parameter; and filtering the front-end candidate translation data by a regular expression to obtain the front-end translation data.

[0040] In this embodiment, the first parameter, the second parameter and the third parameter are jointly determined as the front-end candidate translation data, and the front-end candidate translation data is screened by a preset regular expression to obtain front-end translation data that conforms to a specific format. The screening by the regular expression improves the validity of the front-end translation data, wherein the preset regular expression is pre-set by the staff according to the actual situation and is not specifically limited here.

[0041] Step S103: Acquire backend translation data from the backend.

[0042] The backend translation data in the backend database is obtained from the frontend and backend interfaces. Each type of backend translation data also corresponds to a unique identifier (key).

[0043] Step S104: Compare the front-end translation data with the back-end translation data, determine the front-end translation data that does not exist in the back-end translation data as incremental data, and mark the back-end translation data that does not exist in the front-end translation data as deletable.

[0044] For example: the front-end translation data includes A, B, C, D, and E, and the back-end translation data includes A, B, C, F, and G. Then D and E are determined as incremental data, and F and G are marked as deletable.

[0045] Step S105: Submit the marked backend translation data and incremental data to the backend.

[0046] Submit the marked backend translation data and incremental data to the backend so that the backend can add or subtract translation data in the database.

[0047] Step S106: Obtain the internationalized JSON file from the backend.

[0048] After obtaining the marked backend translation data and incremental data, the backend will delete the translation data marked as deletable in the database, obtain the translation content of each incremental data from the translator, and generate an internationalized JSON file. The internationalized JSON file stores all the translation data and corresponding translation content in the backend database. At this time, the frontend can obtain the internationalized JSON file from the backend for subsequent page rendering.

[0049] Step S107: Render the page based on the internationalized JSON file and the user's language.

[0050] Specifically, the page is rendered based on the internationalized JSON file and the user's language type, including: locating the unique identifier of the front-end translation data from the internationalized JSON file to obtain the positioning position; searching for translation content from the internationalized JSON file based on the positioning position and the language type; and rendering the page based on the translation content.

[0051] In this embodiment, the unique identifier corresponding to the front-end translation data is located from all internationalized JSON files to obtain the location; the translation content is searched from the location of the internationalized JSON file corresponding to the user's current language type, and the translation content is filled into the corresponding position of the page to complete the process of rendering the page.

[0052] like Figure 2 As shown, a front-end and back-end separation method based on internationalized data is applied to the back-end. The main process of the method is described as follows (steps S201 to S203): Step S201: Receive incremental data sent by the front end.

[0053] When the front-end compares the front-end translation data with the back-end translation data to obtain incremental data (newly added front-end translation data), it will submit the incremental data to the back-end. At this time, the back-end receives the incremental data sent by the front-end.

[0054] Step S202: Obtain translation content based on the unique identifier of the incremental data, and store the translation content and the incremental data in a database.

[0055] The translator enters the corresponding translation content based on the unique identifier of the incremental data on the back-end management platform. That is, the back-end can obtain the translation content from the translator. When the translator clicks save, each incremental data and the corresponding translation content are stored in the database.

[0056] Translators can intuitively view incremental data and translate it based on the back-end management platform, without having to search for translation data from a large amount of code, which reduces the translator's workload and improves the efficiency of data translation.

[0057] Step S203: In response to the publishing instruction, a plurality of internationalized JSON files are generated according to the language type and the translation content in the database.

[0058] When the translator publishes the translated content, the backend will generate multiple internationalized JSON files based on the language type. Each internationalized JSON file corresponds to a language type. The internationalized JSON file includes the original backend translation data and the corresponding translation content as well as the incremental data and the corresponding translation content. That is, the internationalized JSON file includes all the translation data and the corresponding translation content in the database.

[0059] Specifically, the method further includes: receiving marked back-end translation data sent by the front-end; and deleting the back-end translation data marked as deletable from the database.

[0060] In this embodiment, if the front-end deletes a part of the translation data compared to the back-end translation data in the database, the front-end will submit the marked back-end translation data to the back-end, that is, the back-end translation data marked as deletable. At this time, the back-end receives the marked back-end translation data sent by the front-end, deletes the back-end translation data marked as deletable and the corresponding translation content from the database, and generates a new internationalized JSON file based on the content of the database. That is, each time the database is updated, the internationalized JSON file will also be updated synchronously.

[0061] Figure 3 This is a structural block diagram of a front-end and back-end separation device 300 based on internationalized data applied to the front end in an embodiment of the present application.

[0062] like Figure 3 As shown, the front-end and back-end separation device 300 based on internationalized data applied to the front-end mainly includes: The first acquisition module 301 is used to obtain the front-end code file from the local; A data search module 302 is used to search for front-end translation data in the front-end code file using a parsing tool; The second acquisition module 303 is used to obtain backend translation data from the backend; A data comparison module 304 is configured to compare the front-end translation data with the back-end translation data, determine the front-end translation data that does not exist in the back-end translation data as incremental data, and mark the back-end translation data that does not exist in the front-end translation data as deletable; The data submission module 305 is used to submit the marked backend translation data and incremental data to the backend; The third acquisition module 306 is used to obtain the internationalized JSON file from the backend; The page rendering module 307 is used to render the page based on the internationalized JSON file and the user's language type.

[0063] As an optional implementation manner in this embodiment, the front-end code file includes a first file and a second file, the first file is a file with an extension of ts and tsx, and the second file is a file with an extension of vue. The data search module 302 is specifically used to use a parsing tool to search for front-end translation data in the front-end code file, including: using a first parsing tool to generate a first abstract syntax tree for the first file; traversing the first abstract syntax tree to find the first parameter of the first preset translation method whose internal method name is; using a second parsing tool to generate a second abstract syntax tree for the Script part in the second file; traversing the second abstract syntax tree to find the second parameter of the first preset translation method whose internal method name is; using a third parsing tool to generate a third abstract syntax tree for the Template part in the second file; traversing the third abstract syntax tree to find the third parameter of the second preset translation method whose attribute and internal method name are; determining the front-end translation data based on the first parameter, the second parameter and the third parameter.

[0064] As an optional implementation in this embodiment, the data search module 302 is specifically used to determine the front-end translation data based on the first parameter, the second parameter and the third parameter, including: determining the front-end candidate translation data based on the first parameter, the second parameter and the third parameter; filtering the front-end candidate translation data through a regular expression to obtain the front-end translation data.

[0065] As an optional implementation in this embodiment, the page rendering module 307 is specifically used to render the page based on the internationalized JSON file and the user's language type, including: locating the unique identifier of the front-end translation data from the internationalized JSON file to obtain the positioning position; searching for translation content from the internationalized JSON file based on the positioning position and language type; and rendering the page based on the translation content.

[0066] Figure 4 This is a structural block diagram of a front-end and back-end separation device 400 based on internationalized data applied to the back-end according to an embodiment of the present application.

[0067] like Figure 4 As shown, the front-end and back-end separation device 400 based on internationalized data applied to the back-end mainly includes: The data receiving module 401 is used to receive the incremental data sent by the front end; The data translation module 402 is used to obtain the translation content based on the unique identifier of the incremental data, and store the translation content and the incremental data in the database; The file generation module 403 is configured to generate a plurality of internationalized JSON files in response to the publishing instruction according to the language type and the translation content in the database.

[0068] As an optional implementation in this embodiment, the front-end and back-end separation device 400 based on internationalized data applied to the back-end is further specifically used to: receive marked back-end translation data sent by the front-end; and delete the back-end translation data marked as deletable from the database.

[0069] In one example, the module in any of the above devices can be one or more integrated circuits configured to implement the above methods, such as: one or more application specific integrated circuits (ASICs), or one or more digital signal processors (DSPs), or one or more field programmable gate arrays (FPGAs), or a combination of at least two of these integrated circuit forms.

[0070] For another example, when the modules in the device can be implemented in the form of a processing element scheduling program, the processing element can be a general-purpose processor, such as a central processing unit (CPU) or other processor capable of calling programs. For another example, these modules can be integrated together and implemented in the form of a system-on-a-chip (SOC).

[0071] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and modules can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0072] Figure 5 This is a structural block diagram of an electronic device 500 provided in an embodiment of the present application.

[0073] like Figure 5As shown, the electronic device 500 includes a processor 501 and a memory 502 , and may further include an information input / information output (I / O) interface 503 , one or more communication components 504 , and a communication bus 505 .

[0074] The processor 501 is used to control the overall operation of the electronic device 500 to complete all or part of the steps of the front-end and back-end separation method based on internationalized data. The memory 502 is used to store various types of data to support the operation of the electronic device 500. For example, these data may include instructions for any application or method operating on the electronic device 500, as well as application-related data. The memory 502 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk.

[0075] The I / O interface 503 provides an interface between the processor 501 and other interface modules, which may be a keyboard, a mouse, buttons, etc. These buttons may be virtual buttons or physical buttons. The communication component 504 is used for wired or wireless communication between the electronic device 500 and other devices. Wireless communication, such as Wi-Fi, Bluetooth, Near Field Communication (NFC), 2G, 3G or 4G, or a combination of one or more thereof, therefore, the corresponding communication component 504 may include: a Wi-Fi component, a Bluetooth component, an NFC component.

[0076] The electronic device 500 can be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components, and is used to execute the front-end and back-end separation method based on internationalized data given in the above embodiment.

[0077] Communication bus 505 may include a path for transmitting information between the aforementioned components. Communication bus 505 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, for example. Communication bus 505 may be divided into an address bus, a data bus, a control bus, and the like.

[0078] The electronic device 500 may include but is not limited to mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., as well as fixed terminals such as digital TVs, desktop computers, etc., and may also be servers, etc.

[0079] The present application also provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the steps of the above-mentioned front-end and back-end separation method based on internationalized data are implemented.

[0080] The computer-readable storage medium may include: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, etc., which can store program codes.

[0081] The terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed or inherent to such process, method, article, or apparatus.

[0082] The above description is merely a preferred embodiment of the present application and an illustration of the technical principles employed. Those skilled in the art should understand that the scope of application involved in this application is not limited to the technical solutions formed by a specific combination of the above-mentioned technical features, but should also cover other technical solutions formed by any combination of the above-mentioned technical features or their equivalents without departing from the aforementioned application concept. For example, a technical solution formed by replacing the above-mentioned features with (but not limited to) technical features with similar functions applied for in this application.

Claims

1. A front-end and back-end separation method based on internationalized data, characterized in that: Applied to the front end, including: Get the front-end code file from local; Using a parsing tool to search for front-end translation data in the front-end code file; Get backend translation data from the backend; Comparing the front-end translation data with the back-end translation data, determining the front-end translation data that does not exist in the back-end translation data as incremental data, and marking the back-end translation data that does not exist in the front-end translation data as being in a deletable state; Submitting the marked backend translation data and the incremental data to the backend; Get the internationalization JSON file from the backend; Render the page based on the internationalized JSON file and the user's language; The rendering of the page based on the internationalized JSON file and the user's language type includes: Locate the unique identifier of the front-end translation data from the internationalized JSON file to obtain a location; Searching for translation content from the internationalized JSON file based on the location and the language; The page is rendered based on the translated content.

2. The method according to claim 1, characterized in that The front-end code file includes a first file and a second file, the first file has a file extension of ts and tsx, and the second file has a file extension of vue, and the use of a parsing tool to search for front-end translation data in the front-end code file includes: generating a first abstract syntax tree of the first file using a first parsing tool; Traversing the first abstract syntax tree to find the first parameter of the first preset translation method whose internal method name is a first parameter; Generate a second abstract syntax tree for the Script portion of the second file using a second parsing tool; Traversing the second abstract syntax tree to find the internal method name and the second parameter of the first preset translation method; Generate a third abstract syntax tree for the Template part in the second file using a third parsing tool; Traversing the third abstract syntax tree, searching for the third parameter of the second preset translation method on the attribute and the internal method name; The front-end translation data is determined based on the first parameter, the second parameter, and the third parameter.

3. The method according to claim 2, characterized in that The determining the front-end translation data based on the first parameter, the second parameter, and the third parameter includes: Determine front-end candidate translation data based on the first parameter, the second parameter, and the third parameter; The front-end candidate translation data is screened using a regular expression to obtain the front-end translation data.

4. A front-end and back-end separation method based on internationalized data, characterized in that: Applied to the backend, including: Receive incremental data sent by the front end; Obtaining translation content based on the unique identifier of the incremental data, and storing the translation content and the incremental data in a database; In response to the publishing instruction, a plurality of internationalized JSON files are generated according to the language type and the translation content in the database.

5. The method according to claim 4, characterized in that The method further comprises: Receive the marked backend translation data sent by the frontend; The backend translation data marked as deletable is deleted from the database.

6. A front-end and back-end separation device based on internationalized data, characterized in that: Applied to the front end, including: The first acquisition module is used to obtain the front-end code file from the local; A data search module, configured to use a parsing tool to search for front-end translation data in the front-end code file; The second acquisition module is used to obtain backend translation data from the backend; a data comparison module, configured to compare the front-end translation data with the back-end translation data, determine the front-end translation data that does not exist in the back-end translation data as incremental data, and mark the back-end translation data that does not exist in the front-end translation data as being in a deletable state; A data submission module, configured to submit the marked back-end translation data and the incremental data to the back-end; The third acquisition module is used to obtain the internationalized JSON file from the backend; A page rendering module, configured to render the page based on the internationalized JSON file and the user's language; The page rendering module is specifically used to render the page based on the internationalized JSON file and the user's language type, including: Locate the unique identifier of the front-end translation data from the internationalized JSON file to obtain a location; Searching for translation content from the internationalized JSON file based on the location and the language; The page is rendered based on the translated content.

7. A front-end and back-end separation device based on internationalized data, characterized in that: Applied to the backend, including: Data receiving module, used to receive incremental data sent by the front end; A data translation module, configured to obtain translation content based on the unique identifier of the incremental data, and store the translation content and the incremental data in a database; The file generation module is used to generate multiple internationalized JSON files in response to the publishing instruction according to the language type and the translation content in the database.

8. An electronic device, characterized in that: comprising a processor coupled to a memory; The processor is configured to execute the computer program stored in the memory, so that the electronic device performs the method according to any one of claims 1 to 5.

9. A computer-readable storage medium, characterized in that The method comprises a computer program or instructions, which, when executed on a computer, causes the computer to execute the method according to any one of claims 1 to 5.

Images