51编码网 - (4)springboot开发教程-登录页面

(4)springboot开发教程-登录页面

发布时间： 2024-06-07，浏览量：1116

springboot开发教程-登录页面

在HomeController中增加login页面地址

@Controller
public class HomeController {
    
    @GetMapping("/login")
    public String login(Model model) {
        model.addAttribute("name", "World");
        return "login/login";
    }
}

创建login页面

内容如下：

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">

<head >
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link rel="stylesheet" href="/static/css/adminlte.min.css">
    <link rel="stylesheet" href="/static/css/all.min.css">
    <link rel="stylesheet" href="/static/css/toastr.min.css">
    <script src="/static/js/jquery.min.js"></script>



</head>
<body>
<div class="hold-transition login-page"  >

    <div class="login-box">
        <div class="login-logo">
            <a href="#"><b>后台管理系统</b></a>
        </div>

        <div class="card">
            <div class="card-body login-card-body">
                <p class="login-box-msg">用户登录</p>
                <form id="form1" >
                    <div class="input-group mb-3">
                        <input type="text" maxlength="20" name="account"  class="form-control" placeholder="账号">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-envelope"></span>
                            </div>
                        </div>
                    </div>
                    <div class="input-group mb-3">
                        <input type="password" name="password" maxlength="20" class="form-control" placeholder="密码">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-lock"></span>
                            </div>
                        </div>
                    </div>
                    <div class="input-group row mb-3">

                        <div class="col">
                            <input type="text"  name="checkcode"  maxlength="6" class="form-control border-right" placeholder="验证码">

                        </div>
                        <div class="col text-right" >
                            <img src="/login/getCode" id="codeImg" onclick="RefreshValidateCode(this)"  style="height: 100%;width: 100%;" />
                        </div>


                    </div>

                    <div class="row mb-3" >
                        <div class="col-12">
                            <button type="button" onclick="login()" class="btn btn-primary btn-block">登录</button>
                        </div>
                    </div>
                </form>

                <div class="row">
                    <div class="col-6">
                        <p class="mb-1">
                            <a href="#">忘记密码</a>
                        </p>
                    </div>
                    <div class="col-6 text-right">
                        <p class="mb-1">
                            <a href="#">注册账号</a>
                        </p>
                    </div>
                </div>


            </div>

        </div>
    </div>
</div>
<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/adminlte.min.js"></script>

<script src="/static/js/toastr.min.js"></script>
<script>

    function RefreshValidateCode(obj) {
        obj.src = "/login/getCode?t=" + Math.floor(Math.random() * 1000);
    }
    function login() {
        let account=$("input[name='account']").val();
        let password=$("input[name='password']").val();
        let checkcode=$("input[name='checkcode']").val();

        if(!account){
            toastr.error('请填写账号信息!','提醒')
            return;
        }
        if(!password){
            toastr.error('请填写密码信息!')
            return;
        }
        if(!checkcode){
            toastr.error('请填写验证码信息!')
            return;
        }
        toastr.success('正在跳转!',"登录成功")
    }
</script>
</body>
</html>

运行后页面

验证码使用了hutools里的验证码

引用

<dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.26</version>
        </dependency>

获取验证码方法

@Controller
@RequestMapping("/login")
public class LoginController {
    
    @ResponseBody
    @GetMapping(value = "/getCode",produces = MediaType.IMAGE_JPEG_VALUE)
    public byte[] getCode(){
        ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(155, 36, 4, 4);
        return  captcha.getImageBytes();

    }


}

前端调用

js：

function RefreshValidateCode(obj) {

obj.src = "/login/getCode?t=" + Math.floor(Math.random() * 1000);

}

(4)springboot开发教程-登录页面

springboot开发教程-登录页面

经典语录

热门文章