Thymeleaf常用功能实战

水深无声 2021-07-25 02:04 442阅读 0赞

**一 Pom**

<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>org.fkit</groupId>
         <artifactId>thymeleaftest</artifactId>
         <version>0.0.1-SNAPSHOT</version>
         <packaging>jar</packaging>
         <name>thymeleaftest</name>
         <url>http://maven.apache.org</url>
         
         <parent>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-starter-parent</artifactId>
               <version>2.0.0.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-web</artifactId>
               </dependency>
               
               <dependency>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-thymeleaf</artifactId>
               </dependency>
               <dependency>
                    <groupId>junit</groupId>
                    <artifactId>junit</artifactId>
                    <scope>test</scope>
               </dependency>
         </dependencies>
    </project>

**二 启动类**

package org.fkit.thymeleaftest;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    //@SpringBootApplication指定这是一个 spring boot的应用程序.
    @SpringBootApplication
    public class App
    {
        public static void main( String[] args )
        {
            // SpringApplication 用于从main方法启动Spring应用的类。
            SpringApplication.run(App.class, args);
        }
    }

**三 控制器**

1 IndexController

package org.fkit.thymeleaftest.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    
    @Controller
    public class IndexController {
    
    
        @RequestMapping("/")
        public String index(){
            System.out.println("IndexController index方法被调用......");
            return "index";
        }
    }

2 ThymeleafController

package org.fkit.thymeleaftest.controller;
    
    
    import java.util.ArrayList;
    import java.util.List;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpSession;
    import org.fkit.thymeleaftest.domain.Book;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.context.request.RequestAttributes;
    import org.springframework.web.context.request.WebRequest;
    
    
    @Controller
    public class ThymeleafController {
        
        /*
         * 保存数据到作用范围域，用于测试Thymeleaf表达式访问数据
         * */
        @RequestMapping("/regexptest")
        public String regexptest(
                HttpServletRequest request,
                HttpSession session){
            System.out.println(request.getParameter("loginName"));
            System.out.println(request.getParameter("password"));
            // 保存数据到request作用范围域当中
            request.setAttribute("book", "疯狂Spring Boot讲义");
            // 保存数据到session作用范围域当中
            session.setAttribute("school", "疯狂软件");
            // 保存数据到ServletContext（application）作用范围域当中
            request.getServletContext().setAttribute("name", "Thymeleaf模板引擎");
            return "success1";
        }
    
    
        /*
         * 保存数据到作用范围域，用于测试Thymeleaf的条件判断
         * */
        @RequestMapping("/iftest")
        public String iftest(WebRequest webRequest){
            // 保存数据到request作用范围域，Spring MVC更推荐使用WebRequest
            webRequest.setAttribute("username", "fkit", RequestAttributes.SCOPE_REQUEST);
            webRequest.setAttribute("age", 21, RequestAttributes.SCOPE_REQUEST);
            webRequest.setAttribute("role", "admin", RequestAttributes.SCOPE_REQUEST);
            return "success2";
        }
        
        /*
         * 保存数据到作用范围域，用于测试Thymeleaf的循环获取数据
         * */
        @RequestMapping("/eachtest")
        public String eachtest(WebRequest webRequest){
            // 模拟数据库数据保存到List集合
            List<Book> books = new ArrayList<>();
            books.add(new Book(1, "疯狂Java讲义", "java.jpg", "李刚 编著", 109.00));
            books.add(new Book(2, "轻量级Java EE企业应用实战", "ee.jpg", "李刚 编著", 108.00));
            books.add(new Book(3, "Spring+MyBatis应用实战", "SpringMyBatis.jpg", "疯狂软件 编著", 58.00));
            books.add(new Book(4, "疯狂Android讲义", "android.jpg", "李刚 编著", 108.00));
            books.add(new Book(5, "疯狂Ajax开发", "ajax.jpg", "李刚 编著", 79.00));
            // 保存数据到request作用范围域
            webRequest.setAttribute("books", books, RequestAttributes.SCOPE_REQUEST);
            return "success3";
        }
        
    }

**四 实体类**

package org.fkit.thymeleaftest.domain;
    import java.io.Serializable;
    public class Book implements Serializable {
         
         private static final long serialVersionUID = 1L;
         
         private Integer id;
         private String title;
         private String image;
         private String author;
         private Double price;
         
         public Book() {
               super();
               // TODO Auto-generated constructor stub
         }
         
         public Book(Integer id, String title, String image, String  author, Double price) {
               super();
               this.id = id;
               this.title = title;
               this.image = image;
               this.author = author;
               this.price = price;
         }
         public Integer getId() {
               return id;
         }
         public void setId(Integer id) {
               this.id = id;
         }
         public String getTitle() {
               return title;
         }
         public void setTitle(String title) {
               this.title = title;
         }
         public String getImage() {
               return image;
         }
         public void setImage(String image) {
               this.image = image;
         }
         public String getAuthor() {
               return author;
         }
         public void setAuthor(String author) {
               this.author = author;
         }
         public Double getPrice() {
               return price;
         }
         public void setPrice(Double price) {
               this.price = price;
         }
         
         @Override
         public String toString() {
               return "Book [id=" + id + ", title=" + title + ",  image=" + image + ", author=" + author + ", price=" + price
                         + "]";
         }
         
         
    }

**五 模板**

1 index.html

2 success1.html

3 success2.html

4 success3.html

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8"></meta>
    <title>thymeleaf示例</title>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"  />
    <script type="text/javascript"  th:src="@{js/jquery-1.11.0.min.js}"></script>
    <script type="text/javascript"  th:src="@{js/bootstrap.min.js}"></script>
    </head>
    <body>
         <div class="panel panel-primary">
               
               <div class="panel-heading">
                    
                    <h3 class="panel-title">Thymeleaf循环</h3>
               </div>
         </div>
         <div class="container">
               <div class="col-md-12">
                    <div class="panel panel-primary">
                         <div class="panel-heading">
                               <h3 class="panel-title">图书信息列表</h3>
                         </div>
                         <div class="panel-body">
                               
                               <div class="table table-responsive">
                                    
                                    <table class="table  table-bordered table-hover">
                                         <thead>
                                               <th  class="text-center">封面</th>
                                               <th  class="text-center">书名</th>
                                               <th  class="text-center">作者</th>
                                               <th  class="text-center">价格</th>
                                         </thead>
                                         <tbody  class="text-center">
                                               <tr th:each="book :  ${books}">
                                                    <td><img  src="img/java.jpg"
                                                         th:src="@{'img/'+${book.image}}" height="60" /></td>
                                                    <td  th:text="${book.title}">书名</td>
                                                    <td  th:text="${book.author}">作者</td>
                                                    <td  th:text="${book.price}">价格</td>
                                               </tr>
                                         </tbody>
                                    </table>
                               </div>
                         </div>
                    </div>
               </div>
         </div>
    </body>
    </html>

**六 测试**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/075cb1bbd97e43a8a71888ce4347d017.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/7c805ded4bc342d5bdd9ec43e68c57f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/70de37b255f4475a953fc918c534a796.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: /images/20210724/0c96806aead24e7fbfa3544f85edd629.png