zoukankan      html  css  js  c++  java
  • Java单体应用

    原文地址:http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-delete.html
    更多教程:光束云 - 免费课程

    删除账户

    序号 文内章节 视频
    1 概述 -
    2 后端代码实现 -
    3 前端页面实现 -
    4 实例源码 -

    请参照如上章节导航进行阅读

    1.概述

    本节实现 删除账户 功能,删除执行前需要用户确认。

    2.后端代码实现

    AuthManagerMapper.xml 修改

    修改 delete 语句,将查询条件改为 userKey,代码如下:

    <delete id="delete">
        DELETE FROM auth_manager WHERE user_key = #{userKey}
    </delete>
    

    ManagerController 修改

    增加 delete 方法,代码如下:

    @RequestMapping(value = "delete/{userKey}", method = RequestMethod.GET)
    public String delete(@PathVariable String userKey, RedirectAttributes redirectAttributes) {
        if (StringUtils.isBlank(userKey)) {
            redirectAttributes.addFlashAttribute("baseResult", BaseResult.fail("参数为空"));
            return "redirect:/auth/manager/list";
        }
        AuthManager authManager = authManagerService.getByUserKey(userKey);
        if (authManager == null) {
            redirectAttributes.addFlashAttribute("baseResult", BaseResult.fail("数据不存在"));
            return "redirect:/auth/manager/list";
        }
        authManagerService.delete(userKey);
        redirectAttributes.addFlashAttribute("baseResult", BaseResult.success(String.format("账户[%s]已被成功删除", authManager.getUserName())));
        return "redirect:/auth/manager/list";
    }
    

    3.前端页面实现

    修改视图 manager_list.jsp 文件,将要达到的效果如下:

    删除按钮

    <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modal-operate-confirm" data-whatever="${authManager.userKey}"><i class="fas fa-trash"></i></button>
    

    弹框布局

    <div class="modal fade" id="modal-operate-confirm">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">操作确认</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>操作后不可恢复,确定吗?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    

    弹框控制脚本

    $('#modal-operate-confirm').on('show.bs.modal', function (event) {
        let trigger = $(event.relatedTarget)
        let userKey = trigger.data('whatever')
        let modal = $(this)
        let ok = modal.find('.modal-footer button')[1]
        $(ok).click(function(e) {
            location.href = '/auth/manager/delete/' + userKey
        })
    })
    

    4.实例源码

    实例源码已经托管到如下地址:


    上一篇:编辑账户

    下一篇:搜索功能


    如果对课程内容感兴趣,可以扫码关注我们的 公众号QQ群,及时关注我们的课程更新

  • 相关阅读:
    POJ 3667 & HDU 3308 & HDU 3397 线段树的区间合并
    HDU 5992 kd-tree
    BZOJ 4154 kd-tree dfs序 + 二维空间的区间(矩阵)更新单点查找
    BZOJ 4066 kd-tree 矩形询问求和
    BZOJ 1941 kd-tree
    BZOJ 2648 kd-tree模板
    HDU 5925 离散化
    php trait
    php命名空间
    js
  • 原文地址:https://www.cnblogs.com/liuxiaojun/p/training-monolithic-project-iot-cloud-admin-manager-delete.html
Copyright © 2011-2022 走看看