Spring Boot进阶系列三

Thymeleaf是官方推荐的显示引擎，这篇文章主要介绍怎么让spring boot整合Thymeleaf.  它是一个适用于Web和独立环境的现代服务器端Java模板引擎。

Thymeleaf的主要目标是给开发工作流程带来优雅的自然模板 - 可以在浏览器中正确显示的HTML，也可以用作静态原型，从而在开发团队中实现更强大的协作。通过Spring Framework模块，与喜欢的工具的集成，Thymeleaf是HTML5 JVM Web开发的理想选择。

 

1.自然模板官方示例

用Thymeleaf编写的HTML模板看起来和HTML一样工作

<table>
  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Name</th>
      <th th:text="#{msgs.headers.price}">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="prod: ${allProducts}">
      <td th:text="${prod.name}">Oranges</td>
      <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td>
    </tr>
  </tbody>
</table>

 

2.项目结构

2.1 主要功能还是添加一本书，查看一本书的明细，以及返回所有的书籍。这次项目中用到两个数据表。

CREATE TABLE `book` (
  `Id` int(11) NOT NULL AUTO_INCREMENT,
  `Name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `Category` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `Price` decimal(18,2) NOT NULL,
  `Publish_Date` date NOT NULL,
  `Poster` varchar(128) NOT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=87 DEFAULT CHARSET=utf8

CREATE TABLE `author` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(45) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `phone` varchar(16) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(45) COLLATE utf8_unicode_ci NOT NULL,
  `book_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci

 

2.2 和系列二中的示例几乎一样，多了一个templates文件夹用来存放thymeleaf文件。

需要在application.properties文件中添加以下内容：

 

spring.thymeleaf.cache=true
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html

 

2.3 项目用到的技术如下，

•   Spring-Data-JPA
•   H5
•   Bootstrap
•   Thymeleaf
•   数据库依旧是MySQL

2.4 项目逻辑架构图

 

2.5 完整的pom.xml如下，

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- jdbc -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!-- springboot,jpa 整合包 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <!-- mysql 驱动包 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <!--根据MySQL server 版本实际情况变动 -->
            <version>8.0.17</version><!--$NO-MVN-MAN-VER$ -->
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

3.后端服务层

3.1 在com.example.demo.model包中新建Author,Book,BookViewModel类，

@Entity
public class Author implements Serializable {
    private static final long serialVersionUID = -3523362375538074534L;
    @Id
    private Integer id;
    private String name;
    private String phone;
    private String email;
    private Integer bookId;
} //省略getter & setter方法

@Entity
public class Book implements Serializable {
    private static final long serialVersionUID = -3123479062966697145L;
    @Id
    private Integer id;
    private String name;
    private String category;
    private Double price;
    private Date publish_date;
    private String poster;
} //省略getter & setter方法

public class BookViewModel {
    private Book book;
    private Author author;
} //省略getter & setter方法

3.2 在com.example.demo.store包中，新建AuthorRepository，BookRepository接口

public interface BookRepository extends JpaRepository<Book,Integer> {
    @Query(value = "SELECT * FROM book order by Id desc", nativeQuery = true)
    List<Book> findBooks();
}

public interface AuthorRepository extends JpaRepository<Author, Integer> {
    Author findByBookId(Integer bookId);
}

3.3 在com.example.demo.controller包中创建BookController类，

@Controller
@RequestMapping(path = "/book")
public class BookController {

    @Autowired
    private BookRepository bookRepository;
    
    @Autowired
    private AuthorRepository authorRepository;
    
    @Value("${upload.path}")
    private String filePath;
    
    @GetMapping(path="/add")
    public ModelAndView add() {
        ModelAndView modelAndView = new ModelAndView("add");
        return modelAndView;
    }

    @PostMapping(path = "/save")
    public String save(HttpServletRequest request, @RequestParam("inputPoster") MultipartFile inputPoster) {

        String tempPath = filePath;
        String name = request.getParameter("inputName");
        String category = request.getParameter("categorySelect");
        Double price = Double.valueOf(request.getParameter("inputPrice"));
        // Give today as a default date
        Date publishDate = new Date();
        String temp = request.getParameter("inputDate");
        DateFormat formatDate = new SimpleDateFormat("yyyy-MM-dd");
        // Test only
        try {
            publishDate = formatDate.parse(temp);
        } catch (ParseException e2) {
            // TODO Auto-generated catch block
            e2.printStackTrace();
        }
        // Handle uploading picture
        String fileName = inputPoster.getOriginalFilename();
        String suffixName = fileName.substring(fileName.lastIndexOf('.'));
        fileName = UUID.randomUUID() + suffixName;
        String posterPath = "image/" + fileName;
        Book book = new Book();
        book.setId(0);
        book.setName(name);
        book.setCategory(category);
        book.setPrice(price);
        book.setPublish_date(publishDate);
        book.setPoster(posterPath);
        
        tempPath += fileName;
        try {
            inputPoster.transferTo(new File(tempPath));
            bookRepository.save(book);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return "redirect:/book/all";
    }

    @GetMapping(path = "/all")
    public ModelAndView findAll() {
        ModelAndView modelAndView = new ModelAndView("home");
        Iterable<Book> books = bookRepository.findBooks();
        modelAndView.addObject("bookList", books);
        return modelAndView;
    }
    
    
    @GetMapping(path="view/{id}")
    public ModelAndView view(@PathVariable Integer id) {
        ModelAndView mv = new ModelAndView("view");
        Optional<Book> optional = bookRepository.findById(id);
        Book book = optional.orElseGet(Book::new);
        Author author = authorRepository.findByBookId(id);
        if(author == null) {
            author = new Author();
        }
        BookViewModel bookViewModel = new BookViewModel();
        bookViewModel.setAuthor(author);
        bookViewModel.setBook(book);
        mv.addObject("bookView",bookViewModel);
        return mv;
        
    }
}

3.4 在com.example.demo.config 包中的WebConfig类和示例二中完全一样，此处省略不提。

4.前端显示层

在templates文件夹里面添加三个文件，分别是home.html, add.html, view.html.

4.1 home.html

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"></meta>
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"></meta>

<!-- Bootstrap CSS -->
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous"></link>

<title>Index Page</title>
</head>
<body>
    <div class="container">
        <h1>Springboot进阶系列三</h1>

        <!-- Content here -->
        <div class="table-responsive">
            <table class="table table-striped table-sm" id="books">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="book : ${bookList}">
                        <td th:text="${book.id}"></td>
                        <td th:text="${book.name}"></td>
                        <td th:text="${book.category}"></td>
                        <td th:text="${book.price}"></td>
                        <td><a class="btn btn-outline-primary"
                            th:href="@{/book/view/{id}(id=${book.id})}" role="button">View</a>
                            <a class="btn btn-outline-primary"
                            th:href="@{/book/edit/{id}(id=${book.id})}" role="button">Edit</a>
                            <a class="btn btn-outline-primary"
                            th:href="@{/book/delete/{id}(id=${book.id})}" role="button">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <a href="/book/add" class="btn btn-outline-primary" role="button"
            aria-pressed="true">Add Book</a>
    </div>
</body>
</html>

4.2 add.html

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"></meta>
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"></meta>

<!-- Bootstrap CSS -->
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous"></link>

<title>Add Book</title>
</head>
<body>
    <div class="container">
        <h1>Springboot进阶系列三</h1>
        <!-- Content here -->
        <form action="/book/save" method="POST" enctype="multipart/form-data">
            <div class="form-group row">
                <label for="inputName" class="col-sm-2 col-form-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="inputName"
                        placeholder="Name">
                </div>
            </div>
            <div class="form-group row">
                <label for="categorySelect" class="col-sm-2 col-form-label">Category</label>
                <div class="col-sm-10">
                    <select class="form-control" name="categorySelect">
                        <option>武侠</option>
                        <option>历史</option>
                        <option>军事</option>
                        <option>国学</option>
                        <option>投资</option>
                        <option>管理</option>
                        <option>传记</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPrice" class="col-sm-2 col-form-label">Price</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="inputPrice"
                        placeholder="Price">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputDate" class="col-sm-2 col-form-label">Publish
                    Date</label>
                <div class="col-sm-10">
                    <input type="date" class="form-control" name="inputDate" />
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPoster" class="col-sm-2 col-form-label">Poster</label>
                <div class="col-sm-10">
                    <input type="file" class="form-control" name="inputPoster" />
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-10">
                    <button type="submit" class="btn btn-outline-primary">Save</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

4.3 view.html

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"></meta>
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"></meta>

<!-- Bootstrap CSS -->
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous"></link>

<title>View Book</title>
</head>
<body>
    <div class="container">
        <h1>Springboot进阶系列三</h1>
        <!-- Content here -->
        
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:value="${bookView.Book.name}">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Category</label>
                <div class="col-sm-10">
                    <select class="form-control" th:value="${bookView.Book.category}">
                        <option>武侠</option>
                        <option>历史</option>
                        <option>军事</option>
                        <option>国学</option>
                        <option>投资</option>
                        <option>管理</option>
                        <option>传记</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Price</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:value="${bookView.Book.price}">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Publish
                    Date</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:value="${#dates.format(bookView.Book.publish_date,'yyyy-MM-dd')}" />
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPoster" class="col-sm-2 col-form-label">Poster</label>
                <div class="col-sm-10">
                    <img th:src="${'../../' + bookView.Book.poster}" alt="Poster"></img>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Author</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:value="${bookView.Author.name}">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Phone</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:value="${bookView.Author.phone}">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" th:value="${bookView.Author.email}">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-10">
                    <a href="/book/all" class="btn btn-outline-dark" role="button" aria-pressed="true">Back</a>
                </div>
            </div>

    </div>
</body>
</html>

5.运行程序

浏览器中输入http://localhost:8080/book/all，显示如下，

 

点击 Add Book按钮，跳转到add.html页面，