页面的登录操作

开发工具与关键技术：Visual Studio 2015
作者：杨镇虹
撰写时间：2019.06.01

一、页面的登录操作
在这个登录里面要用到的一个js文件引用这个文件layui

图1
首先是写一个方法，在这个方法里面写它所有要实现的操作功能
$(function () {
Var获取到它layer
var layer;
//加载初始化这个文件里面的layui模块 args它是一个函数，用来接收这个参数’layer’模块名称
layui.use([ ‘layer’], function (args) {
//让这两个等于这个值layer
layer = layui.layer;
});
Html布局点击到这个登录的按钮

图2
获取到上面html布局这个登录的id(btnSubmit)给它写点击click事件操作方法
$("#btnSubmit").click(function () {
//点击登录的时候，获取到这个登录表单fmLogin里面填写进去的值所有要拿到的值，名称name等于这个UserNuber值
var UserNuber = $(’#fmLogin [name=“UserNuber”]’).val();
获取到登录表单fmLogin的密码值password
var password = $(’#fmLogin [name=“password”]’).val();
获取验证码validCode的值
var validCode = $(’#fmLogin [name=“validCode”]’).val();
获取到用户类型UserTypeClass
var UserTypeClass = $(’#fmLogin [name=“UserTypeClass”]’).val();
获取到这个复选框的值rememberMe
var rememberMe = $(’#fmLogin [name=“rememberMe”]:checked’).val();
//判断上面获取到的用户、密码、验证码的值是否填写数据
if (strValIsNotNull(UserNuber) && strValIsNotNull(password) && strValIsNotNull(validCode)) { //打开加载层
var layerIndex = layer.load();
//post请求控制器的路径
$.post("/Main/UserLogin",
{//获取参数值
UserNuber: UserNuber,
password: password,
validCode: validCode,
UserTypeClass: UserTypeClass,
rememberMe: rememberMe,
}, function (msg) {// msg这个函数用来接收控制器的登录状态
//关闭上面打开的加载层
layer.close(layerIndex);
//做一个判断，如果判断都没有错的话，就登录成功跳转到主页面 success这个代表登录成功

if (msg == “success”) {
//alert(“登录成功”);
//登录成功跳转到主页面
window.location.replace("/Main/Main");
} else {//如果登录不成功出现错误的话，就否则再进行下面的判断
如果在登录时选择的用户类型不选对，就会弹出一个下面这个提示框来提醒用户

if (msg == “userTypeErro”) {//这个userTypeErro代表用户类型错误
layer.alert(‘请选择正确的用户类型’);
}如果上面判断用户类型填写正确，就否则进行下一个判断，判断填写密码是否填写正确，如果填写错误就弹出下面的这个提示框来提醒用户
else if (msg == “passwordErro”) {//这个passwordErro代表密码错误
layer.alert(‘请输入正确的账号或密码’);
}如果上面判断正确就否则，进行下一个判断，判断验证码是否填写正确，如果填写错误就弹出下面的这个提示框来提醒用户

else if (msg == “validCodeErro”) {//这个validCodeErro代表验证码错误
layer.alert(‘请输入正确的验证码’);
}判断用户是否存在
else if (msg == “userNoExsit”) {//这个userNoExsit代表此用户不存在
layer.alert(‘用户不存在’);
}如果上面有其中一个判断失败，就弹出下面这个提示来提醒用户
else {
layer.alert(‘登录失败’);
}
//登录成功就清空密码和验证码 让密码和验证码等于空
$("#password").val("");
$("#validCode").val("");
//点击验证码刷新
$("#validCodeImg").click();
}
});
}
});
$("#validCodeImg").click(function () {
console.log(11);//控制台输出
//验证码控制器的路径
$(this).prop(“src”, “/Main/CreateValidCodeImage?t=”+new Date().getTime());
});
});