Maven的JavaWeb网站开发之数据库数据的删除操作(Layui框架的使用)

发布时间:2023-12-28 04:43:59

本文前几篇文章写了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);
    }

成品展示:?

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

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


?

文章来源:https://blog.csdn.net/qq_67996188/article/details/135257935
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。