使用SSM框架，完成用户登录和增删改查

本Demo相关知识点：

1、后台使用SSM框架完成前台响应

2、前台展现使用BootStrap，主要使用其table和和模态框Model

3、使用Ajax完成增删改查功能

4.JS动态构建表格

Demo 完成后界面如下：

下面开始正式构建Demo

一、用户登录

前端JSP页面主要代码

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <form action="login" method="post">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" class="form-control" name="username" placeholder="username">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" class="form-control" name="password" placeholder="Password">
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 记住密码
                    </label>
                </div>
                <button type="submit" class="btn btn-default">登录</button>
                <div>${msg}</div>
            </form>
        </div>
    </div>
</div>

后台Controller

    @Resource
    private UserService userService;
    //用户登录验证
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public String login(HttpServletRequest request, Model model){

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        Boolean result = checkUserLogin(username,password);
        if(result){
            return "userList";
        }else{
            model.addAttribute("msg", "用户名或密码不正确，请重新登录");
            return "forward:/login.jsp";
        }
    }

    public boolean checkUserLogin(String username,String password){
        User user = userService.getUserByName(username);
        if (user == null || "".equals(user)){
            return  false;
        }
        if (user.getUserPwd().equals(password)){
            return true;
        }else {
            return  false;
        }
    }

当登录成功时，则跳转到view下的userList.jsp主页面，登录失败时则提示

登录时，只是进行了简单的账号密码验证，没有进行复杂的验证，还有记住密码功能尚未完成

二、在登录成功后开始构建主界面

在前期完成主界面时，主要是使用Bootstrap表格，主要是html，此处由于篇幅原因，不细说，Demo最后会给出listuser.jsp完整代码

三、完成界面上查询按钮的功能

 

此处根据ID查询用户，并展示在下面的表体里，此处首先需要完成三件事，一、编写查询的JS方法。二、编写查询的Controller方法。三、根据返回的对象动态构建表体以展示出来

3.1 编写根据用户ID查询的JS方法

 // 查询单个用户
  $("#userQueryBtn").click(function () {
      var id = $("#userID").val();
         doQuery(id);
   })

 // 查询单个用户调用的方法
    function doQuery(id) {
        $.ajax({
            type:"POST",
            url:"queryUser/"+id,
            dataType:"json",
            success:function (data) {
                if (data.user == null){
                    //当查询的用户不存在时，清空表格上面上次查询的结果
                    $("#user_table_tbody").empty();
                    alert(data.queryinfo);
                }
                else {
                    //清空表格
                    $("#user_table_tbody").empty();
　　　　　　　　　　　　//动态构建表体
                    show_user_table(data.user);
                    console.log(data.user);
                }
            }
        });
    }

3.2 编写查询的Controller方法

因为需要根据其返回结果构建表体，所以Controller方法需要返回集合或对象

  //用户查询,(之前没有添加@ResponseBody，导致其老是返回queryUser.jsp，从而找不到页面而报错)
    //根据用户ID查找
    @ResponseBody
    @RequestMapping(value = "/queryUser/{id}")
    public Map queryUser(@PathVariable String id){
        System.out.println("进入query方法");
        System.out.println(id);
        Map<String, Object> map = new HashMap<>();
        if (id == null || "".equals(id)){
            map.put("queryinfo","请输入用户ID");
        }else{
            User user =  userService.getUserById(Integer.valueOf(id));
            if (user != null){
                map.put("user",user);
            }else {
                map.put("queryinfo","该用户不存在");
            }
        }
        return map;

    }

3.3  根据返回的对象动态构建表体

此处editBtn.attr("user-edit-id",result.id); 和 delBtn.attr("user-del-id",result.id); 为编辑和删除按钮添加自定义属性，以便后面对其单个编辑和删除操作

