7、SpringBoot之實現登陸界面的中英切換

項目地址:https://github.com/Chakid/SpringBoot-example

1、第一步,創建一個SpringBoot項目

2、導入資料中的一些寫到的代碼和靜態頁面

1)在config文件中設置路由攔截:

2)、國際化

1)、編寫國際化配置文件;

2)、使用ResourceBundleMessageSource管理國際化資源文件

3)、在頁面使用fmt:message取出國際化內容

步驟:

1)、編寫國際化配置文件,抽取頁面需要顯示的國際化消息
image.png

然後我們將自己新建好的相關語言區域信息配合到頁面上:
如:

<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標籤

<html lang="en"  xmlns:th="http://www.thymeleaf.org">

此時,頁面的語言配置會根據瀏覽器的語言自動進行渲染

3、)下一步我們實現點擊按鈕實現語言的轉換

image.png

首先我們新建一個自己的配置類 MyLocalResolver
image

此時我們的配置還不能起作用,還有下一步操作:

然後啓動程序,就能進行語言切換了。
默認打開頁面:

點擊中文:

點擊英文:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章