i18n国际化登录页面

国际化是啥，一开始我也是一脸懵逼。了解了之后才知道，原来它相当于网站的翻译按钮。毕竟世界上有很多不同的语言，不可能每个人都会中文嘛，所以它的作用就体现出来了。
国际化又被称为i18n，因为internationalization(国际化)这个单词从i到n之间有18个英文字母，i18n的名字由此而来。
国际化一般用在项目中那些固定的文本元素，比如：登录、菜单栏、导航条、各种的提示信息、日期等等。
接下来就让我们开始吧，先说一下，我用的是idea开发，然后springboot加thymeleaf模板引擎。开始之前我们要统一一下idea的编码防止后面出现乱码。
首先点击file然后下面的settings

然后搜索File Encoding，全部改为utf-8

设置好了我们就可以弄国际化了，我就用个登录来说明一下是怎么写的吧。
首先在resources文件下面建一个i18n文件夹，我们国际化要写的东西就放到里面去。
我们按照国际化配置命名规范建一个login.properties，完了后再建一个中文的properties名为login_zh_CN.properties

要注意的一点是这个properties文件的名字是有规范的，一般的命名规范是：自定义名_语言代码_国别代码.properties，
如果是默认的，直接写为：自定义名.properties
当在中文操作系统下，如果login_zh_CN.properties、login.properties两个文件都存在，则优先会使用login_zh_CN.properties，当login_zh_CN.properties不存在时候，会使用默认的login.properties。
新建完了之后你会发现两个文件合在了一个叫Resource Bundle的文件夹里了，它的意思是资源捆绑包"<基础名称>"
，这时候我们再建一个英文的properties名为login_en_US.properties就可以了。

这里说一下我们给它的名字是啥：
Zh_CN代表的是中文，中国的意思
En_US代表的是英语，美国的意思
其实除了直接创建properties文件我们还可以在Resource Bundle上new一个出来。

然后点击加号，把我们要添加的语言简写加进去，它就可以自动创建一个文件了

我们的文件创建好了之后就可以在idea写我们要国际化的东西了。
点击箭头所指的地方

它可以方便我们统一编辑管理繁多的国际化文件
点击左上角的加号加一个key值。

添加完key值后我们就可以在右边写上我们要翻译的文字，写好后你会发现这三个文件里面都写好了，是不是很方便。

因为我们把i18n的配置文件放到了resources下面，所以我们要告诉它在哪里才能找到。
在我们的application.properties里面写上图下的东西

#国际化配置文件的真实位置
spring.messages.basename=i18n.login

然后我们就可以在登录页面改一下我们的代码了，由于我用的是thymeleaf模板引擎，它有一个#{…}表达式，用于国际化message.properties 属性读取，这样就方便很多了。
登录页面

<!doctype html>
<html lang="en" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>后台登录</title><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /><meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="stylesheet" th:href="@{/css/font.css}"><link rel="stylesheet" th:href="@{/css/login.css}"><link rel="stylesheet" th:href="@{/css/xadmin.css}"><script type="text/javascript" th:src="@{/js/jquery.min.js}"></script><script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
</head>
<body class="login-bg"><div class="login layui-anim layui-anim-up"><div class="message">[[#{login.tip}]]</div><div id="darkbannerwrap"></div><p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p><!--    如果msg的值为空，则不显示    --><form method="post" class="layui-form" th:action="@{/user/login}"><input name="username" th:placeholder="#{login.username}"  type="text" lay-verify="required" class="layui-input" ><hr class="hr15"><input name="password" lay-verify="required" th:placeholder="#{login.password}"  type="password" class="layui-input"><hr class="hr15"><input th:value="#{login.btn}" lay-submit lay-filter="login" style="width:100%;" type="submit"><hr class="hr20" ><a class="layui-btn layui-btn-xs" th:href="@{/login(l='zh_CN')}">中文</a><a class="layui-btn layui-btn-xs" th:href="@{/login(l='en_US')}">English</a></form></div><script></script>
</body>
</html>

最后在中文、英文的a标签哪里加一个连接

我们在config文件夹内创建类，实现localereslover接口重写国际化组件的方法,然后解析请求

package com.kuan.config;import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;public class MyLocaleResolver implements LocaleResolver {//解析请求@Overridepublic Locale resolveLocale(HttpServletRequest request) {//获取请求中的语言参数String language = request.getParameter("l");//System.out.println("Debug==>"+language);Locale locale = Locale.getDefault();//如果没有就使用默认的配置// 如果请求的连接携带了国际化的参数if (!StringUtils.isEmpty(language)){//zh_CN 根据_分割String[] split = language.split("_");//把分割的值取出来，国家 语言locale = new Locale(split[0],split[1]);}return locale;}@Overridepublic void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {}
}

最后在在mvcconfig配置一下Bean

package com.kuan.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class MyMvcConfig implements WebMvcConfigurer {@Overridepublic void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/").setViewName("login");registry.addViewController("/login").setViewName("login");registry.addViewController("/main").setViewName("index");}//自定义的国际化组件就生效了@Beanpublic LocaleResolver localeResolver(){return new MyLocaleResolver();}//拦截器@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**").excludePathPatterns("/login","/","/user/login","/css/*","/lib/**","/js/**","/images/**","/fonts/*");}
}

