springboot：springboot的web開發（靜態資源的處理方式、首頁和圖標定製、thymeleaf模板引擎初識）

時間 2020-09-14

標籤 springboot web 開發靜態資源處理方式首頁圖標定製 thymeleaf 模板引擎欄目 Spring 简体版

原文原文鏈接

一、靜態資源的處理方式html

（1）依賴的方式java

導入依賴：jquery

 <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.4.1</version>
  </dependency>

查看jquery文件位置，獲取jQuery文件：web

獲取jquery文件成功：spring

（2）在目錄中書寫springboot

查看源碼：mvc

能夠在resources目錄下建立三個目錄：app

其中resources目錄下的優先級最高，static其次，public最低jsp

二、首頁和圖標定製測試

（1）源碼

（2）首頁的書寫與訪問

在public、resources、static中的任意一個目錄放置首頁：

書寫首頁：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h3>下午好，如今是2020年9月13日16:42:26</h3>
</body>
</html>

測試運行：

（3）圖標

先在配置文件中關閉默認的圖標：

spring.mvc.favicon.enabled=false

導入圖標：

三、thymeleaf模板引擎

（1）概念

springboot是不支持jsp的，若是咱們直接用純靜態頁面，會給咱們開發會帶來很是大的麻煩，SpringBoot推薦咱們使用模板引擎。

（2）導入依賴

  <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
        </dependency>

（3）在templates目錄下建立html頁面

（4）在controller層書寫代碼跳轉到controller頁面

@Controller
public class TestController {
    @RequestMapping("/test")
    public String hello(){
        return "test";
    }
}

測試：

結論：只要須要使用thymeleaf，只須要導入對應的依賴就能夠了，咱們將html放在咱們的templates目錄下便可經過controller訪問到頁面
查看源碼：

（5）向模板寫入數據

書寫html格式的模板：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div th:text="${msg}"></div>
</body>
</html>

在controller層將數據寫入模板：

@Controller
public class TestController {
    @RequestMapping("/test")
    public String hello(Model model){
        model.addAttribute("msg","hello SpringBoot");
        return "test";
    }
}

測試：

四、thymeleaf語法

（1）遍歷

數據：

@Controller
public class TestController {
    @RequestMapping("/test")
    public String hello(Model model){
        model.addAttribute("users", Arrays.asList("tom","jack","zhai"));
        return "test";
    }
}

模板：

<body>
   <h3 th:each="user:${users}" th:text="${user}"></h3>
</body>

測試：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。