spring boot + Thymeleaf開發web項目

時間 2019-11-11

標籤 spring boot thymeleaf 開發 web 項目欄目 Spring 简体版

原文原文鏈接

「Spring boot很是適合Web應用程序開發。您能夠輕鬆建立自包含的HTTP應用。web服務器採用嵌入式Tomcat，或者Jetty等。大多數狀況下Web應用程序將使用css

spring-bootstarter-web模塊快速啓動和運行。」html

本例子經過顯示用戶列表展現如何使用spring boot和Thymeleaf開發web項目。java

幾點說明：git

Spring boot開發web項目，一般打成jar包，使用內置的web服務器 Tomcat、Jetty、undertow 來運行。
靜態資源（css、js、圖片等）默認放在resources/static下面。若是要修改默認存放目錄，能夠經過設置屬性 spring.mvc.static-path-pattern來實現。
模板文件默認放在 templates目錄下
Spring boot支持使用模板來開發web應用，支持的模板類型包括
- FreeMarker
- Groovy
- Thymeleaf
- Mustache

Spring boot不建議使用jsp開發web。github

本文使用Thymeleaf來做爲模板引擎開發web項目。web

Thymeleafspring

Thymeleaf是一個Java模板引擎開發庫，能夠處理和生成HTML、XML、JavaScript、CSS和文本，在Web和非Web環境下均可以正常工做。apache

Thymeleaf能夠跟Spring boot很好的集成。服務器

Spring Boot+Thymeleaf開發webmvc

建立spring boot項目

選擇spring boot和依賴，注意須要的依賴包括web和Thymeleaf

點擊finish。建立的項目結構以下：

其中SpringBootWebApplication.java是自動生成的。是程序啓動入口。

生成的POM.xml文件以下

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.yuny</groupId>
    <artifactId>myweb</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>Spring-boot-web</name>
    <description>web project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.9.RELEASE</version>
        <relativePath/>
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

增長實體User

public class User {
    private Integer id;
    private String name;
    private String age;
    private String address;
    //省略get和set方法、構造函數
}

增長UserController

@Controller
@RequestMapping("/user")
public class UserController {
    
    @RequestMapping("/{id}") 
    public String  getUser(@PathVariable Integer id,Model model) {
        
        model.addAttribute("user",new User(id,"張三",20,"中國廣州"));
        return "/user/detail";
    }
    
    @RequestMapping("/list")
    public String  listUser(Model model) {
        List<User> userList = new ArrayList<User>();
        for (int i = 0; i <10; i++) {
            userList.add(new User(i,"張三"+i,20+i,"中國廣州"));
        }
        
        model.addAttribute("users", userList);
        return "/user/list";
    }
}

增長模版文件list.html，注意模版文件是放在tempplates目錄下。本案例將文件放在/templates/user/下面。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<body>
  <h2>用戶列表</h2>
  <div>
     <ul>
         <li  th:each="user:${users}">
              <span th:text="${user.id}"></span>-
             <span th:text="${user.name}"></span>-
             <span th:text="${user.age}"></span>-
             <span th:text="${user.address}"></span>
         </li>
     </ul>
   </div>
</body>
</html>