延续上一讲。本讲使用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/，即可运行，看到数据结果。