Low code platform international multilingual (I18N) technical solution

         internationalization （Internationalization, abbreviation i18n）： It means that software development should have the function of supporting multiple languages and regions . That is to say, it can switch the page display language .i18n, among “I” and “n” First and last characters respectively ,18 Is the number of characters in the middle .

         Low code platform / Using international multilingualism in the zero code platform （i18n）, Involving static text internationalization 、 Dynamic text internationalization 、 Menu internationalization, etc . among , Model driven 、 Visualize the business module generated by zero code configuration , How to internationalize multilingualism , It is the key and difficult point for zero code platform to solve internationalization .

1、 Static text internationalization multilingualism

Static text refers to the names written in the code , Back end included Java Code and front end Vue Code , such as ： backstage Java The code judges that the login password is wrong , return “ Wrong user name or password ” Such information ; front end vue Code “ newly added ”“ Delete ” Wait for the button name 、“ user name ”、“ state ” Equivalent label name . These are all static text , The technology of international multilingual transformation is relatively simple , But the workload is relatively large , The following describes the static internationalization ideas of the back-end and front-end respectively .

1.1、 Back end internationalization （Java）

（1） Define multilingual resource files

In the engineering resources/static/i18n Under the table of contents , Chinese simplified messages.properties

user.login.success= Login successful 

user.logout.success= Quit successfully 

user.register.success= Registered successfully 

American English  messages_en_US.properties

user.login.success=Login Success

user.logout.success=logout Success

user.register.success=register Success

（2）java Code using I18nUtil Acquire internationalization

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

（3） be based on IDEA Develop multilingual files

1.2、 Front end internationalization （Vue）

（1） Define multilingual resource files

In the engineering src/assets/lang Under the table of contents , Chinese simplified  zh_CN.json

{

  "m": {

    "common": {

      "button": {

        "add": " newly added ",

        "update": " edit ",

        "delete": " Delete "

       }

     }

  }

}

American English  en_US.json

{

  "m": {

    "common": {

      "button": {

        "add": "New",

        "update": "Modify",

        "delete": "Delete"

       }

     }

  }

}

（2）vue Code using $t Acquire internationalization

Normal text usage ： { { $t('m.fm.components.fields.input') }}

How to use it in the label ：   :placeholder="$t('m.fm.components.fields.input')"

js Internal use :      this.$t('m.fm.components.fields.input')

（3） be based on Webstore Develop multilingual files

Multi language identification should avoid global conflicts , Recommended naming conventions ： System name . The name of the table . Prompt name , such as ：app1.table1.hello

2、 Dynamic text internationalization multi language

A generated module based on model visualization configuration , Multilingual maintenance is different from static resource files , Model based dynamic maintenance is also required , Instead of developers writing dead code in advance .

2.1、 Maintain multiple languages based on business models

In the zero code platform , Common visual development methods , Let's say form design and page design based on business model , Then the key point of the implementation of dynamic multilingual technology is how to configure multilingual based on business model . In the cloud low code platform , Multi language extension based on application entity model , The fields of the entity model will be automatically synchronized to the multilingual configuration , You only need to maintain the Chinese of the field 、 English name is enough .“ other ” Allow users to add language information under the category , Note that the code must be unique , It is recommended that different applications use different prefixes to distinguish codes .

2.2、 Visual designers use multiple languages

When designing forms and pages , Use multilingual controls to enter dynamic text that needs to be internationalized , For example, the label of a form control 、 Column name of the list 、 Button name, etc , Here's the picture .

Chinese environment form design ：

English environment form design ：

3、 Menu name internationalized multilingual

Menu multilingual development is actually data multilingual , Non text label multilingual , So it is necessary to maintain the menu , Enter names in multiple languages . Enter the menu management module , Click the add or edit button , Maintain menu multilingual in pop-up page ：

The menu name is the default menu name , Chinese and English are the multilingual configuration of the menu respectively , The front-end display menu rule is ： First find the corresponding language name according to the current language environment , If not found , Take the default menu name .

English environment menu multi language display ：

Chinese environment menu multi language display ：

4、 The system switches between multiple languages

Multilingual switching refers to the same system , Different users log in , You can switch between different languages .

Generally, the portal for switching between multiple languages is when the user logs in , Manually select switch multi language .

It should be noted that , Multilingual switching is related to the user's current login session , Not system level multilingualism , In terms of technical realization , The language type selected by the current user needs to be passed to the system through the thread safety mechanism , Realize multi language switching by user session .

Reference resources ：

Start | Vue I18n

SpringBoot Realization i18n International configuration （ Super detailed follow-up series ）_ Only the code will not deceive the blog -CSDN Blog _springboot International configuration

Yuncheng | cloud BPM, Yuncheng BPM, Low code platform , Low code development platform , Open source process engine ,Camunda,flowable, Business process management ,activiti, Smart forms , E-forms , Visual development , Zero code development , Foundation platform , technological process PaaS, technological process SaaS