SpringBoot 7.SpringBoot 結合 Thymeleaf

時間 2019-11-11

標籤 springboot 7.springboot 結合 thymeleaf 欄目 Spring 简体版

原文原文鏈接

1、引入 Thymeleaf 依賴css

　　　　 <!-- Spring boot - thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- 引入此依賴，再設置 spring.thymeleaf.mode=LEGACYHTML5，能夠解決 thymeleaf 嚴格模式問題 -->
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
        </dependency>

2、在 application.properties 中對 Thymeleaf 進行配置html

# Thymeleaf
spring.thymeleaf.prefix=/WEB-INF/views/
spring.thymeleaf.suffix=.html
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false
spring.thymeleaf.mode=LEGACYHTML5java

　　設置後臺返回視圖url的前綴、後綴、以及 contentTypeweb

　　設置thymeleaf是否緩存以及其模式（HTML 和 LEGACYHTML5）。spring

當咱們使用 HTML 模式的時候，你在 thymeleaf 模板的 html 中若是使用了沒有閉合的 dom 標籤，那麼他就會報錯，所以須要加入上述所說的 nekohtml 依賴，以及設置對應的 mode爲 LEGACYHTML5。緩存

3、建立 index.htmlmybatis

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="ChengRuan" />

<title>title</title>
</head>
<body>
    <h1>Hello RCDDUP!!!</h1>
</body>
</html>

4、建立 PageController.javaapp

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="ChengRuan" />

<title>title</title>
</head>
<body>
    <h1 th:text="'Hello RCDDUP!!!'"></h1>
</body>
</html>

5、啓動 App.javadom

　　因爲我將 server.port設置爲9090，因此啓動的url爲：http://localhost:9090/indexide

　　好了，咱們成功使用了 Thymeleaf。

6、解決靜態資源（css、js等）問題

　　在 CustomWebMvcConfigurer.java 中重寫 addResourceHandlers() 方法。

　　能夠簡寫爲：registry.addResourceHandler("/images/**","/css/**","/js/**").addResourceLocations("/images/","/css/","/js/");

package org.rcddup.app.config;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
@MapperScan(basePackages = { "org.rcddup.app.dao" })
public class CustomWebMvcConfigurer extends WebMvcConfigurerAdapter {

　　// 靜態資源處理
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**").addResourceLocations("/images/");
        registry.addResourceHandler("/css/**").addResourceLocations("/css/");
        registry.addResourceHandler("/js/**").addResourceLocations("/js/");
        super.addResourceHandlers(registry);
    }
    
}

　　1.建立 main.css

　　而後咱們訪問：http://localhost:9090/css/main.css

　　在 index.html 中引入 main.css

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="ChengRuan" />

<link href="/css/main.css" rel="stylesheet">

<title>title</title>
</head>
<body>
    <h1 th:text="'Hello RCDDUP!!!'"></h1>
</body>
</html>