springboot-web2.zip
作者QQ549710689
springboot中使用thymeleaf动态模板增删改查
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
(1)application.properties
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false
spring.thymeleaf.content-type=text/html
spring.thymeleaf.enabled=true
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5
(2)controller
@Controller("user_controller")
@RequestMapping("/user")
public class UserController{
@Autowired
@Qualifier("userService") /* 一个接口多个实现用name区分*/
private IUserService userService;
@RequestMapping("/")
public String list(Model model) {
System.out.println(" *** controller *** "+this);
List<UserPO> list = userService.findUsers();
model.addAttribute("userList", list);
return "users/list";
}
@RequestMapping("/delete/{id}")
public String delete(@PathVariable("id") String id){
userService.deleteUser(id);
return "redirect:/user/";
}
@RequestMapping(value="/save", method=RequestMethod.POST)
//public String save(@RequestBody UserVO user){ //415错误
public String save() {
return "forward:/user/";
}
@RequestMapping("/{id}")
public String get(@PathVariable String id, Model model){
if("toadd".equals(id)) {
return toAddPage();
}
System.out.println(" *** controller *** "+this);
UserVO user = userService.findUserByID(id);
model.addAttribute("user", user);
// return "forward:/";
return "users/detail";
}
public String toAddPage(){
return "users/add";
}
}
(3)页面
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- jquery -->
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<!-- jquery-validator -->
<script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
<script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
<!-- layer -->
<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
<!-- md5.js -->
<script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
<!-- common.js -->
<script type="text/javascript" th:src="@{/js/common.js}"></script>
<script type="text/javascript">
function toAddPage(){
window.location.href="/boot/user/toadd/";
}
</script>
</head>
<body>
<div>
<div class="title-search fl" style="width:100%;">
<span class="ft14" style="width: 60px;">用户编号</span>
<input id="yhbh" class="ft12 search-box" type="text" placeholder=""/>
<span class="ft14" style="width: 60px;margin-left: 20px;">用户名称</span>
<input id="yhmc" class="ft12 search-box" type="text" placeholder="用户名称"/>
<input type="button" id="userquery" class="btn-blue" value="查询" style="width: 80px;margin-left:20px;margin-bottom:5px;"/>
<button class="btn btn-primary btn-block" type="button" id="addbtn" style="width:80px" onclick="toAddPage()">新建</button>
</div>
<table class="table" >
<tr>
<th><input type="checkbox"/></th>
<th>用户编号</th>
<th>用户名称</th>
<th>邮箱</th>
<th>办公电话</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr th:each="u,uStat:${userList}">
<td><input name="userId" type="checkbox" th:value="${u.userId}"/></td>
<td th:text="${u.userNo}"></td>
<td th:text="${u.userName}"></td>
<td th:text="${u.email}"></td>
<td th:text="${u.officeTel}"></td>
<td th:text="${u.status}"></td>
<td>
<!--
<a href="#" th:id="${u.userId}" onclick="updateUserWin(this.id);">编辑</a>
<a href="#" th:id="${u.userId}" onclick="$.deleteUser(this.id);" style="margin-left:10px;">删除</a>
-->
<a th:href="'/boot/user/'+${u.userId}" >编辑</a>
<a th:href="'/boot/user/delete/'+${u.userId}" style="margin-left:10px;">删除</a>
</td>
</tr>
</table>
</div>
</body>
</html>