基于SpringBoot+Mybatis+JSP的班级管理项目（四）登录功能实现

最新推荐文章于 2024-05-07 13:43:09 发布

抓蛙宫城石

最新推荐文章于 2024-05-07 13:43:09 发布

阅读量122

点赞数

文章标签： java mybatis spring boot

本文链接：https://blog.csdn.net/m0_64393446/article/details/131131738

版权

一、模块设计

1.添加依赖

用于使用StringUtils方法

 <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-lang3</artifactId>
        <version>3.9</version>
    </dependency>

2.UserController

//用户登录
    @RequestMapping("login")
    @ResponseBody
    public Result login(User user,String code,HttpSession session){
        Result result = new Result();
        String imageCode = (String) session.getAttribute("code");
        //比较验证码
        try{
            if (StringUtils.equalsIgnoreCase(imageCode,code)){
                User userDb = userService.login(user);
                session.setAttribute("user",userDb);
                return result.setMsg("登录成功").setStatus(true);
            }
            throw new RuntimeException("验证码输入错误");
        }catch (Exception e){
            e.printStackTrace();
            result.setStatus(false).setMsg("登录失败"+e.getMessage());
        }
        return result;
    }

3.UserService

User login(User user);

4.UserServiceImpler

@Override
    @Transactional(propagation = Propagation.SUPPORTS)
    public User login(User user) {
        User userDb = userMapper.findByName(user.getName());
        if (userDb !=null){
            if (StringUtils.equals(userDb.getPassword(),user.getPassword())){
                return userDb;
            }
            throw new RuntimeException("密码输入错误");
        }
        throw  new RuntimeException("用户名输入错误");
    }

5.login.jsp

<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div class="container-fluid">

    <%--用户注册--%>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <h1 class="text-center">用户登录</h1>
        </div>
    </div>

    <%--完成表单--%>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <form id="inputForm">
                <div class="form-group">
                    <label for="name">用户名：</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入用户名...">
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码...">
                </div>
                <div class="form-group">
                    <label for="code">验证码：</label>
                    <div>
                        <input type="text" name="code" id="code" style="height: 48px; width: 80%;float: left;"
                               placeholder="请输入验证码" class="form-control">
                        <img src="${pageContext.request.contextPath}/user/getImage" id="image"
                             style="height: 48px; float: right;" alt="">
                    </div>
                </div>
                <div class="clearfix"></div>
                <button type="button" id="logBtn" class="btn btn-danger" style="margin-top: 10px; width: 47%;margin-left: 10px">登录</button>
                <a class="btn btn-info" href="${pageContext.request.contextPath}/back/register.jsp" style="width: 47%; margin-left: 30px">注册</a>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<script>
    $(function () {

        //绑定登录按钮的单击事件
        $("#logBtn").click(function () {
            $.post("${pageContext.request.contextPath}/user/login",$("#inputForm").serialize(),function (res) {
              if (res.status){
                  alert(res.msg+",点击确定进入主页");
                  location.href='${pageContext.request.contextPath}/back/index.jsp';
              }  else {
                  alert(res.msg);
              }
            })
        });

        //更换验证码
        $("#image").click(function () {
            $(this).attr("src", "${pageContext.request.contextPath}/user/getImage?id=" + Math.random());
        })
    })
</script>

6. register.jsp

<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div class="container-fluid">

    <%--用户注册--%>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <h1 class="text-center">用户注册</h1>
        </div>
    </div>

    <%--完成表单--%>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <form id="regForm">
                <div class="form-group">
                    <label for="name">用户名：</label>
                    <input type="name" class="form-control" id="name" name="name" placeholder="请输入用户名...">
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码...">
                </div>
                <div class="form-group">
                    <label for="role">角色选择：</label>
                    <select name="role" id="role" class="form-control">
                        <option value="admin">管理员</option>
                        <option value="student">学生</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="code">验证码：</label>
                    <div>
                        <input type="text" name="code" id="code" style="height: 48px; width: 80%;float: left;"
                               placeholder="请输入验证码" class="form-control">
                        <img src="${pageContext.request.contextPath}/user/getImage" id="image"
                             style="height: 48px; float: right;" alt="">
                    </div>
                </div>
                <div class="clearfix"></div>
                <button type="button" id="regBtn" class="btn btn-danger"
                        style="margin-top: 10px; width: 47%;margin-left: 10px">立即注册
                </button>
                <a class="btn btn-info" href="${pageContext.request.contextPath}/back/login.jsp" style="width: 47%; margin-left: 30px">返回登陆</a>
            </form>
        </div>
    </div>
</div>
</body>
</html>

<script>
    $(function () {


        //注册
        $("#regBtn").click(function () {
            $.post("${pageContext.request.contextPath}/user/register", $("#regForm").serialize(), function (res) {
                console.log(res);
                if (res.status) {
                    alert(res.msg + "点击确定跳转到登录页面");
                    location.href = "${pageContext.request.contextPath}/back/login.jsp";
                } else {
                    alert(res.msg);
                }
            });
        });


        //更换验证码
        $("#image").click(function () {
            $(this).attr("src", "${pageContext.request.contextPath}/user/getImage?id=" + Math.random());
        })
    })
</script>