复杂数据绑定

在在简单数据绑定之后,那么以下场景就是一些复杂数据绑定的问题,比如数组的绑定,集合的绑定,当然这在实际开发当中是十分常见的!

绑定数组

在实际的开发中,我们可能会遇到前端请求需要传递到后台一个或者多个相同名称参数的情况,比如批量删除,购买多个相同的商品....

此时我们可以通过绑定数组的方式,来完成实际需求

根据我们之前的方法,新建控制器和jsp页面

users.jsp

<%--
  Created by IntelliJ IDEA.
  User: Seale
  Date: 2019.03.16
  Time: 20:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>用户列表</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/users/deleteUsers" method="post">
    <table width="20%" border="1">
        <tr>
            <td>选择</td>
            <td>用户</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="ids" value="1"></td>
            <td>Deng</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="ids" value="2"></td>
            <td>Gong</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="ids" value="3"></td>
            <td>Who</td>
        </tr>
    </table>
    <input type="submit" value="删除">
</form>
</body>
</html>

UsersController

package eendtech.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * Date:2019.03.16
 * Author:Seale
 */
@RequestMapping("/users")
@Controller
public class UsersController {

    /**
     * 映射用户列表地址
     */
    @RequestMapping("/users")
    public String showUsersView(){
        return "views/users.jsp";
    }

    @RequestMapping("/deleteUsers")
    public String deleteUsers(int [] ids){
        if (ids != null){
            for (int id : ids){
                //使输出语句模拟已经删除的用户
                System.out.println("deleted with id:"+id+" user");
            }
        }else{
            System.out.println("ids=null");
        }
        return "views/users.jsp";
    }
}

运行结果

绑定集合

在批量删除用户中,前度请求传递的参数都是同名的ids,所以在后台我们直接使用同一种数组类型的参数绑定接收即可,就可以在方法中 通过循环数组参数的方式来进行删除操作,但如果是批量修改用户操作,前端请求过来的数据就可能会包含多种类型的数据,那么这样场景下,我们单纯通过数组来进行绑定是无法实现的

遇到这样的场景下,我们可以使用集合数据进行绑定,即在包装类中定义一个包含用户信息的集合,然后再接受方法中接收参数类型定义为该包装类的集合即可

相同的步骤我就不过多的重复了,同样是新建控制器类和jsp文件,但是值得注意的是,我们这里需要新建一个VO对象,也就是我们的包装类对象

UserVO

package eendtech.VO;

import eendtech.po.User;
import lombok.Getter;
import lombok.Setter;

import java.util.List;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * Date:2019.03.16
 * Author:Seale
 */
@Getter
@Setter
public class UsersVo {
    private List<User> users;
}

changeUsers.jsp

<%--
  Created by IntelliJ IDEA.
  User: Seale
  Date: 2019.03.16
  Time: 21:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改用户组</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/users/changeUsers" method="post">
    <table width="30%" border="1">
        <tr>
            <td>选择</td>
            <td>用户名</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="users[0].id" value="1"></td>
            <td><input type="text" name="users[0].userName" value="Tom"></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="users[1].id" value="2"></td>
            <td><input type="text" name="users[1].userName" value="Lily"></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="users[2].id" value="3"></td>
            <td><input type="text" name="users[2].userName" value="Seale"></td>
        </tr>
    </table>
    <input type="submit" value="修改">

</form>
</body>
</html>

在UsersController中添加如下代码

/**
     * 映射用户批量修改界面
     */
    @RequestMapping("/changeUsersView")
    public String showChangeUsersView(){
        return "views/changeUsers.jsp";
    }

    /**
     * 进行用户批量操作
     */
    @RequestMapping("/changeUsers")
    public String changeUsers(UsersVo usersVo){
        //将所有的用户数据封装到集合中
        List<User> users = usersVo.getUsers();
        //循环输出所有的用户信息
        for (User user:users) {
            if (user.getId() != null){
                System.out.println("修改了id为"+user
                .getId()+"的用户\n用户名为:"+user.getUserName());
            }
        }
        return "views/changeUsers.jsp";
    }

运行结果


本作品采用知识共享署名 4.0 国际许可协议进行许可。

如果可以的话,请给我钱请给我点赞赏,小小心意即可!

Last modification:April 27, 2019
If you think my article is useful to you, please feel free to appreciate