民宿管理系统4-优快云博客

本文链接：https://blog.youkuaiyun.com/ABCDEEE7/article/details/147460999

退出功能的实现

退出的原理：让session失效即可

@GetMapping("/logout")//GetMapping没有参数传
    public String logout(HttpSession session) {
        //退出原理：session失效
        session.invalidate();//清除所有的session
        return "redirect:/admin/userlogin";//重定向
    }

点击“退出登录”后会返回登录界面

修改登录名：

点击“修改登录名”，有弹窗显示

前端代码

<body>

<div class="layui-fluid" style="padding: 65px;margin: 50px auto;">
  <div class="layui-row">
    <div class="layui-form">


<!--      <div class="layui-form-item">-->
<!--        <label for="L_oldgname" class="layui-form-label">-->
<!--          <span class="x-red">*</span>旧的登录名</label>-->
<!--        <div class="layui-input-inline">-->
<!--          <input type="text" id="L_oldgname" name="oldgname" lay-verify="required|oldganme" class="layui-input">-->
<!--        </div>-->
<!--      </div>-->

      <div class="layui-form-item">
        <label for="L_newgname" class="layui-form-label">
          <span class="x-red">*</span>新的登录名</label>
        <div class="layui-input-inline">
          <input type="text" id="L_newgname" name="newgname" lay-verify="required|newgname" class="layui-input">
        </div>
      </div>

<!--      <div class="layui-form-item">-->
<!--        <label for="L_confirmgname" class="layui-form-label">-->
<!--          <span class="x-red">*</span>确认登录名</label>-->
<!--        <div class="layui-input-inline">-->
<!--          <input type="text" id="L_confirmgname" name="confirmgname" lay-verify="required|confirmgname" class="layui-input">-->
<!--        </div>-->
<!--      </div>-->

      <div class="layui-form-item">
        <label for="inputpassword" class="layui-form-label">
          <span class="x-red">*</span>输入密码</label>
        <div class="layui-input-inline">
          <input type="password" id="inputpassword" name="inputpassword" lay-verify="required|inputPwd" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <button class="layui-btn" lay-filter="submit" lay-submit="">保存</button>
      </div>


    </div>
  </div>
</div>

<script>
    layui.use(['form', 'layer', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form,
            upload = layui.upload,
            layer = layui.layer;
        //自定义验证规则
        form.verify({
            inputPwd: function (value) {
                var code;
                $.ajax({
                    url: "/admin/checkinputpassword",
                    type: "GET",
                    async: false,  //关闭异步，当success返回结果后才执行ajax之后的内容
                    data: {"inputpassword": value},
                    success: function (s) {
                        code = s;
                    }
                });
                if (code != true) {
                    return '密码错误，请重新输入！';
                }
            },
            // password: [/(.+){6,12}$/, '密码必须6到12位'],
            // confirmPwd: function () {
            //   if ($('#L_newgname').val() != $('#L_confirmgname').val()) {
            //     return '两次名称不一致';
            //   }
            // }
        });

        //监听提交
        form.on('submit(submit)', function (data) {
            console.log(data.field);
            $.ajax({
                url: "/admin/updategname",
                type: "post",
                data: data.field,
                success: function (s) {
                    if (s == true) {
                        layer.alert("修改成功！", {
                            icon: 6
                        }, function () {
                            parent.layer.closeAll();
                            parent.location.href = "/admin/logout";
                        });
                    } else {
                        layer.msg("登录名重复！", function () {
                        });
                    }
                },
                error: function () {
                    layer.msg("接口异常!", function () {
                    });
                }
            });
        });
    });
</script>
</body>

功能实现：

AdminController：