//在table里呈现单条查询的结果
    function show_user_table(result) {
        var useridTD = $("<td></td>").append(result.id);
        var usernameTD = $("<td></td>").append(result.userName);
        var userphoneTD = $("<td></td>").append(result.userPhone);
        var userpwdTD = $("<td></td>").append(result.userPwd);
        var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm user-edit-btn").append("编辑");
            editBtn.attr("user-edit-id",result.id);
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm user-del-btn").append("删除");
            delBtn.attr("user-del-id",result.id);
        var operate = $("<td></td>").append(editBtn).append("&nbsp;").append(delBtn);
        $("<tr></tr>").append(useridTD)
            .append(usernameTD)
            .append(userphoneTD)
            .append(userpwdTD)
            .append(operate)
            .appendTo("#user_table_tbody");
    }

四、完成显示所有用户按钮功能

显示所有用户和单个用户思路大概相同

4.1 编写查询所有用户Controller方法

   //查询所有用户
    @ResponseBody
    @RequestMapping(value = "/queryAll",method = RequestMethod.POST)
    public List<User> queryAllUser(){
        System.out.println("进入queryAll方法");
        List<User> userList = userService.getAllUser();
        return userList;
    }

4.2  编写查询所有用户的JS方法

 //查询并显示所有用户
        $("#allUserQueryBtn").click(function () {
            //首先清空表格残留数据
            $("#user_table_tbody").empty();
            queryAllUsers();
        })
    //查询所有用户
    function queryAllUsers() {
        $.ajax({
            type:"POST",
            url:"queryAll",
            dataType:"json",
            success:function (data) {
                console.log(data);
                //遍历data循环构建表体
                $.each(data,function (index,item) {
                    show_user_table(item);
                })
            }
        })
    }

此处重点是使用

$.each(data,function (index,item) {
                    show_user_table(item);
                })

遍历循环动态构建表体

五、完成新增用户功能

5.1  此处使用Bootstrap模态框功能

<%--新增用户的模态框--%>
<div class="modal" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 35%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="myModalLabel">新增</h5>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="userAddModalForm" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userName</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="userName" placeholder="userName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPhone</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="userPhone" placeholder="userPhone"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPwd</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" name="userPwd" placeholder="userPwd"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-sm" id="userAddModalSaveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

5.2 新增用户JS代码：

 //点击新增弹出模态框
        $("#userAddBtn").click(function () {
            $("#userAddModal").modal('show');
        })
        //为保存按钮绑定click
        $("#userAddModalSaveBtn").click(function () {
            var formData = $("#userAddModalForm").serialize();
            doAdd(formData);
        })

    function doAdd(formData) {
        $.ajax({
            type:"POST",
            url:"insertUser",
            data: formData,
            success:function (result) {
                //关闭模态框
                $("#userAddModal").modal("hide");
                alert(result.addinfo);
            }
        });
    }

通过$("#userAddModalForm").serialize()将表单序列化后传到后台，其形式为查询字符串形式

5.3   新增用户后台Controller

    //新增用户
    @ResponseBody
    @RequestMapping(value = "/insertUser")
    public Map checkJosn(User user){
        System.out.println(user);
        Boolean result =  userService.insertUser(user);
        Map<String, Object> map = new HashMap<>();
        if (result){
            map.put("addinfo","添加成功");
            return map;
        }else {
            map.put("addinfo","添加失败");
            return map;
        }
    }

5.4  新增用户界面

六、完成对单个用户的删除功能

6.1  根据id删除单个用户前台JS

    //删除单个用户
    function doDelete(id) {
        $.ajax({
            type:"DELETE",
            url:"delUser/"+id,
            success:function (data) {
              console.log(data);
            }
        })
    }

//为删除按钮绑定事件
        $(document).on("click",".user-del-btn",function () {
            if (confirm("确定删除该用户")) {
                var id = $(this).attr("user-del-id");
                console.log(id);
                doDelete(id);
                //下面两行是删除用户后刷新表体数据
                $("#user_table_tbody").empty();
                queryAllUsers();
            }
        })

