Maven的JavaWeb网站开发之数据库数据的编辑操作（Layui框架的使用）

本文前两篇文章写了Maven的JavaWeb网站的用户信息显示功能、用户删除功能的开发，本章主要介绍使用Layui框架来做前端开发，Layui是一个开源的简介美观的前端开发框架，入门简单，下面我们将使用它来将数据库的数据在前端界面做编辑操作，步骤如下文所示：

目录

步骤一：在script(id="rowTools")的操作栏模板中添加按钮“编辑”

步骤二：在Layui的table中cols表头加一个操作列绑定操作栏（templet: '#rowTools'）

步骤三：为table添加(lay-filter="userFillter")

步骤四：为表格工具绑定事件，ajax

步骤五：写一个编辑界面

步骤六：在dao层的UserDAO封装方法--编辑用户功能(user)

步骤七：在dao-->Impl层的UserDAOImpl实现这个方法（sql语句）

步骤八：在servlet层的userDelete类实现url 

隐藏步骤九：在service层封装dao层方法，在service-->Impl层指向dao层 

成品展示：  

---

步骤一：在script(id="rowTools")的操作栏模板中添加按钮“编辑”

<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-list"></i>
            编辑
        </button>
    </div>
</script>

步骤二：在Layui的table中cols表头加一个操作列绑定操作栏（templet: '#rowTools'）

            cols:[
                [
                    {
                        title: '操作',
                        templet: '#rowTools',
                    }
                ]
            ]

步骤三：为table添加(lay-filter="userFillter")

<div><table id="userList" lay-filter="userFilter"></table></div>

步骤四：为表格工具绑定事件，ajax

       //为表格行工具绑定事件
        table.on('tool(userFilter)',function (obj){
            //获取事件名（lay-event属性值）
            let layEvent = obj.event;
            //获取当前正在操作的数据行
            let data = obj.data;
            if (layEvent === 'del'){
                //删除操作
            }else if (layEvent === 'edit'){
                layer.open({
                    type: 2, //设置弹层类型 1：当前页面层 2:自定义弹出
                    title: '用户信息编辑',
                    content: 'user_edit.html', // 使用dom节点作为弹层内容
                    maxmin: true, //显示最大小化按钮
                    area: ['500px','500px'],
                    btn: ['确定','取消'], //显示按钮
                    yes: function (index,layero) { //按钮点击之后的回调
                        let id = $(layero).find('iframe')[0].contentWindow.id.value;
                        let usernick = $(layero).find('iframe')[0].contentWindow.document.getElementById('usernick').value;
                        let name = $(layero).find('iframe')[0].contentWindow.document.getElementById('name').value;
                        let city = $(layero).find('iframe')[0].contentWindow.document.getElementById('city').value;
                        let sex = $(layero).find('iframe')[0].contentWindow.document.getElementById('sex').value;
                        let age = $(layero).find('iframe')[0].contentWindow.document.getElementById('age').value;
                        let qq = $(layero).find('iframe')[0].contentWindow.document.getElementById('qq').value;
                        let tel = $(layero).find('iframe')[0].contentWindow.document.getElementById('tel').value;
                        obj.update({
                            'id': id,
                            'usernick': usernick,
                            'name': name,
                            'city': city,
                            'sex': sex,
                            'age': age,
                            'qq': qq,
                            'tel': tel
                        })
                        $.ajax({
                            url: '/userEdit?id=' + id + "&usernick=" + usernick + "&name=" + name + "&city=" + city + "&sex=" + sex
                                + "&age=" + age + "&qq=" + qq + "&tel=" + tel,
                            type: 'post',
                            dataType: 'text',
                            contentType: 'text/html;charset=uft-8',
                            success: function (){
                                layer.msg('编辑成功！');
                                table.reload('userTable');
                            },
                            error: function (){
                                layer.msg('编辑失败！');
                            }
                        })
                        layer.close(index);
                    },
                    success: function (layero,index){
                        // let div = layero.find('iframe').contents().find('#userEdit');
                        let body = layer.getChildFrame('body',index);
                        body.find('#id').val(data.id);
                        body.find('#usernick').val(data.usernick);
                        body.find('#name').val(data.name);
                        body.find('#city').val(data.city);
                        body.find('#sex').val(data.sex);
                        body.find('#age').val(data.age);
                        body.find('#qq').val(data.qq);
                        body.find('#tel').val(data.tel);
                    }
                })
            }
        })

