制作一个表格，通过点击其中一项进入另一个表格
显示效果
20180920190352.png
20180920190401.png
主要代码
controller类
@Controller
@RequestMapping(value = "/star")
public class StarController {
private static final String STAR_DETAIL_PATH_NAME = "starDetail";
private static final String STAR_LIST_PATH_NAME="starList";
@Resource
StarService starService;
@GetMapping(value = "/all")
public String getStarList(ModelMap map){
map.addAttribute("starList",starService.findAll());
return STAR_LIST_PATH_NAME;
}
@GetMapping(value = "/{id}")
public String getStar(@PathVariable Integer id,ModelMap map){
map.addAttribute("star",starService.findById(id));
return STAR_DETAIL_PATH_NAME;
//change
}
前端代码
<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head>
<script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
<link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/>
<style>
.pic{
height: 200px;
width:150px;
}
</style>
<meta charset="UTF-8"/>
<title>dj展示表</title>
</head>
<body>
<div class="container">
<h3>Spring Data JPA练习 </h3>
<legend>
<strong>dj表</strong>
</legend>
<div class="col-md-4">
<p th:text="${star.id}"></p>
<img src="">
<p th:text="${star.starInfo}"></p>
<img th:src="@{${star.starImage}}" class="pic" >
<p th:text="${star.starName}"></p>
<p th:text="${star.starSex}"></p>
<p th:text="${star.starWorks}"></p>
</div>
</div>
</body>
</html>
<html lang="zh-CN">
<head>
<script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
<link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/>
<meta charset="UTF-8"/>
<title>dj列表</title>
<body>
<div class="container">
<h3>Spring Data JPA练习 </h3>
<table class="table table-hover table-condensed">
<legend>
<strong>dj表</strong>
</legend>
<thead>
<tr>
<th>编号</th>
<th>简介</th>
<th>名字</th>
<th>性别</th>
<th>作品</th>
</tr>
</thead>
<tbody>
<tr th:each="star : ${starList}">
<th scope="row" th:text="${star.id}"></th>
<td th:text="${star.starInfo}"></td>
<td><a th:href="@{/star/{starId}(starId=${star.id})}" th:text="${star.starName}"></a></td>
<td th:text="${star.starSex}"></td>
<td th:text="${star.starWorks}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
完整代码
https://github.com/heiyeziran/JPA/tree/master/spring-data-jpa/src
网友评论