若依框架i18n国际化

news2024/12/23 17:18:44

需求背景

项目需求要做国际化,结果网上找了好几篇文章,没有一个可以一次性搞定,现在这里总结一下。首先,我们分为两部分处理,一个是前端页面的静态文字,这个由前端vue.json自行处理。第二部分就是后端的错误消息和日志部分,我们由springboot的拦截器来处理。

i18n介绍

i18n(其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数)是“国际化”的简称。

vue前端国际化部分

1、安装i18n插件

安装插件时候,注意必须指定版本号,不然安装会报错。

npm i vue-i18n@8.22.2

2、新建文件夹i18n

文件路径依次是RUOYI-UI/src/utils/i18n。具体的文件结构看图

3、新建i18n.js文件

文件的位置请看上图。

 

// I18n
import VueI18n from 'vue-i18n'
import Vue from 'vue'
import locale from 'element-ui/lib/locale'

// 引入 elementui 的多语言
import enLocale from 'element-ui/lib/locale/lang/en'
import zhCnLocale from 'element-ui/lib/locale/lang/zh-CN'
import zhTwLocale from 'element-ui/lib/locale/lang/zh-TW'
// 如果还有新的语言在下面继续添加

// 引入自己定义的 I18n 文件
import myI18nEn from './i18n-en-US.json'
import myI18nZh from './i18n-zh-CN.json'
import myI18nTw from './i18n-zh-TW.json'
// 如果还有新的语言在下面继续添加

// 注册 vue-i18n
Vue.use(VueI18n)

// 默认中文
const lang = 'zh-CN'
const i18n = new VueI18n({
  locale: lang,
  messages: {
    // 会把myI18nZh的所有内容拷贝到zhCnLocale文件中
    'zh-CN': Object.assign(zhCnLocale, myI18nZh),
    'en-US': Object.assign(enLocale, myI18nEn),
    'zh-TW': Object.assign(zhTwLocale, myI18nTw),
    // 如果还有新的语言在下面继续添加
  }
})

locale.i18n((key, value) => i18n.t(key, value))
export default i18n

4、修改main.js文件

import Vue from 'vue'

import Cookies from 'js-cookie'

import Element from 'element-ui'

// i18n js
import i18n from './utils/i18n/i18n.js'
// 其余的信息不用修改,就增加上面的i18n js,然后在new Vue中把i18n添加进去

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

5、 页面显示的语法

// js 
this.$i18n.t('username')

// 标签,注意冒号
:label="$t('username')"

// 输入框中的占位符,注意冒号
:placeholder="this.$t('username')"

// 表格标题
:label="$t('username')"

// div语法
<div>{{$t("username")}}</div>

6、vue登录页面源码

大家可以参照一下这个登录页面的实现方法

