thymeleaf---前后台传递对象集合---页面传参---转发和重定向---翻页功能---查看修改删除---下拉框

时间：2025-04-03 08:25:30

第一部分（html页面和控制器之间传递，对象，集合，数组）

Thymeleaf教程
@RequestParam(value = “username”,required = false)，flase可以没有参数

（控制器页面）
记得要写注解

@Controller
public class IndexController_zhujie {
	@RequestMapping("/hello")
    public String hello(Model model){
        //向页面传递对象
        User user=new User();
        ("李明");
        ("123456");
        (user);

        //向页面传递集合
        List<User> userList=new ArrayList<>();
        ("userList",userList);

        //向页面传递数组
        String[]string={"李明","二公子","二少爷"};
        ("array",string);

        return "text";
    }
}

(视图页面)
注：
1.顶端要写上此标签（有空格，复制要去掉 < html lang=“en” xmlns:th=“”>）

2.还有Thymeleaf视图解析器，在servlet配置文件中配 

<!--对象-->
	<form method="get" action="/hellow">
	    <p>姓名<input type="text" th:value="${}"></p>
	    <p>密码：<input type="text" th:value="${}"></p>
	    <input type="submit" name="提交">
	</form>
	
<!--集合-->
	<ul th:each="user:${userList}">
	    <li th:text="${}">名字</li>
	</ul>
	
<!--数组-->
	<ul th:each="a:${array}">
	    <li th:text="${a}">名字</li>
	</ul>

第二部分 （页面之间传递，对象，集合，数组，的时候带参数）
thmeleaf链接

< html lang=“en” xmlns:th=“”> //开头标签，有空格。赋值需要删掉


//  写法一

 页面
<a th:href="@{'/user/update/'+${}}">修改</a>
<a th:href="@{'/user/delate/'+${}}">删除</a>
注：
	 1. /user/update/是跳转的地址
	 2. ${}，是带过去的参数
	 3. th:要记得写，注意拼接

控制器页面
@GetMapping("/update/{id}")		
public String update(@PathVariable("id") int userId,Model model)

注：不通过url加?的形式，控制器要通过写需要写 {传的参数}，参数列表要写@PathVariable("参数")
注：如果是form表单提交，注解用@PostMapping


//  写法二

 页面

<a th:href="@{'/userlist?pageNo=1'}" >首页</a>
<a th:href="@{'/userlist?pageNo='+${-1}}" >上一页</a>

<span><a  th:href="@{'/delete?id='+${}}" >删除</a></span>
注：通过?的形式传递参数，拼接需注意最后有两个}的符号
注：删除可以放一张图片标签，可以和文字修改替换<img th:src="@{/statics/images/}" alt="删除" title="删除"/>

 控制器页面 
 
@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 = (id);
        if (user!=null){
            (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();
        (id);
        (usercode);
        (username);
        
        int i = (user);
        if (i>0){
            return "redirect:/userlist?pageNo=1";
        }else {
            return "update";
        }
    }


//修改的时候，主键不能修改
<div>
        <label for="id">用户编号：</label>
        <input type="text"  name="id" readonly="readonly" value="" th:value="${}">
</div>
注：readonly="readonly   只读属性

第三部分 thmeleaf 的转发和重定向 （控制器层，增加，修改，成功后转到新页面）

1.重定向
return "redirect:/userlist?pageNo=1"
注：userlist，是视图名
2.转发
return "forward:login";

3.以前的转发和重定向写法如下
("jsp/")
("").forward(request, response);

第四部分 （翻页功能）

<input type="hidden"  value="${totalPageCount}"/>      //暂时不知道是干嘛的

//  当前页>1
<span th:if="${ > 1}">
		<a th:href="@{'/userlist?pageNo=1'}" >首页</a>
		<a th:href="@{'/userlist?pageNo='+${-1}}" >上一页</a>
</span>

//  当前页<总页数
<span th:if="${ < }">
		<a th:href="@{'/userlist?pageNo='+${+1}}" >下一页</a>
		<a th:href="@{'/userlist?pageNo='+${}}" >末页</a>
</span>

//  跳转至（）页面
<span class="page-go-form"><label>跳转至</label>
	     <input type="text" name="inputPage"  class="page-key" />页
	     <button type="button" class="page-btn" onClick='jump_to([0],("inputPage").value)'>GO</button>
</span>

第五部分 （查看，修改，删除）

1.查看
<span>
	<a class="viewUser" href="javascript:;" th:attr="userid=${}" th:attrappend="username=${}" >
		<img th:src="@{/statics/images/}" alt="查看" title="查看"/>
	</a>
</span>
2.修改
<span>
	<a class="modifyUser" th:href="@{'/update?id='+${}}" th:attr="userid=${}" th:attrappend="username=${}">
		<img th:src="@{/statics/images/}" alt="修改" title="修改"/>
	</a>
	</span>
3.删除
	<span>
		<a class="deleteUser" href="javascript:;" th:attr="userid=${}" th:attrappend="username=${}">
											    <img th:src="@{/statics/images/}" alt="删除" title="删除"/>
		</a>
</span>

注：img图片标签可以换成，汉字的增删查改

第六部分 （补充）
下拉框

1.遍历
<label >供应商：</label>
<select name="userId">
        <option value="0">--请选择--</option>
		<option th:each="user:${userlist}" th:value="${}" th:text="${}" 		     th:selected="${==}"></option>
</select>
注：${==},  是放在mode中的集合中的对象，，是放在model中的对象
2.固定数量
<label >用户性别：</label>
<select name="gender" >
    <option value="1" th:value="${}" selected="selected">男</option>
    <option value="2" th:value="${}">女</option>
</select>

遍历下拉框（3步骤）

1.标签区
<input type="hidden" value="0" >
<div >
    <span>讨论版区</span>
    <select name="sortId" > </select>
    <input type="button" value="查询" >
</div>
遍历区
//遍历下拉框  下拉框
var sortId2=$("#sortId2").val(); 			//隐藏域的值
 $("#sortId").html("");							//清空下拉框
 for(var i=0;i < ;i++){
     if([i].id==parseInt(sortId2)){         //如果下拉框的值和隐藏域的值相等，设为默认
         $("#sortId").append("<option selected value='"+[i].id+"'>"+[i].name+"</option>");
     }else {
         $("#sortId").append("<option value='"+[i].id+"'>"+[i].name+"</option>");
     }
 }
 3.点击查询
//点击查询
$("#find").click(function () {
    var sortId=$("#sortId").val();      //将下拉框的值放进隐藏域  维护隐藏域的值
    $("#sortId2").val(sortId);
    show();
})
 注：后台，在service实现类中，查询所有下拉框的值和页面展示的信息，将两个集合一起放进Map中，

将字符串转换为Date

//将字符串转换为Date
<span th:text="${#(,'yyyy-MM-dd')}">年龄</span>

相关文章