Java單體應用 - 項目實戰(背景) - 03.背景賬戶管理 - 05.删除賬戶

原文位址： 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.執行個體源碼

執行個體源碼已經托管到如下位址：

• https://github.com/work100-net/training-stage2/tree/master/iot-cloud3
• https://gitee.com/work100-net/training-stage2/tree/master/iot-cloud3

上一篇：

編輯賬戶

下一篇：

搜尋功能

如果對課程内容感興趣，可以掃碼關注我們的

公衆号

或

QQ群

，及時關注我們的課程更新