写完后我们启动一下
默认是中文，我们点击一下

它就变英文的了

今天就到这里了，下次再见(ಡωಡ)

i18n国际化登录页面相关推荐

i18n国际化（页面中英文切换）
1.基于jquery,先引入jQuery 2.引入jquery.i18n.js(这个源码应该不完全,但是能用) (function ($) {$.fn.extend({i18n: function ( ...
struts框架实现国际化（实现登录页面中英互换）
新建一个Web工程,并且搭好框架环境要求:Struts2框架环境搭建成功上次已经介绍了Struts2框架的搭建,在这里就不在介绍了.下面是实例化的一个例子,有需要的可以参考一下. 首先,先写jsp ...
【vue-element-admin】4.x 添加 i18n 国际化多语言切换
花裤衩前辈的vue-element-admin模块在4.x的大版本中去除了对i18n国际化的支持,本次因项目需要,在一个基于 vue-element-admin V4.2.1 版本模板开发的项目中,需 ...
cas服务器登录页面添加验证码
本文的是以cas-4.1.5进行的,cas源代码下载官网:https://apereo.github.io/cas/4.2.x/index.html. 1.在cas工程的web.xml增加验证码功能的 ...
java连接打印机访问被拒绝_java – 尝试访问spring security中的登录页面时访问被拒绝的异常...
我正在使用基于java的spring security.我创建了自定义访问决策选民impl. 但是当我运行应用程序时,我无法打开登录页面,因为它说,访问被拒绝. 这是在我添加自定义访问决策选民impl ...
keycloak 自定义登录页面
keycloak 自定义登录页面详细步骤如下: 因为keycloak是jboss开发的,使用FTL后缀开发前端文件,可能根据以下方式实现 keycloak将前端页面分为四类:按类设置主题. •Acco ...
一步一步理解 python web 框架，才不会从入门到放弃 -- 简单登录页面
上一节,我们基本了解了 Django 的一些配置,这一节,我们将通过一个简单的登录页面,进一步学习 Django 的使用. 新建项目首先,新建一个 Django 项目,记得别弄错了哦. settin ...
[小黄书管理平台]登录页面和模型驱动表单
上一章我们对小黄书管理平台实现了中文国际化的支持,让我们的管理平台可以根据浏览器当前的语言来自动显示中文或者英文. 本章我们计划开始看下ng2-admin的登录页面: 如何通过Formbuilder来 ...
Django admin登录页面验证码(1):普通字符和算术验证码
1.前言 django的登录界面默认只有用户名和密码输入框,没有额外的安全防护,如果在生产环境中不加登录验证码直接使用,是非常危险的,因为攻击者可以用特定程序不断的进行登录尝试,直至得出正确的登录密码 ...

i18n国际化登录页面

i18n国际化登录页面相关推荐

最新文章

热门文章