第一部分（html页面和控制器之间传递，对象，集合，数组）
Thymeleaf教程
@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.html(视图页面)
注：
1.顶端要写上此标签（有空格，复制要去掉 < html lang=“en” xmlns:th=“http://www.thymeleaf.org”>）
<!--对象-->
<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>
第二部分 （页面之间传递，对象，集合，数组，的时候带参数）
thmeleaf链接
< html lang=“en” xmlns:th=“http://www.thymeleaf.org”> //开头标签，有空格。赋值需要删掉
// 写法一
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:要记得写，注意拼接
2.controller控制器页面
@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>
<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")
request.getRequestDispatcher("login.jsp").forward(request, response);
第四部分 （翻页功能）
<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 < userPage.countPage}">
<a th:href="@{'/userlist?pageNo='+${userPage.pageNo+1}}" id="nextPage">下一页</a>
<a th:href="@{'/userlist?pageNo='+${userPage.countPage}}" 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],document.getElementById("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="${user.gender}" selected="selected">男</option>
<option value="2" th:value="${user.gender}">女</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>
扫一扫
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
