zoukankan html css js c++ java

Java单体应用

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

编辑账户

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

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

1.概述

本节实现 编辑账户 功能，实现逻辑和 新增账户 功能类似，画面效果如下：

2.后端代码实现

AuthManagerMapper.xml 修改

修改 update 语句，将查询条件改为 userKey，代码如下：

<update id="update">
    UPDATE
      auth_manager
    SET
      status = #{status},
      superuser = #{superuser},
      roles = #{roles},
      updated = #{updated}
    WHERE
      user_key = #{userKey}
</update>

同时增加一个 getByUserKey 语句，代码如下:

<select id="getByUserKey" resultType="AuthManager">
    SELECT
      <include refid="authManagerColumns" />
    FROM
      auth_manager AS a
    WHERE
      a.user_key = #{userKey}
</select>

AuthManagerDao 接口修改

增加 getByUserKey 方法，代码如下：

/**
 * 获取账户对象
 *
 * @param userKey 用户Key
 * @return
 */
AuthManager getByUserKey(String userKey);

AuthManagerService 接口修改

/**
 * 更新
 *
 * @param authManager
 * @return
 */
BaseResult update(AuthManager authManager);

AuthManagerServiceImpl 实现修改

@Override
public BaseResult update(AuthManager authManager) {
    if (authManagerDao.getByUserKey(authManager.getUserKey()) == null) {
        return BaseResult.fail("用户不存在");
    }
    try {
        authManager.setUpdated(new Date());

        authManagerDao.update(authManager);
        return BaseResult.success("账户更新成功");
    } catch (Exception ex) {
        return BaseResult.fail("未知错误");
    }
}

ManagerController 修改

GET 方法

@RequestMapping(value = "edit/{userKey}", method = RequestMethod.GET)
public String edit(@PathVariable String userKey, Model model, 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";
    }
    model.addAttribute("authManager", authManager);
    return "auth/manager_edit";
}

POST 方法

@RequestMapping(value = "edit/{userKey}", method = RequestMethod.POST)
public String edit(@PathVariable String userKey, AuthManager authManager, Model model, RedirectAttributes redirectAttributes) {
    // 数据验证
    if (StringUtils.isBlank(userKey)) {
        redirectAttributes.addFlashAttribute("baseResult", BaseResult.fail("参数为空"));
        return "redirect:/auth/manager/list";
    }
    if (!userKey.equals(authManager.getUserKey())) {
        redirectAttributes.addFlashAttribute("baseResult", BaseResult.fail("非法请求"));
        return "redirect:/auth/manager/list";
    }
    if (StringUtils.isBlank(authManager.getRoles())) {
        model.addAttribute("baseResult", BaseResult.fail("角色不能空"));
        model.addAttribute("authManager", authManager);
        return "auth/manager_edit";
    }

    // 新增处理
    BaseResult baseResult = authManagerService.update(authManager);
    if (baseResult.getStatus() == HttpUtils.HTTP_STATUS_CODE_OK) {
        redirectAttributes.addFlashAttribute("baseResult", baseResult);
        return "redirect:/auth/manager/list";
    } else {
        model.addAttribute("baseResult", baseResult);
        return "auth/manager_edit";
    }
}

3.前端页面实现

视图文件 manager_edit.jsp

