SpringBoot筆記十三：引入webjar資源和國際化處理

時間 2019-11-18

標籤 springboot 筆記十三引入 webjar 資源國際化處理欄目 Spring 简体版

原文原文鏈接

目錄css

咱們先來看一個html，帶有css的，咱們就以這個爲準來說解。html

資源能夠去我網盤下載前端

連接：https://pan.baidu.com/s/1Elm1PgYLxSeWo0MyKSuiAA
提取碼：lm6tjava

看看index.html裏面的內容jquery

<!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>

咱們能夠看到這幾個引用資源的web

<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項目裏面spring

個人index.html爲了使用Thymeleaf的功能，放在了templates文件夾內，資源文件想引用，我放在了public文件夾下，由於Thymeleaf是不容許外部訪問的bootstrap

如今咱們開始引用webjar了瀏覽器

什麼是webjar

什麼是webjar？webjar就是一些前端的資源，好比Jquery，Bootstrap什麼的，都打包成了jar包springboot

爲何要使用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) {

    }
}

把這個類寫到一個配置類裏面去，其實這一點我不是太懂。留着之後看吧