天天看點
傳回

第10講 使用ThymeLeaf模闆實作檢視頁面1 修改ProductController控制器2 完成商品展示頁面3 浏覽器檢視運作結果

續 第09講 連接配接到資料庫

1 修改ProductController控制器

代碼如下：

package com.zjipc.jpa.controller;

import java.util.List;

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 {
	@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";
	}
}

2 完成商品展示頁面

在src/main/resources目錄下的templates檔案夾中，建立目錄product，然後在該目錄中，建立html頁面，嵌入ThymeLeaf代碼如下：

<!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">
		<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></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

3 浏覽器檢視運作結果

Spring Boot學習
上一篇: 第02講 第一次建立控制器
下一篇: 第12講 使用ThymeLeaf模闆實作資料添加與删除1 修改控制器2 添加記錄3 删除記錄4 完畢

繼續閱讀