本次项目所有能够使用的静态资源可以免费进行下载
在前端网页，是不是看见过这样的功能
基础网页：中文表示
点击下面的English 按钮网页显示文字开始切换
通过功能性按钮实现中英文切换，在浏览器中，都带着一个功能叫翻译功能，但是这种功能并不是所有的网页都能进行转换，为了增加用户的体验感我们可以自己在后端给网页添加一个功能让他进行语言的翻译，当然这里的翻译，翻译的内容不仅仅指的是中英文还可以进行其他语种的翻译，但是在中国最熟悉的就是中英文切换，所以咱们这里实现的功能则是以中英文这两个语种进行切换。
一：找到网页中存在的几个元素
这个索引网页就是黑框中的这几个元素，接下来实现的是在配置文件设置这些元素
创建配置文件，将元素全都添加到配置文件中
第一个配置文件login.properties存放着这几个元素
第二个配置文件则是在第一个配置文件的基础上，通过英文来表示
第三个则是通过中文表示内容
可以使用Resource Bundle:他的功能则是在一个界面来设置一个配置文件的不同显示
它可以实现的是在login.properties配置文件进行对一个关键字进行代码的同时设置，en_US则表示英文，zh_CN则表示中文对一个关键字进行多语种的设置。
在spring boot项目中的配置文件调用这个配置
spring: thymeleaf: cache: false进行模板缓存：实现的功能是，在idea项目中，如果修改的html静态资源的源代码，不需要重新启动该项目，只需要刷新页面就能够看到修改代码后的效果。
spring: messages: basename: i18n.login将上面创建的配置文件交给配置文件，前端用户访问，可以直接到配置文件中去找咱们需要的那些元素。
在代码实现之前，先介绍一个功能，thymeleaf
导入依赖：
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>之前在配置文件中创建的那些元素，如何将他交给网页，然后通过按钮实现调用呢？
原始网页_原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="asserts/css/signin.css" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin" action="dashboard.html">
<img class="mb-4" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label class="sr-only">Username</label>
<input type="text" class="form-control" placeholder="Username" required="" autofocus="">
<label class="sr-only">Password</label>
<input type="password" class="form-control" placeholder="Password" required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
<a class="btn btn-sm">中文</a>
<a class="btn btn-sm">English</a>
</form>
</body>
</html>这是一个特别干净的原始基础代码，并没有进行前后端交互。
那么如何将前面配置的内容，添加给它，实现前后端交互呢？
这时咱们就要刚才认识的功能：thymeleaf，关于这个功能的具体使用方法，这里就不进行讲解了，一搜都能够搜到这个模板使用的基础语法
修改后的网页文件
<!DOCTYPE html>
<html lang="en-US" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Login Page</title>
<!-- Bootstrap core CSS -->
<link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link th:href="@{/asserts/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin" action="dashboard.html">
<img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>
<label class="sr-only" th:text="#{login.username}">Username</label>
<input type="text" class="form-control" th:placeholder="#{login.username}" required="" autofocus="">
<label class="sr-only" th:text="#{login.password}">Password</label>
<input type="password" class="form-control" th:placeholder="#{login.password}" required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me">[[#{login.remrember}]]
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2023-2024</p>
<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>
</form>
</body>
</html>与原始代码的区别：
1：添加thymeleaf它的命名空间
<html lang="en-US" xmlns:th="http://www.thymeleaf.org">2：将配置文件中的配置属性添加到网页中：通过thymeleaf语法进行属性的添加
3:只要使用thymeleaf模板，那么在代码中链接文件的代码也需要进行修改
属性设置完成后，那如何实现中英文进行切换呢？
如何让后端知道前端用户，想要那种语言呢？
在网页有两个链接，我们只需要修改链接文件实现，数据的传送即可
<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>之前的网页传送数据是通过？来进行数据的传送，因为这个静态资源因为使用的是thymeleaf模板，索引大部分的代码都需在原本的基础上进行修改，这个数据传送也是如此。
来到这里，前端实现的功能，基本都已经完善了，接下来就是后端进行语种切换的问题了。
在这里我会直接上完成后的代码，那么代码为什么该如此这样实现，如果有想要了解的可以看博主的另外一个博客自定义组件，并将组件交给ioc进行管理
自定义转换器localeResolver(最为关键的一步）
package com.example.demo2.Config_file;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;
public class MylocalResolver implements LocaleResolver {
@Override
public Locale resolveLocale(HttpServletRequest request) {
String language = request.getParameter("l"); //获取前端链接传来的数据
//如果没有进行任何的代码设置，默认执行
Locale locale = Locale.getDefault();
if(StringUtils.hasText(language)==true){ //判断前端传来的数据是否为空
String[] s = language.split("_");
locale = new Locale(s[0],s[1]); //将传来的数据（就是前端用户想要什么界面的数据）交给locale类进行转换
}
return locale; //返回
}
@Override
public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
}
}
将自定义组件添加到IOC容器中，统一进行管理
@Bean
public LocaleResolver localeResolver(){
System.out.println("shuchu");
return new MylocalResolver();
}注意：有人到这一步发现自定义的组件并没有进行调用，注意一点 方法名一定要与类名一致，首字母小写其他的则不需要进行改变
执行项目，看自定义的组件有没有被调用，在此类的此一个方法添加一个断点，执行debug
查看debug：使用的类就是自定义说明组件添加成功
然后执行项目点击
内容发生切换，说明国际化完成，语种切换成功
5233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
