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页面，

Spring Boot进阶系列三的更多相关文章

  1. Spring Boot进阶系列一

    笔者最近在总结一个 Spring Boot实战系列,以方便将来查找和公司内部培训用途. 1.Springboot从哪里来 SpringBoot是由Pivotal团队在2013年开始研发.2014年4月 ...

  2. Spring Boot进阶系列二

    上一篇文章,主要分析了怎么建立一个Restful web service,系列二主要创建一个H5静态页面使用ajax请求数据,功能主要有添加一本书,请求所有书并且按照Id降序排列,以及查看,删除一本书 ...

  3. Spring Boot进阶系列四

    这边文章主要实战如何使用Mybatis以及整合Redis缓存,数据第一次读取从数据库,后续的访问则从缓存中读取数据. 1.0 Mybatis MyBatis 是支持定制化 SQL.存储过程以及高级映射 ...

  4. 【转】Spring Boot干货系列：（三）启动原理解析

    前言 前面几章我们见识了SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说,如果不大懂SpringBoot内部启动原理,以后难免会吃亏.所以这次博主就跟你们一起一步步揭开Sprin ...

  5. Spring Boot干货系列：（三）启动原理解析

    Spring Boot干货系列:(三)启动原理解析 2017-03-13 嘟嘟MD 嘟爷java超神学堂 前言 前面几章我们见识了SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说 ...

  6. Spring Boot干货系列：（七）默认日志框架配置

    Spring Boot干货系列:(七)默认日志框架配置 原创 2017-04-05 嘟嘟MD 嘟爷java超神学堂 前言 今天来介绍下Spring Boot如何配置日志logback,我刚学习的时候, ...

  7. Spring Boot干货系列：（五）开发Web应用JSP篇

    Spring Boot干货系列:(五)开发Web应用JSP篇 原创 2017-04-05 嘟嘟MD 嘟爷java超神学堂 前言 上一篇介绍了Spring Boot中使用Thymeleaf模板引擎,今天 ...

  8. Spring Boot干货系列：（四）Thymeleaf篇

    Spring Boot干货系列:(四)Thymeleaf篇 原创 2017-04-05 嘟嘟MD 嘟爷java超神学堂 前言 Web开发是我们平时开发中至关重要的,这里就来介绍一下Spring Boo ...

  9. Spring Boot 项目学习 (三) Spring Boot + Redis 搭建

    0 引言 本文主要介绍 Spring Boot 中 Redis 的配置和基本使用. 1 配置 Redis 1. 修改pom.xml,添加Redis依赖 <!-- Spring Boot Redi ...

随机推荐

  1. 利用kibana学习 elasticsearch restful api (DSL)

    利用kibana学习 elasticsearch restful api (DSL) 1.了解elasticsearch基本概念Index: databaseType: tableDocument: ...

  2. php使用imagettftext()函数有干扰线但是没有文字的问题解决

    public function code() { //主要参数 if($font_size == 0) $font_size = 20; if($img_width == 0) $img_width ...

  3. Kubernetes中的Volume介绍

    Kubernetes中支持的所有磁盘挂载卷简介发表于 2018年1月26日 Weihai Feb 10,2016 7400 字 | 阅读需要 15 分钟 容器磁盘上的文件的生命周期是短暂的,这就使得在 ...

  4. Common Lisp : Symbol到底是什么

    主要参考: <Emacs之魂>(四) 包:

  5. C#7语法快速参考-第一章 Hello World

    选择IDE 要开始使用C#编程,您需要一个支持微软.NET框架的集成开发环境(IDE).最受欢迎的选择是微软自己的Visual Studio.初学可以使用Visual Studio Community ...

  6. spring AOP的两种配置

    xml配置 定义要被代理的方法的接口 public interface TestAop { public void print(String s); } 实现上述接口 public class Tes ...

  7. 数据库系列（五）之 mysql的伸缩性

    这篇文章,主要讲述mysql的伸缩性.在国内mysql一直都是使用得最多的数据库,在国外也排名前三.mysql是一款开源的.性能较高的数据库. 伸缩性是指在软件设计中,软件(数据库.应用程序)通过特定 ...

  8. .NetCore之基础

    .NetCore几大特点 这篇文章主要从.NetCore全面开源.依赖注入.包引入.跨平台.应用服务器的特点来入手.大约需要10分钟的阅读时间. 与.Net的区别 在.Net与.NetCore在代码编 ...

  9. ES6 对象的拓展(三)

    一.对象中的属性及方法1.属性属性简写:当对象属性名与属性值变量相同可以简写eg: let [name,age]=['nzc','18']; let obj = { name:name, age:ag ...

  10. CTF-代码审计(1)——parse_str()变量覆盖

    题目连接:http://222.18.158.226:7000/iscc.php 考点:parse_str()变量覆盖 代码: PHP知识点: 1.parse_url() 参照网址:https://w ...