这里用到的登录页是从BootStrap中文官网下载的模板https://v4.bootcss.com/docs/examples/，选中图中的Download Examples：
原始的首页如下图所示：
接下来要将该页面移到SpringBoot项目中，暂且作为首页，然后将其中涉及到的的一些静态资源（如js、css、图片等）放入static目录下：
然后将index.html放入templates目录下，打开index.html，将href属性用thymeleaf接管：
<!-- Bootstrap core CSS -->
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link th:href="@{/css/signin.css}" rel="stylesheet">这种静态资源的链接使用@符号，大括号里直接写static下的路径即可。图片的位置也应该使用thymeleaf接管：
<img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">接下来做国际化。在resources目录下新建i18n目录，i18n表示international的意思，因为首字母i和末字母n之间有18个字母，这种表示方法与k8s类似。然后新建login目录，表示存放登录相关的国际化属性值，再在login目录中新建login.propertites、login_zh_CN.properties、login_en_US.properties（新建完之后，login将会自动被SpringBoot视为一个bundle），属性名和值可以自定义。然后在application.properties中添加国际化配置：
spring.messages.basename=i18n.login.login然后在index.html中引入国际化，与引用静态资源的路径使用@符号不同，国际化语句的引用使用#，例如，“请登录”的国际化方式如下：
<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.please}"></h1>做国际化之前，该语句是这样的：
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>这种国际化是将原本的文本值移到属性th:text内，但有的标签不能这样做，比如按钮，国际化之前如下图：
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>国际化后应是下图所示：
<button class="btn btn-lg btn-primary btn-block" type="submit" >[[#{login.sign}]]</button>input标签文本的国际化也要使用双中括号的形式 ，不能移到属性内，但是如果属性是placeholder就可以：
<input type="text" id="inputUsername" class="form-control" name="username" th:placeholder="#{login.username}" required autofocus><input type="password" id="inputPassword" class="form-control" name="password" th:placeholder="#{login.password}" required>注意上述操作之前别忘了添加thymeleaf命名空间：
<html lang="en" xmlns:th="http://www.thymeleaf.org">启动SpringBoot即可预览首页：
上述过程中可能会出现乱码的问题，要确保IDEA的properties文件的编码格式为utf-8，设置在Intellij IDEA-Preferences-File Encodings（此为Mac版本的路径，Windows版本的路径为Settings-File Encodings）中：
如果乱码还未解决，请检查application.properties中配置中的spring.messages.basename属性值是否正确，一定要是login bundle的路径，有些版本的SpringBoot可能需要将路径中的.换成/。
下面实现语言的切换，即点击中文显示中文页面，点击English显示英文页面。首先给两个a标签添加href属性：
<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>其中小括号里的内容表示携带的参数，即点击中文，参数l为zh_CN，点击English，参数l为en_US。然后创建自定义的语言解析类MyLocaleResolver实现LocaleResolver接口：
public class MyLocaleResolver implements LocaleResolver {
@Override
public Locale resolveLocale(HttpServletRequest httpServletRequest) {
String language = httpServletRequest.getParameter("l");
if (!StringUtils.isEmpty(language)) {
String[] splits = language.split("_");
return new Locale(splits[0], splits[1]);
}
return Locale.getDefault();
}
@Override
public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
}
}在实现了WebMvcConfigurer接口的自定义类MyConfig（添加了@Configuration注解）中添加方法localeResolver，注意方法名一定要为localeResolver，换成其他名字就实现不了语言切换。
@Bean
public LocaleResolver localeResolver() {
return new MyLocaleResolver();
}该方法返回自定义语言解析类MyLocaleResolver的对象，并通过@Bean注解将该对象注入到Spring容器中。最终即可实现点击不同语言实现网页不同语言的切换。
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
