接 第10講 使用ThymeLeaf模板實現查看頁面
本案例，要實現數據修改。
1 新建修改數據頁面
在src/main/resources目錄的templates/product/文件夾中，新建html頁面modify.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><input type="text" name="name" th:value="${name}"/></td>
</tr>
<tr>
<td class="text-right"><label>價格：</label></td>
<td><input type="text" name="price" th:value="${price}"/></td>
</tr>
<tr>
<td class="text-right"><label>種類：</label></td>
<td><input type="text" name="category" th:value="${category}"/></td>
</tr>
<tr>
<td class="text-right"><label>數量：</label></td>
<td><input type="text" name="pnum" th:value="${pnum}"/></td>
</tr>
<tr>
<td class="text-right"><label>圖片：</label></td>
<td><input type="text" name="imgurl" th:value="${imgurl}"/></td>
</tr>
<tr>
<td class="text-right"><label>簡介：</label></td>
<td><input type="text" name="description" th:value="${description}"/></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>
2 修改控制器
修改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("/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"; // 返回靜態頁面地址
}
}
注意：獲取修改頁面，是使用get請求，提交數據，使用post請求。所以請求與提交路徑一直，但服務器響應時，根據業務邏輯，進行不同的處理。