由于JS在绑定click事件时，删除按钮还没有创建，所有不能用 $(".user-del-btn").click(function () {}）方法，只能用on()方法，对应动态创建的按钮需要绑定事件的，一般用on()方法。

 var id = $(this).attr("user-del-id");  是取出当前用户的自定义属性user-del-id作为其ID，因为前面在展现用户时，使用了delBtn.attr("user-del-id",result.id); 为该删除按钮绑定里自定义属性

6.2  后台单个用户删除的Controller方法

    //根据ID删除用户
    @ResponseBody
    @RequestMapping(value = "/delUser/{id}",method = RequestMethod.DELETE)
    public boolean delUserById(@PathVariable String id){
      return   userService.delUserByID(id);
    }

后台使用Restful风格接受用户id与DELETE方法

七、完成主界面上“编辑”按钮修改用户功能

 在点击编辑时，使用了Bootstrap的模态框，首先需要将当前用户查询出来赋值给模态框，然后再执行修改

7.1  前台JS

    //为编辑用户按钮绑定事件
        $(document).on("click",".user-edit-btn",function () {
            var id = $(this).attr("user-edit-id");
            console.log(id);
            doQueryByID(id);
            //显示修改模态框
            $("#userModifyModal").modal('show');
        })
    //为修改的确定按钮绑定事件，由于作用与此处的修改按钮是动态创建的，所以不能使用这方法
/*    $("#userModifyModalSaveBtn").click(function () {
        var formData = $("#userModifyModalForm").serialize();
        doUpdate(formData);
    })*/
    $(document).on("click","#userModifyModalSaveBtn",function () {
        var formData = $("#userModifyModalForm").serialize();
        doUpdate(formData);
    })
    //根据ID查询到user并赋值给模态框
    function doQueryByID(id) {
        $.ajax({
            type:"POST",
            url:"queryUser/"+id,
            dataType:"json",
            success:function (data) {
                if (data.user != null){
                    //赋值
                    $("#userModifyModal_id").val(data.user.id);
                    $("#userModifyModal_userName").val(data.user.userName);
                    $("#userModifyModal_userPhone").val(data.user.userPhone);
                    $("#userModifyModal_userPwd").val(data.user.userPwd);
                }
            }
        });
    }
    //修改用户
    function doUpdate(formData) {
        $.ajax({
            type:"POST",
            url:"updateUser",
            data: formData,
            success:function (result) {
                //关闭模态框
                $("#userModifyModal").modal("hide");
                if (result){
                    //下面两行是删除用户后刷新表体数据
                    $("#user_table_tbody").empty();
                      queryAllUsers();
                }else {
                    alert("修改失败");
                }
            }
        });
    }

7.2 后台更新用户方法

    //更新用户
    @ResponseBody
    @RequestMapping(value = "/updateUser")
    public boolean updateUser(User user){
        System.out.println(user);
        Boolean result =  userService.updateUser(user);
        return result;
    }

此处如果将doUpdate()方法里的ajax请求方法改为PUT，后台同样添加了method = RequestMethod.PUT，此处虽然配置了hiddenHttpMethodFilter，但是调试的时候发现前台发送的值正常，后台user一直是null，只有将ajax请求方法改为POST，后台不加method才正常。此处如果想使用Restful风格的PUT时使用，需要注意以下几个方面：

/**发送PUT和DELECT请求时需要执行
 * 1、在Web.xml里配置HiddenHttpMethodFilter
 * 2、需要发送POST请求
 * 3、需要在发送POST请求时携带一个name="_method"的隐藏域，值为DELECT或PUT
 * **/
表单格式比如：

  <form action="checkRestfulPut/3333" method="post">
    <input type="hidden" name="_method" value="PUT"/>
    <input type="submit" name="test" value="PUT方法">测试Restful的PUT即更新操作</input>
  </form>

 

7.3  更新用户界面

将ID设置为readyonly，防止用户修改而报错

<input type="text" class="form-control" id="userModifyModal_id" name="id" readonly/>

至此，该Demo的用户登录和增删改查的基本功能都实现了，在描述时，可能只顾着堆代码了，文字描述很欠缺，见谅。另外页面上根据用户名查询和批量删除按钮功能尚未实现。最后附上主界面listuser.jsp完整代码

listuser.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>userList</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/statics/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script type="text/javascript" src="${pageContext.servletContext.contextPath}/statics/js/jquery-3.3.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${pageContext.servletContext.contextPath}/statics/js/bootstrap.js"></script>
</head>

<script type="text/javascript">
    $(document).ready(function () {
        bindEvent();
        //跳转到该页面时就发送ajax请求显示所有用户
        queryAllUsers();
        // bindBtnDel();
    });

    function bindEvent() {
        //点击新增弹出模态框
        $("#userAddBtn").click(function () {
            $("#userAddModal").modal('show');
        })
        //为保存按钮绑定click
        $("#userAddModalSaveBtn").click(function () {
            var formData = $("#userAddModalForm").serialize();
            doAdd(formData);
        })
        // 查询单个用户
        $("#userQueryBtn").click(function () {
            var id = $("#userID").val();
            doQuery(id);
        })
        //查询并显示所有用户
        $("#allUserQueryBtn").click(function () {
            //首先清空表格残留数据
            $("#user_table_tbody").empty();
            queryAllUsers();
        })

    }

    function doAdd(formData) {
        $.ajax({
            type:"POST",
            url:"insertUser",
            data: formData,
            success:function (result) {
                //关闭模态框
                $("#userAddModal").modal("hide");
                alert(result.addinfo);
            }
        });
    }
    // 查询单个用户调用的方法
    function doQuery(id) {
        $.ajax({
            type:"POST",
            url:"queryUser/"+id,
            dataType:"json",
            success:function (data) {
                if (data.user == null){
                    //当查询的用户不存在时，清空表格上面上次查询的结果
                    $("#user_table_tbody").empty();
                    alert(data.queryinfo);
                }
                else {
                    //清空表格
                    $("#user_table_tbody").empty();
                    show_user_table(data.user);
                    console.log(data.user);
                }
            }
        });
    }
    //查询所有用户
    function queryAllUsers() {
        $.ajax({
            type:"POST",
            url:"queryAll",
            dataType:"json",
            success:function (data) {
                console.log(data);
                //遍历data循环构建表体
                $.each(data,function (index,item) {
                    show_user_table(item);
                })
            }
        })
    }

    //在table里呈现单条查询的结果
    function show_user_table(result) {
        var useridTD = $("<td></td>").append(result.id);
        var usernameTD = $("<td></td>").append(result.userName);
        var userphoneTD = $("<td></td>").append(result.userPhone);
        var userpwdTD = $("<td></td>").append(result.userPwd);
        var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm user-edit-btn").append("编辑");
            editBtn.attr("user-edit-id",result.id);
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm user-del-btn").append("删除");
            delBtn.attr("user-del-id",result.id);
        var operate = $("<td></td>").append(editBtn).append("&nbsp;").append(delBtn);
        $("<tr></tr>").append(useridTD)
            .append(usernameTD)
            .append(userphoneTD)
            .append(userpwdTD)
            .append(operate)
            .appendTo("#user_table_tbody");
    }
    //删除单个用户
    function doDelete(id) {
        $.ajax({
            type:"DELETE",
            url:"delUser/"+id,
            success:function (data) {
              console.log(data);
            }
        })
    }
    //为删除按钮绑定事件
        $(document).on("click",".user-del-btn",function () {
            if (confirm("确定删除该用户")) {
                var id = $(this).attr("user-del-id");
                console.log(id);
                doDelete(id);
                //下面两行是删除用户后刷新表体数据
                $("#user_table_tbody").empty();
                queryAllUsers();
            }
        })
    //为编辑用户按钮绑定事件
        $(document).on("click",".user-edit-btn",function () {
            var id = $(this).attr("user-edit-id");
            console.log(id);
            doQueryByID(id);
            //显示修改模态框
            $("#userModifyModal").modal('show');
        })
    //为修改的确定按钮绑定事件，由于作用与此处的修改按钮是动态创建的，所以不能使用这方法
/*    $("#userModifyModalSaveBtn").click(function () {
        var formData = $("#userModifyModalForm").serialize();
        doUpdate(formData);
    })*/
    $(document).on("click","#userModifyModalSaveBtn",function () {
        var formData = $("#userModifyModalForm").serialize();
        doUpdate(formData);
    })
    //根据ID查询到user并赋值给模态框
    function doQueryByID(id) {
        $.ajax({
            type:"POST",
            url:"queryUser/"+id,
            dataType:"json",
            success:function (data) {
                if (data.user != null){
                    //赋值
                    $("#userModifyModal_id").val(data.user.id);
                    $("#userModifyModal_userName").val(data.user.userName);
                    $("#userModifyModal_userPhone").val(data.user.userPhone);
                    $("#userModifyModal_userPwd").val(data.user.userPwd);
                }
            }
        });
    }
    //修改用户
    function doUpdate(formData) {
        $.ajax({
            type:"POST",
            url:"updateUser",
            data: formData,
            success:function (result) {
                //关闭模态框
                $("#userModifyModal").modal("hide");
                if (result){
                    //下面两行是删除用户后刷新表体数据
                    $("#user_table_tbody").empty();
                      queryAllUsers();
                }else {
                    alert("修改失败");
                }
            }
        });
    }

</script>

<body>

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h2>UserManager</h2>
        </div>
    </div>

    <div class="row">
        <%--添加用户查询表单--%>
        <div class="col-sm-offset-4">
            <form id="userQuery"  method="post">
                <input type="text"  id="userID" name="userID" placeholder="用户ID"/>&nbsp;&nbsp;
                <input name="userName"  id="userName" placeholder="用户名"/>
                <BUTTON type="button"  class="btn btn-primary btn-sm" id="userQueryBtn">查询</BUTTON>
                <BUTTON type="button"  class="btn btn-primary btn-sm" id="allUserQueryBtn">显示所有用户</BUTTON>
            </form>
        </div>
        <%--添加“增加”和“批量删除”按钮--%>
        <div class="col-sm-4 col-sm-offset-11">
            <BUTTON type="button" class="btn btn-primary btn-sm"  data-toggle="modal" id="userAddBtn">增加</BUTTON>
            <BUTTON type="button" class="btn btn-primary btn-sm" id="userDelBtn">批量删除</BUTTON>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <table class="table  table-hover" id="user_table">
                <thead>
                <tr>
                    <th width="20%">用户ID</th>
                    <th width="20%">userName</th>
                    <th width="20%">userPhone</th>
                    <th width="20%">userPwd</th>
                    <th width="20%">操作</th>
                </tr>
                </thead>
                <tbody id="user_table_tbody">

                </tbody>
            </table>
        </div>
    </div>
</div>

<%--新增用户的模态框--%>
<div class="modal" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 35%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="myModalLabel">新增</h5>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="userAddModalForm" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userName</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="userName" placeholder="userName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPhone</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="userPhone" placeholder="userPhone"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPwd</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" name="userPwd" placeholder="userPwd"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-sm" id="userAddModalSaveBtn">保存</button>
            </div>
        </div>
    </div>
</div>


<%--修改用户的模态框--%>
<div class="modal" id="userModifyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 35%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title">修改</h5>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="userModifyModalForm" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户ID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="userModifyModal_id" name="id" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userName</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="userModifyModal_userName" name="userName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPhone</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="userModifyModal_userPhone" name="userPhone"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPwd</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" id="userModifyModal_userPwd" name="userPwd"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-sm" id="userModifyModalSaveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

 

 

 

参考文献  https://www.cnblogs.com/gode/p/8194260.html