在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(); } }
前端调用
<img src="/login/getCode" id="codeImg" onclick="RefreshValidateCode(this)" style="height: 100%;width: 100%;" />
js:
function RefreshValidateCode(obj) {
obj.src = "/login/getCode?t=" + Math.floor(Math.random() * 1000);
}