<template>
  <div class="login">
    
    <div class="login-title-image">
        <div style="font-size: 45px;color: #00549e;padding-left: 15px;font-weight: 700;">{{$t("loginLeftWord1")}}</div>
        <div style="font-size: 45px;color: #00549e;padding-left: 80px;font-weight: 700;">{{$t("loginLeftWord2")}}</div>
    </div>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <div class="title">
        <div style="float: left;">
          <img src="../assets/images/scr_title_logo.png" style="width: 100px;" />
        </div>
        <div style="float: left;float: left;color: #00549e;font-size: 20px;font-weight: 700;height: 50px;padding-top: 8px;">
          {{$t("loginFormTitle")}}
        </div>

      </div>
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          :placeholder="this.$t('formAccount')"
        >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          :placeholder="this.$t('formPassword')"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
          type="text"
          v-model="loginForm.code"
          auto-complete="off"
          :placeholder="this.$t('formCaptcha')"
          oninput="if(value.length>4)value=value.slice(0,4)"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
      </el-form-item>
      <div style="width: 100%; height: 30px;color: #00549e;">
        <el-dropdown trigger="click" style="cursor: pointer;">
          <span class="el-dropdown-link">
            <div style="float: left;"><img src="../assets/images/changeLanguage.png" style="width: 20px;" /></div>
            <div style="float: left;">{{$t("changeLanguage")}}</div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item 
              v-for="item in language"
              :disabled="item.key==chooseLanguage?true:false"
              :key="item.key"
              :label="item.value"
              :value="item.key"
              @click.native="handleChangeLanguage(item.key)"
            >{{item.value}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">{{$t("btnLogin")}}</span>
          <span v-else>{{$t("btnLogining")}}</span>
        </el-button>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>{{$t("loginCopyRight")}}</span>
    </div>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: "Login",
  data() {
    return {
      language:[
        {"key":"zh-CN","value":"简体中文"},
        {"key":"zh-TW","value":"繁體中文"},
        {"key":"en-US","value":"English"}
      ],
      chooseLanguage:"zh-CN",
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
        language:""
      },
      
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  computed: {
    loginRules() {
      let loginRules = {
        username: [
          { required: true, trigger: "blur", message: this.$i18n.t('formAccountRules') }
        ],
        password: [
          { required: true, trigger: "blur", message: this.$i18n.t('formPasswordRules') }
        ],
        code: [
          { required: true, trigger: "blur", message: this.$i18n.t('formCaptchaRules') }
        ],
      };
      // 清空表单验证信息
      this.$nextTick( () => {
        // 这里不要使用resetFields()方法,否则input无法输入
        this.$refs['loginForm'].clearValidate();
      });
      return loginRules;
    }
  },
  created() {
    this.setWebLanguage();
    this.getCode();
  },
  methods: {
    setWebLanguage(){
      // cookies中是刚才用户选择的语言
      let language = Cookies.get("flowinnIotLanguage");
      if(language != null && language != "" && language != undefined){
        this.chooseLanguage = language;
      }else{
        // 如果cookies中没有,说明用户第一次打开系统,直接获取系统的语言
        let systemLanguage = (navigator.language || navigator.userLanguage).substring(0, 2);
        if(systemLanguage != null && systemLanguage != "" && systemLanguage != undefined){
          // 这里获取到的是zh和es,不是zh-CN需要单独处理
          this.chooseLanguage = systemLanguage;
        }
      }
      if(this.chooseLanguage == "zh" || this.chooseLanguage == "zh-CN"){
        this.chooseLanguage = "zh-CN";
      }else if(this.chooseLanguage == "zh-TW"){
        this.chooseLanguage = "zh-TW";
      }else{
        this.chooseLanguage = "en-US";
      }
      var time = new Date().getTime();
      // 设置一个3年的有效期
      let timeNum = time + (3 * 365 * 24 * 60 * 60);
      Cookies.set("flowinnIotLanguage", this.chooseLanguage,{ expires: timeNum });
      // 保存到全局变量中,后面可以使用
      localStorage.setItem("language", this.chooseLanguage);
      // 页面刷新语言进行显示
      this.$i18n.locale = this.chooseLanguage;
      // 修改页面标题
      document.title = this.$i18n.t('loginFormTitle');
    },
    handleChangeLanguage(languageKey){
      // 用户修改了显示语言,重新设置语言
      this.chooseLanguage = languageKey;
      // 临时保存到cookies中,后面由具体的方法去处理
      Cookies.set("flowinnIotLanguage", this.chooseLanguage,{ expires: 30 });
      this.setWebLanguage();
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          // 登录的时候把language传递给后台
          this.loginForm.language = this.chooseLanguage;
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
          });
        }
      });
    }
  }
};
</script>


7、修改request.js

这样就可以保证,每一次请求都从cookies中读取出来用户设置的语言,然后传递到后台

let language = localStorage.getItem("language");
if(!(language != null && language != "" && language != undefined) ){
  language = 'zh-CN';
}
config.headers['language'] = language;

8、 前端国际化结束

到此前端的国际化就结束了,大家可以试试看。

springboot2后端国际化

1、保存messages.properties

大家先把messages.properties文件中的内容保存到别的地方。

2、删除messages.properties

然后我们需要删除这个文件,重新生成。

3、新建messages.properties

在ruoyi-admin/src/main/resources/i18n这个文件夹上右键New-Resource Bundle

 然后输入messages,个人建议就使用这个固定的messages名字,不然后面的配置中要多一个配置,然后点击右边的加号,添加自己需要的国际化语言,如果要添加中文就输入zh_CN,英文就输入en_US。因为我这里已经存在文件了,所以会有错误提示。

 新建好了之后,显示就会变成下面这个样子,如果大家不是这种结构,那就要删除重新搞,必须是这样的结构才可以。经过上面的操作之后,就会自动把对应的文件都生成。

4、编辑messages.properties

大家双击messages.properties文件,然后在右边点击Resource Bundle,然后在右边就可以一个一个编辑了。

 5、国际化地区语言码对照表

在线国际化地区语言码对照表 - UU在线工具在线国际化地区语言码对照表,提供完整的DNN3支持的多语言地区语言码对照表速查,列出了每个国家对应的语言Locale和国家代码对照表。icon-default.png?t=N7T8https://uutool.cn/info-lang/

6、I18nConfig.java

package com.ruoyi.common.config;

import com.ruoyi.common.filter.MyI18nInterceptor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
@Slf4j
public class I18nConfig implements WebMvcConfigurer {


    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 注册拦截器
        MyI18nInterceptor myHandlerInterceptor = new MyI18nInterceptor();
        InterceptorRegistration loginRegistry = registry.addInterceptor(myHandlerInterceptor);
        // 拦截路径
        loginRegistry.addPathPatterns("/**");
    }

}

