Document

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

目录

步骤一：在script中加一个layui操作栏模板(id="rowTools")，添加按钮“删除”

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

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

步骤四：为表格工具绑定事件(table.on('tool(userFilter)',function (obj){//ajax}),并写ajax向后端传数据

步骤五：在dao层的UserDAO封装方法---删除用户功能(id)

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

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

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

成品展示： 

步骤一：在script中加一个layui操作栏模板(id="rowTools")，添加按钮“删除”

<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>

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

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

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

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

步骤四：为表格工具绑定事件(table.on('tool(userFilter)',function (obj){//ajax}),并写ajax向后端传数据

        table.on('tool(userFilter)',function (obj){
            //获取事件名（lay-event属性值）
            let layEvent = obj.event;
            //获取当前正在操作的数据行
            let data = obj.data;
            if (layEvent === 'del'){
                layer.confirm('确定删除该用户吗?',{icon:3},function (){
                    let index = layer.load(1);
                    $.ajax({
                        type:'get',
                        url: '/userDelete',
                        data:{"id":data.id},
                        dataType:'text',
                        success:function (){
                            layer.msg('删除成功!');
                            obj.del();
                            table.reload('userTable');
                        },
                        error:function (){
                            layer.msg('删除失败!');
                        }
                    })
                    layer.close(index);
                })
            }
        })

步骤五：在dao层的UserDAO封装方法---删除用户功能(id)

//    删除用户
    int userDelete(int id) throws SQLException;

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

    @Override
    public int userDelete(int id) throws SQLException {
        DBUtils db = new DBUtils();
        String sql = "delete from user where id=?";
        PreparedStatement ps = db.getPreparedStatement(sql);
        ps.setInt(1,id);
        int s = ps.executeUpdate();
        if (s == 1){
            db.commit();
            return 1;
        }else {
            db.connectionRollback();
            return 0;
        }
    }

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

@WebServlet("/userDelete")
public class userDelete extends HttpServlet {
    private final UserService userService = new UserServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        int id = Integer.parseInt(req.getParameter("id"));
        User user = new User();
        user.setId(id);
        try {
            int s = userService.userDelete(id);
            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 userDelete(int id) throws SQLException;

    @Override
    public int userDelete(int id) throws SQLException {
        return userDAO.userDelete(id);
    }

成品展示： 

以上就是本文的全部内容啦，从本章开始，每实现一个功能就会把项目文件更新上传绑定一次。喜欢的小伙可以跟作者一起跟进实现哦，不懂的地方可以私信+评论。

今日文案：每一次艰难受苦的日子后，总有着神的馈赠。