使用Thymeleaf把前端成果融合到SpringBoot項目中

一敌呈、創(chuàng)建Web項目

在項目的pox.xml中神妹，引入spring-boot-starter-web依賴。

 <!--web相關依賴-->
          <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-web</artifactId>
          </dependency></pre>

二磕仅、引入靜態(tài)資源

項目結構

項目結構.png

對于代碼類珊豹，項目類路徑classpath:/ = src\main\java\

對于靜態(tài)資源簸呈，項目類路徑classpath:/ = src\main\resources\

1.通過pom.xml依賴配置形式引入框架資源（Bootstrap.js）

webjars：表示以jar包的方式引入靜態(tài)資源。

到webjars官網查找所需引入的靜態(tài)資源及版本號店茶，拷貝對應的<dependency>標簽的內容到本項目的 pom.xml文件中進行引入蜕便，maven自動下載對應的jar包。

應用場景：常規(guī)的主流的前端框架贩幻。

資源訪問方式： http://localhost/webjars/ = classpath:/META-INF/resources/webjars/

2.在系統(tǒng)默認的靜態(tài)資源路徑下加入自定義的靜態(tài)資源（html轿腺、css 、js）

SpringBoot默認在檢索完所有的Controller的@RequestMapping("/……")后丛楚，如果都找不到映射處理吃溅，則默認會去以下路徑尋找靜態(tài)資源進行匹配：

classpath:/META-INF/resources/

classpath:/resources/

classpath:/static/

classpath:/public/

/：當前項目的根目錄下

應用場景： 自定義的靜態(tài)資源。

資源訪問方式： http://localhost/ = classpath:/resources/

拓展：自定義靜態(tài)資源目錄的路徑：

找到項目配置文件\src\main\resources\application.properties鸯檬，通過屬性spring.resources.static-locations進行設置宇攻，將會覆蓋以上默認的靜態(tài)資源路徑赢织。

例如：spring.resources.static-locations = classpath:/private/,classpath:/public/

（備注：spring.resources.static-locations 屬性實質是一個數(shù)組堤结，若要配置多個路徑甩十，使用狐史，號分割乾闰。）

3.為項目設置歡迎頁index.html

在resources的static目錄下新建index.html作為項目的歡迎入口（當用戶訪問根目錄時陨簇，自動跳轉到此index.html頁面）高氮。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      <h1>歡迎訪問本系統(tǒng)孽亲！</h1>
  </body>
  </html>

4.為項目設置自定義的葉簽圖標favicon.ico

SpringBoot默認在所有靜態(tài)資源下查找favicon.ico文件坎穿，若找到則自動替換。

三返劲、使用模板引擎把前端頁面融合到項目

由于SpringBoot項目是內置Tomcat玲昧，并且項目最終會編譯打包成jar包形式運行，因此對JSP支持并不友好篮绿。SpringBoot項目更推薦使用模板引擎的方式進行頁面開發(fā)孵延。

Web開發(fā)中的模板引擎是為了使[用戶界面]與業(yè)務數(shù)據(jù)（內容）分離而產生的，它可以生成特定格式的文檔亲配，用于網站的模板引擎就會生成一個標準的HTML文檔尘应。

分類：主流的有三種類型，分別為：“置換型”模板引擎 吼虎、“解釋型”模板引擎和“編譯型”模板引擎犬钢。

模板引擎原理圖.jpg

1.引入Thymeleaf依賴

在項目的pox.xml中，引入spring-boot-starter-Thymeleaf依賴思灰。

<!--web：thymeleaf模板引擎-->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-thymeleaf</artifactId>
         </dependency>
 ?
 <!--若要使用Thymeleaf3.0版本玷犹，則需要在<properties>中追加設置Thymeleaf版本號和Thymeleaf布局組件支持程序的版本號 -->
 <properties>
     <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
     <thymeleaf.layout-dialect.version>2.1.1</thymeleaf.layout-dialect.version>
 </properties>

2.把靜態(tài)資源引入到項目中

使用Thymeleaf模板引擎后，默認有如下設置：

模板文件的編碼格式：UTF-8
模板文件的格式類型：text/html
模板文件的默認路徑：classpath:/templates/
模板文件的默認后綴：.html

如果要修改Thymeleaf的配置官辈，可以修改項目的配置文件application.properties

  # Enable template caching.
  spring.thymeleaf.cache=true
  # Check that the templates location exists.
  spring.thymeleaf.check-template-location=true
  # Content-Type value.
  spring.thymeleaf.servlet.content-type=text/html
  # Enable MVC Thymeleaf view resolution.
  spring.thymeleaf.enabled=true
  # Template encoding.
  spring.thymeleaf.encoding=UTF-8
  # Comma-separated list of view names that should be excluded from resolution.
  spring.thymeleaf.excluded-view-names=
  # Template mode to be applied to templates. See also StandardTemplateModeHandlers.
  spring.thymeleaf.mode=HTML
  # Prefix that gets prepended to view names when building a URL.
  spring.thymeleaf.prefix=classpath:/templates/
  # Suffix that gets appended to view names when building a URL.
  spring.thymeleaf.suffix=.html

因此箱舞，我們只需把前端開發(fā)好的頁面及相關靜態(tài)資源拷貝到resources\templates\目錄下即可遍坟，頁面內容將由Thymeleaf模板引擎自動渲染，生成最終的.html晴股。

模板引擎組合過程.png

注意：resources\resources\和resources\templates\下雖然都是放html文件愿伴，但是它們之間有本質區(qū)別。

resources\resources\下放的是靜態(tài)資源电湘，用于<mark style="box-sizing: border-box; background: rgb(255, 255, 0); color: rgb(0, 0, 0);">Request直接訪問使用</mark>隔节；

resources\templates\下放的是模板文件，<mark style="box-sizing: border-box; background: rgb(255, 255, 0); color: rgb(0, 0, 0);">只有Controller能訪問</mark>寂呛。

例如：登錄成功后跳轉login_sucess.html

在resources\templates\目錄下新建login_sucess.html

  <!DOCTYPE html>
  <!--xmlns:th="http://www.thymeleaf.org"用于告訴編輯器怎诫，追加thymeleaf語法提示！ -->
  <html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      恭喜贷痪，您登錄成功幻妓！
  </body>
  </html>

3.控制器中增加直接訪問的路由

為了方便測試，我們先直接在UserController控制器中增加路由請求處理劫拢，使得我們通過路由地址直接就能訪問到·登錄成功頁面·肉津。

  import org.springframework.stereotype.Controller;
  ?
  @Controller
  public class UserController {
  ?
      @Autowired
      private IUserService userService;
  ?
      @RequestMapping("/user/login_sucess")
      public String login_sucess(){
          return "login_sucess";
      }
  }

測試：訪問http://localhost/user/login_sucess ，查看是否返回login_sucess.html頁面內容舱沧。