7、MyI18nInterceptor.java

package com.ruoyi.common.filter;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.i18n.LocaleContextHolder;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

@Slf4j
public class MyI18nInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
		final String key = "language";
		String language = request.getHeader(key);
		// 前端传递的language必须是zh-CN格式的,中间的-必须要完整,不能只传递zh或en
		log.info("当前语言={}",language);
		Locale locale = new Locale(language.split("-")[0],language.split("-")[1]);
		// 这样赋值以后,MessageUtils.message方法就不用修改了
		LocaleContextHolder.setLocale(locale);
        return true;
    }

    /**
     * 请求处理之后进行调用,但是在视图被渲染之前(Controller方法调用之后)
     */
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) {
    }

    /**
     * 在整个请求结束之后被调用,也就是在DispatcherServlet 渲染了对应的视图之后执行(主要是用于进行资源清理工作)
     */
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) {
    }

}

8、解决乱码

在线ASCII编码汉字互转icon-default.png?t=N7T8https://www.ip138.com/ascii/打开网站后,把文件中的文字全部复制粘贴,然后勾选不转换字母和数字,点击转换ASCII就行,然后在复制粘贴回去。

9、自定义properties文件名

如果你的名字不叫messages.properties,而是i18nMessage.properties或者其余的名字,那么配置文件中需要修改。注意以下的配置没有经过验证。

@Configuration
public class I18nConfig implements WebMvcConfigurer {



    /**
     * 配置 MessageSource 其实这个可以不配置如果不配置请注意 message 多语言文件的位置
     *
     * @return
     */
    @Bean
    public ResourceBundleMessageSource messageSource() {
        Locale.setDefault(Locale.CHINESE);
        ResourceBundleMessageSource source = new ResourceBundleMessageSource();
        // 这里设置自己的文件名
        source.setBasenames("i18nMessage");
        source.setUseCodeAsDefaultMessage(true);
        source.setDefaultEncoding("UTF-8");
        return source;
    }
}

10、后端国际化结束

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1003487.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Windows 11 安装Boost 库

Boost 库下载和安装 Boost 官网地址&#xff1a;https://www.boost.org/ ,首先进入官网下载对应版本的 Boost 库文件。点击下图所示绿框中的 Download 进入下载页面。 进入下载页面&#xff0c;下载所需要的版本&#xff0c;我现在下载的版本为1.83.0&#xff0c;下载的是win…

IGBT和碳化硅SiC模块,全球市场总体规模,前二十大厂商排名及市场份额

IGBT模块与碳化硅SiC模块全球市场总体规模 2023年全球IGBT模块市场规模大约为67亿美元&#xff0c;预计2029年将达到145亿美元&#xff0c;未来几年年复合增长率CAGR为13.6%。 2023年全球碳化硅SiC模块市场规模大约为16.9亿美元&#xff0c;预计2029年将达到92亿美元&#xff…

MySQL内连接和外连接及七种SQL JOINS的实现

1. 内连接 2.外连接左外连接&#xff1a;右外连接&#xff1a;满外连接&#xff1a; 3. SQL99语法实现多表查询 3.1 SQL99实现内连接 3.2 SQL99语法实现外连接 3.2.1 左外连接3.2.2 右外连接 3.2.3 满外连接 4.总结&#xff1a;七种SQL JOINS的实现 4.1 内连接 4.2 左…

【开发者工具中$0的作用】

在开发者工具中每当我们选中元素的时候 最右侧都会出现一个 $0 不知道大家有没有注意到 以下图为例 我选中最新排序的input框 输入$0 它就默认选中这个元素 我们可以在这里进行一些赋值等操作

OpenHarmony社区运营报告(2023年8月)

本月快讯 2023年8月3日&#xff0c;OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;发布了Beta2版本。OpenHarmony 4.0 Beta2在系统能力、应用框架、分布式通信、媒体功能、安全性等方面进行了全面升级。其中&#xff0c;ArkUI增强了界面组件能力&#x…

Linux基础命令(示例代码 + 解释)

查看目录下文件 ls [-a -l -h] [路径] -a&#xff08;全部&#xff09; -l&#xff08;细节&#xff09; -h&#xff08;大小&#xff09; ls ls / ls -a ls -l ls -h ls -alh ls -l -h -a ls -lah /切换目录 cd [路径] change di…

kafka增加磁盘或者分区,topic重分区

场景&#xff1a;kafka配置文件log.dirs增加了几个目录&#xff0c;但是新目录没有分区数据写入&#xff0c;所以打算进行重分区一下。 1.生成迁移计划 进入kafka/bin目录 新建 topic-reassign.json,把要重分区的topic按下面格式写。 { "topics": [{ …

