选取京东图书展示页面
编码
- 新建一个Book实体类
package com.example.entity;
import lombok.Data;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
/**
* Created by 史冬阳 on 2018/9/20.
*/
@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;
}
- 新建一个DAO层
package com.example.dao;
import com.example.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;
/**
* Created by 史冬阳 on 2018/9/20.
*/
/**
* Integer 唯一标识符 数据库的主键
*/
public interface BookRepository extends JpaRepository<Book,Integer> {
}
- 新建一个BookService接口
package com.example.service;
import com.example.entity.Book;
import java.util.List;
/**
* Created by 史冬阳 on 2018/9/20.
*/
public interface BookService {
Book save(Book book);
List<Book> getAll();
Book get(int id);
void delete(int id);
}
- 新建一个service层的实现类
package com.example.service.impl;
import com.example.dao.BookRepository;
import com.example.entity.Book;
import com.example.service.BookService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.List;
/**
* Created by 史冬阳 on 2018/9/20.
*/
@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);
}
}
- 新建一个test类
package com.example.service.impl;
import com.example.entity.Book;
import com.example.service.BookService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;
import javax.annotation.Resource;
import static org.junit.Assert.*;
/**
* Created by 史冬阳 on 2018/9/20.
*/
@RunWith(SpringRunner.class)
@SpringBootTest
public class BookServiceImplTest {
@Resource
private BookService bookService;
@Test
public void save() throws Exception {
String[] names = {"独家记忆","余生多关照","绿物语","时光行者的你","林深时见鹿","单向迁徙"};
String[] authors = {"木浮生","原城","镰足","桐华","宴生","张饮修"};
String[] prices ={"23.8","24.3","26.2","28.5","20.6","33.6"};
String[] introductions = {
"世界上最美好的事情莫过于，我喜欢你的同时，刚好你也喜欢我。",
"喜欢制造大悲或大喜的故事，从事自己热爱的职业，结识自己喜爱的人。",
"不要被植物表面的柔软和温顺欺骗，有时，一缕委婉涌动的洁白，数年后会引发无法挽救的巨大灾难。",
"他说：“后来，我遇见了一个将我的世界点亮的人。 他们都是时光里的伤心旅客，也是余生路上最好的旅伴。",
"故事讲述了少年顾延树和少女鹿惜光幼年时曾相依相伴，却无奈被命运分离，从此分隔两地，各自在不同的环境中坚强而隐忍地长大，为了彼此成为更优秀的人。 两人从此经历了重重磨难和考验，当年被迫分开的真相也渐渐浮出水面。",
"突围黑暗过往的自我救赎之作。回忆给自己，童话给读者。也许某一天，你终会耗尽一切，但，爱我，本身就是一场单向迁徙。"};
String[] avatars = {
"http://peojfj6k8.bkt.clouddn.com/1.jpg",
"http://peojfj6k8.bkt.clouddn.com/2.jpg",
"http://peojfj6k8.bkt.clouddn.com/3.jpg",
"http://peojfj6k8.bkt.clouddn.com/4.jpg",
"http://peojfj6k8.bkt.clouddn.com/5.jpg",
"http://peojfj6k8.bkt.clouddn.com/6.jpg"};
for (int i=0; i<6; i++){
Book book = new Book();
book.setName(names[i]);
book.setAuthor(authors[i]);
book.setAvatar(avatars[i]);
book.setPrice(prices[i]);
book.setIntroduction(introductions[i]);
System.out.println(bookService.save(book));
}
}
@Test
public void getAll() throws Exception {
}
@Test
public void get() throws Exception {
}
@Test
public void delete() throws Exception {
}
}
- 新建一个Controller层
package com.example.controller;
import com.example.service.BookService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
/**
* Created by 史冬阳 on 2018/9/20.
*/
@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;
}
}
- 图书列表页面
<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>
- 图书详情页面
<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>
展示效果图
-
图书列表页面
-
图书详情页面
