Imagen de efecto
Prefacio
Como estudiante que estudia la dirección del desarrollo del lado del servidor, aunque he estudiado el front-end, no es en profundidad, y personalmente siento que escribir el front-end es más engorroso, junto con mi propia estética, así que realmente no puedo escribir una interfaz satisfactoria. Para la mayoría de los programadores de back-end, deberían usar plantillas de recursos estáticos listas para usar para modificarlas, en lugar de escribirlas desde cero, ¿verdad? Incluso si ha entendido algunos marcos de front-end, es más difícil escribir una interfaz cómoda.
El formulario de inicio de sesión anterior parece bastante cómodo. Es una pequeña tarea para mi curso JavaWeb. No utilicé la página estática proporcionada por el profesor porque es demasiado fea. . Jajaja.
Desde la perspectiva del front-end, permítanme analizar cómo implementar dicho formulario de inicio de sesión. Por supuesto, también explicaré brevemente la interfaz de back-end requerida.
Consulte el código para obtener más detalles. Se escribe un breve comentario en el código y se marcan los detalles a los que se debe prestar atención.
análisis
1. Cuadros de entrada (incluidas las indicaciones verdes de ok, las indicaciones de error rojas), los botones, etc. Por supuesto, no sabemos cómo escribir nosotros mismos para estos componentes y es difícil hacer que se vean tan hermosos. Elegí bootstrap, un marco de trabajo de front-end que es relativamente fácil de comenzar. Para ser honesto, no lo he estudiado específicamente. Simplemente vaya al sitio web oficial para leer el documento, luego copie y pegue, y luego ajuste el estilo. Al escribir, también debe prestar atención a las funciones de respuesta de bootstrap para que la interfaz se adapte a los dispositivos móviles.
2. Como puede verse en el gif anterior, la verificación de este formulario de inicio de sesión es muy estricta y meticulosa. Analicemos la lógica de la validación de este formulario ¿Qué tan detallado es?
Reglas de validación
(1) El buzón no puede estar vacío y el buzón debe ajustarse a expresiones regulares
(2) Solicite de forma asíncrona al backend que verifique el buzón. Si el buzón existe, el backend devolverá la URL del avatar de la cuenta y el front-end actualizará el avatar redondo en la parte superior
(3) La contraseña no puede estar vacía
(4) Código de verificación asincrónico
Activador de verificación
Cuando un cuadro de entrada pierde el foco, verifique que el elemento del formulario cumpla con las reglas correspondientes (tal vez más de una, como el buzón). Mientras alguna regla falle, el formulario no se puede enviar haciendo clic en el botón "Iniciar sesión".
notificación de mensajes
Hay dos tipos de mensajes de información: mensaje verde OK y mensaje rojo de error. Cada uno de los dos mensajes incluye 3 detalles: mensaje de texto, mensaje de icono y cambio de color del borde del cuadro de entrada. Por supuesto, todos estos estilos provienen de bootstrap, pero necesitamos controlar el cambio de estilos en función de los activadores de verificación y la verificación.
Incluso si usa jquery para escribir, una verificación lógica tan complicada y tediosa será muy difícil de escribir porque hay demasiados detalles. ! ! En este momento, usaremos un complemento basado en jquery: jquery.validation.min.js. Este complemento se puede descargar directamente desde el sitio web oficial. Encontré una versión modificada de otros en Internet. Algunas reglas de validación de uso común se han agregado al jquery.validation original. Por supuesto, aquellos que hacen esto deben ser ingenieros frontales relativamente fuertes. Como estudiante de back-end, actualmente no tengo esta habilidad.
Interfaz de backend
1. Verifique si el buzón existe y devuelva el avatar del usuario: / cuenta / foto
2. Generar código de verificación: / cuenta / captcha / generate
3. Verifique que el código de verificación sea correcto: / account / captcha / validate
4. Iniciar sesión: / cuenta / iniciar sesión
Las interfaces son relativamente simples y he omitido los parámetros. El SpringBoot aprendido debería ser fácil de escribir. Para las necesidades de aprendizaje, utilicé Maven para integrar SSM a mano. No es tan cómodo como SpringBoot.
datos
Sitio web oficial de Boostrap: https://v3.bootcss.com/css/
Versión mejorada de jquery.validation: https://download.csdn.net/download/qq_43290318/13109073
Uso detallado de jquery.validation: https://blog.csdn.net/wangxiaoan1234/article/details/77466720
Código
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 不设置的话，手机端不会进行响应式布局 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录</title>
<!-- 引入Bootstrap核心样式文件（必须） -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<!-- 你自己的样式或其他文件 -->
<link rel="stylesheet" href="css/login.css">
<!--站点图标-->
<!-- ... -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-4 panel panel-default login-box">
<div class="panel-body">
<img class="img-circle photo" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605206616385&di=5a3e31c19b07f422adf49c37505f5126&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F07%2F20200707113705_VFJvw.thumb.400_0.jpeg"
alt="头像">
<form id="loginForm" onSubmit="return false;">
<!--
关于bootstrap输入框提示
父容器div的has-feedback不能少，has-success和has-error选其一
-->
<div class="form-group has-feedback">
<label for="email">邮箱</label>
<!-- 错误提示信息 -->
<span class="error-msg"></span>
<input type="email" class="form-control" id="email" name="email" placeholder="邮箱">
<!-- 图标，打勾或者打叉。glyphicon-ok和glyphicon-remove -->
<span class="glyphicon form-control-feedback"></span>
</div>
<div class="form-group clear-float has-feedback">
<label for="password">密码</label>
<span class="error-msg"></span>
<input type="password" class="form-control" id="password" name="password" placeholder="密码">
<span class="glyphicon form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<label for="captcha">验证码</label>
<span class="glyphicon glyphicon-refresh refresh" onClick="refreshCaptcha()"></span>
<span class="error-msg"></span>
<input type="text" maxlength="4" class="form-control captcha" id="captcha" name="captcha"
placeholder="验证码" >
<span class="glyphicon form-control-feedback captcha_icon"></span>
</div>
<!-- 注意表单中必须有type="submit"的按钮，否则表单验证通过后，无法进入回调函数submitHandler() -->
<button type="submit" class="btn btn-success login-btn">登 录</button>
<button type="button" class="btn btn-link to-register">还没有账号？去注册 >></button>
</form>
</div>
</div>
</div>
</div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery/jquery.validation.min.js"></script>
<!-- 引入所有的Bootstrap的JS插件 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/login.js"></script>
</body>
</html>
login.css
Los siguientes CSS son relativamente básicos, principalmente cuando estudio el curso electivo de front-end web, el estudio no es muy profundo, son todas cosas básicas. . Aunque este es el caso, porque no estoy familiarizado, pisé muchos hoyos al ajustar el estilo.
.clear-float {
clear: both;
}
.login-box {
/* border: 1px solid #000; */
padding: 0 16px;
border-radius: 8px;
margin-top: 100px;
box-shadow: 0 0 10px #ddd;
}
.photo {
/* 一定要设置为块状元素，否则margin auto不生效 */
display: block;
width: 100px;
height: 100px;
border: 1px solid #eee;
padding: 4px;
box-shadow: 0 0 10px #ddd;
background-color: #fff;
margin: 0 auto;
}
.login-btn {
width: 100%;
/* 设置line-height比设置height更好 */
line-height: 24px;
/* height: 24px; */
font-size: 17px;
margin: 8px 0;
}
.to-register {
float: right;
padding-right: 0;
}
.error-msg {
/* 不设置block，margin不起作用 */
display: block;
float: right;
color: #a94442;
font-weight: bold;
}
.captcha {
background-image: url(/account/captcha/generate);
background-repeat: no-repeat;
background-position: right;
/* 如果不加!important，就无法生效 */
padding-right: 120px !important;
}
.refresh {
margin-left: 4px;
cursor: pointer;
}
/* 复写.form-control的right属性，因为验证码输入框右端的提示图标遮挡住验证码 */
.captcha_icon {
/* 如果不加!important，就无法生效 */
right: 100px !important;
}login.js (lo más destacado)
// 点击刷新图标，刷新验证码
function refreshCaptcha() {
var url = '/account/captcha/generate?rand=' + Math.random();
$('#captcha').css({
'background-image': 'url(' + url + ')'
});
$('#captcha').val('');
var parentDiv = $('#captcha').parents('div.has-feedback');
var iconSpan = parentDiv.children('span.glyphicon');
var msgSpan = parentDiv.children('span.error-msg');
// 父亲div移除样式
parentDiv.removeClass('has-success has-error');
// 图标设置移除样式
iconSpan.removeClass('glyphicon-ok glyphicon-remove');
msgSpan.html('');
}
$(function() {
// 登录表单验证
$("#loginForm").validate({
// 表单验证成功通过后的回调
submitHandler: function(form) {
//console.log(form);
//form.submit();
// 异步提交表单
// Ajax提交数据
var email = $('#email').val();
var password = $('#password').val();
var captcha = $('#captcha').val();
$.ajax({
url: '/account/login', // 提交到controller的url路径
type: "POST", // 提交方式
data: {
email: email,
password: password,
captcha: captcha
},
dataType: "json", // 服务器端返回的数据类型
success: function (res) {
if (res.code === 2000) {
window.location.href = 'index.jsp';
} else {
alert('密码错误');
location.reload();
}
}
});
},
// 错误提示
errorPlacement: function(error, element) { // 错误信息，input表单项
// 找到父亲div
var parentDiv = element.parents('div.has-feedback');
// 找到显示msg的span
var msgSpan = parentDiv.children('span.error-msg');
// 找到图标的span
var iconSpan = parentDiv.children('span.glyphicon');
// 设置错误信息
msgSpan.html('').append(error);
// 父亲div添加样式has-error
parentDiv.addClass('has-error');
// 图标设置样式glyphicon-remove
iconSpan.addClass('glyphicon-remove');
},
// 成功时，移除
success: function(element) {
// 找到父亲div
var parentDiv = element.parents('div.has-feedback');
// 找到显示msg的span
var msgSpan = parentDiv.children('span.error-msg');
// 找到图标的span
var iconSpan = parentDiv.children('span.glyphicon');
// 设置错误信息
msgSpan.html('');
// 父亲div移除样式has-error，并添加样式has-success
parentDiv.removeClass('has-error');
parentDiv.addClass('has-success');
// 图标设置样式glyphicon-remove，并添加样式glyphicon-ok
iconSpan.removeClass('glyphicon-remove');
iconSpan.addClass('glyphicon-ok');
},
ignore: ".ignore",
// 表单验证规则
rules: {
email: { // input的name属性
required: true,
email: true,
//isMobile: true
remote: {
cache: false,
async: true,
type: 'GET',
url: '/account/photo',
data: { // 请求所需的参数列表
email: function() {
return $('#email').val();
}
},
// 由于remote需要的返回值是布尔值（false表示不通过），而实际返回值是一个封装对象
// 所以需要dataFilter对返回的封装对象进行预处理，并给remote返回所需的布尔值
dataFilter: function(jsonStr, type) {
var res = JSON.parse(jsonStr);
console.log(typeof(res));
console.log(res);
console.log(res.code);
var isOk = (res.code === 2000);
console.log(isOk);
// 如果email存在且data部分不为null（有头像），显示用户的头像
if (isOk && res.data != null) {
$('img.photo').attr('src', res.data);
}
return isOk;
}
}
},
password: {
required: true
},
captcha: {
required: true,
remote: {
cache: false,
async: true,
type: 'GET',
url: '/account/captcha/validate',
data: { // 提交给服务端的数据（键值对）
captcha: function() {
return $('#captcha').val();
}
},
dataFilter: function(jsonStr, type) {
var res = JSON.parse(jsonStr);
var isCorrect = (res.code === 2000);
if (!isCorrect) { // 验证码错误
refreshCaptcha();
}
return isCorrect;
}
}
}
},
messages: { // 与验证规则一一对应的消息提示
email: {
required: '邮箱不能为空',
email: '邮箱格式错误',
remote: '该邮箱尚未注册'
},
password: {
required: "密码不能为空"
},
captcha: {
required: "验证码不能为空",
remote: "验证码错误，已经刷新"
}
},
onkeyup: function(element, event) {
var name = $(element).attr("name");
if (name == "captcha") {
//不可去除，当是验证码输入必须失去焦点才可以验证（错误刷新验证码）
return false;
}
}
});
});