Layui实现登录注册共用页面

最新推荐文章于 2024-07-19 15:03:53 发布

海边下雨了

最新推荐文章于 2024-07-19 15:03:53 发布

阅读量5.8k

点赞数 10

文章标签： html layui

本文链接：https://blog.csdn.net/LoveYMG/article/details/112644313

版权

本文介绍了如何在SpringBoot项目中集成Thymeleaf模板引擎，添加图片验证码功能，并创建登录和注册页面。通过引入easy-captcha库生成验证码，利用layui和jQuery进行前端交互，实现了点击验证码刷新功能。同时，提供了登录和注册页面的HTML代码，以及对应的JavaScript验证逻辑。

摘要由CSDN通过智能技术生成

正文

创建一个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/**

导入静态文件
1. 导入layui，直接将整个文件夹放在static下面即可
2. 导入jquery、页面样式文件css等等
3. 效果图如下：

编写页面跳转和验证码生成类（为了简化就放在一个类里面了）

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>后台系统登录页