NotionAI使用指南

一、NotionAI是什么 NotionAI是一款基于人工智能技术的知识管理工具&#xff0c;具有以下功能&#xff1a; 智能提醒: NotionAI可以根据用户的使用习惯和工作流程&#xff0c;智能提醒用户需要完成的任务和事项&#xff0c;帮助用户更好地规划和安排工作时间。智能分类: Noti…

洗鞋软件开发,洗鞋店小程序功能介绍;

洗鞋小程序开发搭建&#xff1b; 作为一个技术出身的设计人&#xff0c;今天我想跟大家一起来聊一聊目前市面上的洗鞋小程序&#xff0c;截止目前&#xff0c;我们闪站侠洗护软件已经累计服务用户2000 可以总结一下&#xff0c;目前市面上只要是宣称自己做互联网洗鞋的&#x…

MyBatis的使用

一.在创建Spring项目时引入MyBatis Framework和MySQL Driver; 二.下载插件&#xff1a;MyBatisX插件。 三.配置文件&#xff1a; 四.根据MyBatis写法完成数据库的操作 常规写法&#xff0c;包括两个文件&#xff1a; 1.接口&#xff1a;方法的声明&#xff08;给其他层调用&…

CAN/CANFD转WIFI设备解决近距离无线通讯问题

在现场应用中&#xff0c;各种情况都会出现&#xff0c;一些运动设备进行维护、下载、测试工作时&#xff0c;需要近距离无线收发CAN/CANFD报文。 港口应用中&#xff0c;控制室与吊机一没有办法通过有线连接&#xff0c;这时候就可以用无线来实现数据抓取。 例如某AGV小车厂…

java.lang.ClassCastException: android.os.BinderProxy cannot be cast to ...

项目开发遇到下面这个报错了&#xff01; 直接说原因&#xff0c;就是因为进程间不能直接传递对象&#xff0c;应该传递该Binder对象的映射&#xff08;代理对象&#xff09;&#xff0c;所以类型转换就出错了。如果在同一个进程中&#xff0c;直接传递对象没有关系&#xff0c…

手撕代码是程序员的基本功吗?

前言&#xff1a; 现在众多企业都要求在面试中用“手撕代码”来考验应聘者的代码能力&#xff0c;你觉得手敲代码是否可以体现真实的基础实力&#xff1f; 本期话题&#xff1a; 1、你觉得手撕代码是程序员的基本功吗&#xff1f; 2、为什么会用“手撕代码”来考验程序员能力&a…

vue3中v-html的使用时,出现<后面的字符串展示不出来

话不多说&#xff0c;直接上代码&#xff1a; 把<替换一下用&lt &#xff0c;这样就完美的解决问题了

神经网络 01(介绍)

一、神经网络 人工神经网络 (Artificial Neural Network&#xff0c;简写为ANN)也简称为神经网络 (NN)&#xff0c;是一种模仿生物神经网络结构和功能的 计算模型。人脑可以看做是一个生物神经网络&#xff0c;由众多的神经元连接而成。各个神经元传递复杂的电信号&#xff0c…

有趣不失风度:sdxl-emoji模型上线,在线生成苹果Memoji头像

苹果公司即将举行发布会&#xff0c;这是每年吸引全球关注的重大事件。在这期间&#xff0c;众多第三方软件也开始推出与苹果相关的应用程序。其中&#xff0c;sdxl-emoji是一款基于AI技术的绘图模型&#xff0c;已经上线&#xff0c;并且还开发了基于该模型的在线Demo。这款应…

springboot3 + java虚拟线程初体验

java虚拟线程介绍 虚拟线程是 Java 19 的 预览特性&#xff0c;估计会在Java 22被纳入 JDK 的正式版本中&#xff0c;会在2023年9月发布&#xff0c;目前springboot 3 已经提供了对虚拟线程的支持。 虚拟线程和平台线程主要区别在于&#xff0c;虚拟线程在运行周期内不依赖操…

【项目分析】仿linux0.11的操作系统内核

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了秋招面试的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于《操作系统 真象还原》及各大佬博客进行的&#xff0c;每个知识点的…

linux系统移植简要过程(移植bootloader引导加载程序---移植linux内核---制作根文件系统)

一.标准linux启动过程图 对于linux启动流程分析&#xff0c;我们需要移植bootloader引导加载程序---移植linux内核---制作根文件系统镜像文件&#xff1b; 二.为什么进行系统移植&#xff1f; 对于不同的硬件平台&#xff0c;linux系统启动流程大体相同&#xff0c;但是资源需求…

Multisim14.0仿真(十二)积分放大器

一、仿真原理图&#xff1a; 二、仿真效果图&#xff1a;