延續上一講。本講使用ajax獲取並顯示數據。
1 新建控制器
在src/main/java目錄中，創建包com.zjipc.jpa.controller，在該包中，新建控制器ProductController，ProductController.java代碼如下：
package com.zjipc.jpa.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
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 =@Controller + @ResponseBody
* @return
*/
@PostMapping("/list")
@ResponseBody
public List<Product> list(){
List<Product> list = productRepository.findAll();
return list;
}
}
2 創建前臺數據顯示頁面
在src/main/resources目錄中的static文件夾中，新建index.html文件，代碼如下：
<!DOCTYPE html>
<html>
<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">
<table class="table table-condensed">
<thead>
<tr>
<th>序號</th>
<th>書名</th>
<th>價格</th>
<th>種類</th>
<th>數量</th>
<th width="20px"></th>
<th width="20px"></th>
<th width="20px"></th>
</tr>
</thead>
<tbody id="grid">
</tbody>
</table>
</div>
<script type="text/javascript">
$(function() {
$.post("product/list", function(data) {
$.each(data, function(i, item) {
var line = "<tr>";
line = line + "<td>" + (i + 1) + "</td>";
line = line + "<td>" + item.name + "</td>";
line = line + "<td>" + item.price + "</td>";
line = line + "<td>" + item.category + "</td>";
line = line + "<td>" + item.pnum + "</td>";
line = line + "<td><a href='product/detail/"+item.id+"'><span class='btn btn-primary'>查看</span></a></td>";
line = line + "<td><a href='product/modify/"+item.id+"'><span class='btn btn-success'>修改</span></a></td>";
line = line + "<td><a href='product/remove/"+item.id+"'><span class='btn btn-danger'>刪除</span></a></td>";
$("#grid").append(line);
console.log(item);
});
});
});
</script>
</body>
</html>
3 運行
運行項目，瀏覽器輸入http://localhost:8081/，即可運行，看到數據結果。