1.书籍实体类

@Entity
@Data
public class Book {
    @Id
    @GeneratedValue
    private Integer id;
    private String avatar;
    private String name;
    private String author;
    private String price;
    private String introduction;
}

2.BookRepository

public interface BookRepository extends JpaRepository<Book,Integer> {
}

3.BookService

public interface BookService {
    Book save(Book book);
    List<Book> getAll();
    Book get(int id);
    void delete(int id);
}

4.BookServiceImpl

@Service
public class BookServiceImpl implements BookService {
    @Resource
    private BookRepository bookRepository;

    @Override
    @Transactional
    public Book save(Book book) {
        return bookRepository.save(book);
    }

    @Override
    public List<Book> getAll() {
        return bookRepository.findAll();
    }

    @Override
    @Transactional
    public Book get(int id) {
        return bookRepository.findById(id).get();
    }

    @Override
    @Transactional
    public void delete(int id) {
        bookRepository.deleteById(id);
    }
}

5.BookController

@Controller
@RequestMapping(value = "/book")
public class BookController {
    private static final String BOOK_DETAIL_PATH_NAME = "bookDetail";
    private static final String BOOK_LIST_PATH_NAME = "bookList";

    @Resource
    BookService bookService;

    /**
     * 获取 Book 列表
     * 处理 "/book" 的 GET 请求，用来获取 Book 列表
     * 数据存入ModelMap，返回Thymeleaf页面
     */
    @GetMapping()
    public String getBookList(ModelMap map) {
        map.addAttribute("bookList",bookService.getAll());
        return BOOK_LIST_PATH_NAME;
    }

    /**
     * 获取 Book
     * 处理 "/book/{id}" 的 GET 请求
     */

    @GetMapping(value = "/{id}")
    public String getBook(@PathVariable Integer id, ModelMap map) {
        map.addAttribute("book", bookService.get(id));
        return BOOK_DETAIL_PATH_NAME;
    }
}

6.bookList.html

<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/>
    <meta charset="UTF-8"/>
    <title>书籍列表</title>
</head>
<style>
    .top-set{
        width: 1400px;
        margin-left: 56px;
    }
    .price-set{
        color: #E3393C;
        font-size: 16px;
    }
    .name-set{
        font-size: 14px;
        color: black;
    }
    .amount-set{
        color: #649cd9;
        font-size: 14px;
    }
    .location-set{
     font-size: 12px;

    }
</style>

<body>
<div >
    <img src="http://peojfj6k8.bkt.clouddn.com/topPic.png" class="top-set">
</div>


<div class="container">

    <h3>Spring Data JPA练习 </h3>


    <div class="row" >
        <div class="col-xs-6 col-sm-3"  th:each="book : ${bookList}">
            <div class="thumbnail">

                <img th:src="@{${book.avatar}}">
                <div class="caption location-set">
                    <p th:text="￥+' '+${book.price}" class="price-set"></p>
                    <p class="name-set "><a th:href="@{/book/{bookId}(bookId=${book.id})}" th:text="${book.name}"></a></p>
                    <p><text class="amount-set">7.2万+</text><text>条评论</text></p>

                    <!--<h4 th:text="${book.author}"></h4>-->

                </div>
            </div>
        </div>

    </div>
</div>

</body>
</html>

7.bookDetail.html

<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/>
    <meta charset="UTF-8"/>
    <title>书籍详情</title>
</head>
<body>
<div class="container">
    <div>
        <img src="http://peojfj6k8.bkt.clouddn.com/detail-top.jpg" style="margin-left: -200px;height: 195px; width: 1546px">
    </div>
    <div class="col-md-4">
        <div style="border: 1px solid gainsboro; margin-top: 30px">
            <img th:src="@{${book.avatar }}" style="width: 300px;height: 350px" >
        </div>
    </div>
    <div class="col-md-5" style="margin-top: 30px">
        <p th:text="${book.name}" style="font-weight: bolder; font-size: 22px"></p>
        <p th:text="${book.author}" style="font-size: 12px"></p>
        <p>京东价：</p>
        <p th:text="${book.price}" style="color: red;font-size: 18px;margin-top: -35px;margin-left: 50px"></p>
        <p>书籍介绍：</p>
        <p th:text="${book.introduction}" style="margin-top: -29px;margin-left: 65px;color: grey"></p>
        <p style="color: grey">增值业务</p>
        <p style="color: red; margin-top: -30px;margin-left: 65px">礼品包装</p>
        <p style="color: grey">重量</p>
        <p style="color: grey;margin-top: -30px; margin-left: 65px">0.3kg</p>
        <p style="color: grey">白条分期：</p>
        <a class="btn btn-default" href="#" role="button" style="color: grey">不分期</a>
        <button class="btn btn-default" type="submit" style="color: grey">￥7.06起x3期</button>
        <input class="btn btn-default" type="button" value="￥3.6起x6期" style="color: grey">
        <input class="btn btn-default" type="submit" value="￥1.86起x12期" style="color:grey;">
        <button type="button" class="btn btn-danger" style="margin-top: 30px">加入购物车</button>
        <button type="button" class="btn btn-default" style="color: red; border: 1px solid red; margin-top: 30px; margin-left: 30px">购买电子书免费</button>
        <p style="color: grey; font-size: 10px; margin-top: 20px">温馨提示：支持七天无理由退货</p>
    </div>

    <div class="col-md-3">
        <img src="http://peojfj6k8.bkt.clouddn.com/right.png" style="width: 250px;height: 250px">
    </div>
</div>
</body>
</html>