## Mall4j 国际化说明

### 前端项目

> 前端国际化使用 vue-i18n 插件，项目已集成配置



#### 后台管理、PC项目（vue）

##### 语言包目录

```js
// 后台管理
src\i18n\langs

// PC项目
\locales
```

##### 语言包文件说明

使用键值对声明当前语言下key对应的值，页面将显示当前语言下对应键名的值。
注：PC项目语言包文件格式为 JSON 使用方法相同

en.js

```js
const en = {
	index: 'Home',
    user: {
        userName: 'User Name'
    }
}
export default en
```

zh_CN.js

```javascript
const zhCn = {
	index: '首页',
    user: {
        userName: '用户名'
    }
}
export default zhCn
```

##### 使用方法

在模版中使用

```vue
<template>
	<div class="index">
    	{{ $t('index') }}  <!-- 首页 || Home -->
        <div class="user">
            {{ $t('user.userName') }}  <!-- 用户名 || User Name -->
        </div>
        <!-- :bind -->
        <input :placeholder="$t('user.userName')" /> 
    </div>
</template>
```

在 JS 中使用

```javascript
fun() {
    console.log(this.$t('user.userName'))  // 用户名 || User Name
    // console.log(this.$i8n.t('user.userName'))
    // $i8n.t 等同于 $t
}
```



#### 移动端项目（uniapp）

##### 语言包目录

```js
src\utils\lang
```

##### 语言包文件说明

使用键值对声明当前语言下key对应的值，页面将显示当前语言下对应键名的值。

##### 使用方法

在模板文件计算属性中引入 i18n

```vue
computed: {
  i18n() {
    return this.$t('index')
  }
}
```

在模版中使用

```vue
<template>
	<div class="index">
    	{{ i18n.index }}  <!-- 首页 || Home -->
        <div class="user">
            {{ i18n.user.userName }}  <!-- 用户名 || User Name -->
        </div>
        <!-- :bind -->
        <input :placeholder="i18n.user.userName" /> 
    </div>
</template>
```

在 JS 中使用

```js
fun() {
    console.log(this.i18n.user.userName)  // 用户名 || User Name
}
```




### 后端项目

> 后端国际化使用 spring boot的国际化



#### java

##### 语言代码及资源目录

###### 1.国际化语言配置文件

`yami-shop-common` 模块中的`resources`文件夹

![img.png](../img/国际化/img.png)

###### 2.国际化代码目录

`yami-shop-common` 模块中`src\main\java\com\yami\shop\common\i18n`包下

![img_1.png](../img/国际化/img_1.png)







##### 国际化使用
###### 1.messages_en.properties、messages_zh.propertie语言配置文件中添加参数

![img_2.png](../img/国际化/img_2.png)

`yami-shop-common` 模块中的`resources`文件夹

##### 2.手动请求国际化
```java
String fileName = I18nMessage.getMessage("yami.excel.user.info");
```

##### 3.国际化在异常中的使用
```java
throw new YamiShopBindException("yami.order.no.exist");
```
![img_3.png](../img/国际化/img_3.png)



##### 添加一门新的语言
###### 1.新增一个messages_xxx.propertie语言配置文件， 按照已有的参数填充对应的翻译信息
![img_4.png](../img/国际化/img_4.png)

###### 2.LanguageEnum枚举类中添加新语言
![img_5.png](../img/国际化/img_5.png)

###### 3.把LanguageEnum枚举类中新语言配置的`language`给前端，前端请求头中携带该参数即可


##### 国际化语言表

数据库中以_lang结尾的表就是国际化语言表，添加新语言时，不需要进行改动

![img_6.png](../img/国际化/img_6.png)