7、SpringBoot之实现登陆界面的中英切换

怼烎@ 2021-12-24 11:31 166阅读 0赞

#### 项目地址：https://github.com/Chakid/SpringBoot-example ####

#### 1、第一步，创建一个SpringBoot项目 ####

#### 2、导入资料中的一些写到的代码和静态页面 ####

##### 1）在config文件中设置路由拦截： #####

![format_png][]

### 2）、国际化 ###

**1）、编写国际化配置文件；**

2）、使用ResourceBundleMessageSource管理国际化资源文件

3）、在页面使用fmt:message取出国际化内容

步骤：

1）、编写国际化配置文件，抽取页面需要显示的国际化消息  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6amxnaG5kY3k_size_16_color_FFFFFF_t_70_pic_center][]

然后我们将自己新建好的相关语言区域信息配合到页面上：  
如：

<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" 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}" placeholder="Username" required="" autofocus="">
    			<label class="sr-only" th:text="#{login.password}" >Password</label>
    			<input type="password" class="form-control" th:placeholder="#{login.password}" placeholder="Password" required="">
    			<div class="checkbox mb-3">
    				<label>
              <input type="checkbox" value="remember-me" /> [[#{login.remember}]]
            </label>
    			</div>
    			<button class="btn btn-lg btn-primary btn-block" th:text="#{login.btn}" type="submit">Sign in</button>
    			<p class="mt-5 mb-3 text-muted">© 2017-2018</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>

记得在上面加上`thymeleaf`标签

此时，页面的语言配置会根据浏览器的语言自动进行渲染

### 3、）下一步我们实现点击按钮实现语言的转换 ###

![image.png][]

首先我们新建一个自己的配置类 `MyLocalResolver`：  
![image][]

此时我们的配置还不能起作用，还有下一步操作：  
![format_png 1][]  
然后启动程序，就能进行语言切换了。  
默认打开页面：  
![format_png 2][]

点击中文：  
![format_png 3][]

点击英文：  
![format_png 4][]

[format_png]: /images/20211224/b19f333dadd64b14b60ec61e8605e0bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6amxnaG5kY3k_size_16_color_FFFFFF_t_70_pic_center]: /images/20211224/b0395799c49e4475abed1903959b4c06.png
[image.png]: /images/20211224/d0c33299dcd94b5e8c4dc59c14c555c8.png
[image]: /images/20211224/47300321d7ba4479a04845aadc8e6013.png
[format_png 1]: /images/20211224/d908aa46764e4aac9de7a2419763b801.png
[format_png 2]: /images/20211224/3d89af1b084545ddb5390d99cdae1178.png
[format_png 3]: /images/20211224/ea64c99183e04628bf773085da9c83ac.png
[format_png 4]: /images/20211224/ac07557a91b94df09fdf3fa3577060ec.png