/**
     *修改登录名页面
     */
    @GetMapping("/updategnamepage")
    public String updategnamepage() {
        return "admin/updategnamepage";
    }

    /**
     * 修改登录名时，判断输入密码是否正确
     * @return
     */
    @GetMapping("/checkinputpassword")
    @ResponseBody //方法返回值转化为HTTP响应的内容
    public boolean checkinputpassword(@RequestParam("inputpassword") String inputpassword,HttpSession session ) {
        String gpassword = session.getAttribute("gpassword").toString();
        return adminService.checkinputpassword(gpassword, inputpassword);
    }

    /**
     * 修改登录名
     * @param newgname
     * @param session
     * @return
     */
    @PostMapping("/updategname")
    @ResponseBody
    public boolean updategname(@RequestParam("newgname") String newgname,HttpSession session) {
        String oldgname=session.getAttribute("gname").toString();
        return adminService.updategname(oldgname,newgname);
    }

AdminService

/**
     * 修改登录名时，判断输入密码是否正确
     */
    boolean checkinputpassword(String gpassword, String inputpassword);

    /**
     * 修改登录名
     */
    boolean updategname(String oldgname, String newgname);

AdminServicelpml

/**
     * 修改登录名时，判断输入密码是否正确
     */
    @Override
    public boolean checkinputpassword(String gpassword, String inputpassword) {
        if(gpassword.equals(inputpassword))
            return true;
        else return false;
    }

    /**
     * 修改登录名
     */
    @Override
    public boolean updategname(String oldgname, String newgname) {

        String selectname=adminMapper.selectinputname(newgname);
        if(selectname==null){
            return adminMapper.updateadmingname(newgname,oldgname);

        }
        else return false;
    }

AdminMapper

/**
     * 修改登录名时，判断登录名是否重复
     * @param newgname
     * @return
     */
    String selectinputname(@Param ("newgname")String newgname);

    /**
     * 修改登录名
     */
    boolean updateadmingname(@Param ("newgname")String newgname,@Param ("oldgname")String oldgname);

AdminMapper.xml

  <select id="selectinputname" resultType="java.lang.String">
      SELECT gname FROM admin
      WHERE gname = #{newgname}
  </select>

  <update id="updateadmingname">
    update admin
    set gname=#{newgname}
    where gname=#{oldgname}


  </update>

测试

当输入框为空

当登录名重复时：

当密码错误时：

修改成功时：

修改密码：

前端代码

<body>
<div class="layui-fluid"  style="padding: 65px;">
    <div class="layui-row">
        <div class="layui-form">
<!--            <div class="layui-form-item">-->
<!--&lt;!&ndash;                <label class="layui-form-label">头像</label>&ndash;&gt;-->
<!--&lt;!&ndash;                <div class="layui-inline layui-upload-list">&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                    <img class="layui-upload-img" id="userImg" th:src="${session.userimg}">&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                    &ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--&lt;!&ndash;                <div class="layui-inline">&ndash;&gt;-->
<!--&lt;!&ndash;                    <button type="button" class="layui-btn" id="choiceImg">选择图片</button>&ndash;&gt;-->
<!--&lt;!&ndash;                    <button type="button" class="layui-btn" id="uploadImg">开始上传</button>&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--            </div>-->
            <div class="layui-form-item">
                <label for="L_userName" class="layui-form-label" >登录名</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_userName" name="gname" class="layui-input" readonly="readonly" th:value="${session.gname}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_oldPwd" class="layui-form-label">
                    <span class="x-red" >*</span>旧密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_oldPwd" name="oldgpassword" lay-verify="required|oldPwd" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_newPwd" class="layui-form-label">
                    <span class="x-red">*</span>新密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_newPwd" name="newgpassword" lay-verify="required|confirmPwd" class="layui-input">
                </div>

                <div class="layui-form-mid layui-word-aux">6到16个字符</div>

            </div>
            <div class="layui-form-item">
                <label for="L_confirmPwd" class="layui-form-label">
                    <span class="x-red">*</span>确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_confirmPwd" name="confirmPwd" lay-verify="required|confirmPwd" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="submit" lay-submit="">保存</button>
            </div>
        </div>
    </div>
