接 第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" target="_blank" rel="external nofollow" >
<link rel="stylesheet"
href="../../js/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" target="_blank" rel="external nofollow" >
<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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >我的书城</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >全部图书 <span class="sr-only">(current)</span></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >计算机</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >文学</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 [email protected] + @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请求。所以请求与提交路径一直，但服务器响应时，根据业务逻辑，进行不同的处理。
![基于Spring Boot的WebSocket聊天室DEMO[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)