在 views/auth/ 目录下增加一个 manager_edit.jsp 视图文件，代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
    <title>编辑账户 - 后台账户 | IoT-Admin</title>
    <jsp:include page="../includes/resources_head.jsp" />
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

    <jsp:include page="../includes/layout_header.jsp" />

    <jsp:include page="../includes/layout_left.jsp" />

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">编辑账户</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">后台账户</a></li>
                            <li class="breadcrumb-item active">编辑账户</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col">
                        <div class="card card-gray">
                            <!-- form start -->
                            <form:form action="/auth/manager/edit/${authManager.userKey}" id="form" method="post" modelAttribute="authManager">
                                <form:hidden path="userKey" />
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="userName">用户名</label>
                                                <form:input path="userName" cssClass="form-control" disabled="true" />
                                            </div>
                                            <div class="form-group">
                                                <label for="status">状态</label>
                                                <form:select path="status" cssClass="form-control select2" style=" 100%;">
                                                    <option value="0" ${authManager.status==0?"selected":""}>未激活</option>
                                                    <option value="1" ${authManager.status==1?"selected":""}>激活</option>
                                                    <option value="2" ${authManager.status==2?"selected":""}>锁定</option>
                                                    <option value="3" ${authManager.status==3?"selected":""}>删除</option>
                                                </form:select>
                                            </div>
                                            <div class="form-group">
                                                <label for="created">创建时间</label>
                                                <form:input path="created" cssClass="form-control" disabled="true" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="roles">角色</label>
                                                <form:select path="roles" cssClass="select2" multiple="multiple" data-placeholder="请选择角色" style=" 100%;">
                                                    <option value="admin" ${authManager.roles.contains("admin")?"selected":""}>admin</option>
                                                    <option value="editor" ${authManager.roles.contains("editor")?"selected":""}>editor</option>
                                                </form:select>
                                            </div>
                                            <div class="form-group">
                                                <label for="superuser">是否超级用户</label>
                                                <form:select path="superuser" cssClass="form-control select2" style=" 100%;">
                                                    <option value="0" ${!authManager.superuser?"selected":""}>否</option>
                                                    <option value="1" ${authManager.superuser?"selected":""}>是</option>
                                                </form:select>
                                            </div>
                                            <div class="form-group">
                                                <label for="created">更新时间</label>
                                                <form:input path="updated" cssClass="form-control" disabled="true" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.card-body -->

                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">保存</button>
                                    <a href="/auth/manager/list" type="button" class="btn btn-default">返回列表</a>
                                </div>
                            </form:form>
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <jsp:include page="../includes/layout_footer.jsp" />
</div>
<!-- ./wrapper -->
<jsp:include page="../includes/resources_body.jsp" />

<script>
$(function() {
    //Initialize Select2 Elements
    $('.select2').select2();

    //Initialize Select2 Elements
    $('.select2bs4').select2({
        theme: 'bootstrap4'
    });

    if (${baseResult.status != null && baseResult.status != 200}) {
        const Toast = Swal.mixin({
            toast: true,
            position: 'top',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            onOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })

        Toast.fire({
            type: 'error',
            title: '${baseResult.message}'
        })
    }

    $("#form").validate({
        rules: {
            userName: {
                required: true,
                minlength: 4,
                maxlength: 20
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 20
            },
            roles: {
                required: true,
                minlength: 1,
                maxlength: 3
            }
        },
        messages: {
            userName: {
                required: " 请输入用户名",
                minlength: " 用户名不能小于4位",
                maxlength: " 用户名不能大于于20位"
            },
            password: {
                required: " 请输入密码",
                minlength: " 密码不能小于6位",
                maxlength: " 密码不能大于于20位"
            },
            roles: {
                required: " 请选择角色",
                minlength: " 至少选择1个角色",
                maxlength: " 至多选择3个角色"
            }
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').children('label').append(error);
        },
        highlight: function(element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        }
    });
})
</script>
</body>
</html>

4.测试验证

重启 Tomcat 测试 编辑账户 功能。

5.实例源码

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

上一篇：新增账户

下一篇：删除账户

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

查看全文

相关阅读:
C# 将数据导出到Excel汇总
 jquery 常用技巧
 JavaScript：世界上误解最深的语言
 对于jQuery中$.ajax方法的新认识
 JQuery上传插件Uploadify使用详解
 HTTP中Get与Post的区别
 Javascript中最常用的55个经典技巧
 C# params参数的应用
 10种JavaScript特效实例让你的网站更吸引人
 jQuery设计思想

原文地址：https://www.cnblogs.com/liuxiaojun/p/training-monolithic-project-iot-cloud-admin-manager-edit.html