正文
-
创建一个Spring Boot项目,勾选Web、Thymeleaf即可
-
pom文件中导入图片验证码的依赖
<dependency> <groupId>com.github.whvcse</groupId> <artifactId>easy-captcha</artifactId> <version>1.6.2</version> </dependency>
-
配置application.properties属性文件
# 都很简单 不再解释了 spring.thymeleaf.cache=false spring.mvc.static-path-pattern= /static/**
-
导入静态文件
-
导入layui,直接将整个文件夹放在static下面即可
-
导入jquery、页面样式文件css等等
-
效果图如下:
-
-
编写页面跳转和验证码生成类(为了简化就放在一个类里面了)
package byb; ...... @Controller public class PageController { @RequestMapping("/") public String login() { return "login"; } @GetMapping("/user/captcha") @ResponseBody public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception { // 设置请求头为输出图片类型 response.setHeader("Pragma", "No-cache"); response.setContentType("image/gif"); response.setDateHeader("Expires", 0); response.setHeader("Cache-Control", "no-cache"); // 三个参数分别为宽、高、位数 SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 4); specCaptcha.setFont(Captcha.FONT_1); // 设置类型,纯数字、纯字母、字母数字混合 specCaptcha.setCharType(Captcha.TYPE_ONLY_NUMBER); // 验证码存入session request.getSession().setAttribute("captcha", specCaptcha.text().toLowerCase()); // 输出图片流 specCaptcha.out(response.getOutputStream()); } }
-
在templates下创建login页面,再完善亿点点细节…
注意: 这里我只是获取到用户输入的数据,如果对接后台的话,需要自己添加Ajax(提交到后台判断即可)
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>登陆/注册</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" th:href="@{/static/css/style.css}"> <link rel="stylesheet" th:href="@{/static/css/login.css}"> <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"> <link rel="icon" th:href="@{/static/favicon.ico}" type="image/x-icon"/> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="layui-container"> <!--登录页面--> <div class="admin-login-background layui-anim layui-anim-upbit" id="login-form" style="display: block"> <div class="layui-form login-form"> <form class="layui-form" action=""> <div class="layui-form-item logo-title"> <h1>后台系统登录页