目录
一、效果演示
1.1、登录演示
1.2、注册演示
1.3、项目结构
二、代码实现
2.1、前端代码
简介:这里我是根据之前做的一个登录界面稍微修改了一下实现功能的,其中js没有修改,这里就不放在这里占内存了。有需要的可以点击该链接复制js来使用: js下载的地址
2.2、源码地址
源码地址:https://gitee.com/jingtian99/spring-boot_-login
登录注册界面
<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录注册界面</title>
<link rel="stylesheet" href="../static/style.css">
</head>
<body>
<!-- 整体布局 -->
<div class="container right-panel-active">
<!-- 注册框 -->
<div class="container_from container_signup">
<form class="from" method="post" id="from1" th:action="@{/register}">
<h2 class="form_title">注册账号</h2>
<span th:text="${tip}"></span>
<input type="email" name="Email" placeholder="请输入邮箱" class="input">
<input type="text" name="username" placeholder="请输入账号" class="input">
<input type="password" name="password" placeholder="请输入密码" class="input">
<input type="password" name="password1" placeholder="再次确认密码" class="input">
<input class="btn" type="submit" value="点击注册"/>
</form>
</div>
<!-- 登录框 -->
<div class="container_from container_signin">
<form class="from" id="from2" action="success.html" method="post" th:action="@{/login2}">
<h2 class="form_title">欢迎登录</h2>
<span th:text="${msg}"></span>
<input type="text" name="username" placeholder="请输入您的账号" class="input">
<input type="password" name="password" placeholder="请输入您的密码" class="input">
<div>
<span>记住密码</span><input type="checkbox" name="rup" id="rup"/>
<span>自动登录