thymeleaf---前后台传递对象集合---页⾯传参---转发和重定向---翻页功能-。。。第⼀部分（html页⾯和控制器之间传递，对象，集合，数组）
@RequestParam(value = “username”,required = false)，flase可以没有参数
1.Controller.java（控制器页⾯）
记得要写注解
@Controller
public class IndexController_zhujie {
@RequestMapping("/hello")
public String hello(Model model){
//向页⾯传递对象
User user=new User();
user.setUserName("李明");
user.setUserPassword("123456");
model.addAttribute(user);
//向页⾯传递集合
List<User> userList=new ArrayList<>();
model.addAttribute("userList",userList);
//向页⾯传递数组
String[]string={"李明","⼆公⼦","⼆少爷"};
model.addAttribute("array",string);
return "text";
}
}
2.还有Thymeleaf视图解析器，在servlet配置⽂件中配
<!--对象-->
<form method="get" action="/hellow">
<p>姓名<input type="text" th:value="${user.userName}"></p>
<p>密码：<input type="text" th:value="${user.userPassword}"></p>
<input type="submit" name="提交">
</form>
<!--集合-->
<ul th:each="user:${userList}">
<li th:text="${user.userName}">名字</li>
</ul>
<!--数组-->
<ul th:each="a:${array}">
<li th:text="${a}">名字</li>
</ul>
第⼆部分 （页⾯之间传递，对象，集合，数组，的时候带参数）
// 写法⼀
1.html 页⾯
<a th:href="@{'/user/update/'+${user.id}}">修改</a>
<a th:href="@{'/user/delate/'+${user.id}}">删除</a>
注：
1. /user/update/是跳转的地址
2. ${user.id}，是带过去的参数
3. th：要记得写，注意拼接
@GetMapping("/update/{id}")
public String update(@PathVariable("id") int userId,Model model)
注：不通过url加?的形式，控制器要通过写需要写 {传的参数}，参数列表要写@PathVariable("参数")
注：如果是form表单提交，注解⽤@PostMapping
// 写法⼆
1.html 页⾯
<a th:href="@{'/userlist?pageNo=1'}" id="firstPage">⾸页</a>
<a th:href="@{'/userlist?pageNo='+${userPage.pageNo-1}}" id="prePage">上⼀页</a>
<span><a id="delete" th:href="@{'/delete?id='+${user.id}}" >删除</a></span>
注：通过?的形式传递参数，拼接需注意最后有两个}的符号
注：删除可以放⼀张图⽚标签，可以和⽂字修改替换<img th:src="@{/statics/images/schu.png}" alt="删除" title="删除"/> 2.controller控制器页⾯
@PostMapping("/updateUser")
public String updateUser(Long id,String usercode,String username,String userpassword)
注：多个参数，通过form表单提交，参数列表直接写上需要的参数就⾏
实例----修改信息（利⽤⽅法⼆实现的）
Controller 控制器页⾯
//修改
思路：
先根据前台传过来的id，查询得到对象，放进model中，在表单中显⽰
将修改后的参数，通过form表单，传给controller控制层，去调⽅法修改
1.先根据前台传过来的id，查询得到对象，放进model中，在表单中显⽰
@RequestMapping("/update")
public String update(Long id,Model model){
User user = userService.selectByPrimaryKey(id);
if (user!=null){
model.addAttribute(user);
return "updateUser";
}else {
return "redirect:/userlist?pageNo=1";
}
}
2.将修改后的参数，通过form表单，传给controller控制层，去调⽅法修改
@PostMapping("/updateUser")
public String updateUser(Long id,String usercode,String username){
User user=new User();
user.setId(id);
user.setUsercode(usercode);
user.setUsername(username);
int i = userService.updateByPrimaryKeySelective(user);
if (i>0){
return "redirect:/userlist?pageNo=1";
}else {
return "update";
}
}
//修改的时候，主键不能修改
<div>
thyme<label for="id">⽤户编号：</label>
<input type="text" id="id" name="id" readonly="readonly" value="" th:value="${user.id}"> </div>
注：readonly="readonly 只读属性
第三部分 thmeleaf 的转发和重定向 （控制器层，增加，修改，成功后转到新页⾯）
1.重定向
return "redirect:/userlist?pageNo=1"
注：userlist，是视图名
2.转发
return "forward:login";
3.以前的转发和重定向写法如下
response.sendRedirect("jsp/frame.jsp")
第四部分 （翻页功能）
<input type="hidden" id="totalPageCount" value="${totalPageCount}"/> //暂时不知道是⼲嘛的
// 当前页>1
<span th:if="${userPage.pageNo > 1}">
<a th:href="@{'/userlist?pageNo=1'}" id="firstPage">⾸页</a>
<a th:href="@{'/userlist?pageNo='+${userPage.pageNo-1}}" id="prePage">上⼀页</a>
</span>
// 当前页<；总页数
<span th:if="${userPage.pageNo < untPage}">
<a th:href="@{'/userlist?pageNo='+${userPage.pageNo+1}}" id="nextPage">下⼀页</a>
<a th:href="@{'/userlist?pageNo='+${untPage}}" id="lastPage">末页</a>
</span>
// 跳转⾄（）页⾯
<span class="page-go-form"><label>跳转⾄</label>
<input type="text" name="inputPage" id="inputPage" class="page-key" />页
<button type="button" class="page-btn" onClick='jump_to(document.forms[0],ElementById("inputPage").value)'>GO</button> </span>
第五部分 （查看，修改，删除）
1.查看
<span>
<a class="viewUser" href="javascript:;" th:attr="userid=${user.id}" th:attrappend="username=${user.username}" >
<img th:src="@{/statics/images/read.png}" alt="查看" title="查看"/>
</a>
</span>
2.修改
<span>
<a class="modifyUser" th:href="@{'/update?id='+${user.id}}" th:attr="userid=${user.id}" th:attrappend="username=${user.username}">
<img th:src="@{/statics/images/xiugai.png}" alt="修改" title="修改"/>
</a>
</span>
3.删除
<span>
<a class="deleteUser" href="javascript:;" th:attr="userid=${user.id}" th:attrappend="username=${user.username}">
<img th:src="@{/statics/images/schu.png}" alt="删除" title="删除"/>
</a>
</span>
注：img图⽚标签可以换成，汉字的增删查改
第六部分 （补充）
下拉框
1.thymeleaf
1.遍历
<label >供应商：</label>
<select name="userId">
<option value="0">--请选择--</option>
<option th:each="user:${userlist}" th:value="${user.id}" th:text="${user.userName}" th:selected="${user.id==user2.id}"></option>
</select>
注：${user.id==user2.id}, user.id是放在mode中的集合中的对象，user2.id，是放在model中的对象
2.固定数量
<label >⽤户性别：</label>
<select name="gender" id="gender">
<option value="1" th:value="${der}" selected="selected">男</option>
<option value="2" th:value="${der}">⼥</option>
</select>
2.Json遍历下拉框（3步骤）
1.标签区
<input type="hidden" value="0" id="sortId2">
<div id="xiala">
<span>讨论版区</span>
<select name="sortId" id="sortId"> </select>
<input type="button" value="查询" id="find">
</div>
2.Json遍历区
//遍历下拉框下拉框
var sortId2=$("#sortId2").val(); //隐藏域的值
$("#sortId").html(""); //清空下拉框
for(var i=0;i < data.sort.length;i++){
if(data.sort[i].id==parseInt(sortId2)){ //如果下拉框的值和隐藏域的值相等，设为默认
$("#sortId").append("<option selected value='"+data.sort[i].id+"'>"+data.sort[i].name+"</option>"); }else {
$("#sortId").append("<option value='"+data.sort[i].id+"'>"+data.sort[i].name+"</option>");
}
}
3.点击查询
//点击查询
$("#find").click(function () {
var sortId=$("#sortId").val(); //将下拉框的值放进隐藏域维护隐藏域的值
$("#sortId2").val(sortId);
show();
})
注：后台，在service实现类中，查询所有下拉框的值和页⾯展⽰的信息，将两个集合⼀起放进Map中，将字符串转换为Date
//将字符串转换为Date
<span th:text="${#dates.format(user.birthday,'yyyy-MM-dd')}">年龄</span>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论