一、操作环境：
Visual Studio 2022
二、前端页面：
HTML、layui、JavaScript
三、代码详解：
3.1：最外层框架：
<!DOCTYPE html>
<html>
</html>
代表声明文件类型为html
3.2: 内部嵌套：
<head>
</head>
头部标签，那自然
<body>
</body>
是身体文件
一般的JavaScript放在<head></head>和放在<body></body>之间从执行结果来看是没有区别的，但是有如下的经验规则：
1.当JavaScript要在页面加载过程中动态建立一些Web页面的内容时，应将JavaScript放在body中。
2.定义为函数并用于页面事件的JavaScript应当放在head标记中，因为它会在body之前加载。
<style>
</style>
样式类型定义
四、代码整体：
@using Cn.Org.YYT.Web.Global;
@using Cn.Org.ZYGLXT.YYT.Mvc;
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>XXXX系统登录</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<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="mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="~/lib/layui-v2.9.16/css/layui.css" media="all">
<script src="~/lib/layui-v2.9.16/layui.js" charset="utf-8"></script>
@{
<script type="text/javascript" src=@Href("~/js/BigInt.js")></script>
<script type="text/javascript" src=@Href("~/js/RSA.js")></script>
<script type="text/javascript" src=@Href("~/js/Barrett.js")></script>
}
<style>
/* 页面的整体样式定义 */
html {
height: 100%;
/* 设置HTML元素的高度为100% */
}
body {
/*引入图片*/
background-image: url( @Href("~/css/Images/******.jpg") );
/* 设置页面背景图片***替换为自己的文件路径 */
position: static;
/* 设置body的定位方式为静态 */
background-repeat: no-repeat;
/* 设置背景图片不重复 */
background-size: cover;
/* 设置背景图片覆盖整个页面 */
}
@@media screen and (max-width:428px) {
.login-main {
width: 360px !important;
}
.login-main .login-top {
width: 360px !important;
}
.login-main .login-bottom {
width: 360px !important;
}
}
/* 主体部分的样式定义 */
.main-body {
top: 50%;
/* 设置元素顶部距离父元素顶部的距离为50% */
left: 50%;
/* 设置元素左侧距离父元素左侧的距离为50% */
position: absolute;
/* 设置元素的定位方式为绝对定位 */
-webkit-transform: translate(-50%, -50%);
/* 使用WebKit内核的平移变换，将元素居中 */
-moz-transform: translate(-50%, -50%);
/* 使用Mozilla内核的平移变换，将元素居中 */
-ms-transform: translate(-50%, -50%);
/* 使用Microsoft内核的平移变换，将元素居中 */
-o-transform: translate(-50%, -50%);
/* 使用Opera内核的平移变换，将元素居中 */
transform: translate(-50%, -50%);
/* 使用标准的平移变换，将元素居中 */
overflow: hidden;
/* 设置元素内容溢出时隐藏 */
}
/* 登录界面的主要样式 */
.login-main {
width: 400px;
/* 设置登录界面的宽度为400像素 */
position: relative;
/* 设置元素的定位方式为相对定位 */
float: left;
/* 设置元素向左浮动 */
}
/* 登录框顶部样式 */
.login-main .login-top {
height: 117px;
/* 设置登录框顶部的高度为117像素 */
background-color: #148be4;
/* 设置登录框顶部的背景颜色为蓝色 */
border-radius: 12px 12px 0 0;
/* 设置登录框顶部的圆角半径为12像素，仅顶部有圆角 */
font-family: SourceHanSansCN-Regular;
/* 设置字体为思源黑体常规体 */
font-size: 30px;
/* 设置字体大小为30像素 */
font-weight: 400;
/* 设置字体粗细为400（常规） */
font-stretch: normal;
/* 设置字体拉伸为正常 */
letter-spacing: 0;
/* 设置字母间距为0 */
color: #fff;
/* 设置字体颜色为白色 */
line-height: 117px;
/* 设置行高为117像素，使文字垂直居中 */
text-align: center;
/* 设置文字水平居中 */
overflow: hidden;
/* 设置内容溢出时隐藏 */
-webkit-transform: rotate(0);
/* 使用WebKit内核的旋转变换，旋转角度为0 */
-moz-transform: rotate(0);
/* 使用Mozilla内核的旋转变换，旋转角度为0 */
-ms-transform: rotate(0);
/* 使用Microsoft内核的旋转变换，旋转角度为0 */
-o-transform: rotate(0);
/* 使用Opera内核的旋转变换，旋转角度为0 */
transform: rotate(0);
/* 使用标准的旋转变换，旋转角度为0 */
}
/* 登录框顶部背景装饰1 */
.login-main .login-top .bg1 {
display: inline-block;
/* 设置元素为行内块元素 */
width: 74px;
/* 设置装饰元素的宽度为74像素 */
height: 74px;
/* 设置装饰元素的高度为74像素 */
background: #fff;
/* 设置装饰元素的背景颜色为白色 */
opacity: .1;
/* 设置装饰元素的透明度为10% */
border-radius: 0 74px 0 0;
/* 设置装饰元素的圆角半径为74像素，仅右上角有圆角 */
position: absolute;
/* 设置元素的定位方式为绝对定位 */
left: 0;
/* 设置元素左侧距离父元素左侧的距离为0 */
top: 43px;
/* 设置元素顶部距离父元素顶部的距离为43像素 */
}
/* 登录框顶部背景装饰2 */
.login-main .login-top .bg2 {
display: inline-block;
/* 设置元素为行内块元素 */
width: 94px;
/* 设置装饰元素的宽度为94像素 */
height: 94px;
/* 设置装饰元素的高度为94像素 */
background: #fff;
/* 设置装饰元素的背景颜色为白色 */
opacity: .1;
/* 设置装饰元素的透明度为10% */
border-radius: 50%;
/* 设置装饰元素的圆角半径为50%，使其成为圆形 */
position: absolute;
/* 设置元素的定位方式为绝对定位 */
right: -16px;
/* 设置元素右侧距离父元素右侧的距离为-16像素 */
top: -16px;
/* 设置元素顶部距离父元素顶部的距离为-16像素 */
}
/* 登录框底部样式 */
.login-main .login-bottom {
width: 400px;
/* 设置登录框底部的宽度为400像素 */
background: #fff;
/* 设置登录框底部的背景颜色为白色 */
border-radius: 0 0 12px 12px;
/* 设置登录框底部的圆角半径为12像素，仅底部有圆角 */
padding-bottom: 53px;
/* 设置登录框底部的底部内边距为53像素 */
}
/* 页脚样式 */
.footer {
left: 0;
/* 设置页脚左侧距离父元素左侧的距离为0 */
bottom: 0;
/* 设置页脚底部距离父元素底部的距离为0 */
color: #fff;
/* 设置页脚文字颜色为白色 */
width: 100%;
/* 设置页脚宽度为100% */
position: absolute;
/* 设置页脚的定位方式为绝对定位 */
text-align: center;
/* 设置页脚文字水平居中 */
line-height: 30px;
/* 设置页脚行高为30像素 */
padding-bottom: 10px;
/* 设置页脚底部内边距为10像素 */
text-shadow: #000 0.1em 0.1em 0.1em;
/* 为页脚文字添加黑色阴影，阴影偏移量为0.1em，模糊半径为0.1em */
font-size: 14px;
/* 设置页脚文字大小为14像素 */
}
.validateImg {
position: absolute; /* 设置元素的定位方式为绝对定位 */
left: 1px; /* 设置元素距离其包含块左侧边缘的距离为 1 像素 */
cursor: pointer; /* 设置鼠标悬停在元素上时的光标样式为手形（表示可点击） */
height: 36px; /* 设置元素的高度为 36 像素 */
border: 1px solid #e6e6e6; /* 设置元素的边框为 1 像素宽的浅灰色实线 */
border-radius: 4px; /* 设置边框圆角半径为 4 像素 */
border-color: #ccc; /* 鼠标悬停时边框颜色变为深灰色*/
}
</style>
</head>
<body>
<!-- 页面主结构 -->
<div id="holder" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;">
<div class="main-body">
<!-- 登录主组件 -->
<div class="login-main">
<div class="login-top">
<span>系统登录</span>
<span class="bg1"></span>
<span class="bg2"></span>
</div>
<div class="login-bottom">
<!-- 登录表单 -->
<form class="layui-form" lay-filter="formLogin" autocomplete="off"
style="padding-left: 53px; padding-right: 53px">
<!-- 用户名输入框 -->
<div class="layui-form-item" style="padding-top:60px;">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" value="@ViewBag.UserName" placeholder="账号" lay-reqtext="请输入登录账号"
autocomplete="off" AutoCompleteType="Disable" class="layui-input" maxlength="10">
</div>
</div>
<!-- 密码输入框 -->
<div class="layui-form-item" style="padding-top:20px;">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="@ViewBag.UserPwd" placeholder="密码" lay-reqtext="请输入密码"
autocomplete="off" class="layui-input" maxlength="20" lay-affix="eye">
</div>
</div>
<!-- 验证码输入框及其展示 -->
<div class="layui-form-item" style="padding-top:20px;">
<div class="layui-row">
<div class="layui-col-xs7">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="captcha" value="" placeholder="验证码" autocomplete="off"
class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img name="captchaImg" class="validateImg" src="~/Login/GetValidCode" alt="验证码图片">
</div>
</div>
</div>
</div>
<!-- 记住密码与记住账号 -->
<div class="layui-form-item" style="padding-top:20px;">
<div class="layui-col-xs6">
@HtmlExtend.GetCheckbox("rememberUser", ViewBag.rememberUser, "记住账号", "Y")
</div>
<div class="layui-col-xs6">
@HtmlExtend.GetCheckbox("rememberPassword", ViewBag.rememberPassword, "记住密码", "Y")
</div>
</div>
<!-- 登录按钮 -->
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid layui-bg-green layui-btn-radius" lay-submit lay-filter="demo-login">
登录
</button>
</div>
</form>
</div>
</div>
</div>
<!-- 页脚信息 -->
<div class="footer">
精医 尚德 求实 自强
</div>
</div>
<script>
layui.use(function () {
var $ = layui.$
, form = layui.form
, layer = layui.layer;
//页面加载完自动获取焦点
if (!$("input[name='username']").val)
$("input[name='username']").focus();
else if (!$("input[name='password']").val)
$("input[name='password']").focus();
else
$("input[name='captcha']").focus();
//点击获取验证码
$('.validateImg').on('click', function () {
$.ajax({
url: '@Url.Action("RefreshSecretKey", "Login")',
data: { time: (new Date()).getTime() },
success: function (data) {
PublicKeyExponent = data.publicKeyExponent;
PublicKeyModulus = data.publicKeyModulus;
$("img[name='captchaImg']").attr('src', "/Login/GetValidCode?time=" + (new Date()).getTime());
}
});
});
var PublicKeyExponent = '@ViewBag.PublicKeyExponent';
var PublicKeyModulus = '@ViewBag.PublicKeyModulus';
// 登录事件
form.on('submit(demo-login)', function (data) {
var data = form.val('formLogin'); // 获取表单字段值
if (data.username == '') {
layer.msg('账号不能为空！', { icon: 2, time: 1000 });//提示图标。 信息框和加载层的私有参数。若为信息框，支持传入 0-6 的可选值。默认为 -1，即不显示图标。若为加载层，支持传入 0-2 的可选值
return false;
}
if (data.password == '') {
layer.msg('密码不能为空！', { icon: 2, time: 1000 });
return false;
}
if (data.captcha == '') {
layer.msg('验证码不能为空！', { icon: 2, time: 1000 });
return false;
}
//公钥加密
setMaxDigits(1024);
key = new RSAKeyPair(PublicKeyExponent, "", PublicKeyModulus);
var encrypedUser = encryptedString(key, data.username);
var encrypedPassword = encryptedString(key, data.password);
var encrypedVerifyCode = encryptedString(key, data.captcha);
var chkUser = data.rememberUser == "Y";
var chkPassword = data.rememberPassword == "Y";
$.ajax(
{
url: '../Login/CheckPwd',
type: "Post",
datatype: "json",
data: { puserName: encrypedUser, ppassword: encrypedPassword, pverifyCode: encrypedVerifyCode, rememberUser: chkUser, rememberPassword: chkPassword },
beforeSend: function () {
},
success: function (result) {
if (result.success == false) {
if (result.status == -1) {
$("img[name='captchaImg']").attr('src', "/Login/GetValidCode?time=" + (new Date()).getTime());
}
layer.msg(result.message, function () {
if (result.status == -1) {
$("input[name='captcha']").attr('text', '');
$("input[name='captcha']").focus();
}
});
return false;
}
// if (result.status == -1) {
// $("input[name='password']").attr('type', 'text');
// window.location.href = "../Main/ChangePassword";
// $("input[name='password']").attr('type', 'password');
// return false;
// }
//防止浏览器默认弹出记住密码框
$("input[name='password']").attr('type', 'text');
window.location.href = "../Theme/Index";
$("input[name='password']").attr('type', 'password');
return false;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg('系统异常：' + XMLHttpRequest.responseText);
}
});
// layer.alert(JSON.stringify(data), {
// title: '当前填写的字段值'
// });
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
});
</script>
<!--画线-->
<script src="~/js/Line.js"></script>
</body>
</html>
扫一扫
3878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
