接 第11講 使用ThymeLeaf模板實現數據修改
1 修改控制器
修改ProductController.java,代碼如下:
package com.zjipc.jpa.controller;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
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.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.zjipc.jpa.dao.ProductRepository;
import com.zjipc.jpa.model.Product;
@Controller
@RequestMapping("/product")
public class ProductController {
private Logger log = LoggerFactory.getLogger(getClass());
@Autowired
private ProductRepository productRepository;
/**
* 攔截 /product/list 的post請求,返回數據
* @RestController =@Controller + @ResponseBody
* @return
*/
@PostMapping("/list")
@ResponseBody
public List<Product> list(){
List<Product> list = productRepository.findAll();
return list;
}
/**
* 捕捉通過Get請求,得到頁面內容
* @param id
* @param map
* @return
*/
@GetMapping("/detail/{id}")
public String getDetail(@PathVariable long id, ModelMap map) {
Product p = productRepository.getOne(id);
map.addAttribute("id", id);
map.addAttribute("name", p.getName());
map.addAttribute("price", p.getPrice());
map.addAttribute("category", p.getCategory());
map.addAttribute("pnum", p.getPnum());
map.addAttribute("imgurl", p.getImgurl());
map.addAttribute("description", p.getDescription());
return "/product/detail";
}
@GetMapping("/add")
public String getAdd() {
return "/product/add";
}
@PostMapping("/add")
public String postAdd(Product p) {
log.warn(p.toString());
productRepository.save(p);
return "redirect:../index.html";
}
@GetMapping("/modify/{id}")
public String getModify(@PathVariable long id, ModelMap map) {
Product p = productRepository.getOne(id);
map.addAttribute("id", id);
map.addAttribute("name", p.getName());
map.addAttribute("price", p.getPrice());
map.addAttribute("category", p.getCategory());
map.addAttribute("pnum", p.getPnum());
map.addAttribute("imgurl", p.getImgurl());
map.addAttribute("description", p.getDescription());
return "/product/modify";
}
@PostMapping("/modify/{id}")
public String postModify(Product p) {
log.warn(p.toString());
productRepository.save(p);
return "redirect:../../index.html";
}
@GetMapping("/remove/{id}")
public String getRemove(@PathVariable long id, ModelMap map) {
Product p = productRepository.getOne(id);
map.addAttribute("id", id);
map.addAttribute("name", p.getName());
map.addAttribute("price", p.getPrice());
map.addAttribute("category", p.getCategory());
map.addAttribute("pnum", p.getPnum());
map.addAttribute("imgurl", p.getImgurl());
map.addAttribute("description", p.getDescription());
return "/product/remove";
}
@PostMapping("/remove/{id}")
public String postRemove(@PathVariable long id) {
log.warn("刪除的ID="+id);
productRepository.deleteById(id);
return "redirect:../../index.html";
}
}
2 添加記錄
在src/main/resources目錄下的templates/product/文件夾中,添加文件add.html,代碼如下:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>添加產品</title>
<script src="../../js/jquery/jquery-1.12.4.min.js"></script>
<link rel="stylesheet"
href="../../js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="../../js/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
<script src="../../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding-top: 60px;
}
.productimg {
width: 300px;
height: 360px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">我的書城</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">全部圖書 <span class="sr-only">(current)</span></a></li>
<li><a href="#">計算機</a></li>
<li><a href="#">文學</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
<button type="submit" class="btn btn-default">添加</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<form method="post">
<table class="table">
<tr>
<td width="300px"><img class="productimg" alt="圖片"
src="../../productImg/1.png"></td>
<td>
<table class="table">
<tr>
<td class="text-right" width="60px"><label>書名:</label></td>
<td><input type="text" name="name" class="form-control"/></td>
</tr>
<tr>
<td class="text-right"><label>價格:</label></td>
<td><input type="text" name="price" class="form-control"/></td>
</tr>
<tr>
<td class="text-right"><label>種類:</label></td>
<td><input type="text" name="category" class="form-control"/></td>
</tr>
<tr>
<td class="text-right"><label>數量:</label></td>
<td><input type="text" name="pnum" class="form-control"/></td>
</tr>
<tr>
<td class="text-right"><label>圖片:</label></td>
<td><input type="text" name="imgurl" class="form-control"/></td>
</tr>
<tr>
<td class="text-right"><label>簡介:</label></td>
<td><input type="text" name="description" class="form-control"/></td>
</tr>
<tr>
<td colspan="2" class="text-right"><input type="submit" value="提交" class="btn btn-success"/>
<input type="reset" class="btn btn-danger" value="重置"/>
<button type="button" class="btn btn-primary" onclick="history.go(-1)">返回</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
3 刪除記錄
在src/main/resources目錄下的templates/product文件夾下,添加文件remove.html,代碼如下:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="${name}">查看產品</title>
<script src="../../js/jquery/jquery-1.12.4.min.js"></script>
<link rel="stylesheet"
href="../../js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="../../js/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
<script src="../../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding-top: 60px;
}
.productimg {
width: 300px;
height: 360px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">我的書城</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">全部圖書 <span class="sr-only">(current)</span></a></li>
<li><a href="#">計算機</a></li>
<li><a href="#">文學</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
<button type="submit" class="btn btn-default">添加</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<form method="post">
<table class="table">
<tr>
<td width="300px"><img class="productimg" alt="圖片"
th:src="@{../..{path}(path=${imgurl})}"
src="../../productImg/1.png"></td>
<td>
<table class="table">
<tr>
<td class="text-right" width="60px"><label>書名:</label></td>
<td><span th:text="${name}">書名</span></td>
</tr>
<tr>
<td class="text-right"><label>價格:</label></td>
<td><span th:text="${price}">價格</span></td>
</tr>
<tr>
<td class="text-right"><label>種類:</label></td>
<td><span th:text="${category}">種類</span></td>
</tr>
<tr>
<td class="text-right"><label>數量:</label></td>
<td><span th:text="${pnum}">數量</span></td>
</tr>
<tr>
<td class="text-right"><label>簡介:</label></td>
<td><p th:text="${description}">簡介</p></td>
</tr>
<tr>
<td colspan="2" class="text-right">
<button type="button" class="btn btn-primary" onclick="history.go(-1)">返回</button>
<input type="submit" value="刪除" class="btn btn-success"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>