基于Thymeleaf与Bootstrap的Web开发实例

在进行Web开发中，尽量使用前端开发工具包BootStrap，jQuery和SpringMVC框架，下面学习一个基于Thymeleaf模板引擎的Spring Boot Web应用。

1-创建Maven项目，并在pom.xml文件中添加相关依赖。

    4.0.0

    org.example
    Thymeleaf
    1.0-SNAPSHOT
    
        
        org.springframework.boot
        spring-boot-starter-parent
        2.1.4.RELEASE
    
    
    
        
        org.springframework.boot
        spring-boot-starter-web
    

    
        org.springframework.boot
        spring-boot-starter-thymeleaf
    
    

2-在src/main/java目录下创建com.model包，在该包中创建实体模型类Book，在该类中定义书的信息，设置构造器，访问方法和修改方法。

public class Book {
    String isbn  ;
    Double price ;
    String bname ;
    String publishing ;
    String author ;
    String picture ;
    public Book(String isbn, Double price, String bname, String publishing, String author, String picture) {
        this.isbn = isbn;
        this.price = price;
        this.bname = bname;
        this.publishing = publishing;
        this.author = author;
        this.picture = picture;
    }

    public String getIsbn() {
        return isbn;
    }

    public void setIsbn(String isbn) {
        this.isbn = isbn;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    public String getBname() {
        return bname;
    }

    public void setBname(String bname) {
        this.bname = bname;
    }

    public String getPublishing() {
        return publishing;
    }

    public void setPublishing(String publishing) {
        this.publishing = publishing;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getPicture() {
        return picture;
    }

    public void setPicture(String picture) {
        this.picture = picture;
    }
}

3-在src/main/java目录下创建包com.controller,在该包中创建控制器类ThymeleafController。在该控制器类中实例化Book类的多个对象，并保存到集合ArrayList< Book >中，并暴露为模型数据，供视图页面获取。

import com.model.Book;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {
    @RequestMapping("/")
    public String index(Model model){
        Book book1 = new Book("1234", 56.0, "Java实用教程", "清华大学出版社", "耿老师", "1.jpg") ;
        List books = new ArrayList<>() ;
        Book book2 = new Book("1245", 55.0, "JavaWeb开发从入门到实战", "清华大学出版社", "陈老师", "2.png") ;
        books.add(book2) ;
        Book book3 = new Book("1236", 55.5, "JavaEE框架开发从入门到实践", "清华大学出版社", "陈老师", "3.jpg") ;
        books.add(book3) ;
        model.addAttribute("aBook", book1) ;
        model.addAttribute("bBook", books) ;
        //使用Thymeleaf模板，将默认返回src/main/resources/templates/index.html
        return "index" ;
    }
}

4-添加静态图片和引入Bootstrap框架。在src/main/resources目录创建static目录，在该目录下创建images目录和css目录，images目录中放入三张图片，css中引入bootstrap。

5-创建View视图页面。Tymeleadf模板默认将视图页面放在src/main/resources/templates目录下，因此在该目录下创建index.html视图页面，在该页面中使用Tymeleaf模板显示控制器类ThymeleafController中的model对象的数据。

    
    
    
    




    
    

        
        
第一个基于Thymeleaf的模板引擎的SpringBoot Web应用
    



    

        
图书列表
    

    
    

        
            
        
        
        

            

            

            

            

            

        
    
    
    

        
            
        
        

            

            

            

            

            

        
    

7.在src/nain/java下创建包com.test，在该包中编写启动类，运行启动类，然后 ，访问http://localhost:8080/

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication(scanbasePackages = {"com"})
public class TestApplication {
    public static void main(String[] args) {
        SpringApplication.run(TestApplication.class, args) ;
    }
}

8.运行结果如下：