步骤五：写一个编辑界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../static/layui-v2.7.6/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    #userEdit {
        padding: 50px;
    }
    body {
        background: linear-gradient(50deg, #abdcff, #FFCCCC);
    }
</style>
<script src="../static/layui-v2.7.6/layui/layui.js"></script>
<div class="layui-form" id="userContent" lay-filter="userContent">
    <div class="layui-form-item">
        <div class="layui-input-inline" id="userEdit">
            <label>序号:</label>
            <input id="id" name="id" type="text">
            <br>
            <br>

            <label>昵称:</label>
            <input id="usernick" name="usernick" type="text">
            <br>
            <br>

            <label>账号:</label>
            <input id="name" name="name" type="text">
            <br>
            <br>

            <!--            <label>密码:</label>-->
            <!--            <input type="text" name="password" id="password">-->
            <!--            <br>-->
            <!--            <br>-->

            <label>城市:</label>
            <input id="city" name="city" type="text">
            <br>
            <br>

            <label>性别:</label>
            <input id="sex" name="sex" type="text">
            <br>
            <br>

            <label>年龄:</label>
            <input id="age" name="age" type="text">
            <br>
            <br>

            <label>QQ:</label>
            <input id="qq" name="qq" type="text">
            <br>
            <br>

            <label>电话:</label>
            <input id="tel" name="tel" type="text">
            <br>
            <br>

        </div>
    </div>
</div>
</body>
</html>

步骤六：在dao层的UserDAO封装方法--编辑用户功能(user)

    //    编辑用户
    int userEdit(User user) throws SQLException;

步骤七：在dao-->Impl层的UserDAOImpl实现这个方法（sql语句）

    @Override
    public int userEdit(User user) throws SQLException {
        DBUtils db = new DBUtils();
        String sql = "update user set usernick=?,name=?,city=?,sex=?,age=?,qq=?,tel=? where id=?";
        PreparedStatement ps = db.getPreparedStatement(sql);
        ps.setString(1,user.getUsernick());
        ps.setString(2,user.getName());
        ps.setString(3,user.getCity());
        ps.setString(4,user.getSex());
        ps.setString(5,user.getAge());
        ps.setString(6,user.getQq());
        ps.setString(7,user.getTel());
        ps.setInt(8,user.getId());
        int s = ps.executeUpdate();
        if (s == 1){
            db.commit();
            return 1;
        }else {
            db.connectionRollback();
            return 0;
        }
    }

步骤八：在servlet层的userDelete类实现url 

@WebServlet("/userEdit")
public class userEdit extends HttpServlet {
    private final UserService userService = new UserServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String id = req.getParameter("id");
        String usernick = req.getParameter("usernick");
        String name = req.getParameter("name");
        String city = req.getParameter("city");
        String sex = req.getParameter("sex");
        String age = req.getParameter("age");
        String qq = req.getParameter("qq");
        String tel = req.getParameter("tel");
        User user = new User();
        int id1 = Integer.parseInt(id);
        user.setId(id1);
        user.setUsernick(usernick);
        user.setName(name);
        user.setCity(city);
        user.setSex(sex);
        user.setAge(age);
        user.setQq(qq);
        user.setTel(tel);
        try {
            int s = userService.userEdit(user);
            if (s == 1){
                resp.getWriter().write("success");
            }else {
                resp.getWriter().write("fail");
            }
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }
}

隐藏步骤九：在service层封装dao层方法，在service-->Impl层指向dao层 

    //    编辑用户
    int userEdit(User user) throws SQLException;

    @Override
    public int userEdit(User user) throws SQLException {
        return userDAO.userEdit(user);
    }

成品展示：  

以上就是本篇文章全部内容啦，有不懂的小伙伴可以评论或私信，上篇文章写的是删除用户功能，我把资源都放在这里啦，更新暂未停止。

今日语录：我们要做的是把不可能变成可能。