我們先來看一個html，帶有css的，我們就以這個為准來講解。
資源可以去我網盤下載
鏈接：https://pan.baidu.com/s/1Elm1PgYLxSeWo0MyKSuiAA
提取碼：lm6t
看看index.html里面的內容
<!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>
我們可以看到這幾個引用資源的
<link href="asserts/css/bootstrap.min.css" rel="stylesheet">
<link href="asserts/css/signin.css" rel="stylesheet">
<img class="mb-4" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">
現在，我們把這幾個文件移到我們的SpringBoot項目里面
我的index.html為了使用Thymeleaf的功能，放在了templates文件夾內，資源文件想引用，我放在了public文件夾下，因為Thymeleaf是不允許外部訪問的
現在我們開始引用webjar了
什么是webjar
什么是webjar？webjar就是一些前端的資源，比如Jquery，Bootstrap什么的，都打包成了jar包
為什么要使用webjar？因為單純的使用jquery，bootstrap，多人協作開發的時候，可能會面臨版本不一致的問題，以及放的位置不一樣的問題，為了解決這個問題，webjar出現了，你需要去webjar的網站找到maven引用，直接放在pom.xml里面就可以了，這樣你也不用去下載了，也不用導入項目了。
怎么使用webjar
使用Thymeleaf的功能，利用@{}
<link href="../asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
<link href="../asserts/css/signin.css" th:href="@{../asserts/css/signin.css}" rel="stylesheet">
<img class="mb-4" src="../asserts/img/bootstrap-solid.svg" th:src="@{../asserts/img/bootstrap-solid.svg }" alt="" width="72" height="72">
這樣，就可以用了。
運行項目，是ok的(我現在突然忘了，為什么index.html在templates文件下也能訪問了)
國際化
換成webjar之后，我們的頁面是這樣的
可以看到，是英文的，但是我們想要可以切換語言，有中文，英文的切換。這就是國際化
新建國際化配置文件
首先，我們要新建國際化的配置文件，在resources文件下新建一個文件夾i18n，然后下面新建login.properties，再新建login_zh_CN.properties，你會發現，Idea自動識別了，給我們創建了Resource Bundle 'login'，我們再新建一個en_US
配置配置文件
這里有一個需要提醒的地方，先把你的Idea的文件格式設定為UTF-8，不然你寫中文，會亂碼，一定要先做這個！
| 注意：要先設置Idea的所有文件格式為UTF-8 |
隨便點一個配置文件，點下面的第二個Resource Bundle，然后可以新建了，根據我們頁面上需要國際化的文字，有標題，用戶名，密碼，登錄按鈕，記住信息等幾個需要翻譯的，我們都寫出來。
右邊很直觀，英文是咋樣的，中文是咋樣的，默認是咋樣的。你就自己配置吧
使用配置文件
配置完成之后，我們使用一下國際配置文件
<!DOCTYPE html>
<html lang="en" 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>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../asserts/css/signin.css" th: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" 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" placeholder="Username" required="" autofocus="">
<label class="sr-only" th:text="#{login.passWord}">Password</label>
<input type="password" class="form-control" placeholder="Password" required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me" > [[#{login.RemeberMe}]]
</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">© 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>
</html>
這個是最終的文檔類型，我們使用了Thymeleaf的 th.text="#{login.userName}"這樣的格式來調用我們上面配置的，會有提示的。input標簽不能使用 th:text，所以寫成[[#{login.RemeberMe}]]
要在配置文件配置
spring:
messages:
basename: i18n/login
現在，我們重新啟動項目，根據更改瀏覽器的語言信息就發現，我們已經可以切換語言了
現在，有一個新的需求，登錄頁面下有兩個漢字，中文和英文。
我希望點擊中文，就切換到中文。點擊英文，就切換到英文。
想實現這個功能，就需要了解，中英文切換是根據Locale來決定的，我們可以寫一個類，來判斷
首先，在頁面的中英文切換這里，加上語言信息
<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>
然后新建一個判斷的類
package com.vae.springboot.study.component;
import org.springframework.context.annotation.Bean;
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 httpServletRequest) {
String l = httpServletRequest.getParameter("l");
Locale locale = Locale.getDefault();
if (StringUtils.isEmpty(l)) {
String [] split=l.split("_");
locale = new Locale(split[0],split[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
}
}
把這個類寫到一個配置類里面去，其實這一點我不是太懂。留着以后看吧