</div>
<script>

    layui.use(['form', 'layer', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form,
            upload = layui.upload,
            layer = layui.layer;

        //选完文件后不自动上传
        var uploadInst = upload.render({
            elem: '#choiceImg'
            , url: '/admin/upload/userImg/'
            , auto: false  //true自动上传，不需要提交按钮
            , bindAction: '#uploadImg'  //指定提交按钮
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#userImg').attr('src', result);
                });
            }
            , done: function (res) {
                if (res == true) {
                    return layer.msg('上传成功');
                } else {
                    return layer.msg('上传失败');
                }
            }
            , error: function () {
                var uploadErrorText = $('#uploadErrorText');
                uploadErrorText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs upload-reload">重试</a>');
                uploadErrorText.find('.upload-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //自定义验证规则
        form.verify({
            oldPwd: function (value) {
                var code;
                $.ajax({
                    url: "/admin/checkgpassword",
                    type: "GET",
                    async: false,  //关闭异步，当success返回结果后才执行ajax之后的内容
                    data: {"oldgpassword": value},
                    success: function (s) {
                        code = s;
                    }
                });
                if (code != true) {
                    return '旧密码错误，请重新输入！';
                }
            },
            newgpassword: [/(.+){6,12}$/, '密码必须6到12位'],
            confirmPwd: function () {
                if ($('#L_newPwd').val() != $('#L_confirmPwd').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(submit)', function (data) {
            console.log(data.field);
            $.ajax({
                url: "/admin/updategpassword",
                type: "post",
                data: data.field,
                success: function (s) {
                    if (s == true) {
                        layer.alert("修改成功！", {
                            icon: 6
                        }, function () {
                            parent.layer.closeAll();
                            parent.location.href = "/admin/logout";
                        });
                    } else {
                        layer.msg("修改失败！", function () {
                        });
                    }
                },
                error: function () {
                    layer.msg("接口异常!", function () {
                    });
                }
            });
        });
    });
</script>
</body>

功能实现

AdminController：

 /**
     * 修改密码页面
     * @return
     */
    @GetMapping("/updategpasswordpage")
    public String updategpasswordpage() {
        return "admin/updategpasswordpage";
    }


    /**
     * 修改密码时，判断输入的旧密码是否正确
     * @param oldgpassword
     * @param session
     * @return
     */
    @GetMapping("/checkgpassword")
    @ResponseBody //方法返回值转化为HTTP响应的内容
    public boolean checkgpassword(@RequestParam("oldgpassword")String oldgpassword,HttpSession session) {
        String gpassword = session.getAttribute("gpassword").toString();
        return adminService.checkgpassword(gpassword, oldgpassword);
    }

    /**
     * 修改密码
     * @return
     */
    @PostMapping("/updategpassword")
    @ResponseBody
        public boolean updategpassword(@RequestParam("newgpassword") String newgpassword,HttpSession session) {
            return adminService.updategpassword(
                    session.getAttribute("gname").toString(),
                    session.getAttribute("gpassword").toString(),
                    newgpassword
            );
    }

AdminService

/**
     * 修改密码时，判断输入的旧密码是否正确
     */
    boolean checkgpassword(String gpassword, String oldgpassword);

    /**
     * 修改密码
     */
    boolean updategpassword(String ganme, String gpassword, String newgpassword);

AdminServicelpml

 /**
     * 修改密码时，判断输入的旧密码是否正确
     */
    @Override
    public boolean checkgpassword(String gpassword, String oldgpassword) {
        if(gpassword.equals(oldgpassword))
            return true;
        else return false;
    }

    /**
     * 修改密码
     */
    @Override
    public boolean updategpassword(String ganme, String gpassword, String newgpassword) {
        Admin admin=new Admin();
        admin.setGname(ganme);
        admin.setGpassword(newgpassword);
        return adminMapper.updateadmingpassword(admin);
    }

AdminMapper

/**
     * 修改密码
     */
    boolean updateadmingpassword(Admin admin);

AdminMapper.xml

    <update id="updateadmingpassword">
      update admin
      set gpassword = #{gpassword,jdbcType=VARCHAR}
    where gname=#{gname,jdbcType=VARCHAR}
    </update>